Toxiclab.org

Advanced motorcycle animation with sound and a little AS code

5.11.2008, 17:30
Submited in: Flash | Total Views: 18528

In this step by step and advanced flash lesson, you will see how to create very modern motorcycle animation using a little AS code. You can use this animation for some Moto Club, flash header, banner. Using this lesson, you will also learn how to import motorcycle photo into a flash stage, how to animate it and much more!



Step 1

First of all, download a two pictures that you have to use for this lesson!



Step 2


Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 318 pixels and the height to 158 pixels. Select white as background color. Set your Flash movie's frame rate to 38 and click ok.



Step 3

Choose File > Import > Import to Library. In the file explorer window that appears, find a two pictures (pictures that you just saved in step 1) and Shift-click to select them all. Then click open. If you now open your flash library (Ctrl+L key) you will see a two pictures that you just imported. See the picture below.



Step 4

Take now the Selection Tool (V) and double click on layer 1 to rename its name into a background.



Step 5

Take again the Selection Tool (V) and using the drag and drop technique, move the picture of background from the Library on the stage!

Step 6

While the picture of background is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Step 7

Click now on frame 100 and press F5 key.

Step 8

Create now a new layer above the layer background and name it motorcycle.

Step 9

Take now again the Selection Tool (V) and move a picture of motorcycle from the Library on the stage!

Step 10

While the picture is still selected, take the Free Transform Tool (Q), press and hold down Shift key and do like it is shown on the picture below!



Step 11

After that, take again the Free Transform Tool (Q) and decrease you picture a little like it is shown on the picture below!



Step 12

Place now a picture of motorcycle on the position like it is shown on the picture below!



Step 13

While the picture of motorcycle is still selected, press F8 key (Convert to Symbol) to convert this picture of motorcycle into a Movie Clip Symbol!



Click now on frame 15 and 25 and press F6 key.

Step 14

Go back now on frame 1, take again the Free Transform Tool (Q) and decrease a picture of motorcycle like it is show on the picture below!



Step 15

After that, place that picture on the position like it is shown on the picture below!



Step 16

Take now the Selection Tool (V) and click once on the picture to select it. Then, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.



Step 17

After that, take again the Selection Tool (V) and click again once on the picture to select it. Then, go again to the Properties Panel (Ctrl+F3) below the stage. After that, select Filters tab from the left side. Click then on the plus icon and select the Blur filter. Make the adjustments as follows:



Step 18

Select now frame 15, take again the Selection Tool (V) and click again once on the picture to select it. Then, go again to the Properties Panel (Ctrl+F3) below the stage. After that, select Filters tab from the left side. Click then on the plus icon and select the Blur filter. Make the adjustments as follows:



Step 19

Right-click anywhere on the gray area between frame 1 and 15 and frame 15 and 25 on the timeline and choose Create Motion Tween from the menu that appears. See the picture below.



Step 20

Select now frame 25, take the Selection Tool (V) and double click on the Movie Clip (motorcycle) on the stage. You should now be inside the Movie Clip.



Step 21

While the picture is still selected, press again F8 key (Convert to Symbol) to convert this picture again into a Movie Clip Symbol.



Step 22

Click now on frame 120, 125, 130, 135 and 140 and press F6 key.



Step 23

Go back now on frame 125, take the Selection Tool (V) and click once on the picture to select it. Then, go again to the Properties Panel (Ctrl+F3) below the stage. After that, select Filters tab from the left side. Click then on the plus icon and select the Adjust Color. Make the adjustments as follows:



Repeat this process also for frame 135.

Step 24

Right-click anywhere on the gray area between frame 120 and 125, frame 125 and 130, frame 130 and 135 and frame 135 and 140 on the timeline and choose Create Motion Tween from the menu that appears. See the picture below!



Step 25

Click now on frame 180 and press F5 key.

Step 26

GO back now on the main scene (Scene 1).



Step 27

To make this animation more powerful, create a new layer above the layer motorcycle and name it sound. Then, find somewhere any adequate sound and import it into a flash library. Then, select the first frame of layer sound and using the drag and drop technique move the sound from the flash library on the stage.

Step 28

Create now a new layer above the sound and name it action script.

Step 29

Then, click on frame 100 of layer action script and press F6 key. After that, go to the Action Script Panel (F9) and enter this code inside the actions panel:

stop();

Now, test your Movie and enjoy!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials