1

Macromedia Flash Tutorial

Contents: 1. What is Macromedia Flash 2. Tools Panel 3. Interface 4. Motion Tween 5. Tweening Simultaneous motion and scaling 6. Fading with Alpha 7. Changing object color mid tween 8. Motion Guide 9. Shape Tween 10. Text to text tweening 11. Mask & Masking

YISHUN SECONDARY SCHOOL We Seek, We Strive, We Soar

2

What is Macromedia Flash Flash is an authoring tool that designers and developers use to create presentations, applications, and other content that enables user interaction. Flash projects can include simple animations, video content, complex presentations, applications, and everything in between. In general, individual pieces of content made with Flash are called applications, even though they might only be a basic animation. You can make media­rich Flash applications by including pictures, sound, video, and special effects.

Interface This is how Flash looks like when you launch it.

v You have to create a New Document to start 2D Animtion. v There is two ways to create New Document:

­ Click on File – New ­ or Click at Flash Document

(This is how Flash looks like after you launch it)

3

The tools in the Tools panel let you draw, paint, select, and modify artwork, as well as change the view of the Stage.

The Timeline organizes and controls a document's content over time in layers and frames.

Frames Like films, Flash documents divide lengths of time into Frames.

Layer is like multiple film strips stacked on top of one another, each containing a different image that appears on the Stage.

The major components of the Timeline are layers, frames, and the Playhead.

Frames Layer

Playhead

Tools panel

4

The Stage is the rectangular area where you place graphic content, including vector art, text boxes, buttons, imported bitmap graphics or video clips, and so on when creating Flash documents. The Stage in the Flash authoring environment represents the rectangular space in Macromedia Flash Player or in a web browser window where your Flash document appears during playback. You can zoom in and out to change the view of the Stage as you work.

The Property inspector simplifies document creation by making it easy to access the most commonly used attributes of the current selection, either on the Stage or in the Timeline. You can make changes to the object or document attributes in the Property inspector without accessing the menus or panels that also control these attributes.

Depending on what is currently selected, the Property inspector displays information and settings for the current document, text, symbol, shape, bitmap, video, group, frame, or tool. When two or more different types of objects are selected, the Property inspector displays the total number of objects selected.

The Stage

5

Motion Tweening Motion tweening, put simply, is moving an object from point A on the stage to point B on the stage. Simple movement with motion tweening:

v In a fresh Document, draw a square on stage, select the fill and the outline together, and convert them into a symbol with the name square. Place the square symbol on the left hand side of the stage.

v In the time line, insert a keyframe at frame 30.

v In the new keyframe (click on the frame in the timeline if its not currently selected), move the square symbol to the far right­hand side of the stage.

v Now go back to the timeline and click on any Frame between 1 and 29.

v On the Property Inspector, select Motion from the Tween drop­down menu

v Test the move and watch the object move from left to the right.

Tweening simultaneous motion and scaling

v On the same stage, click on frame 1 on the timeline. v Select the free Transform tool and click on the Scale

button in the Tools panel options (or right­click on the square and choose Scale)

(The selected object will now have a dotted box around it with eight scaling selection handles)

Square Symbol

keyframe at frame 30

Tween drop­down menu

Transform tool

6

v Grab the lower right­hand corner handle and use it to scale the object down to about half of its original size.

v Now click on frame 30 on the timeline, where the motion­tweened square is located at the right side of the stage. This time scale the square up by about a half, using the bottom left handle to do the scaling.

v Test the movie, and you’ll see the square gradually grow larger from frame 1 to 30 as it passes across the stage.

Fading with alpha

v On the same stage, click on frame 15, and insert new keyframes.

v Click on frame 15, select the symbol, and open the color drop­down menu in the Property inspector.

(There are different effects that you can apply to your symbol)

v Select Alpha from the drop­down menu, and then set the Alpha slider to 0%. This setting will render the symbol instance totally transparent in the keyframe at frame 15.

v When you test your movie you’ll see the object fade in and out.

Keyframe 15

Color drop­down menu

Alpha slider to 0%

7

Changing object color mid­tween Let’s take a look at how to change the color of an object during a motion tween. In this exercise, we move an object (text) across the stage and change its color as it moves.

v In a new document, start by creating text. Select Text tool in the Tools Panel. This will open the Text tool properties in the Property inspector.

v Select the text on the stage and convert it into symbol. Remember, only symbols are group objects can be motion­tweened.

v Create three more keyframe at frames 10, 20, and 30.

v At keyframe 10, select the symbol and open the Color drop­down menu in the Property inspector.

v Select Tint from the color drop­down menu and change the tint amount to 100%. Then, using the color selection palette, change the color.

v Repeat this procedure at keyframe 20, and at keyframe 30.

Now your text should have different color on each keyframe.

v Add motion tweens to the timeline between frames 1 and 10,

10 and 20, and 20 and 30.

v If you test the movie you’ll see it change color in jumps.

v Now you could try clicking on each of the keyframes in

succession and dragging each particular instance to a

different position on the stage.

(This options displayed are similar to those in a Word processing program)

8

Motion Guide Motion Guide is nothing but moving your symbol in a predefined path such as curves or circles.

v Create a graphic symbol and Name the layer as "graphic"

v Right click on the "graphic" label and select "Add Motion Guide" from the pop­up window. v A new layer will appear on top of the "graphic" layer with the label "Guide:graphic" along

with the guide icon.

v Draw the path for your symbol in this new layer using pencil or line tool. For example: I drew a circle for my car.

v Select frame 50 of guide layer and press "F5" to insert frames. v Now go to "Frame 1" of "graphic" layer and drag your symbol to one end of your path.

While dragging, you will see a bubble on the symbol. That bubble should go right below the path. Something like the one shown below.

v Now go to "Frame 50" of "graphic" layer and press F6 to insert a new keyframe.

v Now drag your symbol to other end of your path. Again, the bubble should go right below the path.

v Select any frame between 1 to 50 of your "graphic" layer. Right click and select "motion tween" from the pop­up menu.

Symbol

"graphic" Layer

Symbol

"graphic" Layer

"Guide: graphic" Layer

9

Shape Tweening § Shape Tweening morphing shapes into something new, rich and strange, either standing

still or moving. § Morphing text into shapes and vice­versa. § Using shape hints to overwrite Flash’s default shape tweening behavior.

Squaring the circle v Create a new movie, and draw a circle and fill in frame 1. v Click on frame 15, and insert a blank keyframe.

v Your stage is empty on keyframe 15, using a rectangle tool; draw a square with a different color on other side of the stage.

v Highlight keyframe 1 to 15, On the Property Inspector, select Shape from the Tween drop­down menu.

v Now if you test your movie you’ll see the circle morph into square while moving across the stage.

Empty Keyframe 15

Empty Stage

10

Text to text tweening This animation starts off with one word and uses shape tweening to change it into a different word.

v Create a new movie, and in frame 1, use the Text tool in conjunction with the Property inspector to type This is my first, on the left side of the stage.

v Now select frame 30 and create a new keyframe and type text to text tween on the below right side of the stage.

v Use the Arrow tool to select keyframe 1, and use the Modify – Break Apart menu to first break the text into separate letters

(Text is the only thing that needs to be broken apart twice)

v Select Modify – Break Apart again to break them into graphics. Make sure you have each text box and letters selected before you this.

v Do the same thing to the other text; remember to break the text apart twice.

v Click the between the two keyframes on the timeline, and use the Property inspector to create a shape tween.

v Now if you preview your movie you’ll see the first words morph into the second while moving across the stage.

11

Mask & Masking Masks are a powerful feature in Flash that allows you to selectively show and hide content.

v Create a new movie; by default you will have a layer in your timeline window. Insert one more layer, totally you need two layers to mask an object.

v Rename the top layer to "Mask" and the layer below that to "background".

v

v

v

v

v

v

v

v Import your picture to the "background" layer. v Using Oval tool from your tool box, draw a

circle without it's border in your "Mask" layer.

v Drag the circle to one end of your picture.

v Now go to” frame 40" of your "Mask" layer and press "F6" to insert a new keyframe. v Now go to "frame 40" of your "background" layer and press "F5" to insert frames, so that

your background image is available all through your mask. v Select "frame 40" of your "Mask" layer that is your new keyframe, keeping the playhead

on "frame 40" of "Mask" layer, drag the circle to other end of your picture. v Now go back to "frame 1" of your "Mask" layer, keeping the playhead on "frame 1" of your

"Mask" layer, select Shape tween in your properties window. v Right click on the "Mask" layer (the area where you named the layer not where the frames exist)

and select Mask. v Your Mask is all ready. Press Ctrl+Enter to view your Mask.

End

Figure 8.3 Figure 8.4

Figure 8.5