Animated Car Banner in Flash CS5

pen a new flash file. Choose Window > Properties from the main menubar the PROPERTIES panel is
displayed as shown in figure below

Choose the Edit button under the PROPERTIES area in the panel, the Document Settings window is
displayed. Set the dimensions as 728(WIDTH) and 300(HEIGHT) and choose the OK button to make the
changes.
2. Rename the existing layer as buildings and choose File > Import > Import to Library from the
main menubar and import the files downloaded at the starting of the tutorial.
3. Choose Window > Library from the main menubar; the LIBRARY panel is displayed. Pull the
building images to the stage area and align it as shown in Figure below.



4. Select the image and choose Modify > Convert to Symbol from the main menubar and name
this movieclip asbuilding_animation.
5. Double-click on the movieclip and select the building image and create a moviclip again and
name it as building. Rename the layer as anim_building.
6. Select frame 460 and add a keyframe. Select the building movieclip and open
the PROPERTIES panel and se the X value to -1450. Publish the file to see the animation. If at
any point of time you find a jerk in the animation please adjust the position and frames of the
building movieclip accordingly.
7. Go to the main stage area and create a new layer named road. Choose the Rectangle Tool from
the Tools panel and create a box at the bottom of the building area and align it as shown in
Figure below. Make sure that the color of the road is set to #171717.



8. Next, create a new layer named road strip and create a grey and white rectangular pattern
using the Rectangle Toolfrom the Tools panel, as shown in Figure below. Make sure that the
length of the road strip pattern is almost equal to that of the buildings.

9. Select the road strip and choose the Free Transform Tool from the Tools panel and distort the
road strip as shown in Figure below. Make sure that the color of the grey part in the strip
pattern is similar to that used in road.

10. Choose Modify > Convert to Symbol from the main menubar and name it as road strip. Select
the movieclip and choose Modify > Convert to Symbol again and name it as road strip
animation. Place this animation in the center of the road as shown in Figure below.

11. Animate the road strip as you did for the building movieclip. But make sure that the speed of
the road strip is double as compared with the moving speed of the buildings. Publish the flash
file to see the transition in the animation.
12. Next, move back to the main stage area and create a new layer and name it as logo. Drag the
logo.jpeg file from the LIBRARY panel and place it in the scene by first scaling it down as shown
in Figure below.


13. Create a new layer in the main stage area and rename it as footpath. Create the footpath using
the Rectangle Tool as shown in Figure below. Make sure to match the length of the footpath
series with the road strip.


14. Align the foothpath as shown in Figure below.

15. Animate the foothpath similar to the road strip with the same speed. Publish the flash file to see
the effect.
16. Next, in the main stage area create a new layer and rename it as car. Choose Modify > Convert
to Symbol and rename it as car. Double click on the car movieclip and create a new layer and
rename it as tyre_front. Zoom in the to the front tyre area in the screen and create a pattern
using the Rectangle Tool as shown in Figure below.


17. Make this pattern as a movieclip and renmae it as tyre_mask. Double click on this movieclip and
rename the existing layer as bg and selec the cross pattern again and choose Modify > Convert
to Symbol from the main menubar and rename it as spokes. Choose Window > Properties from
the main menubar and add blur filter to it.
18. Next, create a new layer over it and rename it as mask. Create an oval shape exactly the shape
of the rim of the car as shown in Figure below.


19. Activate the bg layer and create keyframes at frames 3 and 6. Rotate the spokes movieclip at
frame 3 by around 180 degrees and add motion tween between the keyframes.
20. Next, activate the mask layer and chose frame 6 and press F5 to extend the frames. Now, right
click on the mask layer and choose Mask from the drop-down list, spokes will be visible only in
the rim area as shown in Figure below.


21. Similarly, add the same effect to the rear wheel. Move back to the main stage area and double
click on thecar_animation movieclip and create a keyframe on frame number 40. Move the car
movieclip a bit in the top right position. Next, add another keyframe at frame number 75 and
place the car in the bottom right position. Add one more keyframe at frame 115 and place the
movieclip in the top left position. Add the last keyframe on frame 190 and place the moviclip at
the same position as it was on frame1. Add motion tween between the all the keyframes.
22. Position the car on the main stage area as shown in Figure below.

23. Publish the flash file to see the banner animation.
24. You can also use this banner animation for creating an banner advertisement for mercedes
benz. To do so, create one more layer in the stage area and rename it as text and add it in the
scene and make it fly in the stage area and then stop as shown in Figure below.

25. Publish the flash file to get the animation as shown below.










TO CREATE MOTION TWEEN
Steps to Follow :
Create a Symbol
First draw an object for Motion Tween.
Like in the above demonstration I used heart.
Select the object you have drawn and press F8 to convert this object to a Symbol.
In the Symbol window which appears now. Name this object heart_mc, choose Movie clip
behavior and bottom center square for registration. Press OK.

Create a Motion Tween
Double click on the Layer and type "Heart".
Select Frame 30 and press F6 to insert a keyframe.
Select Frame 15 and press F6 to add another keyframe.
With the playhead still on Frame 15, hold the Shift key to move the heart_mc in a straight line,
and drag the heart_mc up.
Select any frame between Frames 2 and 14 and select Motion from the tween pop-up menu in
the Property inspector.
Select any frame between Frames 16 and 29 and select Motion from the tween pop-up menu in
the Property inspector.
Press Ctrl+S to save your changes.
Create a Shape Tween
Insert a new Layer and call it "Shadow".
Select the first frame in the Shadow Layer, draw borderless shadow relevant to your Symbol.
If your Color Mixture Window is not open, press Shift+F9 to open it.
Select Eyedropper tool from your Tool box. Click it on your shadow. Now go to Color Mixture
Window and type 25% for Alpha value.


Select Frame 30 and press F6 to insert a keyframe, then select Frame 15 and press F6 to insert
a keyframe.
With the playhead on Frame 15, select the Free Transform tool. Slightly reduce the size of the
Shadow.
With Frame 15 still selected, select the Eyedropper tool in the toolbar, and then click on your
shadow object. Now go to Color Mixture Window and change Alpha value to 10%.
Select any frame between Frames 2 and 14 on the Shadow layer. In the Property inspector,
select Shape from the Tween pop-up menu.
Select any frame between Frames 16 and 29 on the Shadow layer. In the Property inspector,
select Shape from the Tween pop-up menu.
Now its time for Final touch up
Select Frame 1 of the Heart layer. Press F6 to add a keyframe. A new keyframe is added, and
the playhead moves to Frame 2.
Go back to frame 1, select the Free Transform tool from your toolbox.
Select the transformation center point (the small circle near the center of the movie clip) and drag
it to the bottom of the heart. On the Stage, drag the upper middle transform handle down to
slightly compress the heart shape.
Right-click Frame 1 of the heart layer and select Copy Frames from the context menu. Go to 29th
frame and press F8 to insert a new keyframe. Right-click 29th frame and choose Paste Frame
from the context menu.
Click on the Stage, away from any objects. Type "28" in the Frame Rate text box of your Property
inspector window.
On the heart layer, select any frame between Frames 2 and 14. Then in the Property inspector, in
the Ease text box, type 100. Similarly select any frame between Frames 16 and 29 in the same
layer, then go back to Property inspector window and type -100 in the Ease text box. Do the
same thing to the Shadow layer.
Press Ctrl+Enter to view your animation.
Peeling Sticker Effect

Here we are taking the stage dimensions as 300x400 and the FPS is 24, as shown in the Figure below.
To start with the tutorials download the source.rar file that will provide you with the necessary files to be
used in the tutorial.

1. First import the downloaded used images from the source. To do that, Go to the File menu >Select
Import > Select Import to Library. See the reference image below.

2. Before starting we already have layer 1, now name the layer as sticker front. Drag
the front_Sticker_img from the library on to the stage and align it to the center of the stage. Then
Convert the image to movie clip. To do that, Select the image > Right click > Select the Convert to
Symbol > Select Movie Clip and Name the symbol as sticker front. See the reference image below.

3. Insert a new layer and name it as sticker back. Drag the back_Sticker_img from the library on to the
stage and align it to the center of the stage. Then Convert the image to movie clip. To do that, Select the
image > Right click > Select the Convert to Symbol > Select Movie Clip and Name the symbol
as sticker back. See the reference image below.

4. Now select the sticker back, and then flip it vertical. To do that, Go the Modify menu > Select
Transform > Select Flip Vertical. See the reference image below.



Now apply skew on it. To do that, Open the Transform panel from the window menu. Select
Skew and set value to 162 degreeand -18 degree. See the reference image below.



Select the sticker back symbol, and position it to the top outside of the stage. Place the image according
to the given reference image below.


5. Now insert a new layer with name as shadow. Create a shape same as green outline given in the
reference image in below.


6. Now insert a new layer with name as mask. Create a box shape on the top of the sticker front image
as given in the reference image in below.


7. Now select frame 35 of all layers and Press F5 to insert new frame. See the reference image below.


Now select the sticker back on frame 35 and Press F6 to insert a key frame. Then change the position
of the image to the bottom as given in the reference image below.


Now select any frame between frame 1 and frame 35, then Right click > Select Create Motion Tween.


8. Now go to the shadow layer. Open the color panel from the window menu. Now select the shape and
select the liner gradientfrom the color panel as shown in the reference image below.


Now select the white color bucket labeled as 1 in the reference image. Then choose black color, refer
label 2 in the given reference image below, and set alpha to 0%. See the reference image below.


9. Take the Gradient Transform Tool from the tool bar. See the reference image below.


10. Select the shape using Gradient Transform Tool, then hold down the small circle and rotate it to 90
degree angle. See the reference image on the left.

11. Hold down the Small Square and drag to up. Do not cross the center point. See the reference image
on the Center.

12. And hold down the center of the gradient and drag to the bottom exactly as given in the reference
image on the Right.


13. Select frame 35 of shadow layer and Press F6 to insert a key frame. Select the shape using arrow
tool from the toolbar and move the shape to the bottom exactly as given in the reference image below.



Take the Gradient Transform Tool from the tool bar. See the reference image below.


Hold down the center of the gradient and drag to the top of the shape exactly as given in the reference
image on the Right.


14. Now select any frame between frame 1 and frame 35, then Right click > Select Create Shape
Tween. See the reference image below.

15. Go to the mask layer and Select frame 35 on the same layer and Press F6 to insert a key frame.
Move the mask shape to the bottom to cover the sticker front image complete. Do it exactly as given in
the reference image below.

Select any frame between frame 1 and frame 35, then Right click > Select Create Shape Tween.
16. Now we will apply mask. To do that, Right Click on the mask layer > Select Mask. See the
reference image below.

Now select the sticker front and sticker back layer by pressing shift key. Then Drag them little up and left
side over the shadow layer. It will mask you other layers also. See the reference image below.

17. Select frame 35 on the all layers and Press F6 to insert a key frame. Again Select frame 85 on the all
layers and Press F6 to insert a keyGo to the frame 1, and Select the key frame of three layers except of
sticker front layer, then Right click > Select Copy Frames. See the reference image below.

Go to the frame 50, and Press F6 key to insert key frame on all layers.

Go to the frame 85, Press F6 key to insert key frame on all layers. Then Select the key frame of three
layers except of sticker front layer, then Right click > Select Paste Frames. See the reference image
below.

18. At last apply shape tween and motion tween on the layers as given in the reference image below.


Publish the file and see the effect as shown in the Figure below.




Flash Ripple Effect
STEPS TO FOLLOW
Create a Graphic Symbol.
Import an image to your work area upon which you would like to create ripple effect.
Press F8, to convert this image to a symbol.
Name this Symbol "girl_gr" and choose graphic behavior. Press OK.
Name this Layer "bg".
Select girl_gr and choose Alpha 99% from color list box in your property window.
Create a Movie clip.
Press Ctrl+F8, to create Ripple movie clip.
Name this symbol "ripple_mc" and choose Movie clip behavior. Press OK.
Drag girl_gr to your working area from Library (ctrl+L).

Select girl_gr and choose Alpha 0% from color list box in your property window.
Insert Keyframe (F6) into the 5th frame.
Remaining on the 5th frame, Select girl_gr and choose Alpha 99% from color list box in your
property window.
Now select 1st frame, choose Motion Tween from Tween list box in your property window.
Insert Keyframe into 15th frame and later to 20th frame.
Remaining on the 20th frame, Select girl_gr and choose Alpha 0% from color list box in your
property window.
Select 15th frame, choose Motion Tween from Tween list box in your property window.
Insert a new layer above this layer, call it "Layer 2".
Select frame 1 of Layer 2 and draw a borderless square or rectangle depending on the type of
ripple effect you want.
In the above demonstration, I have used rectangle with 15 pix as its height.
Place this vector wherever you want the ripple to begin. Make sure that the vector belongs only to
layer 2.
Insert Keyframe into the 20th frame of Layer 2.
Place the vector wherever you want the ripple to end or ebb.
In the above demonstration, I have placed it right at the bottom and reduced the height to 5 pix.
Select 1st frame, choose Shape Tween from Tween list box in your property window.
Right click on Layer 2 and select Mask.
Save (ctrl+S). Make it a habit to save your work after each step you do.
Insert Ripple Movie Clip onto Scene 1
1. Now go back to Scene 1.
2. Insert a new layer above bg layer and call it ripple1.
3. Insert new Keyframe (F6) into the 10th frame of ripple1 layer.
4. With 10th frame of ripple1 layer selected, Drag ripple_mc movie clip onto the working area. Place
it appropriate to girl_gr. Make sure that this movie clip is placed exactly where you had placed
your square or rectangular vector in ripple_mc Movie clip.
5. Insert frame (F5) into the 30th frame of ripple1 layer. This is just to make sure that the ripple
_mc runs only for 20 frame.
6. Insert another new layer above ripple1 layer and call it ripple2
7. Insert Keyframe into the 20th frame of ripple2 layer.
8. With 20th frame of ripple2 layer selected, Drag ripple_mc movie clip onto the working area. Place
it appropriate to girl_gr just the way you did in step 4.
9. Insert frame (F5) into the 40th frame of ripple1 layer. This is just to make sure that the ripple
_mc runs only for 20 frame.
10. Insert frame (F5) into the 40th frame of bg layer.
Here you go!! Your movie is ready. Press Ctrl+Enter to view your movie. Wasn't it simple.
Okay now few things to Note - In the above demonstration I have created a subtle ripple effect. If you
want the ripples to be more prominent, you can add few more layers of ripple_mc movie clip and reduce
the Keyframe differences between layers. Like in the tutorial above, ripples appear every 10 frames. You
can reduce this period and make it appear every 5 frames, which would make the ripple effect more
prominent.
Working with layer
teps to follow:
Open a new flash file (Ctrl+N).
New Document window will appear
Select General panel and choose Type: Flash Document . Press OK.
If your timeline window is not open, press (Ctrl+Alt+T).
Now you can see a single Layer called "Layer1" in your timeline Window.


Create a Shape Tween on Layer1. Similar to the one in Shape Tween Tutorial.
Single click on add new layer button.


A new layer gets added. By default it will be named "Layer 2".
Create a Motion Tween on Layer 2. Similar to the one in Motion Tween Tutorial. After creating
two layers, your timeline will look something like the one shown below.


Now press (Ctrl+Enter) to view your motion tween.