Using this thoroughly explained, detailed flash lesson, you will see how to place any image to be the main using the action script code and mouse cursor. You have a five images in example...when you click on any image, it will become the main image! Using this lesson, you will also learn how to import any images into a flash library, how to after that, place it on the main stage, how to convert it into a Movie Clip Symbol, how to create instance name and much more!
Click on the image which you want to be main!
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)
