Debbie offers hands-on, one-on-one Flash training
Contact Debbie for details

Agenda
-Animation Principles and the Flash Timeline
-Frame-by-frame animation
-Shape tweening
-Motion tweening
-Flash graphics, buttons and movie clips
-Transitions: zooms, fades and dissolves
-Animate Multiple Objects Along a Path
-Masking Technique
-Sound effects and sound optimization
-Publish and Flash player settings
-The Color Object
-Bonus DEB tip: The Sound Object
-Create a drop-down menu
-Create a preloader
-Use the loadMovie action
-Flash MX new features

Who Has the Flash Player?
-98% of all Web surfing computers have the Flash player
-53% of all Web surfing computers have the Flash 6 player
-The Flash player is the most popular download due to its small size: only 200KB!

The Flash Interface
-The Stage
-The Work Area
-The Timeline
-Layers
-Launcher
-Zoom Box

What's New in Flash 5?
-Dreamweaver, Flash and Fireworks all share a more common interface
-Flash now uses panels (floating palettes)
-The Launcher
-The Zoom box
-Guides
-Keyboard shortcuts
-ActionScript revamped

Animation Principles
-Easing
-Squash and Stretch
-Gravity and Bounce

Animation Types
-Frame-by-Frame animation (also known as keyframing)
-Shape Tweening
-Motion Tweening

Frame-by-Frame Animation
-Traditional form of animation where a sequence of images are played in order to simulate motion
-Also referred to as "keyframing" because every frame is a keyframe
-Keyframing=creates motion by physically adjusting and controlling the contents of each individual frame

Frame-by-Frame Animation Examples
-The bouncing ball example
-An animated cat tongue

Tweening
-Another form of animation that crates smaller Flash movies
-You set up a starting and ending keyframe; Flash creates the frames in between
-There are two types of tweening: shape tweening and motion tweening

Shape Tweening
-Useful for morphing objects and changing a shape's position, size, color and opacity
-Works on editable shapes only
-Does NOT work with text, symbols, bitmaps or grouped objects (convert these items to an editable shape before applying shape tweening)
-Use the MIXER PANEL to adjust shapes

Shape Tweening Examples
-A morphing logo
-Animated gradient
-Use gradients to give an object a 3-dimensional appearance (Check out the February DEB TIP for the steps to create this)
-The bouncing ball 

Motion Tweening
-Another form of animation that allows you to adjust position, rotation, opacity, color and scaling
-This animation type works with grouped objects, text and an instance of a symbol
-You can motion tween only one instance per layer
-Use the EFFECT PANEL to adjust symbols

Symbol
-A master object that is stored in the Flash Library
-Instance: A copy of a symbol that resides on the Stage

Symbol Types
-Graphic Symbols
-Button Symbols
-Movie Clips

Graphic Symbols
-Great for graphics that are going to be used, but don't require movement
-The Graphic symbol's Timeline is closely linked to the main Timeline
-Graphics symbols will only play while the main Timeline is playing

Motion Tweening Examples
-Transition styles: zooms, fades and dissolves
-Transition style: zooming text (see your workbook for this step-by-step example)
-Transition style: dissolving scenes
-Animate multiple objects along a path
-Masking Technique
-Alpha and Brightness Tween: An interactive Slide Show

Transition Style: Dissolving Scenes
This transition type involves displaying one scene after another with an alpha or brightness tween. Scene = a timeline within a Flash movie (Flash movies can contain multiple timelines)

1. Choose Window…Panels…Scene to access the Scene panel.

2. The example we used already contained 3 Scenes. Select Scene 3, and then click the "Duplicate scene" button on the Scene panel to create another Scene.

3. Double-click "Scene 3-copy" and rename it "Scene 4."

4. Import an image onto Scene 4 and reposition the image as necessary. Delete the text block over the red shape on the Stage and change the "Scene 3" heading to read as "Scene 4."

5. Move the "Scene 3" button instance down and rename the text label "Scene 4."

6. Select the Scene 2 button and text label on the Stage and ALT-drag a copy of that button beneath the Scene 2 button. Change the text label to display "Scene 3." Reposition the buttons so that they appear aligned on the Stage, as shown below.

7. Select the Scene 3 button, then copy and paste to the other 3 Scenes, repositioning the buttons as necessary on the Stage. Change the text label to display "Scene 4" for all of the copied buttons.

Object Action: Go To

Adding the Go To action to an object (a button symbol or a movie clip only) will advance the play head to a specified frame or scene in the movie when that object is manipulated by the user

1. Select Scene 1 on the Scene panel. Select the Scene 2 button on the Stage and then choose Window…Actions. Open the Basic Actions folder and double-click the Go To action.
NOTE: Remember, you can attach object actions to button symbols and movie clips only

1. Choose Scene 2 from the Scene drop-down menu. Add the Go To action to the Scene 3 and Scene 4 buttons, choosing the appropriate Scene from the Scene drop-down menu for each button.

Frame Action: Stop

1. Insert another layer and add a Stop action to frame 1.
NOTE: Scenes automatically play; add a stop action to the timeline to prevent the movie from automatically advancing to the next scene

Create a Movie Clip
- A Movie clip's timeline is independent of the main timeline
-Use a movie clip to create a dissolve that will be used within each scene

1. Select Scene 2 on the Scene panel. Select the top layer, and then insert a new layer. Create a rectangular shape with no stroke and a fill that is the same color as the Stage background. Make the rectangular shape the same width and height of the Stage.

2. Convert the shape to a movie clip. Name the movie clip, "dissolve."

3. Double-click the movie clip on the Stage so that we can access the movie clip's timeline. Convert the shape to a movie clip and insert a keyframe on frame 20.

4. Access the Effect panel and set the alpha to 99% on frame 1. Select frame 20 and set the alpha to 1%.

5. Select frames 2-19 and create a motion tween.

6. Create a new layer, insert a keyframe on frame 20 and add a Stop action.
NOTE: Movie clips loop continuously

7. Go back to Scene 2 and create another layer. Insert a keyframe on frame 2 and add a Stop action to frame 2. Extend the timeline to frame 2 for all of the other layers.
NOTE: Scenes play automatically

8. Temporarily hide the layer that contains the motion-tweened shape on the Stage.

9. Add the Go To action to the Scene 1, Scene 3 and Scene 4 buttons. Show the motion-tweened shape layer.

10. Select Scene 3 from the Scene panel. Insert another layer and drag an instance of the "dissolve" movie clip from the Library onto the Stage.

11. Create another layer, insert a keyframe on frame 2 and add a Stop action to frame 2. Extend the timeline to frame 2 for all other layers.

12. Temporarily hide the layer that contains the motion-tweened shape on the Stage.

13. Add the Go To action to the Scene 1, Scene 2 and Scene 4 buttons. Show the motion-tweened shape layer.

14. Select Scene 4, add another layer and drag an instance of the "dissolve" movie clip onto the Stage.

15. Create another layer, insert a keyframe on frame 2 and add a Stop action to frame 2. Extend the timeline to frame 2 for all other layers.

16. Temporarily hide the layer that contains the motion-tweened shape on the Stage.

17. Add the Go To action to the Scene 1, Scene 2 and Scene 3 buttons. Show the motion-tweened shape layer.

18. Select Scene 1 and preview the animation.

Animate Multiple Objects Along a Path
Use a motion guide (aka guide layer) to create a path, then create a layer with a symbol that will animate along that path. The example we used during the workshop demonstrated how a series of leaves can animate along a single path. NOTE: Remember to place each leaf symbol on it's own layer.

1. Bring an image of a leaf onto the Stage by choosing File...Import 
2. Convert the leaf image to a symbol: Insert...Convert to Symbol
3. Add a guide layer on frame 1 of the Timeline
4. Notice that layer 1 is indented, indicating that the guide layer is attached to layer 1
5. Draw the path that you want an object to follow on a guide layer
6. With a guide layer selected, use the PENCIL tool to draw a path that we want the object to follow (set the pencil to the smooth mode)
7. Now let's set up a motion tween: On frame 10 of layer 1, insert a keyframe
8. To show the path of the guide we drew, select frame 10 of the guide layer and insert a frame (this extends the timeline)
9. With layer 1, frame 1 selected, move the instance of the object to the start of the path we drew (the instance should "snap" to the path)
10. Select frame 10 on layer 1 and move the instance to the end of the path we drew
11. Select all of the frames on layer 1 and set up the motion tween
12. Be sure to choose the ORIENT TO PATH checkbox so that the leaf will twist and turn to orient along the path
13. Add a STOP action to the last frame of the movie, if you don't want the leaf to continuously loop.
14. Create another layer and drag another copy of the leaf symbol onto the Stage
15. With layer 2, frame 1 selected, move the instance of the object to the start of the same path we drew (the instance should "snap" to the path)
Select frame 10 on layer 2 and move the instance to the end of the path
16. Continue to add as many layers and instances as desired and place various copies of the leaf along the path
17. To offset the animation, press and drag the motion tween sequences to different frames on the Timeline
18. Preview the animation by choosing Control...Test  Movie

Masking
A mask is a special layer that defines what is visible on the layer beneath it. Only layers that are beneath the shapes in the mask layer will be visible. Let's use a text mask that masks a bitmap background.

1. Open the Movie/Document Properties dialogue and set the background color for the movie to light blue.

2. Choose File…Import and import a bitmap image onto Layer 1. Rename layer 1 "bitmap background."

3. Add a new layer above the "bitmap background" layer. Choose the Text tool and set the font to Impact, the size to 96 and select the bold setting. Type the word "TRAVEL." Rename layer 2 "text."

4. Use the Transform panel to set the width and height of the text to 200%.

5. Now turn the text into a mask layer: Choose Modify…Layer. Select the Mask radio button from the Type section of the Layer Properties dialogue. Click OK.

6. We've created a mask layer with a defined mask area. Now it's time to create the masked layer. Select the "bitmap background" layer and choose Modify…Layer. Then choose Masked from the Type section of the Layer Properties dialogue. Click OK.

7. Choose Control…Test Movie to preview the results. The bitmap image should be showing through the text.

Animate the Mask

1. Now let's create a text mask that moves over a bitmap background. Select the "bitmap background" layer and select frame 40. Choose Insert…Frame to extend the Timeline to frame 40.

2. Select frame 1 on the "text" layer and move the text block off the Stage to the left.

3. Select frame 40 on the "text" layer and insert a keyframe. Then move the text block off the Stage again, this time moving it to the right.

4. Select frames 2-39 on the "text" layer and create a motion tween.

5. Click on the Lock icon on the "text" layer and the "bitmap background " layer so that you can see the masked image on the Stage.

6. Choose Control…Test Movie to preview the results.

Button Symbols
-A Button symbol's Timeline doesn't actually play--it reacts to cursor movement and actions
-A four-frame Timeline (Up, Over, Down, Hit)
-Place movie clips inside of a button to create an animated button

Animated Navigation Bar
(Check out the November DEB TIP for the steps to create this)

Button Symbol Examples
-Create an animated button
-Create an animated navigation bar
-Create a disjointed rollover
-Create an invisible button

Movie Clips
-A movie clip's timeline is independent of the main timeline
-Useful for nesting/embedding into other symbols
-Also useful for controlling other symbols

Movie Clips
-Nest/embed a movie clip inside of a button 
-Use the color object to control the color of a movie clip (Check out the January DEB TIP for the steps to this lesson)
-Create a drop-down menu 

1. Create a Movie Clip Symbol. Name it "drop-down menu."

2. Create 5 layers inside the "drop-down menu" movie clip:
-Labels
-Actions
-Invisible button
-Sliding menu
-About Us button

Create the About Us Button
This timeline will not play traditionally--various actions will be used to activate the sliding menu. Since actions can only be added to movie clips and button symbols, and we will be adding an action to the "About Us" button later, we will first create a button symbol for the "About Us" button.

1. Choose Insert…New Symbol, name the symbol "About Us button" and choose the Button behavior. Once inside the button symbol's timeline, create a dark red rectangular fill (no stroke) on the UP frame. Insert another layer and type the "About Us" text label on the UP frame as well.

2. Access the Library and double-click the "drop-down menu" movie clip. Once inside the "drop-down menu" movie clip, place the "About Us button" on Frame 1 of the "About Us button" layer. Extend the timeline to Frame 20 on the "About Us button" layer.

3. Select the "sliding menu" layer and insert a keyframe on Frame 10. This is where we will have the sliding menu appear on the timeline.

Create the Sliding Menu

1. Create another movie clip and name it "sliding menu."

2. Inside the sliding menu movie clip, drag an instance of the About Us button symbol from the Library onto the Stage. Use this button temporarily to help create and position the sliding menu on the Stage.

3. Create a small rectangular shape with a red fill and no stroke. Use the red fill color from the About Us button. Position the shape right below the About Us button.
NOTE: Delete the About Us button once the rectangular fill is positioned directly below it. We are using the About Us button as a guideline to position the rectangular fill beneath it

4. To create the sliding menu, insert a keyframe on frame 5. Then use the Scale tool to enlarge the height of the rectangular shape. Insert another keyframe on frame 10 and use the Scale tool once again to enlarge the height of the rectangular shape. Insert another keyframe on frame 15 and use the Scale tool one more time to enlarge the height of the rectangular shape.

5. Select frames 2-4 and create a shape tween; select frames 6-9 and create another shape tween, and select frames 11-14 and create a shape tween. Preview the animation.

6. Insert another layer. Drag the play head to the frame where the first text label should appear over the sliding menu and insert a keyframe. Type the text, "Who We Are." Use white color text, Tahoma at 16 points.

Create an Invisible Button
In order to create a link for each text label that appears on the sliding menu, we need to convert each text label to a movie clip or a button symbol. Or we could simply create an invisible button, and then add the Get URL action over the invisible symbol.

Invisible button: A button symbol that contains a blank keyframe on the UP, OVER and DOWN frames. The HIT frame contains a simple shape (color and size are not important). The invisible button will be used as an overlay that we can attach an action to for the About Us button.

1. Choose Insert…New Symbol and choose the Button Behavior. Name the button "invisible button." Create a blank keyframe on the UP, OVER, DOWN and HIT frames. On the HIT frame, create a rectangular shape. Color and size are not important.

2. Go back to the "sliding menu" movie clip and select the keyframe that contains the "who we are" text label. Drag an instance of the invisible button onto the Stage and position the invisible button over the "Who We Are" text label. Use the Scale tool to resize the invisible button if necessary.

Frame Action: Stop

1. Remember that movie clips automatically loop. To prevent the sliding menu from looping, insert a new layer and add a Stop action to frame 15 on the timeline.

Object Action: Get URL

1. Choose Window…Action and double-click the Get URL action in the Basic Actions folder. Add a URL in the URL field and close the Object Actions window.

2. Add the other text labels over the sliding menu at specific keyframes, and then use the invisible button to add the Get URL action over each text label.
NOTE: Be sure to insert a keyframe before adding each text label

Sliding menu text labels:
-Who We Are
-Our Mission
-Locations
-Contact Us

3. Go back to the "drop-down menu" movie clip. On Frame 10 on the "sliding menu" layer, drag out the "Sliding Menu" movie clip on the Stage. Position the sliding menu directly below the "About Us" button symbol.

Frame Labels

-Useful for identifying keyframes in the timeline
-Frame labels are exported with the Flash movie

1. Select Frame 1 on the "Labels" layer. Access the Frame panel and create a frame label called "up."

2. Insert a keyframe on frame 10.

3. Create a frame label called "down" on the "Labels" layer on Frame 10.

Frame Action: Stop

1. Add a Stop action to Frame 1 on the "Actions" layer to prevent the movie clip from automatically playing.

Object Action: Go To

1. Select the About Us button on the Stage and choose Window…Actions.

2. Add the Go To action to the About Us button. Choose these settings:
-Deselect the Go To and Play checkbox
-Type: Frame Label
-Frame: Down

3. Select the event Action Script line and choose the Roll Over checkbox. Deselect the Release checkbox. When the user rolls their mouse over the About Us button, the play head will move to the labeled "Down" frame, which is where the sliding menu will play/drop-down.

4. Select the "invisible button" layer and insert a keyframe on frame 10. To make the drop-down menu go back to the "up" position, drag the invisible button from the Library onto the Stage on frame 10 on the "invisible button" layer. You'll want to position the invisible button wherever you feel the user may mouse away from the sliding menu.

5. Add the GoTo action to the invisible button:
-Deselect the Go To and Play checkbox
-Type: Frame Label
-Frame: Up

Note: Place the invisible button along both vertical sides of the sliding menu and attach the Go To action to both invisible buttons. This action will make the sliding menu go back to the "up" position whenever the user mouses away from either of the invisible buttons.

6. Select the event Action Script line and choose the Roll Out checkbox. Deselect the Release checkbox.
NOTE: This event and action sends the play head back to the frame labeled "up" whenever the user's mouse rolls outside the perimeter of the About Us button and the sliding menu

7. Extend the timeline to frame 20 for all of the layers.

8. Go back to Scene 1 and drag out the drop-down menu movie clip from the Library onto the Stage.

9. Preview the drop-down menu in the Test Movie window.

More Movie Clips
-Create a preloader (Check out the August DEB Tip for the steps to create this)

Sound
-Import Sound (Flash can import mp3, au, aif, wav file types)
-Optimize Sound with the Sound Properties Dialogue (MP3 compression)
-Edit sound with the Sound panel
-BONUS DEB TIP: Use the Sound Object to control the sound in your Flash movie

The Sound Object
(Check out the Dreamweaver and Flash Conference, Session 3B, for the steps to create this)

Actions
-ActionScript = Flash's version of JavaScript used for interaction
-Action=an instruction
-Use the Actions panel to add basic actions to object and frames in your movie
-There are two types of actions: Frame actions and Object Actions
-Object actions require user interaction
-Frame actions do not require user interaction; when the playhead in the Timeline moves to the frame where the action is located, the action occurs

The loadMovie action (Check out the May DEB TIP for the steps to create this)

Flash MX New Features
-Enhanced Interface
-New tools: Free transform, Fill transform
-New panels: Property Inspector, Components panel, Accessibility panel
-Reorganized panels: the Mixer panel, Actions panel
-New timeline features: collapsible panel, folder layers
-Video support: you can now import MPEG, AVI, MOV and DV (digital video fomat) files
-Save Flash movies as a template

FlashKit: A Developer's Resource
www.flashkit.com

Check out the Macromedia Exchange Web site for free extensions (add-ons) to Flash!

Source: These lessons were developed especially for YOU by Debbie Berg :-)

Debbie will be teaching a hands-on Flash MX class in March
Click here for details

WATCH FOR MORE DEB TIPS TO COME! STOP BY AND SEE MY NEW DEB TIP EACH MONTH...

back to top

about debbie | debbie's clients | deb's schedule | deb's monthly tip
flawebdeb home | dreamweaver | flash | frontpage | photoshop
web seminar | digital design camp | dreamweaver/flash conference