Adobe Photoshop 7'0 Design Professional

1
(No Transcript)
2
Unit Lessons
OVERVIEW

• Plan for complex movies and animations
• Create an animated graphic symbol
• Create a movie clip symbol
• Animated buttons with movie clip symbols

3
Building Complex Animations
INTRODUCTION

• To build complex animations, you should plan
• How to develop a clean timeline
• How to optimize file size
• Creating animated graphic symbols and movie clip
  symbols can help meet both goals

4
Creating a Well-built Movie
INTRODUCTION

• A well-built movie consists of many small pieces
  of animation put together
• Split animations on the stage into smaller,
  reusable pieces
• Add ActionScript to elements on and off the stage

5
Plan for Complex Movies and Animations
LESSON 1

• Graphic symbols should include any repeated
  elements on the stage
• Make any repeating or complex animations as
  animated graphic symbols or movie clip symbols
• Assign ActionScript to button symbols and to
  movie clip symbols, but not to graphic symbols

6
Understanding Animated Graphic Symbols
LESSON 1

• Convert an entire multiple-frame, multiple-layer
  animation into a single animated graphic symbol
• Creating a single animated graphic symbol removes
  all of the associated keyframes, layers, and
  tweening of the animation from your timeline

7
Comparing Timelines
LESSON 1
Complex timeline
Animated graphic symbol
8
Understanding Movie Clip Symbols
LESSON 1

• A movie clip symbol is a more robust way to store
  complex animations in the Library panel
• The movie clip symbol retains its own independent
  timeline when you insert an instance of the
  symbol into a movie

9
Exercise
LESSON 1

• Need flh_1.fla
• Work with an animated graphic and a movie clip
  pages H-7 H-9

10
Exercise
LESSON 1

• Graphic vs. movie clips
• New symbol movie clip edit
• Frame 1 1,, Frame 10 10
• One main page drag onto frame 1 test
• Main page, insert frame on frame 5 test no
  change
• Get another instance change to graphic set
  property to loop test
• Control ? Stop clip pays on

11
Using Graphic Symbols for Animations
LESSON 2

• Use an animated graphic symbol for sequential
  animation animation you want to play only one
  time
• To synchronize with other elements on the stage,
  you can also use animated graphic symbols

12
Adding a Movie Clip Symbol to the Stage
LESSON 2

• The movie clip on the stage plays only when you
  export the movie

13
Creating an Animated Graphic Symbol
LESSON 2

• Create an animated symbol, by choosing the
  Graphic option in the Create New Symbol dialog
  box
• When you select the animated graphic symbol, it
  displays with Stop and Play buttons in the
  Library panel

14
The Create New Symbol dialog box
LESSON 2
15
Stop and Play Buttons
LESSON 2
Stop and Play buttons
16
Copying Frames and Layers from the Timeline
LESSON 2

• You can copy frames and layers from the main
  timeline and paste them into a new symbol
• To move multiple layers and frames from within a
  scene to a symbol, select the layers and frames
  that you want to copy

17
Copying Frames and Layers from the Timeline
LESSON 2

• Once the keyframes are selected, click Edit on
  the menu bar and then click Cut Frames
• In the symbol click Edit on the menu bar and then
  click Paste Frames

18
Sample Selection of Multiple Frames and Layers
LESSON 2
19
Exercise
LESSON 2

• Need flh_2.fla
• Create and use an animated graphic pages H-7
  H-9

20
Using Movie Clip Symbols for Animations
LESSON 3

• Use for creating and storing complex animations
• Use for animating continuous or looping actions
• Add sound and associate ActionScript statements
  to the movie clip
• Use movie clips to animate a button

21
Create a Movie Clip Symbol
LESSON 3

• Click Insert on the menu bar, then click New
  Symbol
• Create a movie clip symbol, by choosing the Movie
  Clip option in the Create New Symbol dialog box

22
Nesting Movie Clips
LESSON 3

• A movie clip symbol is often made up of many
  other movie clips, a process called nesting
• Nesting movie clips creates a parent-child
  relationship
• When you insert a movie clip inside another movie
  clip, the inserted clip is considered the child
  and the original clip the parent

23
Diagram of a Nested Movie Clip Animation
LESSON 3
24
The Movie Explorer Panel
LESSON 3
25
View Nesting Structure of the Movie
LESSON 3

• Use The Movie Explorer panel to inspect the
  nesting structure of your entire movie
• Use The Options menu to perform a variety of
  actions in the Movie Explorer

26
Exercise
LESSON 3

• Need flh_3.fla
• Create and use movie clips pages H-16 H-19
• Create a car
• Movie clip of a wheel
• Attach to a car

27
Animate Buttons with Movie Clip Symbols
LESSON 4

• Animate a button by nesting a movie clip symbol
  inside any one of the three visible states of the
  button
• Up
• Over
• Down

28
Understanding Animated Buttons
LESSON 4

• Inside the Up button the movie/button will
  continue to animate as long as the button is
  visible on the stage in the main timeline
• Inside the Over state the animation will only be
  visible when the users mouse is over the button

29
Building an Animated Button Symbol
LESSON 4

• To build an animated button symbol, you need at
  least two symbols in the Library panel
• A movie clip symbol
• A button symbol

30
Using ActionScript
LESSON 4

• Set up movie clips to play, pause, or perform
  other actions based on user input
• Instruct movie clips to jump to specific frames
  on the timeline of a movie clip symbol without
  user input

31
Building an Animated Button Symbol
LESSON 4

• Information bar for a movie clip symbol nested
  inside of a button

Nested movie clip symbol in information bar
Button in Information bar
32
Creating an Interactive Movie
LESSON 4

• Adding interactivity means you are forcing the
  user to become involved in your movie
• Create complex interactions by using ActionScript
  in combination with movie clip symbols

33
Exercise
LESSON 4

• Create a simple animated button
• Create and use an animated button pages H-22
  H-25
• Do skills review exercises

34
Sample of Interactive Game
LESSON 5
Buttons control game variables
Keeps track of the game time
Drag pieces to the correct place in the puzzle
35
Unit H Tasks
SUMMARY

• Plan for complex movies and animations
• Create an animated graphic symbol
• Create a movie clip symbol
• Animate a button
• Create an interactive movie using ActionScript