Toxiclab.org

Advanced Female Photo Flash Menu

9.7.2010, 12:19
Submited in: Flash | Total Views: 11692

Learn how to create advanced female photo flash menu using the action script code and some speical flash tips and tricks. This photo menu can be used for any web site. Using this lesson you will also learn how to import any photos into a flash library, how to apply action script code on any movie clip, how to create invisible button and much much more. Let's start!

Example:



Step 1

First, download female photos 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 450 pixels and the height to 113 pixels. Select any color as background color. Set your Flash movie's frame rate to 35 and click ok.

Step 3

Call the current female menu. 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 three photos (photo 1, photo 2...) and Shift-click to select them all. Then click open. If you now open your flash library (Ctrl+L key) you will see three photos that you just imported. See the picture below!



Step 5

Select now the Selection Tool (V) and using the "drag and drop" technique, move all photos from the Flash Library and place it on the flash stage like it is shown on the picture below!



Step 6

Select the Selection Tool (V) again and select only one photo. After that, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 7

While the new made Movie Clip is still selected, go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip photo1_mc. See the picture below!



Step 8

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



Step 9

While the photo is still slected, hit again F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 10

Click on frame 20 and press F6 key. While you're still on frame 15, select the Selection Tool (V) and click once on the photo to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage. Select FIlters tab on the left side, click on plus icon and choose Adjust Color. Make the adjustments as follows:



Step 11

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 12

Go back on frame 5 and hit F6 key. After that, hit F6 key six times.



Step 13

Select frame 6 and move yout photo a little up using the arrows key on the keyboard. After that, select frame 7 and move it a little down. Do this also for frame 8,9,10 and 11.

Step 14

Go back on the previous scene (Scene 1).

Step 15

Create a new layer above the layer photos and name it Invisible Button 1.

Step 16

Select invisible button layer and create the invisible button over the first photo like it is shown on the picture below!



Step 17

Select the Selection Tool (V) and click once on the invisible button to select it. After that, go to the Action Script Panel (F9) and enter this code inside the actions panel:

on (rollOver) {
_root.mouse_over_photo1_mc = true;
} on (rollOut) {
_root.mouse_over_photo1_mc = fstartlse;
}

on (release){
getURL("http://www.toxiclab.org/");
}

Step 18

Create now a new layer above the layer invisible button 1 and name it action script.

Step 19

Select the first frame of layer action script and go again to the Action Script Panel (F9). Aftre that, enter this code inside the actions panel:

_root.photo1.onEnterFrame = function() {
if (mouse_over_photo1) {
_root.photo1.nextFrame();
} else {
_root.photo1.prevFrame();
}
};

We're done now with the first photo.

Repeat this process also for every other photos in menu.

Please Enjoy!

Download example

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

Browse by category


Most popular tutorials