Toxiclab.org

Fashion flash menu

17.7.2007, 21:34
Submited in: Flash | Total Views: 57572

This tutorial will teach you how to create advanced and modern fashion flash menu using the pictures.You can use this menu for any fashion site.To create this menu, you have to use Action Script code.Using this tutorial, you will also learn:

1. How to design fashion menu,
2. How to animate it,
3. How to apply action script code on it and more.

Example:



Step 1

First of all, download my pictures that we will be use for this tutorial.



Step 2


Create a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 320 pixels and the height to 250 pixels. Select white as background color and set your Flash movie's frame rate to 26 fps. Then, click ok.



Step 3

Choose File > Import > Import to Library. In the file explorer window that appears, find the four pictures (picture1, picture2, picture3....) and Shift-click to select them all.Then click open. If you now open your flash library (Ctrl+L key) you will see all four pictures 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 pictures from the library on the stage and place it on the position like it is shown on the picture below.



Step 5

After that, press Ctrl+A key (Select all) to select the all pictures. Then, press Ctrl+G key (Group), to group them all.



Step 6

After you have grouped the pictures, go to the Align Panel (Ctrl+K).Then, do the follwoing:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Now, you have aligned the all pictures with the background. See the picture below.



Step 7

While the aligned pictures is still selected, press Ctrl+B key (Break apart) to break apart it. See the picture below.



Step 8

Take the Selection Tool (V) and select only the one picture. See the picture below.



Step 9

Then, press F8 key (Convert to Symbol) to convert this picture into a Movie Clip Symbol.



Step 10

While the new made Movie Clip (picture) 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.



Step 11

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



It's time for animation

Step 12

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



Step 13

Click on frame 20 and press F6 key.

Step 14

After that, while you're still on frame 20, take the Selection Tool (V) and click once on the picture to select it. Then, go to the Properties Panel (Ctrl+F3) below the stage and click on Filters tab. After that, click on the plus icon and select Adjust Color filter. Make the adjustements as follows:

1. Brightness: -48
2. Contrast : 44
3. Saturation: 25
4. Hue: -60



Now, you have this



Step 15

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



Step 16

Create a new layer above the layer 1 (layer 2). Lock layer 1, select layer 2 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 black and draw a “rectangle” on the bottom of picture about 155x0,4px. See the picture below.



Step 17

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



Step 18

Click on frame 15 and press F6 key. Then, take the Free Transform Tool (Q), press and hold down Shift key, and enlarge the rectangle like it is shown on the picture below.



Step 19

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



Step 20

Create a new layer above the layer 2 (layer 3). Lock layer 2, select layer 3, click on frame 15 and press F6 key.

Step 21

While you're still on frame 15, take the Text Tool (A) and go to the Properties Panel. Then, choose the following options:

1. Select a Static Text field,
2. Select any font, for this example I have used Copperplate Gothic Light font and I have bold it.
3. Choose any size of font. For this example I have used 15 as font size.
4. Select white as color,
5. As the rendering option, select Anty-alias for readability.



Then, type any text within the rectangle that we have created in step 16,17, and 18. See the picture below.



Step 22

Take the Selection Tool (V) and click once on frame 15. Then, press F6 key five times.



Step 23

Go back on frame 16, select it and press delete key on the keyboard.Do that also for frame 18. See the picture below.



Step 24

Go back on the main scene (Scene 1).

Step 25

Double click on layer 1 to rename its name in menu. After that, create a new layer above the menu layer and name it invisible button.

Step 26

Lock menu layer, select the invisible button layer and create the invisible button over the first picture. See the picture below.



Step 27

Take the Selection Tool (V) and click once on the invisible button to select it. Then, open the Action Script Panel (F9) and enter the following action script code inside the actions panel.

on (rollOver) {
_root.mouse_over_picture1_mc = true;
}

on (rollOut) {
_root.mouse_over_picture1_mc = fstartlse;
}

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

Step 28

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

Step 29

Click on the first frame of layer action and open again the action script panel (F9). Then, enter this action script code inside the actions panel:

_root.picture1_mc.onEnterFrame = function() {
if (mouse_over_picture1_mc) {
_root.picture1_mc.nextFrame();
} else {
_root.picture1_mc.prevFrame();
}
};

We're done with the first picture in menu. Repeat this process for every other picture in menu.

Enjoy!

Download example

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

Browse by category


Most popular tutorials