Macromedia Flash Tutorial Multimedia E-Commerce Course November, 2002 Rong Yan Carnegie Mellon Copyright 2002 Michael G. Christel and Alexander G. Hauptmann

Outline Useful Link Terminologies Build Flash Step by Step What you should know Analyze the flash file Create gradient background Tween bitmap effect within a movie clip Load dynamic text Add animation and navigation to buttons Add streaming sounds and event sounds Test performance and Publish

Useful Link Download More tutorials Slides: http://www.cs.cmu.edu/~christel/MM2002/flash/flash.ppt Final production: http://www.cs.cmu.edu/~christel/MM2002/flash/myCar.html Assets Files: http://www.cs.cmu.edu/~christel/MM2002/flash/assets.zip Flash File: http://www.cs.cmu.edu/~christel/MM2002/flash/myCar.fla More tutorials http://www.echoecho.com/flash.htm http://www.w3schools.com/ Google for “Flash Tutorial”

Terminologies Layers Transparent sheets stacked on top of each other. Draw and edit objects on one layer without affecting objects on another layer

Terminologies Symbol Reusable elements that you use with a document. Include graphics, buttons, video clips, sound files, or fonts. Stored in the file's library.

Terminologies Stage Where you compose the content for individual frames in the movie Drawing artwork on it directly Arranging imported artwork on it.

Terminologies Keyframe A frame in which you define a change in an animation or include frame actions to modify a movie. Flash can tween, or fill in, the frames between keyframes to produce fluid animations.

Terminologies Tweening (Animation) Motion Tweening Shape Tweening

Our Final Product http://www.cs.cmu.edu/~christel/MM2002/flash/myCar.html

What should you know 7 Lessons provided by Macromedia Creating Buttons Creating Tweened Animation

Analyze the flash file Open file MyCar.fla Image Layers Document properties Movie Clip Double-click the car Library Assets (Symbols) (Ctrl + L)

Step 1 Open a new file and define document properties Background Color: 0x999999 (gray) Height, Width: 640 x 290 View > Grid > Edit Grid, 10px, 10px, Snap to grid Create and transform a gradient background Draw a rectangle covered entire stage Color Mixer, change to Radial Color First Color: 000066, Alpha: 0 Second Color: 000000, Alpha:100 Transform a gradient fill

Step 1

Step 2 Tween bitmap effects Import bitmap images Create a new layer, called Image Import Assets/view1.png, view2.png, view3.png to the library (make sure Library Window is open, Ctrl + L) Modify bitmap compression Change the bitmap compression to “Lossless(PNG/GIF)” in bitmap properties dialog Create and edit a movie clip symbol Drag the image to layer *Convert the image to symbol(Movie Clip), called “Car Anim” Set the instance name to be “_Car”

Step 2 Tween bitmap effects Enter symbol-editing mode (Double click the cars) For Layer 1 (Drag the Car into Stage) Convert the car to symbol (F8) Add a keyframe at Frame 105 (F6) Add keyframe at 25, 34, 35. Delete frames from 35 to 104 (Delete) Tween bitmap effects Fade out the car from Frame 25 to Frame 35 (select Frame 34, Alpha ->0, create tween motion) Test Movie And Save (Ctrl + Enter) Similar to others Insert “Action” layer and insert stop point

Step 2

Step 3 Load dynamic text Import the logo Create a new layer, called “copy” Import the logo, file asset/logo.fh10 Create a dynamic text field, Modify properties Var text box : _textField Color: yellow, FFCC00 Line Type: MultiLine Use the loadVariables action to load text Add a new layer, named “Actions”, kept as top layer Open Actions Panel Actions>Browser/Network>loadVariables, fill in ../assets/copy.txt

Step 3

Step 4 Button Import from another FLA Button animation File > Open as Library, Assets/buttons.fla Enlarge to 150% Window > Align, align along vertical axes Button animation Click Button 1, select “Color” Layer and “Over” Frame Create Shape Tweening to make color animation Test Movie Create Stop Action to avoid tweening repetition

Step 4 Button (Cont.) Button navigation Control Movie Clip Test movie Click Button 1 on the stage In the Actions panel, Actions > Browser/Network > getURL Type any complete URL, like www.cmu.edu Choose “_blank” to pop-up a new window Control Movie Clip Button2 : Replay Button3 : Skip Test movie

Step 4

Step 5 Sound Add a streaming sound to your movie Add a new layer named “Sounds” File > Import, track1.mp3 and ping.mp3 Drag the track1.mp3 sound from the library panel to the stage type 999 in the Loop text box Add an event sound to a button Double-click Button 1 to open symbol-editing mode. Add a new layer named “Sound”. Select the Over frame of the Sound layer and choose Insert > Keyframe or press F6. In the Property inspector, select Ping.mp3 from the Sound pop-up menu. Test movie & Publish

Step 5

Done! Enjoy the fresh flash