This tutorial will cover how to create a new blank movie file, and the tools and
steps involved in making your first simple animation using motion tweening.
Step 1: Load up Flash. If this is your first time loading
the program, it'll ask you to choose either Designer or Developer view, and
a resolution that matches your monitor settings (although this isn't applicable to
versions of Flash prior to MX). I've chosen Designer view, and my screen is
set to a resolution of 1024x768. (You can always change this later by
clicking the "Window" option in the top toolbar and then selecting "Panel
Sets".) Once you've finished that, you'll see a blank canvas surrounded by
This canvas is set to a default size; working at standard sizes is my
preference so, I'm going to change my canvas size from the default of 550
pixels wide by 400 pixels high to a smaller size of 320x240. Do this by
clicking 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: the document size, the background color, and the
Step 2: Adjust the size of your document to 320 x 240 by manually entering the values in the
spaces provided, use the color picker to select a light blue background, and
leave the frame rate set at 12 fps (frames per second).
This is the default frame rate for web production; for television and other
media production, it can go as high as 30 frames per second. 12 FPS 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
needless extra frames.
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, click the icon that
looks like a hand, in the left-hand column about halfway down under the
"View" heading. This is the Hand Tool. Click and drag your mouse in your
work area with this tool selected, you will be able to literally drag your
canvas about until it's positioned where you please.
Once you've got your work space settled comfortably, 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 rest of 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.
Step 3: I'm going 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
Now let's take a look at another area of the window: the timeline, set
above the work area (see the image below). The timeline is divided into two
columns: the Layers column, and the actual timeline itself, divided into
individual 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 of your animation key frames and their
timing and placement. Most of the work of your animations will be done here.
Step 4: As you can see, right now we have one layer with one timeline associated
with that layer.
The first frame of the timeline is greyed out, with a small black dot
marking it. This means that this frame is a key frame, created
automatically when you drew the circle on that frame. In order to animate
using tweening, you must define key frames; without them Flash has no
beginning or ending points to animate between.
Now we need to make some changes to our circle. Because Flash doesn't tween ordinary shapes we will have to convert the shape to a symbol; 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!
Right-click on your circle, and select "Convert to Symbol". A popup
window will appear, asking what you want to name the symbol and what
behaviour to apply to it; type in a name, and select "Graphic". Click "OK";
you'll see the change in your object by the blue outline surrounding it.
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
Step 5: Look at the timeline. 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. The circle should move over one second, so
click on the twelfth block; the timeline is marked in increments of five, so
just count two after the "10" marker. Right-click on the 12th frame and you
will see two keyframe options: "Insert Keyframe" and "Insert Blank Keyframe".
Click on "Insert Keyframe"; this automatically copies everything on the
previous keyframe (including the circle) to the new keyframe.
Once you click "Insert Keyframe", you will see that the 12th frame is
greyed out and marked with a dot, just like the first; the space in between
them is also greyed, 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. Now, we have a
one-second animation--but the animation doesn't actually visibly move.
Step 6: Make sure that you're still on frame 12 (the red timeline marker
should be over that frame), and use the Arrow tool to select the circle that 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; Mine is
going to the lower right-hand corner of my active space.
Step 7: Return to your timeline and click on frame 1. Pressing the "Enter" key
will play all of your animation but it doesn't look quite right - The circle
remains in the original position for the first eleven frames, and then it
suddenly snaps to the new location. Let’s take care of that next by using a
THEORY: "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 it
doesn't affect the object's shape, size, or color.
To apply the 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 and select "Motion". Don’t change anything else
on the Property Panel. 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.
your first animation is now successfully complete! To play it, just press the
Enter key with the timeline selected, or preview by selecting File > Preview in Browser
to see what it will look like when exported. You should see your circle
moving smoothly from point A to point B, with no jumps in between.
Practice drawing shapes and using motion tweens on them until you're sure
you've got the hang of it. Be creative, and see what you can come
The next tutorial in this series will cover Shape Tweening. But don’t move
on to Shape Tweening until you are certain that you understand Motion Tweens.
Take your time and experiment - motion tweens form the basis of much of
Flash's underlying usefulness, and you really need to understand them fully
before going any further.
- Tutorial written by bedlam123
| || || |
| ||Last 5 User Comments || |
|User: saxc (#38488)|
Date: Thu Mar 01, 2007. 06:24:25
Post #2 of 2
Thanks, SuperLady! Not just for this one, but all the tuts regarding Flash. Without this kind of nice, simple and thorough explanation, Flash could be a real braincracker for a total newbie such as myself. Believe me, tried tuts from tons of sites. They just go halfway, like there is some kind of secret thay have to defend by all the means necessary, or to tease U enough making U eager to buy books from third party sites. Gratitude to all the good people from BIORUST too. U KEEP OUR EYES AND MINDS WIDE OPENED.
Reply to this post
|User: albert (#25062)|
Date: Tue Mar 14, 2006. 11:18:21
Post #1 of 2
Thank you bedlam for the tut:) It was my first attemp at flash and I got there in the end! Me being over 50 it can seem a little daunting all this stuff but I shall endeavour to persevere and go through all the tuts
Reply to this post
--- View Entire Thread ---
| Re: 3ds Max Tutorials for Beginners|
Posted: Feb 22nd, 4:29pm
Activity: 0 replies, 699 views
Posted: Oct 18th, 7:47am
Activity: 1 replies, 1824 views
Posted: Jul 02nd, 12:37pm
Activity: 2 replies, 1917 views
|Help Please :)|
Posted: Mar 25th, 5:08am
Activity: 0 replies, 2371 views
Posted: Mar 24th, 9:18pm
Activity: 1 replies, 1737 views
| Deactivate Account|
Posted: Oct 02nd, 12:16pm
Activity: 1 replies, 2499 views
Posted: Sep 12th, 3:56am
Activity: 2 replies, 3403 views