Create a Mac Dock Style Menu With AS3
Tutorial Details
- Difficulty: Beginner
- Program: Flash
- Estimated Completion Time: 45 mins
In this tutorial I’ll show you how to create a menu like Apple’s Dock using AS3 classes. We will create a single AS file that will perform all the magic, extending it to add new features.
Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site. This tutorial was first published in March of 2010.
Final Result Preview
First, let’s take a look at what we’ll be creating. Roll your mouse over the icons to see how they move and scale.
Step 1: Create a New ActionScript File
Begin by creating a new ActionScript file and saving it as “DockItem.as”. I’m saving mine at c:/macmenu/org/effects/DockItem.as.
Note that our document root (where the .fla lives) will be c:/macmenu; the folder /org/effects will form the package for the DockItem class.
Step 2: Create a New FLA
Create a new ActionScript 3.0 Flash File and open it, so that we have both DockItem.as and this .fla file opened. Save this .fla in the root folder (the DockItem.as is at c:/macmenu/org/effects, so our site root is c:/macmenu) the /org/effects is the package of DockItem Object and we save the .fla as c:/macmenu/macmenu.fla.
Step 3: Import Icons
Now we import or draw some icons to the .fla. I’ve imported some icons I have here from an Illustrator file, but you can of course draw your own and apply a gradient to them.
Step 4: Begin Converting Icons to Symbols
Select any icon and click Modify > Convert To Symbol.
In the box that opens, give it a name (I named this symbol “Star”) and pay attention to the registration point; it needs to be bottom center. For the class use the same name (remember that you can’t use spaces) and for the Base class, use org.effects.DockItem (the class that we’ll create). Also, make sure your Type is set to Movie Clip.
Then, align all the objects to the bottom: select all, click Window > Align, make sure the button "To stage" is unselected (otherwise it will align at the botton of the stage), then click the top-right button in this panel to align all the objects.
Step 5: Convert All Icons to Symbols
We can have as many buttons as we want, so let’s convert all our icons to symbols. Remember to give them a name and a Class, set all their registration points to bottom center and set the Base class to org.effects.DockItem.
See below for how our library and the icons should look; note the space between them, it’s important for creating a good effect.
Step 6: Start Coding the DockItem Class
If we test the movie now it will throw an error saying that an ActionScript file must have at least one external and visible definition; that’s because all our menu items are extending the DockItem class, which we haven’t yet written. Let’s write it now…
Start creating the package by extending the Sprite class (we will extend Sprite since we don’t have a timeline animation.)
package org.effects{
import flash.display.Sprite;
public class DockItem extends Sprite{
}
}
At this point we have our DockItem extending the Sprite class, so if you test it now it will work, but you’ll see no effects.
(Confused? Not used to coding with classes? Check out this Quick Tip on using a document class for an introduction.)
Step 7: Import Necessary Classes
Now we will import all the necessary classes. A custom class is being used here, the TweenLite class, which you can download from GreenSock.com. When you’ve downloaded TweenLite, extract it to your /macmenu/ folder (so you will have a folder /macmenu/com/greensock/).
package org.effects{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import com.greensock.TweenLite; //http://www.greensock.com/tweenlite
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.TintPlugin;
public class DockItem extends Sprite{
}
}
I’ve imported the Sprite class because it’s what we are extending; if you have animations on the timeline, extend the MovieClip class. We will use the Event class when the custom object is added to stage and we’ll use the MouseEvent when checking the distance of each icon from the mouse.
Step 8: Declare Necessary Variables
During this step we’ll declare the necessary variables:
package org.effects{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.TintPlugin;
public class DockItem extends Sprite{
private var _initPosition:Number;
public var maxXDistance:Number;
public var maxYDistance:Number;
public var maxScale:Number;
}
}
Note that I used the _initPosition as private: it just sets the initial x-position of the icon. The distance of the mouse will always be measured from this point, because the actual x-position of the item will always be changing.
maxXDistance is the maximum x-distance over which the mouse will affect the icon, maxYDistance is the maximum y-distance over which mouse will affect the icon and maxScale is the maximum scale that will be added to the icon (for example, if you set it to 2, the maximum scale the object can reach is 3.)
I’ve used public variables for the last three so we can change them at runtime.
Step 9: Coding the Constructor Function
The constructor function must have the same name as the class (and therefore the same name as the file), hence DockItem():
package org.effects{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.TintPlugin;
public class DockItem extends Sprite{
private var _initPosition:Number;
public var maxXDistance:Number;
public var maxYDistance:Number;
public var maxScale:Number;
public function DockItem($maxXDistance:Number=60,$maxYDistance:Number=30,$maxScale:Number=2):void{
maxXDistance=$maxXDistance;
maxYDistance=$maxYDistance;
maxScale=$maxScale;
if(stage) init();
else addEventListener(Event.ADDED_TO_STAGE,init);
addEventListener(Event.REMOVED_FROM_STAGE,end);
}
}
}
Why do we have some parameters here? This allows us to use different combinations of distances and scales: we can have a short distance with a very big scale or a long distance with a small scale. Also, we can determine the y distance within which the mouse will affect the icon.
As we are extending the Sprite class we can add children or even code a custom class for each icon extending the DockItem class, so if we extend it we can use the super() function to pass the new parameters to the superclass. We can then use the DockItem class anytime and anywhere.
In this step we set the maxXDistance variable, maxYDistance variable and the maxScale variable to the values passed as parameters. Also, we check if the object is on the stage – if not, we add an Event to check when it is. We also add another event listener to detect when the icon is removed from the stage. We’ll add a MOUSE_MOVE event to the stage to get the distance, so it’s important to know whether it’s on the stage.
Step 10: The Init() Function
This is the function that will be run once the icon is created and added to the stage. In the init() function we just add an MouseEvent.MOUSE_MOVE listener to the stage, set the _initPosition variable to the x value of the object, and listen for the mouse leaving the area of stage.
package org.effects{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.TintPlugin;
public class DockItem extends Sprite{
private var _initPosition:Number;
public var maxXDistance:Number;
public var maxYDistance:Number;
public var maxScale:Number;
public function DockItem($maxXDistance:Number=60,$maxYDistance:Number=30,$maxScale:Number=2):void{
maxXDistance=$maxXDistance;
maxYDistance=$maxYDistance;
maxScale=$maxScale;
if(stage) init();
else addEventListener(Event.ADDED_TO_STAGE,init);
addEventListener(Event.REMOVED_FROM_STAGE,end);
}
private function init(e:Event=null):void{
_initPosition=x;
stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
stage.addEventListener(Event.MOUSE_LEAVE,mouseLeave);
}
}
}
Step 11: The Mouse Functions
When the mouse moves over the stage, this function (triggered by the MOUSE_MOVE event we added a listener for in the last step) will check the mouse position of the parent object and measure the distance from the object to the mouse parent position.
We use parent.mouseX because that gets us the x-position of the mouse relative to whichever object contains the icon, rather than relative to the registration point of the icon.
We also tween the icons back to their starting positions if the mouse leaves the stage in the mouseLeave() handler.
package org.effects{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.TintPlugin;
public class DockItem extends Sprite{
private var _initPosition:Number;
public var maxXDistance:Number;
public var maxYDistance:Number;
public var maxScale:Number;
public function DockItem($maxXDistance:Number=60,$maxYDistance:Number=30,$maxScale:Number=2):void{
maxXDistance=$maxXDistance;
maxYDistance=$maxYDistance;
maxScale=$maxScale;
if(stage) init();
else addEventListener(Event.ADDED_TO_STAGE,init);
addEventListener(Event.REMOVED_FROM_STAGE,end);
}
private function init(e:Event=null):void{
_initPosition=x;
stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
stage.addEventListener(Event.MOUSE_LEAVE,mouseLeave);
}
private function mouseMove(e:MouseEvent):void{
var yDistance:Number=Math.abs(parent.mouseY-y);
if(yDistance>maxYDistance){
if(_initPosition==x) return;
else{
TweenLite.to(this,.3,{x:_initPosition,scaleX:1,scaleY:1});
return;
}
}
//get the difference between the parent mouse x position and the initial position of the object
var xDistance:Number=parent.mouseX-_initPosition;
//check if the distance of the mouse from the object is more than max distance, it can't be bigger...
xDistance = xDistance > maxXDistance ? maxXDistance : xDistance;
//check if the distance is lower than the negative of the max distance, it can't be lower...
xDistance = xDistance < -maxXDistance ? -maxXDistance : xDistance;
//create a variable for the position, assuming that the x position must be the initial position plus the distance of the mouse, but it can't be more than the max distance.
var posX=_initPosition-xDistance;
//we get the scale proportion here, it goes from 0 to maxScale variable
var scale:Number=(maxXDistance-Math.abs(xDistance))/maxXDistance;
//the minimum scale is 1, the original size, and the max scale will be maxScale variable + 1
scale=1+(maxScale*scale);
//here we use a Tween to set the new position according to the mouse position
TweenLite.to(this,.3,{x:posX,scaleX:scale,scaleY:scale});
}
private function mouseLeave(e:Event):void{
TweenLite.to(this,.3,{x:_initPosition,scaleX:1,scaleY:1});
}
}
}
First, we check the y distance (vertical distance between the icon and the mouse); if it’s further away than the range we set with the maxYDistanceVariable, then we check whether the icon is back in its original position, and, if not, we tween it there. The return keyword breaks out of the function, so none of the rest of the code will be run in this case.
If the mouse is close to the icon vertically, we use some maths to figure out a new scale and position for the icon based on its horizontal distance from the mouse, then tween it to those values.
Step 12: The End() Function
If we remove the object from the stage, we need to remove the mouseMove and mouseLeave listeners; if not we can get errors every time the mouse is moved. This function is the handler for the REMOVED_FROM_STAGE listener we added earlier, so will be triggered when the object is removed.
package org.effects{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.TintPlugin;
public class DockItem extends Sprite{
private var _initPosition:Number;
public var maxXDistance:Number;
public var maxYDistance:Number;
public var maxScale:Number;
public function DockItem($maxXDistance:Number=60,$maxYDistance:Number=30,$maxScale:Number=2):void{
maxXDistance=$maxXDistance;
maxYDistance=$maxYDistance;
maxScale=$maxScale;
if(stage) init();
else addEventListener(Event.ADDED_TO_STAGE,init);
addEventListener(Event.REMOVED_FROM_STAGE,end);
}
private function init(e:Event=null):void{
_initPosition=x;
stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
stage.addEventListener(Event.MOUSE_LEAVE,mouseLeave);
}
private function mouseMove(e:MouseEvent):void{
var yDistance:Number=Math.abs(parent.mouseY-y);
if(yDistance>maxYDistance){
if(_initPosition==x) return;
else{
TweenLite.to(this,.3,{x:_initPosition,scaleX:1,scaleY:1});
return;
}
}
//get the difference between the parent mouse x position and the initial position of the object
var xDistance:Number=parent.mouseX-_initPosition;
//check if the distance of the mouse from the object is more than max distance, it can't be bigger...
xDistance = xDistance > maxXDistance ? maxXDistance : xDistance;
//check if the distance is lower than the negative of the max distance, it can't be lower...
xDistance = xDistance < -maxXDistance ? -maxXDistance : xDistance;
//create a variable for the position, assuming that the x position must be the initial position plus the distance of the mouse, but it can't be more than the max distance.
var posX=_initPosition-xDistance;
//we get the scale proportion here, it goes from 0 to maxScale variable
var scale:Number=(maxXDistance-Math.abs(xDistance))/maxXDistance;
//the minimum scale is 1, the original size, and the max scale will be maxScale variable + 1
scale=1+(maxScale*scale);
//here we use a Tween to set the new position according to the mouse position
TweenLite.to(this,.3,{x:posX,scaleX:scale,scaleY:scale});
}
private function mouseLeave(e:Event):void{
TweenLite.to(this,.3,{x:_initPosition,scaleX:1,scaleY:1});
}
private function end(e:Event=null):void{
stage.removeEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
stage.removeEventListener(Event.MOUSE_LEAVE,mouseLeave);
}
}
}
All we do in this function is remove the event listener from the stage.
Step 13: Test It!
At this point we can already test it; it will work since each object is linked with the Base class DockItem. However, we don’t have a bounding box for clicking (if we set our object’s buttonMode property to true, we’ll see that we can click it only when it’s over the actual graphic.)
Step 14: Start Turning Icons Into Buttons
So far we can see the effect working, so now let’s turn each item into a button. We’ll create a new ActionScript file and this one will extend the DockItem – let’s name it DockButton. Its package will be the same as DockItem (org.effects), so we’ll save itb in the same folder as DockItem.as (example: c:/macmenu/org/effects/DockButton.as)
Step 15: Change the Base Class
Now we change the base class of each object in the library. We are currently using org.effects.DockItem as Base class, let’s now use org.effects.DockButton.
If we test it now, there will be an error. This is because DockButton.as is still empty, so let’s code it.
Step 16: Start Coding DockButton.as
OK, now we’ll extend the DockItem class, because we want to use everything that we have in DockItem and add some more tricks (allowing it to act as a button), but we don’t want to add the new features to DockItem directly. This way, if we want to use the DockItem as anything other than a Button later on, we can, but if we want to use it as a Button we can use the DockButton.
package org.effects{
public class DockButton extends DockItem{
}
}
If we test our project now, it will work, but it will work exactly as the DockItem as we haven’t yet added anything new.
Step 17: Import Classes for DockButton
Let’s import some things we will need to extend the DockItem. As we are extending the DockItem we don’t need to import the classes that are already there, since we wont use them directly in DockButton.
package org.effects{
import flash.geom.Rectangle;
public class DockButton extends DockItem{
}
}
I’ve imported the Rectangle class, but why? It’s because we will use the bounding box of our object to create a fake background, to allow the button to be clickable even if the mouse isn’t precisely over a colored area. Let’s create a background graphic with alpha 0 (transparent), so we will have a square to click.
Step 18: Constructor for DockButton
Since we need to create a bounding box for DockButton, we will get its own bounds, that’s why we imported the flash.geom.Rectangle class
package org.effects{
import flash.geom.Rectangle;
public class DockButton extends DockItem{
public function DockButton():void{
buttonMode=true;
mouseChildren=false;
var bounds:Rectangle=getBounds(this);
this.graphics.beginFill(0,0);
this.graphics.drawRect(bounds.x,bounds.y,bounds.width,bounds.height);
this.graphics.endFill();
}
}
}
What we have done? We created a constructor which first sets the object’s buttonMode to true, so our DockButton will be treated as a Button. Then we set mouseChildren to false, so mouse events will come from the DockButton object, not any other object inside it. Next we get the bounds of the object using getBounds() and draw a transparent rectangle using the graphics object. (The graphics property comes with the Sprite class, and we extended Sprite to make our DockItem object. Now we’ve extended our DockItem to make our DockButton object, DockButton has everything from the Sprite class and the DockItem class.)
Step 19: Check Everything and Test It
OK, let’s perform a check:
- We need a .fla file (example: c:/macmenu/macmenu.fla).
- In the same folder as the .fla file we need to have another folder: /org/effects (example: c:/macmenu/org/effects).
- Inside this folder we need to have two .as documents (DockItem.as and DockButton.as)
- Within the .fla, each item in the library must be linked to a class, and the base class of each item must be org.effects.DockButton.
If it’s all OK, test the movie…
(At this point, if you want to put the folder org/effects in your classpath you can, so you won’t need to copy this folder to each project you create and use the DockItem or DockButton.)
Step 20: Change the Color on Mouse Over
Why not change the color of the button when the mouse passes over it? In this section I will teach how. For this we will use the TweenLite engine again to give some tint to the object. However, we are already using TweenLite in the DockItem object and we are extending this object at DockButton. We want to extend DockButton to change the color, but we can’t use TweenLite anymore in the same object since the new TweenLite object will overwrite the other one (even with the property overwrite:false in TweenLite it will reduce the performance a lot if we use it directly in the same object). All is not lost; we have an icon inside each object of the library and we can apply the tint to that.
To do this, let’s create another ActionScript File, but now save this one at the same folder as the .fla with the name “OverButton.as” (example: c:/macmenu/OverButton.as.)
Step 21: Coding the OverButton Object
First we create the package and import the necessary classes; since we saved the OverButton.as file in the same folder of the .fla file the package will be top level, so there’s no need to write “package org.effects”:
package{
import org.effects.DockButton;
import flash.display.DisplayObject;
import flash.events.MouseEvent;
import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.TintPlugin;
public class OverButton extends DockButton{
}
}
OK, so we’re extending DockButton this time and we’ve imported the DisplayObject class because we will treat the icon as a DisplayObject. We’ve also imported MouseEvent which we’ll use to check when the mouse is over the icon and when it’s out. We also have TweenLite to create some tween effects with the color.
Step 22: OverButton Constructor
package{
import org.effects.DockButton;
import flash.display.DisplayObject;
import flash.events.MouseEvent;
import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.TintPlugin;
public class OverButton extends DockButton{
private var _object:DisplayObject;
public function OverButton():void{
_object=this.getChildAt(0) as DisplayObject;
this.addEventListener(MouseEvent.MOUSE_OVER, mouseOver);
this.addEventListener(MouseEvent.MOUSE_OUT, mouseOut);
TweenPlugin.activate([TintPlugin]);
}
}
}
Why have we created a private var _object as DisplayObject? Our actual icon is stored in this variable (that’s what line 13 does) and is treated as a DisplayObject; we will use the color effect on our icon, not in the whole object.
We add the event listeners of the mouse to check when the mouse is over and when the mouse is out.
Step 23: Coding Mouse Functions
Since we have created the listeners for mouse over and mouse out, we will now create their functions:
package{
import org.effects.DockButton;
import flash.display.DisplayObject;
import flash.events.MouseEvent;
import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.TintPlugin;
public class OverButton extends DockButton{
private var _object:DisplayObject;
public function OverButton():void{
_object=this.getChildAt(0) as DisplayObject;
this.addEventListener(MouseEvent.MOUSE_OVER, mouseOver);
this.addEventListener(MouseEvent.MOUSE_OUT, mouseOut);
TweenPlugin.activate([TintPlugin]);
}
private function mouseOver(e:MouseEvent):void{
new TweenLite(_object,.5,{tint:0x990099});
}
private function mouseOut(e:MouseEvent):void{
new TweenLite(_object,.5,{tint:null});
}
}
}
Note that we are using the TweenLite on _object now, not on “this” any more. That’s because the OverButton extends the DockButton which extends the DockItem where there is already a TweenLite being used. Also, in DockButton we have a fake alpha 0 background that doesn’t need to be painted.
For the tint property of TweenLite I used a color code of 0×990099, which is a medium purple; if you use null as the value the tint will be removed softly.
Step 24: Change the Base Classes
At this point if you test the movie, you won’t see any color change, because we need to change the base class of each object in the library again. Open the Library once more in the .fla (Window > Library). Right-click each object and change its base class to OverButton (not org.effects.OverButton, because the class file is not in the /org/effects folder).
OK, now you can test it!
Conclusion
In this tutorial I’ve explained about extending objects. The actual dock effect is pure math – it’s distance calculations, scale settings – but it’s important we see in the code that we cant use the “x” property as position reference, because the “x” property is changed every time. I hope now you all have a better understanding of the “extends” keyword, and can appreciate how the calculations are done here. Thanks for reading :)
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Andre Cavallari
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Activetuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Awesome tut. Pretty easy to follow and very cool effect.
I would recommend you to use more spacing between simbols. For example line 45 in step 11 looks like a pointer and the ternary is kind of hard to read.
And theres a little bug. Try to mouse over the inner purple circle of the camera(the lens) and you’ll see the apple icon hiding behind the camera.
Actually, it happens if you roll over ANY of the icon’s center (even the apple logo one). Great tutorial anyway! THANKS!
Yeah, I noticed the same thing Javier… Try moving your mouse down on top of the apple slowly and everything around it spaces out and gets bigger except for the apple (until the mouse is finally on top of the apple).
I haven’t run through the tutorial yet, so I couldn’t tell you why it is, but that was one of the first things I noticed playing around with it.
Also, if you try to come in on the dock from either side, but don’t actually get to the icons, they move away from your mouse, which is quite funny.
very nice effect :) thank you!
Is the maxYDistance of the apple different of the other simbols?
Maybe that is the bug?!
Wow people, sorry, it´s my bad, to fix this problem you must align all the objects in the bottom, when i exported the swf maybe i accidentally moved the apple a little bit to the bottom, so the distance from the y value is smaller tham other other icons, so to fix it just align the icons to the bottom and the problem is fixed.
About the spacing like yout example in Step 11 line 45 i think you´re right, in flash it´s perfectly readable, but here is not readable as flash, so next tutorials i wil take care about this, thanks for your observation
These ternary lines are:
xDistance = xDistance > maxXDistance ? maxXDistance : xDistance;
xDistance = xDistance < -maxXDistance ? -maxXDistance : xDistance;
Any questions i will be reading dayly the comments and answearing all i can
To align to the bottom of the objects, not the stage, you can select all objects, in menu “window” you select the submenu “align”, in this panel, if the option “To stage” is selected, unselect it, them click the option to align in the bottom, just click the right top button of this pannel (it´s two boxes aligned to the bottom), them try it again
Again, sorry for this bug
Nice work,
you may also want to add an extra check for a mouseout on the stage to have the animation reset, else it just sits in the last stage it was at..
Yeah, i´ve sent to Michael the updates here and in the new source i sent him has this function that checks whem the mouse leaves the stage, i really sorry about the mistakes and i will take much care from now.
To make this check you can add some lines in DockItem.as.
In the init() function:
stage.addEventListener(Event.MOUSE_LEAVE,mouseLeave);
add a new function in the DockItem.as:
private function mouseLeave(e:Event):void{
TweenLite.to(this,.3,{x:_initPosition,scaleX:1,scaleY:1});
}
Them in the end() function add the line:
stage.removeEventListener(Event.MOUSE_LEAVE,mouseLeave);
This is the enough to check when the mouse leaves the stage…
REMEMBER: It´s Event.MOUSE_LEAVE, not MouseEvent.MOSE_LEAVE :D
Can’t get the sample to work after downloading tweenlite. Would you please explain how to properly install tweenlite?
Am I doing it right?
1. create directory – macmenu/gs/
2. put “com” and it’s content inside “gs” – macmenu/gs/com
you mentioned – macmenu/gs/
I’m curious what’s inside the gs folder?
thanks for the tutorial.
Aha, you posted just as I was updating the tut, sorry!
Should be \macmenu\com\greensock\ rather than \macmenu\gs\com\greensock\
Hope that helps!
Yeah, i sent the tutorial using gs.TweenLite, but as TweenLite latest version they changed the package i also updated this part of the tutorial and sent it back to Michael, now it´s ok!! Also the issues are all fixed…
Thanks for the clarification!! I’m gonna start following the tut when i get home from work. You guys are sooo helpful.
Great tutorial. Easy to follow and understand. Thanks.
Brilliant!!
was looking for something like that for quite a while.
Job Well Done!
:)
What exactly does “if (stage)” ask?
I never saw this before.
if(stage) checks if the object is already on the stage, if it´s on stage the event listener ADDED_TO_STAGE will not trigger… so if the stage property is not null and there is not a “if(stage)” it wont be fired…
1. So is it mean the stage is like a member property? And if it was added on the stage, the variable stage will be given a value? Like a pointer in C/C++?
2. Why aren’t there …
removeEventListener(Event.ADDED_TO_STAGE, init);
removeEventListener(Event.REMOVED_FROM_STAGE, end);
… in the end function?
1. Yep, that’s right :) Nice concise explanation.
2. Just to keep the tut shorter ;) Well spotted, though.
It´s not needed, i will dispatch only once when removed from the stage…
very nice tutorial. it would be perfect to include links or actions to each symbol, …- yes i know it`s just a tutorial, but it would be necessary to make realy sense.
Nice code, and the effect is very awesome. Congratulations.
Hello nice tut’s :)
But how can i do to put in clip with animation on each button ?
Thank’s for your helping :)
It´s just you make your animation and insert yout animation inside the object wich extends the DockButton… or also in DockItem you can extend the MovieClip instead of extend the Sprite in DockItem.as, and create your animations in each MovieClip
Andre how about if instead of having de purple RollOver i want another icon?
Nice tutorial, thanks !
This is the best mac style menu i ever seen, too much better tham the tsunami menu but you made it very simple, thanks my friend!! When we will have more like this one?
Thanks for your comment, i hope soon we have more like this one
Finally a real dock menu, i was giving up to create one of this but luckly i found this one and i done it successfull!!
Is this blog updated every day?
first of all wonderful tutorial. i got a question though, the dock seems to be too “reactive”. i want it to get affected by the mouse only when the mouse is about, 5 pixels away from the dock (all around). i tried setting up the value for maxXdistance and maxydistanceto 5 yet it doesn’t work. what happens is it reacts to the mouse even if the mouse pointer is a couple of hundred pixels away as long as the dock and the mouse are on the same horizontal plane.any tips for me?thanks so much!
In the DockButton class you add a line before everything in the constructor
public function DockButton():void{
super(60,5,2); //this will change the settings by passing the new values to the DockItem
But i thing 5px is too few space
hi, thanks for your quick reply. i tried your suggestion and what it did was make the dock react subtly. however what i want to achieve is lessen the area in which the dock will detect the mouse. for example i want the dock to react if the mouse i within a 20 pixel radius something like that. thanks!
try super(20,5,2); and tell me if it works as you wanted
Very nice thanks!
Nice Tut! The menu works really well and the code seems pretty minimal.
Andre,
Great tutorial. I’m totally new to AS3 and this is helping me to bridge the learning curve.
One question: Can you point me to or provide a sample of code that will allow each of the icons to link to a URL and/or another swf file?
Thanks in advance for your help.
MD
03/28/2010
To link each button with an url for example, you use the MouseEvent.CLICK, first name each button in stage, for example the object Apple let´s name it button_apple… them in your code you use:
button_apple.addEventListener(MouseEvent.CLICK,appleClick);
them we create the function for it:
private function appleClick(e:MouseEvent):void{
navigateToURL(new URLRequest(“myapplepage.html”));
}
this should go to “myapplepage.html” in your site, this part is very simple… but if you are still not familiar to OOP i suggest you read this quick tip:
http://active.tutsplus.com/tutorials/actionscript/quick-tip-how-to-use-a-document-class-in-flash/
hi,
thanks for the great tutorial!! I’m very new to all this, and I’m not very good at reading and understanding the link u gave ‘ how to use a document class’.
so my question is – where do i put the above 3 lines of code (clicking function) in? Should i put it in the DockButtons.as , OverButtons.as? or should i make a new ClickButtons.as?
I have tried to put it in the DockButtons.as but got errors –
package org.effects{
import flash.geom.Rectangle;
public class DockButton extends DockItem{
public function DockButton():void{
super(60,40,2);
buttonMode=true;
mouseChildren=false;
var bounds:Rectangle=getBounds(this);
this.graphics.beginFill(0,0);
this.graphics.drawRect(bounds.x,bounds.y,bounds.width,bounds.height);
}
star_mc.addEventListener(MouseEvent.CLICK,appleClick);
private function appleClick(e:MouseEvent):void{
trace(“click”);
//navigateToURL(new URLRequest(“myapplepage.html”));
}
}
}
thankyou very much for sharing your knowledge!!!!
package{
import org.effects.DockButton;
import flash.display.DisplayObject;
import flash.events.MouseEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;
import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.TintPlugin;
public class OverButton extends DockButton{
private var _object:DisplayObject;
public function OverButton():void{
_object=this.getChildAt(0);
this.addEventListener(MouseEvent.MOUSE_OVER,mouseOver);
this.addEventListener(MouseEvent.MOUSE_OUT,mouseOut);
TweenPlugin.activate([TintPlugin]);
this.addEventListener(MouseEvent.CLICK,click);
}
private function click(e:MouseEvent):void{
navigateToURL(new URLRequest(“page.html”));
}
private function mouseOver(e:MouseEvent):void{
new TweenLite(_object,.5,{tint:0×990099});
}
private function mouseOut(e:MouseEvent):void{
new TweenLite(_object,.5,{tint:null});
}
}
}
I added directly in OverButton.as for example… but you can add anywhere, note that i´ve imported the flash.net.navigateToURL and flash.net.URLRequest to do this…
i´ve added the line:
this.addEventListener(MouseEvent.CLICK,click);
in the constructor function and added the function:
private function click(e:MouseEvent):void{
navigateToURL(new URLRequest(“page.html”));
}
in the class…
But it´s better you use a Main document class to add the MouseEvent.CLICK for each button… so you can add a diffent url for each button…
This is really cool, the kind of tutorial i like, very few codes without frills, thanks for this and i am waiting for your next tut
How would I make the buttons go to a link? I was wanting to make a dock like this to navigate a website.
Scratch that, I apparently can’t read :P
Great tutorial, very easy to follow. I’m also new the AS3 and was wondering if there is a way to have a title appear on rollover sort of like a tool tip. If so, could you provide the code?
Thanks, I look forward to exploring your other tutorials.
-J
ok, so I figured out a solution for this problem, but I having trouble with the max size. I have been trying to change the values in the below line in DockItems.as
public function DockItem($maxXDistance:Number=60,$maxYDistance:Number=30,$maxScale:Number=1):void{
but, no matter what number I change the $maxScale:Number=1 to it does change the zoom size.
what am I doing wrong?
thanks.
Sorry to keep posting. I figured out the scale, not sure if it’s the bast way.=
In the DockItem.as I changed:
var scale:Number=(maxXDistance-Math.abs(xDistance))/maxXDistance;
scale=1+(maxScale*scale);
to:
var scale:Number=(maxXDistance-Math.abs(xDistance))/maxXDistance;
scale=1+(scale);
now though, the on rollover the space between the over icon and the others is too large. Do you know how to tighten up the space between icons during the effect.
Does that make since?
I promise, this is my last post.
-J
Sorry, i could not post anything else here yesterday, it was returning 502 error, bad gateway…
In DockButton.as use super(60,40,0); in the first line of the constructor, for example:
public function DockButton():void{
super(60,40,0);
…
So this will keep the code of DockItem safe and you will have no scale, the maximum scale of the object is 1 + maxScale parameter, so if you configure it to 0 you will have no scale changes…
And please, this dont need to be your last post, you can ask here whenever you need, feel free to ask until you learn it right, i will be so glad when you say that you really learned it!
beautiful tutorial!
However, Im getting the error that tweenlite cannot be found. I have place it in the macmenu folder (downloaded it from link provided as3 version) any help would appreciated!
When you download the .zip file of the TweenLite, you open it, do not extract it, you will see that you have the folder greensock-as3 inside the zip file… double click it and you will find the “com” folder, unzip this folder to the same folder of the .fla file… so let´s get the example that you saved the .fla at “c:/macmenu”, so you will have the folder c:/mamenu/com … I think it will help
Due constantly questions on how to link the buttons to open another page i´ve uploaded the modified source to my 4shared, the link is:
http://www.4shared.com/file/257490590/36dce1b9/MacMenuSource.html
PS: In the fla you can see i´ve named each button, just select a button and open the properties window (window->properties), and i created a document class for the .fla file, you can check the Main.as file (the document class) with the function to open the files
Thanks for this, it´s what i was needing…
Sorry to ask after you’ve been bombarded with so many other questions on the subject, but once you have the main.as as a file in the same route folder as it is in your new downloadable source and have amended all the button instances to match what they are in the flash file (added the urls etc..), how do you link it to the main .fla file so that the button links take effect? (if this is a stupid noob question double sorry)
No, it´s a not a stupid noob question, and please dont need to sorry for asking.
In Actionscript 3.0, one of the greatest improvemente is the capability of creating a main document class, not code in timeline, If you open the .fla file, and open the main properties (when no object is selected you go to menu “window -> properties”, note that the area “document class” is writted “Main”, this is the Main.as file, but we dont use the .as… so this way we link the fla to the Main.as file
Please read the quick tip: http://active.tutsplus.com/tutorials/actionscript/quick-tip-how-to-use-a-document-class-in-flash/ for more informations about the document class…
Thanks for this tutorial.. I’ve followed closely and managed to get it working :)
But is there a possibility to change the rollover colour from purple to any other?
Phew.. After much exploring I managed to get the colour changed :)
But now I’m stuck with how to link each of these button to a external .swf file in the same folder, to load in a invisible movie clip above these buttons.. I know I have to edit the Main.as file but can’t figure out what lines to change.. Can anyone help me?
Well, a lot of people asked me how to link the icons so i did another source files with the Main.as file, the file is here:
http://www.4shared.com/file/257490590/36dce1b9/MacMenuSource.html
But to load another .swf inside this one, you can change in the Main.as file…
1. Import the flash.display.Loader class…
2. Just after the line: public class Main extends Sprite{ you insert the line:
private var _loader:Loader;
3; In the public function Main():void, the constructor function, insert the line anywhere:
_loader=new Loader();
addChild(_loader);
4. Instead of the line navigateToURL, use: _loader.load(url);
This should work, but if you cant make this work please tell me and i help you again ultil you get it working…
Cheers
Great tutorial. Thank you!
Upon creating the dockbutton as file and adding this code:
package org.effects{
public class DockButton extends DockItem{
}
}
my buttons no longer react to my mouse. It was working perfectly before i created this file and changed the buttons from org.effects.DockItem
to org.effects.DockButton
Im lost help.
Please, review some things, if you saved the DockButton with the correct name, it the code is correct, if you saved the DockButton in the right folder (the same os DockItem)… it should work as it extends the DockItem…
How do you link to frames in the current movie and how to you make the current links open in the same window e.g. _self?
Due of this question, i´ve created another source files, it´s here:
http://www.4shared.com/file/257490590/36dce1b9/MacMenuSource.html
the navigateToURL function has 2 parameters, the second parameter you can define “_blank” or “_self”, or whenever you want…
Remember that each button is a simple button like any other, you can do the same things of a normal button, so you can link to an external file, to a page or to a frame inside the same movie…
When I change the code to:
navigateToURL(url,”_self”);
It still opens a new window. Any ideas what I’m doing wrong?
My language is correct. It still fails once I extend into the DockButton class.
It acknowledges where DockButton is saved and that it is legal code but it will not continue to function as normal.
The finger will show as we have added buttonmode, but the former ability to enlarge and tween is absent and the button remains stationary.
I have rewritten the code twice and it still fails. Can I send you my source file. I cannot rest until I understand my error. If i have made one at all.
I would say for you to put your files in a server, rapidshare/megaupload/4shared and paste the link here, but it seems that you already fixed it.
About the navigateToURL, you can use “_self” but remember it will only work in “_self” when it´s tested inside a HTML in a browser…
For more information about the navigateToURL you can check the documentation:
http://help.adobe.com/en_US/AS3LCR/Flash_10.0/flash/net/package.html#navigateToURL()
Apologies, schoolboy error. I hadn’t added the following line into the embed code:
allowScriptAccess=”always”
Thanks André
I found my error. I had Macmenu.fla document class in the properties set to DockItem.
Once i removed that from the properties menu the prgram behaved as expected.
How could we get the menu items to overlap, but have the one we are selecting override them all and be on top? Currently when I compress them so they overlap, they wont swap depths. I would just like the selected icon to rise to the top of the row……
thanks!
Wow, great question…
when the object is on the stage, you can get it´s index by using… container_instance.getChildIndex(object);, in this case, inside the DockItem for example you can create some getter and setter functions…
private function update():void{ this.index=Math.floor((this.scaleX/(maxScale+1))*(parent.numChildren-1)); }
public function get index():int{ return stage?this.parent.getChildIndex(this):-1; }
public function set index(value:int):void{ this.parent.setChildIndex(this,value); }
Where you have:
TweenLite.to(this,.3,{x:_initPosition,scaleX:1,scaleY:1});
Change to:
TweenLite.to(this,.3,{x:_initPosition,scaleX:1,scaleY:1,onUpdate:update});
And finally where you have:
TweenLite.to(this,.3,{x:posX,scaleX:scale,scaleY:scale});
Change to:
TweenLite.to(this,.3,{x:posX,scaleX:scale,scaleY:scale,onUpdate:update});
It will swap the depths accourding to the size of the object, bigger will be always on top
It worked perfectly for me :)
I have a question: how can I make it work if instead of using icons I use jpg files? I haven’t had any luck with the current code.
Thanks!
In Step 4, instead of converting vectors you can use jpg as well
Hi André,
I changed this up a bit and instead of using icons I used text that is stacked vertically. How can I tweak the AS so that…
a) they move back and forth less (want minimal motion side to side, mostly magnification)
b) only one at time is magnified (right now, if you mouse over one and then another, the first one stays magnified also)
I’m brand new to AS and have tried to play around with the numbers but haven’t had any luck. Could you help me out?
Thanks!
Hi,
Is there anyway to align the whole icon to the left?
Hey there, amazing tutorial!. I am having an issue with the OverButton .as. I keep getting a weird error “5000: The class ‘OverButton’ must subclass ‘flash.display.MovieClip’ since it is linked to a library symbol of that type.” but i changed all the symbols to OverButton and its still doing it. All the other files work properly (DockItem, DockButton) its jsut this one .as that doesnt want to work. I even copied your exact code and its not working. if you have any ideas please let me know.
Hi André,
Realy excellent and koo tutorial just what i was looking for and 1 more thing i want to modify the effect to make it look like encarta encyclopedia visual browser (the one that revolve ..) but just cant do it with my own (am beginer) can you make a turorial pls “like encarta visual browser”
How to give a link to the button ? Please…
Como le aplico este código a los botones?
on (release) {
getURL(“08clg_links.html”, “_self”);
}
Como hago para q los botones se vean más grandes cuando el mouse no está sobre ellos, porq por más que los agrando fisicamente se ven pequeños, de que parte del código los agrando??
Mil gracias!!
Hey Andre, how about if i want to use another icons as rollover.?
Thank you in advance.
THANK YOU!!! Great tutorial!!
Is there any way to add a “callto” to one of the button?
simply great tutorial….thank u…..a great help
Hey,
just a little mistake on step 21:
import org.display.DockButton;
It must be
import org.effects.DockButton;
Very nice tut… thank’s a lot
Thanks Pedro! Well spotted — corrected :)
I was wondering since this is aligned to straight line, is it possible to have it aligned to curved line? For an example following the line of circle? It works but it doesn’t goes smoothly compared to aligning to straight line.
Is this possible? Instead of bottom dock, putting dock on circle line?
why if you pass the mouse cursor over the right and left side of the menu it active the dock effect?
it is an error, isnt it?
Saludos!
this is a really nice tut
CAN U PLZ HELP ME IN DIS
i have added 10icon in one MovieClip called Flags
now i want these icons to behave just lik ur tut
but with captions on that icon( MouseOver) and no text caption when mouse leaves dat icon.
Each icon has a differnce caption
how can i do dis
pls help me out