Right Click for Customized Menu

Alice — Mon, 17 May 2010 13:42:30 +0000

A menu is a must-have in every website. It not only helps organize the information, but also facilitates the navigation through the website. Well, today’s featured file on FlashComponents.net is a different type of menu that definitely got our attention.

The Right Click Customized Menu, developed by a upv2010, a FC newbie, offers a quick access to the main sections of your website, additional to the site structure. It’s very useful for games or applications where visitors are given the possibility to download images from your website.

Its main functionality is the RightClick script which allows you to access the menu anywhere on the page, by a simple right click. Check out the component’s page to see the demo and its extra features.

How to: Create a Flash Menu with Swings In&Out

Phils — Mon, 18 Jan 2010 12:56:23 +0000

This is a complete, step-by-step tutorial that will help you create a cool Flash menu with swings in and out. After you finish it, this is how it will look:

Don’t be scared if it’s pretty long, as it includes every step in the book so you can understand better how to create the menu. Here we go!

Direction X or Y:
It is easy to change the code so that every thing moves from the top. All you need to do is swap the X values for Y values:

Menu come in from the top on the Y axis’s.

Step I: Setting up the Document

1. Open a New Flash Document: File – New (Ctrl N)
2. If the General Tab is not selected, select it: General Tab
3. Select Flash Document:
4. Click: OK

Note: You should now be able to see a new Flash document.

5. Go to: Modify – Document (Ctrl J)
6. Set the size to: 525 x 200 px
7. Select a: Background colour

I selected: 003366

My background Colour.

8. Click: OK

Step II: Creating the Menu Bar

1. In the Timeline rename Layer 1 to: Menu Bar

2. Using the rectangle tool on the left off the Stage draw a long: Rectangle
3. With the Text Tool type: Menu

4. I added a triangle to my Menu:

5. With the Free Transformation Tool : Rotate the Menu Bar

The rotated Menu Bar in the correct position.

6. In the Timeline right click (Mac: Ctrl click) on Frame 55 and select: Insert Frame

Note: These 55 frames are included so that the Menu Bar will be visible throughout the entire Movie. At this stage, the Movie has no content, but we will add content in the following steps. If your content exceeds 55 frames, you will need to return to this Layer and add additional frames to ensure that the Menu Bar is visible throughout the Movie.

Step III: Creating the Graphics

1. To avoid errors lock the Menu Bar Layer:
2. Click on the Insert Layer button:
3. Rename the new Layer to: Graphics
4. Place any graphics or text that you may want:

My Graphics Layer looks like this.

5. In Frame 10 of the Graphics Layer, right click and select: Insert Blank KeyFrame

Your Layers should look like this.

Note: This new Keyframe will contain the content of Menu item one. The new Keyframe does not need to be in Frame 10 but could be on the next unused Frame, which is Frame 2. I have selected to use Frame 10 so that Button 1 will match Frame 10 and Button 2 will match Frame 20 etc. An alterative would be to use Frame Labels (which I do not cover in this tutorial).

6. In Frame 10 place any graphics or text that you want to be visible when the first Button is clicked:

My Graphics Layer looks like this. I painted the word using the Brush Tool.

7. Repeat five times what you have just done with different graphics for frame 20, frame 30, frame 40 & frame 50.

My Graphics Layer and Timeline Keyframes.

8. To avoid errors lock the Graphics Layer:

Step IV: Creating the Buttons

1. Go to: Insert – New Symbol (Ctrl F8)
2. Name it: Button 1
3. For Type select: Button

4. Click: OK

5. Draw a small: Rectangle
6. Type a label on it such as: Button 1

My Button.

Note: Make sure your text and your rectangle are different colours!!

7. Repeat what you have done to create: Button 2 through to Button 6

Note: My last button returns the user back to the starting point so I have typed Home as the Label.

My six buttons.

8. When you have finished your Buttons go back to the Main Stage by clicking on the Tab:

Note: Do not place your buttons on the Main Stage. If you have delete them (don’t worry they still in the Library).

Step V: Adding the Menu

1. Go to: Insert – New Symbol (Ctrl F8)
2. Name the Symbol: Menu 1 MC
3. The Type should be: Movie Clip

4. Click: OK

5. Open your Library: Window – Library (F11)
6. Drag Button 1 into the new Symbol: Menu 1 MC

My Menu 1 MC with the Button nested inside the Movie Clip.

7. Repeat what you have done to create:

Note: All your symbols are still in the Library, none of them have yet been placed on the Main Stage.

*All the Symbols in the Library.

Step VI: Placing the Menu

1. When you have finished go back to the Main Stage by clicking on the Tab:
2. If your Graphics Layer is not locked, lock it:
3. Click on the Insert Layer button:
4. Rename the new Layer to: Buttons
5. If your Library is closed, open it: Window – Library (F11)
6. Drag from the Library on to the Stage all your: Movie Clips (Not the Buttons)
7. Position the Movie Clips to the Left and just: Off Stage
8. You may want to use your Align Panel to get them in a straight line and spaced evenly: Window – Align (Ctrl K)

The Movie Clips are on the left and are just off stage.

9. If the Property Inspector is closed, open it: Window – Properties (Ctrl F3)
10. Select the first Movie Clip and give it an Instance Name of: MC1

Note: Do not type a space between the MC and the 1. It must be one word: MC1

The Instance Name for:MC1

11. Give as Instance Name the next Movie Clip: MC2
12. Give Instance Names to the rest of the buttons: MC3 etc.

13. You may need to re-arrange the order of the Layers. They should look like this:

The Layer Order has been changed.

Note: The Menu Bar needs to cover the Buttons which is why it is the top Layer. The Buttons should swing onto the Stage over the Graphics.

Step VII: ActionScript for the Timeline

The following Actionscript will make the first button move. There is additional code that makes the other buttons follow the first button, a bit like follow the leader.

1. To avoid errors lock the Buttons Layer:
2. Click on the Insert Layer button:
3. Rename the new Layer to: Actions
4. Place the following ActionScript on Frame 1 in the: Actions Layer

// stops the movie on frame 1
stop();

// sets the x position for the menu to stop and go back to. You may need to adjust these two settings
var goto = 30; var backto = -80;

// declares a variable called go which will be used to help create the movement

var go = 0;

// sets the speed – don’t set it too slow

setInterval(mousePosition, 5);

// this function is called by the word ‘mousePosition’ in the setInterval above

function mousePosition() {

// sets the x position for the mouse to activate the menu movement

if (_xmouse<=20) { //adjust number as necessary

MC1._x = MC1._x+bounce("right");

}

if (_xmouse>=110) { //adjust number as necessary

MC1._x = MC1._x-bounce("left");

}

}

// this function is called by ‘bounce’ in the mousePosition function above

function bounce(leftOrRight) {

// sets the swing properties

if (leftOrRight == "right") {

go = (goto-MC1._x);

go *= .09;

}

if (leftOrRight == "left") {

go -= (backto-MC1._x);

go *= .09;

}

return go;

}

5. Test Your Movie: Control – Test Movie (Ctrl + Enter)
6. Place the Mouse over the: Menu bar

So far only the first Button works.

Note: Only one Button will work. To make the rest of the Buttons work there one more step.

7. Close the Test Window:

Step VIII: ActionScript for the Movie Clips

The ActionScript below makes sure that the Movie Clips follow the lead of Movie Clip 1.
1. Lock the: Actions Layer
2. Unlock the: Buttons Layer
3. Open the Actions Panel: Window – Actions (Ctrl F7)
4. Switch Script Assist off. Go to the Actions Panel Side Menu Button:

Script Assist is off when there is: No Tick

5. Select Movie Clip 2

Tip: In the top left of the Actions Panel you must be able to read:

6. Attach the following to Movie Clip 2:

onClipEvent (enterFrame) {

_x = _root.MC1._x; // button 2 refers back to button 1

}

7. Select Movie Clip 3 and attach the code:

onClipEvent (enterFrame) {

_x = _root.MC2._x

}

8. Select Movie Clip 4 and attach the code:

onClipEvent (enterFrame) {

_x = _root.MC3._x

}

9. Select Movie Clip 5 and attach the code:

onClipEvent (enterFrame) {

_x = _root.MC4._x

}

10. Select Movie Clip 6 and attach the code:

onClipEvent (enterFrame) {

_x = _root.MC5._x

}

Note:
The code for MC 2 refers back to MC 1,
The code for MC 3 refers back to MC 2,
The code for MC4 refers back to MC3,
etc.

11. Test Your Movie: Control – Test Movie (Ctrl + Enter)
12. Place the Mouse over the: Menu bar

All the Buttons works.
13. Close the Test Window:

Step IX: Making the Menu Buttons Work

Although the Menu should now be working correctly the Buttons don’t actually function. This last section will make them function correctly

1.Open MC1 by double clicking on: Movie Clip 1
2. Select: Button 1

Tip: In the top left of the Actions Panel you must be able to read:

3. Place the following code on: Button 1

on (release) {

_root.gotoAndStop(10);

}

4. Place the following code on: Button 2

on (release) {

_root.gotoAndStop(20);

}

5. Place the following code on: Button 3

on (release) {

_root.gotoAndStop(30);

}

6. Place the following code on: Button 4

on (release) {

_root.gotoAndStop(40);

}

7. Place the following code on: Button 5

on (release) {

_root.gotoAndStop(50);

}

8. Place the following code on: Button 6

// Note this goes back to frame 2 which is the first real frame or Home Page

on (release) {

_root.gotoAndStop(2);

}

9. Test Your Movie: Control – Test Movie (Ctrl + Enter)

10. Place the Mouse over the: Menu bar
Note: All your Buttons should now work.
11. Close the Test Window:
Your Movie should have a Menu that swings in with buttons that go to different locations in your Flash Movie. I hope you found this tutorial useful and easy to follow.
Source: Webwasp Tutorials

I’ve also created a wide range of tutorials, from mouse trail animations and magnifying glass, to user names and passwords and word games. You can check them out here.

5 Cool Flash Menus to Use in Your Website

Steven — Thu, 14 Jan 2010 09:53:13 +0000

Menus make navigation through a website either wonderful or awful. I’ve chosen five of the newest Flash menus on FC that can help you improve your website’s navigation. The purpose is to make it look organized to your visitors, so the navigation is as easy and relaxing as possible.

1. XML Mac Menu

A simple AS2 menu, yet with a very nice design effect and, nevertheless, practical.

2.Menu V1

This AS3 menu is XML driven which makes it easy to use and customize. Perfect for any company that wants to use a simple menu to promote its portfolio.

3. Advanced Dropdown Menu AS3

This menu supports an unlimited number of sub-items, organized in pages with navigation. Each submenu item can optionally have an image thumbnail, the label is HTML enabled with support for the basic HTML formatting. Perfect to organize is you have a lot of categories.

4. Blur Scale XML Vertical Menu

Scaling, blurring & glowing vertical menu that you can customize to your liking. You can change just about everything.

Two Levels Menu

Colorful two level menu to which you can add as many tabs as you want. If you add too many, two arrows will appear in the left and right side of the menu to guide the visitor.

Daily Inspiration: Great Collection of Animated Menus

Steven — Mon, 19 Oct 2009 10:41:56 +0000

What inspired me to write this post was Darek Nyckowiak’s website – thetoke. He included 3 cool view modes of his portfolio and all three are awesome.

Navigation through a website is extremely important. The visitor, when entering your website, is expecting to find his way around, with no headaches involved. To catch his attention and convince him to proceed with the browsing, we recommend some pretty amazing Flash menus.

Vertical Image Accordion Menu