How to Make a Flash Animation in Adobe Flash Professional / CC

This tutorial covers a step-by-step process on how to make Flash animation. We will draw a jetpack with a thrusting animation in Flash and give it vertical flight with some simple actionscript code.

How to do Flash Animation!
How to do Flash Animation!

The actionscript code is short, giving just vertical mouse control over the animation. So you are free to experiment with additional code for horizontal movement, and even add more animation. You will see that creating a simple flash animation is not that hard after all. So give it a try!

At least basic knowledge of Flash is required to follow the tutorial smoothly. But you can learn from this Flash animation tutorial, even if you are an absolute beginner. Watch the video for a quick preview.

Download Flash files

Watch the Video:

Easy Flash Animation

Step 1)

Start Adobe Flash and create 3 Layers:

One for the background, one for the jetpack and one for Actions.

Put any kind of simple background.


Step 2)

In the layer Jetpack, draw a vertical rectangle shape and convert it to a Symbol. Give it any name.

The bottom section here is what will become of the rectangle.

The top 2 points of the rectangle should be stretched apart to make the top part wider and the bottom 2 points should be brought closer to each other.

With the black cursor, slightly curve the left and right sides.

Curve towards the bottom at the top.

And curve upwards at the bottom.

Now the top part.

Select the line tool and from both sides draw 2 vectors and connect them. It will look like a cone.

Now use the black cursor tool once more and curve these 2 lines to make them more round.

Important: Using the bucket tools, fill in these shapes with any colour(I used white).

Again with the line tool draw 2 straps for the rocket.

Fill them with a very dark gray colour.

If you want you can slightly curve the left of these straps with the black cursor tool, as shown in the picture.

Make the top area red coloured as in the picture.

Select the inner red shape with the black cursor tool, copy it(Command + C), then right click outside it -> paste in place. This will create a shape identical to it.

Keep the shape selected and go to Modify -> Shape -> Expand Fill… as shown in the picture.


Choose inset and use 5.

You will notice that the new Shape has shrunk. Give it a white colour.

Repeat these steps with the new, white shape.

When you get the new shape give it a gradient fill – exactly as shown in the picture:


Now move on to the bottom section.

Fill in the white sections with a linear blue gradient exactly as shown in the picture:


In case the lines by any chance aren’t straight, use the gradient tool to align them properly.


Convert this whole drawing into another symbol and add the following filters to give it a nice effect.


Step 3)

Convert that to a new symbol once more. It will look like this.

In this new symbol, copy and paste the inner symbol to get 2 of these tanks.


If you’d like you can use the transform tool to slightly rotate the tanks to their co-responding directions.

Add a new layer and put it behind the tanks’ layer. Lock the tanks’ Layer and in the new Layer, draw 2 black rectangles to represent the straps.

Now, select both tanks and give them an Adjust Color filter with a Contrast value of 24.


And once again, convert this whole thing to yet another new Symbol and call it Jetpack. Finally, this is the main Symbol. Insert a keyframe on frame 2. Create a new Layer with 2 empty keyframes.


On those 2 empty keyframes, right click -> Actions and write in stop();


Step 4)

Now, on to the fire animation.

In the Jetpack symbol, on keyframe 2, right click on the object and press Duplicate Symbol. Give it a name like mcAnimation.

Duplicate its inner symbols 2 more times until you get to the one with 2 layers(Where you drew the straps).

Here, select the tank symbol on the left and duplicate it as well and call it PartNew.

Now, select the tank on the right and right click -> Swap symbol and choose PartNew.

It is IMPORTANT to follow these steps accurately.

Go inside Animated Tank and create a new Layer called Fire.

Choose the deco tool.

In the preferences use these under Fire Animation:


Just below the tank, in the layer fire, click with your mouse.


And at the end you will get 70 frames.

You will need to remove most of them.

Select the first 50 or so, right click -> Remove frames.

Add a regular frame in the Tank layer on the frame the fire ends.

Now select the “Edit multiple frames” icon as in the picture:


Click anywhere on the stage outside the fire and press Control + A.

This will select all frames.

Now, using the Transform tool, rotate the fire towards the bottom and position it exactly below the jetpack’s tank.

Step 5)

Go back to the stage.

If the jetpack is too big, using the transform tool and holding down shift, or in the properties panel, resize it.

This is what it should look like:


Step 6)

The last step involves writing some actionscript code to test it all out.

In the main stage, give the jetpack instance the name mcJetpack.

In the actions layer, right click -> Actions and paste in the following code:

var mouseDown:Boolean = false;
var speed:uint = 4;
const DOWN_Y:uint = 300;
const UP_Y:uint = 100;
mcJetpack.x = stage.stageWidth / 2;
mcJetpack.y = DOWN_Y;
stage.addEventListener(MouseEvent.MOUSE_DOWN, mdh);
stage.addEventListener(MouseEvent.MOUSE_UP, muh);
addEventListener(Event.ENTER_FRAME, efh);
function mdh(event:MouseEvent):void
    mouseDown = true;
function muh(event:MouseEvent):void
    mouseDown = false;
function efh(event:Event):void
    if (mouseDown)
        if (mcJetpack.y > UP_Y)
            mcJetpack.y -= speed;

        if (mcJetpack.y < DOWN_Y)
            mcJetpack.y += speed;


So now, using the mouse button you can fly up with the jetpack and activate its fire animation.

Hint: You can put a character with the jetpack as shown in the example:

Simple Flash Animation

Check out this simple Flash animation below. Click and hold mouse to accelerate up:


I hope you learned something from this Flash animation tutorial. Try modifying the code to make the character move in other directions. See, you can learn some actionscript programming here too! Check out this actionscript programming tutorial for more.

Add this post to your Website, Blog, or Forum:

<a href= "" target="_blank">Flash Jet Pack Animation</a>

If you liked this Flash tutorial, please share with your friends!

Leave a Comment

Your email address will not be published.