Using this tutorial, you will learn how to create advanced picture animation using the action script code. You will not see the picture, until you don't move the mouse over it. After that, the picture animation will start. You can use this complex animation when you want to hide some object, and when you have moved your mouse over it, unhide it. You will also learn how to apply flash technique using the rectangles to hide the object and much more! Let's go!

Move your mouse quickly over the picture to see it!



Step 1

First of all, find any picture on internet or somewhere that you will use for this example. You can also, if you like download my picture.



Step 2

Open a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the dimensions of your document as the dimensions of picture. Select any color as background color and set your Flash movie's frame rate to 26 fps. Then, click ok.

Step 3

Choose File > Import > Import to Stage (Shortcut key: Ctrl+R) and import the picture into a flash stage.

Step 4

After that, while the picture 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.



Now you have aligned a picture with the background.

Step 5

While the picture is still selected, press F8 key (Convert to Symbol) to convert this picture into a Graphic Symbol. See the picture below.



Step 6

Double click on layer 1 to rename its name in picture. After that, create a new layer above the layer picture and name it animation.

Step 7

Lock layer picture, select layer animation and take the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose white color and draw a “rectangle” about 100x100 on the left top side of picture. See the picture below.



Step 8

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



Step 9

Double-click on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip.



Step 10

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



Step 11

After that, press F6 key then times. See the picture below.



Step 12

Then, click on every second frame except last two frames and press delete key on the keyboard.



Step 13

Then, click on frame 15 and press F6 key. While you're still on frame 15, take the Selection Tool (V) and click once on the rectangle (Movie Clip). 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 14

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



Step 15

Go back on the first frame and open the Action Script Panel (F9).Then, enter this code inside the actions panel:

stop();

Step 16

Go back on the main scene (Scene 1).



Step 17

Take again the Selection Tool (V) and click once on the rectangle (Movie Clip) to select it. Then, go again to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip whatever you like. I have called my “rectangle1”. See the picture below.



Step 18

Duplicate the rectangle as many time as you don't cover the all picture. See the picture below.



Note! For every other rectangle, you have to change the instance name. For example rectangle1, rectangle2, rectangle3...

Step 19

Create a new layer above the animation layer and name it invisible button.



Step 20

After that, create the invisible buttons over the every rectangles. See the picture below.



Step 21

Click on the first invisible button and go to the Action script panel (F9) below the stage. Then, enter this code inside the actions panel:

on (rollOver) {
tellTarget ("/rectangle1") {
play();
}
}

Step 22

Click on the second invisible button and enter this code inside the actions panel:

on (rollOver) {
tellTarget ("/rectangle2") {
play();
}
}

Only difference between this two code is rectange1 and rectangle2. Repeat this code for every other invisible button until you don't came to the end.

Enjoy!

Download source file (.fla)