Advanced Animation of an Image in Flash
In this tutorial you will learn how to create an advanced animation of a static image in Flash. The source file can be downloaded at the end of the tutorial.
Tutorial Details
Program: Flash CS5
Difficulty: All
Estimated Completion Time: 1 hr
Here we are taking the stage dimensions as 582×386 and the FPS is 25, as shown in the Figure below. To start with the tutorials download the Scene.Zip file that will provide you with the necessary files to be used in the tutorial.
• First we will import all the scene images to the library. To do that, choose File > Import from the main menubar and choose the images and import them on library.
1. Now place the scene image number 2 to the stage and convert to movie clip symbol. To do that, right click on the image > select convert to symbol > select movie clip. Name the symbol as ground. See the reference image below.
2. Now we will create mask effect to display the ground in the scene. We will edit the symbol. To do that, double clip on the symbol. Now insert 3 more layers and copy the same ground image to each layer. See the reference image below.
Now insert 4 extra layer above each layer to create mask shapes. See the reference image below.
3. Now we will create mask shapes. Create a circle on layer 2. You can use other shapes also to create a mask. Create other shapes on other blank layers which we insterted for masking shapes See the reference image below.
Insert an new key frame on frame 40. To that, select the frame 40 > press F6. See the reference image below.
Now apply shape tween. To do that, select any frame between first and last frame > Right click > Create shape tween. See the reference image below.
4. We have created these type of shapes at the end. make sure your masking shapes are covering the complete ground image. See the reference image below.
Now apply shape tween on all the mask shape layers. To do that, select any frame between first and last frame > Right click > Create shape tween.
Now apply mask. To do that, select the mask shape layer > Right click > Select mask. See the reference image below.
Now test you movie. The effect will look like similar to the reference image below.
5. Now insert 4 layers and name them as sky, center mountain, right mountain and left mountain. See the reference image below.
Then place images to the stage and arrange them as similar to the reference image.
6. Now convert these images to the movieclip or graphic symbol. To do that, select the image > right click > conver to symbol. Change all the images to the symbol one by one as given in the reference images below.
7. Now insert key frames on frame 30 and 40 on right mountain and left mountain layers. Then chenge to position of the left mountain image to the left out side the stage area. See the reference image below.
Now select the frame between frame 30 and 40 > right click >select create motion tween. See the reference image below.
Now go to the properties panel from the window menubar. Adjust ease value to 100 as given in the reference image below.
8. Now insert a new layer above the sky layer as given in the refernece image. See the reference image below.
Now select the frames as highlighted in the referenece image to frame 30. See the reference image below.
Now create a circle on the mask layer and postion the circle to the bottom of the sky image. See the reference image below:
Now insert key frame to frame 50. To do that, select frames > press F6 key. See the reference image below.
Select the mask shape on frame 50 and increase the size of the circle to cover the complete image. See the reference image where the circle has been shown as circle outline on the right side.
9. Now apply shape tween. To do that, select any frame between 30 and 50 frame > Right click > Create shape tween. See the reference image below.
Now increase the size of the sky image on frame 30. To do that, select the image on frame 30 > press ctrl + alt + s key > set scale value to 150%. See the reference image below.
Now select the image on frame 30 > go to the properties panel > choose alpha from the color drop down menu > set alpha value to 0%.
10. Now insert a new layer above the ground layer. See the reference image below.
Place the home image to the stage and covert it to movie clip symbol. See the reference image below.
11. Now insert key frames on frame 50, 55, 60, and 65. See the reference image below.
Now select the frame between frame 50 and 65 > right click >select create motion tween. See the reference image below.
Now go to the properties panel from the window menubar. Set ease value to -100 between frame 50 and 55, Set ease value to 100 between frame 55 and 60, and Set ease value to -100 again between frame 60 and 65 as given in the reference image below.
Now we will create a bouncing effect on the home image. To do that, on frame 50 change the position of the home image to the top outside of the stage. On frame 55 home will be on the exact position of the scene. On frame 60 change the position to the 100 px up. At last, on frame 65 home will be on the exact position of the scene.
12. Now we will create a dust effect. To do that, insert a layer above the home layer. See the reference image below.
Go to the Insert menu > Select new symbol > select movie clip. See the reference image below.
13. We will create a shape using brush tool something like given image below.
Now insert a key frame on frame 14 and change into the small shape as given below
Now select the frame between frame 1 and 14 > right click >select create motion tween. See the reference image below.
Now insert a layer above the current layer and then insert a key frame on frame 15. Press F9 and wrtie the code: stop();. See the reference image below.
14. Now we will apply blur filter. To do that, go to the properties panel > select filters.
Now Add blur filter. Set the Blur X and Y value to 8 and quality to high.
Now set the key frame to frame 55. Copy and paste many copies of the dust symbol. Now randomly position these symbols as given in the image below.
15. Now insert a layer above the dust layer and then insert a key frame on frame 55. See the reference image below.
Then place the image of the ground part. See the reference image below.
16. Now insert a layer above the ground part 2 layer and then insert a key frame on the last frame. Press F9 and wrtie the code: stop();. See the reference image below.
