Follow us:

 

Skip Navigation Linkssimple_flash_animation

New Tutorials >> Flash Tutorials >> How to Make a Flash Animation in Adobe Flash Professional / CC

How to do Flash Animation!

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.

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 of what to do.

 

Download Flash files

jetpack_files.zip

 

Watch the Video:

 

 

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.

Picture 

 

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.

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:

Picture 

 

Now move on to the bottom section.

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

Picture 

 

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

Picture 

 

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

Picture 

 

Step 3)

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

Picture 


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

Picture 

 

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

Picture 


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.

Picture 

 
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.

Picture 

 

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

Picture 

 

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:

Picture 

 

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

Picture 

 

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:

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:

Picture 

 

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:

import flash.events.MouseEvent;
import flash.events.Event;

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;
mcJetpack.gotoAndStop(2);
}

function muh(event:MouseEvent):void
{
mouseDown = false;
mcJetpack.gotoAndStop(1);
}

function efh(event:Event):void
{

if (mouseDown)
{

if (mcJetpack.y > UP_Y)
{

mcJetpack.y -= speed;
}

}

else
{

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:

jetpackSWF

 

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.

 

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

 

You might also be interested in more Flash tutorials:

Rollover Buttons

 

Text Animation

 

Flag Animation

 

Ocean Animation

 

Beginner Game

 

 

 

Add your Comments Here:

SharePoint Help  
Looking for recommendations...

How to

There is no recommended article for this page. Try searching help and community.
This shouldn't take long.

Community

Can't find what you are looking for? Post your question to the Office 365 Community
Sorry, we couldn't find an answer. Post your question to the Office 365 Community
Sorry, the help service is down, but you can find answers at Office support