How to do Flash Animation - Flying Jetpack Tutorial
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 test out its flight with simple code. You will see that creating a flash animation is not that hard after all.
At least basic knowledge of Flash is required to follow the tutorial smoothly.
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.
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.
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();
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 the 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 the Flash animation. Click and hold mouse to accelerate up: