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
Watch the Video:
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.
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.
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
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.
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.
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.
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.
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();
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.
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:
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;
mouseDown = true;
mouseDown = false;
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:
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.
If you liked this Flash tutorial, please share with your friends:
You might also be interested in more Flash tutorials:
Add your Comments Here: