Modern Horizontal Flash Menu
April 1, 2009 by: smonte
In this lesson I will show you how to create a cool animated horizontal menu. We will use ActionScript 3 for the animation, so no timeline animation is involved in this tutorial. We use random colors in the menu to give it an extra spice. Check out the end result! Cool eh?
Note: You need TweenMax in order to fully complete this tutorial.
1. Create a new Flash document of size 400×100.
2. First create a rounded rectangle without any stroke. I used value three (3) for the rounded corners. The size of the rectangle doesn’t matter, since we will change that via ActionScript.
3. Convert the rectangle to a movie clip. Name it “Button Background” and set the registration point to the center. Here is how my rectangle looks like.
4. Give the button background movie clip an instance name of “buttonBackground“.
5. Name the layer “button background”. Then create a new layer called “buttons”.
6. In the “buttons” layer, create a static text field and type “Home” in it. I used a font size of 21. Make the text field exactly the same size as the text is (= no extra space).
7. Convert the text field to a movie clip. Name it “Home button” and set the registration point to the center.
8. Now create three more buttons exactly as we did in steps 5 and 6. Make the following buttons: “About button”, “Portfolio button” and “Contact button”. Your library should now look like the following.
9. Align the buttons horizontally.
10. Now give the buttons instance names “homeButton“, “portfolioButton“, “aboutButton” and “contactButton“. I’m sure you know which instance name goes to which button!
Moving to ActionScript 3
11. Create a new layer for ActionScript and type the following code.
//Import TweenMax import gs.*; import gs.plugins.*; TweenPlugin.activate([BlurFilterPlugin]); //Add the buttons into an array var buttonsArray:Array = new Array(homeButton,portfolioButton,aboutButton,contactButton); //Loop through the buttons array for (var i:uint = 0; i < buttonsArray.length; i++) { //Add event listeners for the button buttonsArray[i].addEventListener(MouseEvent.MOUSE_OVER, mouseOverButton); buttonsArray[i].addEventListener(MouseEvent.CLICK, buttonClicked); } //Move the buttonBackground under the home button (= starting position) buttonBackground.x = homeButton.x; buttonBackground.y = homeButton.y; //Make the buttonBackground a bit bigger than the home button buttonBackground.width = homeButton.width + 10; buttonBackground.height = homeButton.height + 10; //Tween the buttonBackground to a random color using TweenMax TweenMax.to(buttonBackground, 0.1, {tint: Math.random() * 0xffffff}); //This function is called when the mouse is over a button function mouseOverButton(e:Event):void { //Assign the button to a local variable var button:MovieClip = (MovieClip)(e.target); //Calculate the new target width and height for the buttonBackground var targetWidth:Number = button.width + 10; var targetHeight:Number = button.height + 10; //Tween the buttonBackground's position, size and color (color is random) TweenMax.to(buttonBackground, 0.5, {x: button.x, y: button.y, width:targetWidth, height:targetHeight, tint: Math.random() * 0xffffff}); } //This function is called when a button is clicked function buttonClicked(e:Event):void { //Add your logic here! trace(e.target.name + " was clicked!"); }
12. Now your horizontal Flash menu is ready! Go ahead and test your movie. You are free to use this menu where ever you want if you find it useful!
Download .fla
Related tutorials:
Comments
28 Responses to “Modern Horizontal Flash Menu”Leave a Reply
You must be logged in to post a comment.
thank you for another great tutorial i am learning so much from your site
hello looking to implement the code I get the error following the vessel
failure
1172: There was no definition gs. import gs .*;
1172: not found gs.plugins definition. gs.plugins import .*;
1120: Access to undefined property TweenMax. TweenMax.to (buttonBackground, 0.5, (x: button.x and: button.y,
1120: Access to undefined property TweenPlugin. TweenPlugin.activate ([BlurFilterPlugin]);
1120: Access to undefined property TweenMax. TweenMax.to (buttonBackground, 0.1, (tint: Math.random () * 0xffffff));
I want to know what the problem
thanks
I’m getting the same error message… Anyone have an answer to this. It doesn’t appear to work as the tutorial is written..
I don’t understand how to create a link for each of the buttons..when i declare a url ..all the buttons goes there. Please help.
Thanks for the nice tutorial. Applied it to my website in an instant!
that’s nice tut but i think there is a small problem when you click on each button you never get the message in the output “…. button clicked”. Instead if you click the button before the colored rectangle comes to the button then it works! Can you tell me why is happening that?
Thanks
I am getting this error..
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at menu_fla::MainTimeline/mouseOverButton()
any thoughts?
many thanks
I have the same problem as mentioned by others before… what am I doing wrong?
Here’s my code:
//Import TweenMax
import gs.*;
import gs.plugins.*;
TweenPlugin.activate([BlurFilterPlugin]);
//Add the buttons into an array
var buttonsArray:Array = new Array(homeButton,muziekButton,volleybalButton,blogButton);
//Loop through the buttons array
for (var i:uint = 0; i < buttonsArray.length; i++) {
//Add event listeners for the button
buttonsArray[i].addEventListener(MouseEvent.MOUSE_OVER, mouseOverButton);
buttonsArray[i].addEventListener(MouseEvent.CLICK, buttonClicked);
}
//Move the buttonBackground under the home button (= starting position)
buttonBackground.x = homeButton.x;
buttonBackground.y = homeButton.y;
//Make the buttonBackground a bit bigger than the home button
buttonBackground.width = homeButton.width + 10;
buttonBackground.height = homeButton.height + 10;
//Tween the buttonBackground to a random color using TweenMax
TweenMax.to(buttonBackground, 0.1, {tint: Math.random() * 0xffffff});
//This function is called when the mouse is over a button
function mouseOverButton(e:Event):void {
//Assign the button to a local variable
var button:MovieClip = (MovieClip)(e.target);
//Calculate the new target width and height for the buttonBackground
var targetWidth:Number = button.width + 10;
var targetHeight:Number = button.height + 10;
//Tween the buttonBackground’s position, size and color (color is random)
TweenMax.to(buttonBackground, 0.5, {x: button.x, y: button.y,
width:targetWidth, height:targetHeight, tint: Math.random() * 0xffffff});
}
//This function is called when a button is clicked
function buttonClicked(e:MouseEvent):void {
//Add your logic here!
trace(e.target.name + \ was clicked!\);
This is my error:
**Error** Scene=Scene 1, layer=Script, frame=1:Line 10: The class or interface ‘uint’ could not be loaded.
for (var i:uint = 0; i < buttonsArray.length; i++) {
**Error** Scene=Scene 1, layer=Script, frame=1:Line 29: The class or interface ‘Event’ could not be loaded.
function mouseOverButton(e:Event):void {
**Error** Scene=Scene 1, layer=Script, frame=1:Line 44: The class or interface ‘MouseEvent’ could not be loaded.
function buttonClicked(e:MouseEvent):void {
**Error** Scene=Scene 1, layer=Script, frame=1:Line 47: Syntax error.
trace(e.target.name + \ was clicked!\);
Total ActionScript Errors: 4 Reported Errors: 4
Same as Gill and Krille. Would be much appreciated if you (or anyone else for that matter) could explain how you add a URL to each of the buttons when clicked
great tutorial..
This is a really awesome tutorial, but there is something you have left out, when you click the buttons it visibly doesnt do anything, i need it to navigate to url’s something like this:
//This function is called when a button is clicked
function buttonClicked(e:Event):void {
//Add your logic here!
var buttonUrl = trace(e.target.name + “.htm”);
getURL(buttonUrl);
}
But that only give errors, what is the apropriate way to do this?
Please email me the answer!
Email: gmlmaster[at]live.se ([at] = @)
Thanks!
//Christian
another great tutorial..thanks to this site
Here’s a great tutorial, not trying to advertise for this guy, I truly love his tuts and think this will help you with your problem:
Thanks for the link. Those’ll be helpful.
I’m thinking part of the problem is in how I set up the FLA, not the AS. Time to tear it apart and see what’s going on…
I’m trying to do a similar menu, but vertically, not horizontally. I’m also using a buttonBackground that’s a fixed size and color. When I export the SWF, I get no errors, the background shows up under the home button, but nothing happens when I click on the buttons. Any ideas? Here’s the AS:
**************************************************************
this.stop()
//Import TweenMax
import gs.*;
import gs.plugins.*;
TweenPlugin.activate([BlurFilterPlugin]);
//Add the buttons into an array
var buttonsArray:Array = new Array(homeButton,sportButton,landButton,contactButton);
//Loop through the buttons array
for (var i:uint = 0; i < buttonsArray.height; i++) {
//Add event listeners for the button
buttonsArray[i].addEventListener(MouseEvent.MOUSE_OVER, mouseOverButton);
buttonsArray[i].addEventListener(MouseEvent.CLICK, buttonClicked);
}
//Move the buttonBackground under the home button (= starting position)
buttonBackground.x = homeButton.x;
buttonBackground.y = homeButton.y;
//Make the buttonBackground a bit bigger than the home button
buttonBackground.width = 120;
buttonBackground.height = 50;
//This function is called when the mouse is over a button
function mouseOverButton(e:MouseEvent):void {
//Assign the button to a local variable
var button:MovieClip = e.target as MovieClip;
//Calculate the new target width and height for the buttonBackground
var targetWidth:Number = 120;
var targetHeight:Number = 50;
//Tween the buttonBackground’s position, size and color (color is random)
TweenMax.to(buttonBackground, 0.5, {x: button.x, y: button.y,
width:targetWidth, height:targetHeight});
}
//This function is called when a button is clicked
function buttonClicked(e:MouseEvent):void {
//Add your logic here!
trace(e.target.name + ” was clicked!”);
}
it isnt working for me it say define gs*or something
new to actionscript and flash CS3 so though to ask this question as it is proably really easy once you know how… i have managed to change the buttons sucessfully, how can i add a URL to each button when clicked? (e.g. to go to another page within the same site) there are a variety of options please advise…
Yep, you are correct that I could also use MouseEvent. But I don’t see any point using that in this tutorial, since we are not using any MouseEvent’s properties .. Anyway thanks for the input!
You should write MouseEvent instead of just Event.
So:
… function buttonClicked(e:MouseEvent):void { …
OK, Event works too.
You can add me on ICQ and send me your fla, then I could tell you what you made wrong.
**Error** Scene=Scene 1, layer=Layer 3, frame=1:Line 10: The class ‘uint’ could not be loaded.
for (var i:uint = 0; i < buttonsArray.length; i++) {
Hi,
Is the first time I have attempted one of your tutorials and am very impressed by how easy they are to follow for a beginner to flash and action scripting but am lost on the action scripting part. I have amended the first part by adding the names of my buttons but am lost now – can you help please?
Here are my error messages:
**Error** Scene=Scene 1, layer=Layer 3, frame=1:Line 29: The class ‘Event’ could not be loaded.
function mouseOverButton(e:Event):void {
**Error** Scene=Scene 1, layer=Layer 3, frame=1:Line 44: The class ‘Event’ could not be loaded.
function buttonClicked(e:Event):void {
**Error** Scene=Scene 1, layer=Layer 3, frame=1:Line 48: Syntax error.
Total ActionScript Errors: 4 Reported Errors: 4
Thanks in anticipation of your patience!
Julie
Opps! got my message mixed up with my error messages – sorry!
Here they are again:
**Error** Scene=Scene 1, layer=Layer 3, frame=1:Line 10: The class ‘uint’ could not be loaded.
for (var i:uint = 0; i < buttonsArray.length; i++) {
**Error** Scene=Scene 1, layer=Layer 3, frame=1:Line 29: The class ‘Event’ could not be loaded.
function mouseOverButton(e:Event):void {
**Error** Scene=Scene 1, layer=Layer 3, frame=1:Line 44: The class ‘Event’ could not be loaded.
function buttonClicked(e:Event):void {
**Error** Scene=Scene 1, layer=Layer 3, frame=1:Line 48: Syntax error.
Total ActionScript Errors: 4 Reported Errors: 4
Hey nice app, but I have 3 problems in the script. someone can help me???
1.-
The class or interface ‘uint’ could not be loaded.
for (var i:uint = 0; i < buttonsArray.length; i++) {
2.-
The class or interface ‘Event’ could not be loaded.
function mouseOverButton(e:Event):void {
2.-
The class or interface ‘Event’ could not be loaded.
function buttonClicked(e:Event):void {
Thanks.
It is semantically incorrect to use this code to cast types in ActionScript:
var button:MovieClip = (MovieClip)(e.target);
It’s made to look like a C-like casting but actually the syntax without superfluous parenthesis is:
var button:MovieClip = MovieClip(e.target);
which was the only way to explicitly cast in actionscript 2. This way of casting can be easily confused with a construction of a new instance, so there is a better way to do it in AS3:
var button:MovieClip = e.target as MovieClip;
Thanks! Everything is working! Great tut!
OMG>>>excellent>>excellent….thank you very much…the code is no longer too freaky for me since i ve landed on this website….good job, man!!!!
nice tut
thank you for another great tutorial i am learning so much from your site