Home - Animation - Video - Projects - Image Manipulation - IWBs - Interactive - Presentations - Multimedia Tutorials - Other Tutorials - Art Links - Gallery - About

Open Macromedia Flash and familiarise yourself with the environment. The main areas are the Stage (where you draw your movie), the Timeline (where you animate it) and Tools. When a tool is selected the Properties Panel changes correspondingly.

Click and drag your mouse on the left of the stage to draw an ellipse. If you hold Shift while doing this, it will be constrained to a perfect circle. Go to File > Save As and save your movie as first_movie.fla.

NOTE 
Flash saves movies in two formats: .fla is an editable file which you open in the program; .swf is the exported movie that can be viewed on a web page. When you test your movie later Flash will create this file automatically. When you make changes to the .fla document and export it again, Flash automatically updates the changes in the .swf file.

Top

[A]

[B] 

Top

Click in frame 11 and press F6 for a new key frame. Select the Bucket Fill tool and click on the Fill colour box at the bottom of the toolbox. Select a fill colour from the window. In the example a red gradient fill has been selected. Click inside the circle to apply it.

Save your work.

Make your drawing into a Graphic Symbol that will be stored in the Library for this movie, so that if you need it again you can drag a copy out onto the Stage. The copy is called an Instance. The advantage is that the information about the graphic only has to be saved once no matter how many Instances are used in the movie, leaving the file size unchanged.

Click on the Arrow tool and drag a selection box over the ball, enclosing all of it. Press F8 for the Convert to Symbol window or go to Insert > Convert to Symbol. Type a name for the symbol e.g. red_ball, make sure that the Graphic Symbol radio button is selected and click OK. [A] The symbol will have a fine blue box around it to show that it is selected and has been converted successfully. You can see the symbol in the library by choosing Window > Library. [B] If you want to use this symbol again, click on the square icon (not the name) and drag and drop it onto the Stage. [C]

NOTE: You can edit a symbol by double-clicking on its icon in the Library to open the editing window. Any changes you make here will be applied globally to all Instances of the Graphic Symbol in your movie. This is a very efficient way to make changes to symbols. To return to the movie just click on Scene 1.

[A]   [B]      

[C]

Top

Rather than having to insert key frames one by one in each of the frames "in between" frames 10 and 30, Flash will do it automatically. This is called Tweening.

Click on any frame between 10 and 30 [A] and go to the Properties Panel. Select Tween > Motion from the drop-down menu. [B] An unbroken arrow appears on the Timeline between these frames to show that tweening has been successfully applied. C] Scrub the Playhead to and fro to see the effect and save your work.

 [A] [B]

 [C]

In frame 31 press F6 for another Keyframe. You are going to morph one shape into another. However, shape tweening cannot be applied to symbols as they are grouped together. So, first ungroup the symbol by making sure that it is selected and going to Modify > Break Apart. The blue selection box that indicates a symbol changes to dotted selection areas. 

To change the shape of the ball into a heart, select the Arrow. Hold the Option/Alt key and pull down at the top of the sphere. Do the same at the bottom. 

NOTE: Freeform editing for lines and other shapes is a key skill when using vector-drawing tools, but needs practice. Save your work and spend a little time using the Line, Pencil, Pen, Oval and Rectangle drawing tools on a new blank movie.  

• Use the Arrow Tool to create curves by clicking and dragging when the cursor changes shape to a curve or an angle.

•  You can also use it to make selections and edit lines and shapes. 

• One click on the edge of the circle selects it, double-clicking selects both outline and fill. 

• Click inside the shape to select the fill separately. 

• Overlapping shapes can be combined to make more complex shapes by deleting unwanted crossover lines. 

The program's Help menu will give you more detailed advice on each tool, and has useful tutorials too. Unfortunately, these are not installed with the trial version of Flash, but see the end of this tutorial for links to online Flash support.

Top

Free Transform

You can change the shape and speed of objects to make motion more natural. Try this on the ball. Go to the frame where the ball touches the bottom of the screen – around frame 30. Click on the Free Transform tool, then on the ball. It will be surrounded by a bounding box. This will allow you to rescale, rotate and distort the shape, which is useful for mimicking perspective effects. Holding Shift as you drag a corner handle will constrain the proportions. Squash the ball and make it a little smaller.

NOTE: Instead of using the Free Transform tool, you can select options from the Modify > Transform menu, including flipping horizontally or vertically.

To add an illusion of aerial perspective you can change the transparency or Alpha of the object. With the ball still selected, on the Properties Panel select Alpha from the drop-down Colour menu, then change the level to 50%. Save your work.

Finally, to give the illusion of the ball slowing down as it bounces up, click anywhere between frames 31 and 45 to go to the part of the movie where you applied the Shape Tween. On the Properties Panel click on the small black arrow next to the Ease window and drag the slider up to 100%. Save your work and Test the movie.

As in image manipulation programs, layers keep work organised and give maximum flexibility to edit one element without affecting others. It is good practice to start a new layer for each element in your movie. You can name a layer after the object for easy identification, which is essential as more and more complex elements are added. 

Draw a new object for the movie. My example has a mouth, but you could draw anything you want. Before you do this, double-click on the name Layer 1 and call it ball. At the bottom of the Layer panel click on the Plus icon to add a new layer and name it. The example is called mouth.

NOTE: You can lock layers individually by clicking on the black dot under the padlock symbol, and make them visible by doing the same with the dot under the eye. Clicking on the top symbol will apply to all layers. Click again to toggle between on and off.

Lock the ball layer now to prevent making changes to it accidentally, and click on the new layer to make it active.

Click in frame 41 of the new layer and make it a key frame by pressing F6. Draw your new object in this frame. Convert it to a symbol [F8] and name it. Save your work.

Finally, apply either a motion or shape tween between the two by repeating one of the three animation techniques you used earlier: Frame by frame, Motion Tween or Shape Tween. 

Remember that for Motion Tweens both Instances must be grouped [go to Modify > Group if they are not]; but for Shape Tweens they must not be grouped [go to Modify > Break Apart if they are]. Save and test the movie.

F5 = Add a blank frame to the Timeline

F6 = Insert a Keyframe

    F8 = Convert to Symbol

Return/Enter = Play

Command/Control + Return/Enter = Test Movie

Command/Control + C = Copy

Command/Control + V = Paste

Command/Control + D = Duplicate

Command/Control + A = Select All

Command/Control + Z = Undo

Command/Control + Option/Alt + A = Select All Frames

Command/Control + = = Zoom in

    Command/Control + - = Zoom out

http://www.macromedia.com/support/flash/getting_started.html
Download printable versions of beginners' guides to Flash 5 from Macromedia.

http://trainingtools.com/online/flash5/index.htm
Online tutorials which can be downloaded as PDF files. 

http://www.trainingcafe.com
Macromedia's own interactive training site. 

http://www.macromedia.com/devnet/mx/flash/3d_animation.html
Develop more complex 3D animations with tutorials from Macromedia.

Top

© RKM 2002 - 2007

Home - Animation - Video - Projects - Image Manipulation - IWBs - Interactive - Presentations - Multimedia Tutorials - Other Tutorials - Art Links - Gallery - About