Flash tutorial animation

From TOI-Pedia


Flash Animation Tutorial

This Flash tutorial describes how to animate a simple movie and shows how to handle multiple movieclips. The final result will be a small animated puppet walking towards you. Our main character is called Johnny. It will use and explain several common animation techniques: Shape tweens, Motion tweens and movieclips.

Our final result will be our protagonist Johnny bouncing up and down towards us.


Prepration

To start this tutorial, we'll fire up Adobe Flash. Any version will do, although some features will not work in earlier versions. Once Adobe Flash is running; first create an empty new movie.


Step one: Bouncing (Shape Tween)

Johnny prefers to bounce. Why? It's one of the mysteries of life, and you'll have to accept it as a fact of life.

Step one involves animation what johnny will do when he bounces.

To create johnny we'll first draw a primitive circle

Create Circle


First, we'll insert another keyframe at frame 10, by right clicking the 10th frame in the Timeline panel in the top of the view.

Insert new frame

Next, we'll insert a try to manipulate the circle so it will seem that Johnny is crashed down to the ground. We will not move the circle, but just deform it; like it would when he's hit the ground.

Deforming

Deforming in flash is very similar to illustrator, so people used to illustrator will feel at home. Flash offers nearly the same selection tools as illustrator:

Flash Selectors
  • The selection tool (V shortcut)
  • The subselection tool (A shortcut)

In this step I've deformed the circle by scaling it down a bit vertically, and slightly distorting it at the bottom.

Your first animation!

Now we will create an animation for the first time! It's not very difficult:

  • select a frame between frame 1 and frame 10
  • From the bottom properties panel select Shape tween
  • Frames 1 to 10 will turn green: and an arrow is in place this means there is a shape tween between these frames
Create Shape tween

Congratulations, you've created your first animation. You can test it by hitting enter, it will show an example in flash. You can test more complex movies by hitting F12 on your keyboard. It might look something like this

This content requires Adobe Flash Player.


Looping

As you might notice, the movie is not looping very nicely. This is because it deforms and then ends. To fix this we will:

  • Select the first frame
  • Right-hand mouse click: Copy Frames
  • Select the 20th frame
  • Right-hand mouse click: Paste Frames
  • Now, select any frame between frame 10 and 20 and again select Shape tween from the properties bar
  • Frames 10 to 20 will turn green: and an arrow is in place this means there is a shape tween between these frames


Easing

Flash offers options to allow accelerated and decelerated animations. We will apply accelerated animation for the first 10 frames and then descelerated animation for frame 10 to 20.

  • Select frame 5
  • Choose -50 in the ease input box (ease in)
  • Select frame 15
  • Choose 50 in the ease input box (ease out)


We've now got a happy bouncing ball:

This content requires Adobe Flash Player.


Step two: Movieclips

Johnny is not yet bouncing up and down. To do this we actually need a Motion Tween. But motion tweens only work on objects called Movieclips. To do this we take following actions:

  • Select frame to 1 to 20
  • Right click -> Cut frames
  • From the menu Insert choose: Insert new symbol
  • Name: Johnny
  • Type: Movieclip
Create Movieclip
Johnny will now show in the library panel
You are now editting the movie clip Johnny

Now we can paste the frames:

  • Select the first frame
  • Right-hand mouse click -> paste frames

Making Johnny Move

Now we've created a movieclip of johnny making a bouncing movement. The next step is to actually make it move up and down. Since we already know that we also want this movie to loop we'll insert new keyframes at frame 10 and 20 (this will be so it will be synchronous to the other movie

But first, we're done editing the Johnny Movieclip and have to go back to the main stage.

 The main stage is what will show when you test your movie 
 (By for example pressing F12) 
 and what will show when you export your movie to SWF

We will do this by doing any of the following

  • In the Navigation Toolbar (under the timeline panel) click Scene 1

We're now back at the main stage you will notice that it's empty. This is because Johnny now resides in the MovieClip Johnny. And we first have to create an instance at the main stage. We'll do this by dragging johnny from the library and dropping him on the main stage.

  • select frame 10
  • right mouse click: Insert keyframe
  • select frame 20
  • right mouse click: Insert keyframe

Now that we've done that we've got copies of the first frame at frame 10 and 20. We will now move the johnny at frame 10 a few pixels down. Just drag the instance of johnny a few pixels down.

Motion tweening

Now we will add motion tween between frame 1 and 10 and frame 10 and 20.

  • select frame 5 (or any frame between frame 1 and 10)
  • From the properties panel select the option Motion tween
  • You will now notice that the inbetween frames have turned blue and yet again a blue arrow has appeared
  • Repeat this step for any frame between frame 10 and 20.
 You can also add easing to this part, 
 just as explained in the previous part (Shape tweening)

This content requires Adobe Flash Player.


Scaling from the back to the front

Now that we've done this, we're going to repeat the step of adding this to a movieclip. We want a movieclip of a bouncing Johnny and want to to move with a motion tween from the back to the front. Therefore:

  • Select all frames
  • Right Mouse Button Click -> Cut frames

To do this we take following actions:

  • Select frame to 1 to 20
  • Right click -> Cut frames
  • From the menu Insert choose: Insert new symbol
  • Name: Johnny_Bounce
  • Type: Movieclip
  • Select the first frame
  • Right-hand mouse click -> paste frames

We can now again go back to the main stage.

  • In the navigational bar: click Scene 1
  • Next add an instance of Johnny_Bounce to the stage.
  • In frame one: Scale it down (For example with free transform tool hotkey: b)
  • Insert a new keyframe at for example frame 150
  • Select your added keyframe
  • Scale johnny to large proportions and create an motion tween between frame 1 and frame 150 (Also an Ease In might be a could idea here to simulate the acceleration effect.

Frame Rate

The movie now looks a bit less fluent. To fix this we're going to raise the usual 'fps' (Frame per Second) to 24.

  • Select the background of the stage (thus select nothing)
  • The properties bar now shows a textbox 'fps'
  • Change the value from 12 to 24.

This will make the animation a bit more fluent and also faster.

Our movie will now look like this:

This content requires Adobe Flash Player.

Personal tools
Actions
Navigation
Tools