Toxiclab.org

Advanced and beautiful photo models flash menu

13.10.2009, 16:41
Submited in: Flash | Total Views: 13461

Read this thoroughly explained, detailed flash lesson and see how to create advanced and beautiful flash menu using the photos of top models. You can use this menu for any web site. Using this lesson, you will also learn how to import any photos into a flash stage, how to convert any photo into a movie clip symbol, how to apply flash filters on it and much more. To create this lesson, you have to use action script code. Let's start!

Example:



Step 1

First, download photos of model which we will use for this banner.



Step 2


Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 400 pixels and the height to 320 pixels. Select #14171A color as background color. Set your Flash movie's frame rate to 48 and click ok.

Step 3

Choose File > Import > Import to Library. In the file explorer window that appears, find twelve photos (1,2,3..12) and Shift-click to select them all. Then click open. If you now open your flash library (Ctrl+L key) you will see twelve photos that you just imported. See the picture below!



Step 4

After that, using the Selection Tool (V) and drag and drop technique, move all photos from the Library on the stage and place it on the position like it is shown on the picture below.



Step 5

Call the current layer photo menu. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 6

Take the Selection Tool (V) and select just one photo. See the picture below!



Step 7

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



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 selected, hit again F8 key (Convert to Symbol) to convert it again into a Movie Clip Symbol.



Step 10

Call the current layer photo 1. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 11

Click now on frame 10 and hit F6 key. While you're still on frame 10, 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! Then, select Filters tab from the left side. Click after that on the plus icon and select the Adjust Color filter. Make the adjustments as follows:



Step 12

Click now on frame 15 and hit again F6 key. While you're still on frame 15,select again the Selection Tool (V) and click once on the photo. After that, go again to the Properties Panel (Ctrl+F3) below the stage! Then, select Filters tab from the left side. Click after that on the plus icon and select the Glow filter. Make the adjustments as follows:



Step 13

Right-click anywhere on the gray area between frame 1 and 10 and frame 10 and 15 on the timeline and choose Create Motion Tween from the menu that appears.



Step 14

It's time for action script,so create a new layer above the layer photo 1 and name it action script.

Step 15

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

stop ();

this.onEnterFrame = function(){
if(rewind == true){
prevFrame();
}
}

this.onRollOver = function(){
rewind = false;
play();
}

this.onRollOut = function(){
rewind = true;
}

this.onRelease = function(){
getURL("http://www.toxiclab.org");
}

Step 16

Select now frame 15 and hit F6 key. While you're still on frame 15, go again to the AS panel (F9) and enter this code inside the actions panel:

stop();

Step 17

Go back on the main scene (Scene 1).

We're now done with the first photo button in menu. Repeat this process also for every other buttons in menu!

Enjoy!

Download example

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

Browse by category


Most popular tutorials