Toxiclab.org

Advanced picture flash menu

11.12.2006, 23:12
Submited in: Flash | Total Views: 104101

Read this tutorial and see how to create advanced picture flash menu in flash 8 using the Action Script. You will also learn:

1. How to import an image in Flash,
2. How to convert a bitmap image into a symbol,
3. How to use a Free Transform Tool (Q) for image rotation,
4. How to create title bar and more.



Step 1

Create a new flash document and set Width and Height to 350px. Frame rate set to 45fps (Frames per Second).





Step 2



Double click on layer 1 to rename its name it background. After that, insert a three new layers, and name it picture1,2 and 3. Then in every layer, insert (Ctrl+R) just one picture (any picture), and set them on the position like it is shown on the picture below.



Step 3

Lock all layers, except picture1 layer. Select it, and press F8 key (Convert to Symbol) to convert the first picture in Movie Clip.



Step 4

While the first picture is still selected, open the Properties Panel (Ctrl+F3), and under <Instance Name> type: picture1



Step 5

Double click on a new made Movie Clip (first picture), to go in its inside.

Step 6

Then, while the picture is still selected, press again F8 key, to convert it again into a Movie Clip.



Step 7

Click on frame 20 and press F6 key (Keyframe). Then, take the Free Transform Tool (Q), and do like it is shown on the picture below.



Step 8


While the picture is still selected, in Properties Panel (Ctrl+F3), under Color choose Tint, set white color and Tint Amount to 37%. Look at the picture below!



Step 9

Click again on frame 20, and press F6 key, six times.



Then, click on every second frame, and press delete key on the keyboard.



Step 10

Go back on frame 1, and in Properties Panel under Tween choose Motion.



Step 11

Insert a new layer and name it title bar. Then, draw a "title bar" like it is shown on the picture below.



Step 12

Set the "title bar" on this position:



Step 13

Select the "title bar" and press F8 key to convert it into a Movie Clip.



Step 14

Click on frame 20 and press F6. After that, set the "title bar" on this position:



Step 15

Go back on frame 1, select the "title bar" again, open the Properties Panel (Ctrl+F3), and under Color choose Alpha and set it to 0%. Then, under Tween, choose Motion. See the picture below.



Step 16

Select frame 20 again, and press F6 key six times. Then, select every second frame, and press delete key on the keyboard.



Step 17

Select the last frame, open the Action Script Panel (F9), and paste this script:

stop();

Step 18

Go back on the main scene (Scene1), select the picture3, insert a new layer and name it Invisible Button 1.

Step 19

Hide layer picture2 and 3, select the Invisible Button 1 layer, and create the Invisible Button over the first picture. See the picture below.



Step 20

Select the Invisible button, open the Action Script Panel (F9), and paste this script:

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

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

}

Step 21

Insert a new layer above Invisible Button 1 layer, and name it Action. Then, click on the first frame, and in Action Script Panel, paste this script:

_root.picture1.onEnterFrame = function() {
if (mouse_over_picture1) {
_root.picture1.nextFrame();
} else {
_root.picture1.prevFrame();
}
};

We're done for the first button in menu. Repeat this steps for every other button (picture) in menu.

Bye!

Download example

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

Browse by category


Most popular tutorials