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

2. 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

3. Useful Link Download More tutorials
Slides:
Final production:
Assets Files:
Flash File:
More tutorials
Google for “Flash Tutorial”

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

5. 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.

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

7. 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.

8. Terminologies
Tweening (Animation)
Motion Tweening
Shape Tweening

9. Our Final Product

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

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

12. Step 1 Open a new file and define document properties
Background Color: 0x (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: , Alpha: 0
Second Color: , Alpha:100
Transform a gradient fill

13. Step 1

14. 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”

15. 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

16. Step 2

17. 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

18. Step 3

19. 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

20. 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
Choose “_blank” to pop-up a new window
Control Movie Clip
Button2 : Replay
Button3 : Skip
Test movie

21. Step 4

22. 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

23. Step 5

24. Done!
Enjoy the fresh flash