Practical - 12Develop Animation Movie Using Flash

7/27/2019 Practical - 12Develop Animation Movie Using Flash

1/7


2/7

The canvas is set to a default size; because I prefer to work at standard sizes and aspect

ratios for web production, I'm going to change my canvas size from the default of 550

pixels wide x 400 pixels high to a smaller size of 320 x 240. I'm going to do this byclicking the button on the Properties tab--the panel just below the canvas and working

area--that displays the canvas size; this will open a new pop-up window containing the

document's properties. For right now you only need to worry about three things: thedocument size, the background color, and the frame rate.

I'm going to adjust my size to 320 x 240 by manually entering the values in the spaces

provided, use the color picket to select a light blue background, and leave the frame rateset at 12 fps (frames per second). This is the default frame rate for web production; fortelevision and other media production, it can go as high as 30 frames per second. 12 is all

that you really need for Flash animation for the web; it still allows a consistent flow of

motion, but avoids raising your file sizes by adding extra frames.

Step :3 Introduction to the Primary Toolbar and

Drawing a Shape

Positioned to the left side of the window, you'll see the Tools panel, with icons giving

you access to the primary functions you'll need to start drawing and animating in Flash.To start with, you can click the icon that looks like a hand, in the left-hand column about

halfway down under the "View" heading. This is the (aptly and amusingly named) Hand

Tool; if you click and drag your mouse in your work area with this tool selected, you canliterally drag your canvas about until it's positioned where you please.

Once you've got your work space settled comfortably, let's try drawing something. Under

the top section of the Tools panel, click on the button depicting a white circle outlined in

black; this is the Oval Tool. You can use this to draw any circular shape. Below the restof the tools are two color-picker windows: one for the "Stroke" (represented by a graphic

of a pencil) and the other for the "Fill" (represented by a graphic of a paint bucket). The

stroke is the color of the shape's outline, while the fill is the color inside the shape. I'mgoing to set my stroke to black and my fill to a dark blue, and then draw a small circle in

the upper left corner of my canvas by clicking and then dragging until the shape is at the

desired size before releasing.

SARASWAT


3/7

Step : 4 Viewing the Timeline

Now before we jump right into animating, let's take a look at another area of the window:

the timeline, set above the work area (depicted in the image below). The timeline isdivided into two columns: the Layers column, and the actual timeline itself, divided intoindividual frames; the sliding red line marks your current position in the timeline. The

timeline is one of the most important tools in Flash MX; it allows you to keep track of

your various objects and shapes and which layer they're on, as well as keeping track ofyour animation key frames and their timing and placement. Most of the work of your

animations will be done here.

As you can see, right now we have one layer (containing the circle drawn in the previous

step) with one timeline associated with that layer. The first frame of the timeline isgrayed out, with a small black dot marking it; what that means is that this frame is a key

frame, created automatically when you drew the circle on that frame. In order to animateusing tweening, you must define key frames; without them Flash has no beginning orending points to animate in between.

Step : 5 Converting Your Shape to a Symbol

Before we go any further, we'll need to make some changes to our circle. Why do weneed to convert the shape we've already drawn to something else? Because Flash doesn't

tween ordinary shapes; if you try to apply a tween while the objects are still shapes, it

won't work, so we convert them to symbols; it won't take more than a moment.

Just right-click on your circle, and select "Convert to Symbol". A popup window willappear, asking what you want to name the symbol and what Behavior to apply to it; type

in a name, and select "Graphic"; the other options will be covered later, in more advanced

lessons. Click "OK"; you'll see the change in your object by the blue outline surroundingit. This symbol will now appear in the Library, which you can view by pressing F11 or

clicking on Window -> Library; when symbols or objects are listed in the Library, they

can be re-used at any point by simply dragging them onto the canvas.

SARASWAT


4/7

Now, let's get back to animating. On the next page, we'll create another key frame so that

we can tell Flash to animate in between them.

Step : 6 Creating a New Key Frame

Let's look a the timeline again. If you'll remember, we set the frame rate for this

document to 12 frames per second; that means that twelve of the blocks in the timeline

will make up one second of animation. I want my circle to move over one second, so I'm

going to click on the twelfth block; the timeline is marked in increments of five, so justcount two after the "10" marker. If you right-click on the 12th frame, you'll see two

keyframe options: "Insert Keyframe" and "Insert Blank Keyframe". You'll want to click

on "Insert Keyframe"; this automatically copies everything on the previous keyframe(including our circle) to the new keyframe.

After clicking "Insert Keyframe", you can see that now the 12th frame is grayed out and

marked with a dot, just like the first; the space in between them is also grayed, with the

11th frame marked by a small white square. This indicates that there is no motion or"tween" placed on the frames in between; Flash has automatically placed a hold on these

frames so that they continuously fill with a repeat of the key frame.

So now, technically, we have a one-second animation--only the animation doesn't

actually visibly move. In the next step we'll move things around a little, and start to reallyget our animation off the ground.

SARASWAT


5/7

Moving Your Symbol on a New Frame

Now we're going to go back to our workspace; making sure that you're still on frame 12

(the red timeline marker should be over that frame), use the Arrow tool to select the circlethat you drew before; you'll be able to tell that it's selected by the blue outline

surrounding it again.

Click and drag on the circle to move it anywhere on your canvas; I'm going to move mineto the lower right-hand corner of my active space. (Unless you want to animate your

shape moving off-screen, don't move it into the gray area surrounding the canvas; objects

in the gray area do not show up on the final animation.)

If you return to your timeline and click on frame 1, pressing the "Enter" key will play allof your animation; however, it doesn't look quite right, does it? The circle remains in the

original position for the first eleven frames, before suddenly snapping to the newlocation. In the next step, we'll take care of that by applying the motion tween.

Adding a Motion Tween to Your Animation

SARASWAT


6/7

Believe it or not, this is the easy part. In Flash, "motion tweening" is used to describe the

process where the program automatically creates the frames between keyframe A of an

object's timeline and keyframe B to make a smooth animation depicting the object

moving from one location to another. This is different from "shape tweening" because itdoesn't affect the object's shape, size, or color, but we'll cover that in the next lesson.

To apply your motion tween, simply click and drag your mouse from frame 1 to frame 12

to select them; then you can either right-click on the frames and select "Create Motion

Tween", or you can click on the "Tween" dropdown in the Properties tool panel andselect "Motion". (Leave the other options at their default settings.) The affected frames

will turn a shade of pale violet, and an arrow will appear stretching from the first

keyframe to the last; this is the sign of a successful motion tween. (If the frames turnviolet but the arrow is replaced by a dashed line, right-click and select "Remove Tween"

before verifying that you've completed the steps properly.)

Conclusion

You have now successfully completed your first animation; to play it, just press the Enter

key on the timeline, or preview by selecting File -> Preview in Browser to see what it

SARASWAT


7/7

will look like when exported. You should see your circle moving smoothly from point A

to point B, with no jumps in between.

SARASWAT

Documents

Practical - 12Develop Animation Movie Using Flash