In this thoroughly explained, detailed lesson, I will show you how to jump from animation to animation using a frame jumping and a little action script code. Using this lesson, you will also learn how to create simple image animation, how to import any image into a flash stage, how to animate it, create Motion tween and much more! You can use this lesson, for any web site when you need to jump from one frame to another. Let's start!
Step 1
First, download two images that we 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 300 pixels and the height to 225 pixels. Select white as background color. Set your Flash movie's frame rate to 32 and click ok.
Step 3
Call the current layer image 1. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!
Step 4
Choose File > Import > Import to Library. In the file explorer window that appears, find a two images and Shift-click to select them all. Then click open. If you now open your flash library (Ctrl+L key) you will see two images that you just imported. See the picture below.
Step 5
Select the Selection Tool (V) and using the drag and drop technique, move the first image from the Library on the stage.
Step 6
While the image 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
After that, while the image is still selected, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.
Step 8
Click now on frame 15 and press F6 key. While you're still on frame 15, go to the Action Script Panel (F9) and enter this code inside the actions panel:
stop ();
Step 9
Go back now on the first frame, select the Selection TOol (V) and click once on the image to select it. After that, 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 10
Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appear.
Step 11
Create now a new layer above the layer image 1 and name it action 1. After that, click on frame 15 of layer action 1 and press F6 key. While you're still on frame 15, Select the Text Tool (A) and type somewhere on stage "go to frame 30". See the picture below!
Step 12
Create now the Invisible Button over the "go to frame 30" text. After that, select again the Selection Tool (V) and click once on the button to select it! After that, enter this code inside the actions panel:
on (release) {
gotoAndPlay(30);
}
Step 13
Create a new layer above the layer action 1 and name it image 2.
Step 14
Click now on frame 30 of layer image 2 and press F6 key.
Step 15
While you're still on frame 30 of layer image 2, move now the second image from the Library on the stage using the Selection Tool and drag and drop technique!
Step 16
While the image is still selected, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.
Step 17
Click now on frame 45 and press F6 key. While you're still on frame 45, repeat step 8!
Step 18
Go back now on frame 30 and repeat step 9!
Step 19
Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appear.
Step 20
Create now a new layer above the layer image 2 and name it action 2. After that, click on frame 45 of layer action 2 and press F6 key.
Step 21
While you're still on frame 45, select again the Text Tool (A) and type somewhere on stage "go to frame 1".
Step 22
Create now the Invisible Button over the "go to frame 1" text.
Step 23
After that, select again the Selection Tool (V) and click once on the button to select it! After that, enter this code inside the actions panel:
on (release) {
gotoAndPlay(1);
}
We're done now!
Have a nice day!
Download source file (.fla)
