Basics of Flash Animation

All Other Tutorials

Tutorial

Click on thumbnailed images to enlarge

You may have seen my [link] skin where I've used Flash to animate the banner. If you're interested in learning how this is done, here is a good tutorial to get your started.

With this tutorial, I will show you the basics of flash animation, including shapes, symbols and motion tweening. Keep in mind this is only lesson one. I plan to release more tutorials in the future to enhance what you've learned and also to teach you new concepts.

Here's a [link] of what I hope to have you accomplish by the end of this tutorial.

=================================================
[size=14]LESSON ONE[/size]
=================================================

[size=7]CREATING MOTION[/size]

First things first, let's make something move. :smile:

1) Launch Flash and create a new document: File >> New.

2) Rearrange your palettes: Window >> Panel Sets >> Designer [1024x768].

3) Select the oval tool (User posted image) from the tools palette and note the color options available on the lower half of the tool palette.

User posted image

Set the stroke color to black and the fill color to red as shown above.

4) Draw a ball on the top left corner of the stage. To draw with the oval tool, click and drag diagonally on the stage.

Click to enlarge

5) Click on frame 1 of layer 1 on the timeline to select the ball.

Click to enlarge

If selected correctly, there should appear to be a dotted pattern over your ball as shown above.

6) Convert the ball object into a symbol: Insert >> Convert to Symbol. Enter a name for the symbol and choose 'Graphic', then hit OK.

Click to enlarge

Once converted into a symbol its appearance changes. It is contained in a light blue box and also has a center point.

User posted image

NOTE: In order to create a MOTION tween the object MUST be SYMBOL.

7) Select frame 10 on the timeline.

User posted image

8) Insert a new keyframe at frame 10: Insert >> Keyframe.

9) With frame 10 still selected drag the ball to the bottom right corner of the stage.

Click to enlarge

10) Click on frame 1 and you'll note that the ball returns to the left edge of the stage. With frame 1 highlighted, select the Property palette on the bottom of your screen. Select the 'Tween' drop down menu and select 'Motion'.

User posted image

After tweening has been turned on, you should now see an arrow between frame 1 and 10 on the timeline.

User posted image

11) Play the animation: Control >> Play.

[link]

Notice that the ball is moving a bit too quickly.

12) Let's slow down the animation. We can do this by adding more frames to the animation. Select frame 1 and hit the 'F5' key 10 times or until the last frame is on frame 20 on the timeline.

User posted image

13) Play the animation: Control >> Play.

[link]

Notice the ball is moving more slowly across the screen as before.

----------------------------------------------------------------------------

[size=7]CHANGING SIZE OVER TIME[/size]

Now I'll show you how to make your ball change size over time.

1) Click once on frame 20 on the timeline to select your ball.

2) Choose the Free Transform tool (User posted image) from the tool palette.

Use the handle bars that appear around the object to increase the size.

User posted image

3) Play the animation: Control >> Play.

[link]

Notice the ball gets larger as it moves across the screen.

----------------------------------------------------------------------------

[size=7]CHANGING COLOR OVER TIME[/size]

Now I'll show you how to make your ball's color change over time.

1) With the properties palette visible, select the 'Color' tab.

User posted image

Select a tint color and set the transparency to 100%.

User posted image

3) Play the animation: Control >> Play.

[link]

Notice the ball gets larger and changes color as it moves across the screen.

----------------------------------------------------------------------------

[size=7]CONGRATS ON YOUR FIRST FLASH ANIMATION![/size]

Experiment with some other color options, size, rotation, and shapes. Get a good feel for how things work and with a little practice, you'll be coming up with some interesting animations in no time. Enjoy!

----------------------------------------------------------------------------

Here are some examples of what I've done with motion tweening:

[url=http://rlabajo.computed.net/flash/southpark.html]South Park Movie[/url]
[url=http://rlabajo.computed.net/flash/intro.html]Coming Soon Splash[/url]
[url=http://rlabajo.computed.net/]My Old Design Portfolio[/url]

----------------------------------------------------------------------------

Copyright ?2004 Xquizit
You are not authorized to copy or distribute any content from this tutorial.

Tutorial Comments

Showing latest 1 of 1 comments

what app did you use?

By theerinkal on Aug 23, 2008 12:23 pm

Tutorial Details

Author xquizit View profile
Submitted on Feb 14, 2006
Page views 9,218
Favorites 4
Comments 1

Tutorial Tags