Toxiclab.org

Advanced and attractive photo flash menu

19.11.2009, 18:25
Submited in: Flash | Total Views: 23903

Using this thoroughly explained, detailed flash lesson, I will explain to you how to create advanced and very attractive photo flash menu. Using this lesson, you will also learn:

1. How to design photo menu,
2. How to import any photo into a flash stage,
3. How to convert any photo into a movie clip,
4. how to create instance name,
5. How to animate photo and text
6. How to create invisible button
7. How to apply flash filter on any photo.
8. How to create mask layer,
9. How to enlarge any photo using the Free Transform Tool (Q).

To make this lesson, you have to use action script code.

Example:



Step 1

First, download photos that we will use 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 150 pixels. Select white as background color. Set your Flash movie's frame rate to 52 and click ok.



Step 3

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 4

Choose File > Import > Import to Library. In the file explorer window that appears, find a three photos 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

Using the Selection Tool (V) and drag and drop technique, move the photos from flash library on flash stage and palce it on the position like it is shown on the picture below!



Step 6

Take the Selection Tool (V) and select the first photo in menu.

Step 7

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



Step 8

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 9

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



Step 10

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

Step 11

Select the photo and hit again F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 12

Click on frame 15 and hit F6 key. While you're still on frame 15, select the Free Transform Tool (Q) and enlarge the photo like it is shown on the picture below.



Step 13

After that, select the Selection Tool (V) and click once on the photo that you just enlarged. Then, go to the Properties Panel (Ctrl+F3) below the stage. On the left, you will see the Filters button. Click once on that button. After that, click on plus icon, select Adjust Color in it and make the adjustments as follows:



Step 14

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



Step 15

Click now on frame 7 and hit F6 key. After that, while you're still on frame 7, hit F6 key again two times.



Step 16

Go back now on frame 7 and using the Selection Tool (V) move the photo a little right.

Step 17

Select now frame 8 and move the photo a little left.

Step 18

Select now frame 9 and move the photo a little up.

Step 19

Create a new layer above the layer photo 1 and name it mask.

Step 20

Select the first frame of layer mask 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 any color and draw a rectangle shape over the first photo.





Step 21

Select mask layer and convert it to a mask by right-clicking on the mask layer and selecting Mask. See the picture below.



Step 22

Create a new layer above the layer mask and name it text line.

Step 23

Click on frame 5 of layer text line and hit F6 key. While you're still on frame 5 Select 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 #96E12F and draw a rectangle shape about 150x18 px at the bottom of first photo. See the picture below.



Step 24

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



Step 25

Click now on frame 15 and hit F6 key.

Step 26

Go back on frame 7, select the Free Transform Tool (Q), press and hold down Alt key and do like it is shown on the picture below!





Step 27

While you're still on frame 7, select the Selection Tool (V) and click once on the rectangle shape to select it. 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 28

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

Step 29

Create a new layer above the layer text line and name it text.

Step 30

Click on frame 10 of layer text and hit F6 key. While you're still on frame 10, select the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Select a Static Text field,
2. Select Zurich Blk BT as font.
3. Choose 12 as font size,
4. Select white as color,
5. As the rendering option, select Use Anti-alias for readability.



Type now Megan Fox on the position like it is shown on the picture below!



Step 31

While the text is still selected, hit F8 key (Convert to Symbol) to convert it into a movie clip symbol.



Step 32

Click now on frame 15 and hit F6 key.

Step 33

Go back on frame 10, select the Selection TOol (V) and click once on the text to select it.Then, go to the Properties Panel (Ctrl+F3) below the stage. On the left, you will see the Filters button. Click once on that button. After that, click on plus icon, select Blur in it and make the adjustments as follows:



Step 34

Click now on the properties button. After that, On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.



Step 35

Select again frame 10 of layer text and move it a little down.

Step 36

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

Step 37

Go back on the main scene (Scene 1).

Step 38

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

Step 39

Select now the invisible button layer and take again 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 any color and draw a rectangle shape over the first photo. See the picture below!



Step 40

While the rectangle shape is still selected, hit F8 key (Convert to Symbol) to convert this rectangle into a Button Symbol.

Step 41

Double Click on the Invisible Button to go in its inside. Then, using the drag and drop technique move Up frame to frame Hit.



Step 42

Go back on the main scene (Scene 1).

Step 43

Select now the Selection Tool (V) and click once on the Invisible Button to select it. After that, open the Action Script Panel (F9) and enter the following Action Script 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 44

Create a new layer above the Invisible Button layer and name it action. Then, click on the first frame of layer action and enter the following Action Script code inside the Actions panel:

_root.Photo1_mc.onEnterFrame = function() {
if (mouse_over_Photo1_mc) {
_root.Photo1_mc.nextFrame();
} else {
_root.Photo1_mc.prevFrame();
}
};

Now, we're donw with the first photo. Repeat this process also for every other photos in menu!

Download example

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

Browse by category


Most popular tutorials