CIS 205—Web Design & Development

FlashChapter 3

Appendix B on Creating Animations

Appendix B—More About Creating Animations• Strategy for creating an animation w/

buttons1. This appendix covers how to create the animation

required in the Portfolio Projects of Flash Chapters 3-4

2. Here’s the strategy:A. Create a home layer that has graphics such as ovals that say

My Portfolio, Animations, Work History, etc.B. Create an animations layer that has the graphics Sample

Animation and HomeC. Create a ball layer that has an animated ball that moves

across the stage (e.g., a tweened animation)D. Create a stopmovie layer that serves to begin and end the

animation

Appendix B—Revised Instructions for Animations (2)• Create two layers and graphics for buttons1. In Flash, create a new animation file by clicking File, New,

selecting ActionScript 1.0 & 2.0, OK. Save it as (for example) myPortfolio.fla.

2. Rename Layer 1 as home. Click on Frame 1. Create your graphics (the various ovals with text, such as My Portfolio, Animations, Work History, etc.

3. Insert a new layer (Layer 2) and rename it as animations. Click on Frame 2 on this layer and insert a keyframe. Create your graphics (ovals that say Sample Animations and Home).

4. Save your work.

Appendix B—Revised Instructions for Animations (3)

• Convert graphics to buttons and activate1. Click the home layer and click Frame 1. Convert the Animations

graphic to a button symbol. 2. Right-click on this button in the Library panel and make each of the

various states (Over, Down, Hit) operational, using different colors for the different states. Click Scene 1 to return to the stage.

3. Click Control, Enable Simple Buttons and test your button to see if it changes color properly.

4. Select the button with a marquee, click Window, Actions. Under Movie Clip Control double-click on and then double-click release.

5. Click in front of the } on line 2, double-click gotoAndPlay under Timeline Control and type 2 (for Frame 2) inside the () for gotoAndPlay. Save your work.

Appendix B—Revised Instructions for Animations (4)• Insert a stopmovie layer and add actions1. Insert a new layer (Layer 3) and rename it as stopmovie.

Click on Frame 1 of this layer. Click Window, Actions and double-click stop under Timeline Control. Click a later frame, such as Frame 50 on this layer, make it a keyframe, and add a stop action. Save your work.

2. Click the animations layer and click Frame 2. Click Window, Actions and add a stop action to this frame. Click Control, Test Movie and see if clicking the Animations button on the home page brings up the second page.

3. If this does not work properly then review all steps above again.

Appendix B—Revised Instructions for Animations (5)

• Add an animation layer1. Insert a new layer (Layer 4) and rename it ball. Click Frame

3 on this layer and make it a keyframe. 2. Create a ball graphic and place on the left side of the

stage. Select the ball with a marquee. Click Insert, Timeline, Create Motion Tween (for a tweened animation).

3. Click Frame 50 on this layer and make it a keyframe. Select the ball and move it to the right edge of the stage. Press Enter and test this animation. Save your work.

Appendix B—Revised Instructions for Animations (6)

• Activate an animation with a button1. Click the animations layer, select the Sample Animations

graphic and make it a button symbol.2. Set the actions for this button to be "on release go to and

play Frame 3". 3. Test the movie to see if the Animations button on the

home page takes you to the second page, and clicking the Sample Animations button runs the animation.

4. Close the movie. Save your work.

Appendix B—Revised Instructions for Animations (7)

• Complete the animation1. Click Frame 50 on the ball layer and add an action

"gotoAndPlay(2)". 2. Test the movie to see if it works correctly. Save your work.3. Click Frame 2 of the animations layer. Select the Home

graphic, convert it to a button, and give it the action of "on release go to and play Frame 1”.

4. Save your work and test the movie.