In this tutorial you will see how to create cubic flash menu using the Action Script. You will also learn:

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



Step 1

Create a new flash documen. New symbol (Ctrl + F8). Graphic – “Cube”





Step 2

New symbol (Ctrl + F8) Button – “Invisible Button”.

Leave the “Up”, “Over” and “Down” frames blank and put a copy of the graphics “Cube”

Step 3

Create 3 layers, (Descending) “Actions”, “Invisible Buttons”, “Movie Clips”.



Step 4

Duplicate button and arrange in triangle.



Step 5

Same arrangement for movie clips in the frame below buttons.

Step 6

New symbol (Ctrl + F8). Graphic – “Home Txt”.

Step 7

Create a new text field, set the typeface to “Forte”, the font to 32 and the colour to #0299FD. Then, in the text field type the word “Home”.

Step 8

Repeat an additional 5 times for each other button.

Step 9

New symbol (Ctrl + F8). Movie Clip – “Home”



Step 10

Place an instance of the graphic “Cube” in frame 1.

Step 11

Select frame 6 in the timeline and create a Keyframe (F6), do the same for frame 11.Reselect frame 6 and then select the copy of “Cube”.

Step 12

Hold down Shift key and tap the down arrow on your keyboard to ‘drop’ the graphic down roughly 10 px.

Step 13

Create a motion tween between frames 1 and 6, and frames 6 and 11.

Step 14

Rename the current layer “Cube”.

For the first tween adjust the ease to –30, and the second to 70. See the picture below.



Step 15

Create a new layer “Text” and copy an instance of “Home Txt” into the first frame.



Step 16

Set its Alpha to 0 %.



Step 17

On frame 11 create a new Keyframe (F6) and copy another instance only with the Alpha set to 100 %.



Step 18

Create a motion tween between frames 1 and 11 on the layer “Text”.

Step 19

Select the last frame on the layer “Cube” and open the ActionScript menu (F9). Then,
enter the following Action Script code:

stop();

Step 20

Give the movie clip the instance name “Home”. Repeat an additional 5 times for each other button.

Step 21

Take the Selection Tool (V) and Select the invisible button which corresponds to the homepage and  enter this ActionScript code inside the Actions Panel (shortcut key: F9):


on (rollOver) {
 _root.mouse_over_Home = true;
}
on (rollOut) {
 _root.mouse_over_Home = fstartlse;
}
on (release) {
 getURL("http://www.flashvault.net/", "blank");
}


Step 22

Repeat an additional 5 times for each button, changing the word “Home” to whatever the instance name is of the corresponding movie clip.

Step 23

Take again the Selection Tool (V), Select the first frame on the “Actions” layer and attach the following ActionScript code inside the Actions Panel:

_root.Home.onEnterFrame = function() {
 if (mouse_over_Home) {
  _root.Home.nextFrame();
 } else {
  _root.Home.prevFrame();
 }
};

_root.Forum.onEnterFrame = function() {
 if (mouse_over_Forum) {
  _root.Forum.nextFrame();
 } else {
  _root.Forum.prevFrame();
 }
};

_root.Blog.onEnterFrame = function() {
 if (mouse_over_Blog) {
  _root.Blog.nextFrame();
 } else {
  _root.Blog.prevFrame();
 }
};

_root.Download.onEnterFrame = function() {
 if (mouse_over_Download) {
  _root.Download.nextFrame();
 } else {
  _root.Download.prevFrame();
 }
};

_root.Link.onEnterFrame = function() {
 if (mouse_over_Link) {
  _root.Link.nextFrame();
 } else {
  _root.Link.prevFrame();
 }
};

_root.Contact.onEnterFrame = function() {
 if (mouse_over_Contact) {
  _root.Contact.nextFrame();
 } else {
  _root.Contact.prevFrame();
 }
};

Test your Movie (Ctrl+Enter).

We're done!

Download source file (.fla)