In this tutorial, I will show you how to place a image on the main position using the action script in flash. You have five picture which are placed one above the other. When you click on any picture, they will become the main image. Let's go!

Step 1

Start flash. Press Ctrl+J key on the keyboard (Modify > Document) and set the width of your document to 350 pixels and the height to 300 pixels. Select white as background color and click. After that, set your Flash movie's frame rate to 12 fps and click ok.

Step 2

Downlaod my images, to quickly create this tutorial. After you have downloaded my images, unzip the zip file and place that images on some folder.

Step 3

Go back in flash and choose File > Import > Import to Library. In the file explorer window that appears, find the five images (image1, image2, image3...) and Shift-click to select them all.Then click open. If you now open your flash library (Ctrl+L key) you will see all five images that you just imported. See the picture below.



Step 4

Take the Selection Tool (V) and using the drag and drop technique, move the all images from the library on the stage, and place it like it is shown on the picture below.



Step 5

Take again the Selection Tool (V) and select only the first image.



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



Step 6

While the image is still selected, go to the Properties Panel (Ctrl+F3) below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip picture1_mc.See the picture below.



Step 7

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



Step 8

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



Step 9

While the new made button is still selected, go to the Action Script Panel (Shortcut key: F9) and enter the following action script code inside the action script panel:

on (release, rollOut, dragOut) {
stopDrag();
}
on (press, release, dragOver, dragOut) {
_root.x +=4;
_root.picture1_mc.swapDepths(_root.x);
}

We're done with the first image. Let's go to another image.

Step 10

Go back on the main scene (Scene 1).



Step 11

Take again the Selection Tool (V), click once on the second image and press again F8 key (Convert to Symbol) to convert this image into a Movie Clip Symbol. See the picture below.



Step 12

While the new made Movie Clip is still selected, go again to the Properties Panel (Ctrl+F3) below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip picture2_mc.See the picture below.



Step 13

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

Step 14

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



Step 15

While the new made button is still selected, go to the Action Script Panel (F9) and enter the following action script code inside the action script panel:

on (release, rollOut, dragOut) {
stopDrag();
}
on (press, release, dragOver, dragOut) {
_root.x +=4;
_root.picture2_mc.swapDepths(_root.x);
}

We're done with the second button. Now, like we have created the first two buttons, create all other buttons. Only difference, is that you must use another instance name (picture3_mc, picture4_mc....) and apply that changes in action script. That's it!

Enjoy!

Download source file (.fla)

discuss this topic to forum