# 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.

Republished Tutorial

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 :)

• http://www.nepty.com.ar El rosco

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!

• vikas

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

• megan

i just wanna know
how to add a text box linked with each of the icon
on mouseOver

can u pls help tell me
m nt gud with actionscripting
it will a gr8 help frm u

• Eija

Oh, a WONDERFUL tutorial! Just what I’ve been looking for! I’m making a schoolproject on Web-based multimedia programming, and an element like this will surelu be a big plus in it! :)

THANK YOU THANK YOU THANK YOU! And the examples you’ve uploaded later in the comments also helped a lot, I now have a beautifully working system with linked external .swf files! :))

• André

Wow, it´s nice to see my tutorial back on top.

Now i am a little bit time free them i will back writting tutorials, i know it will take a good time to be published but i like doing it.

• http://michaeljameswilliams.com/ Michael Williams

Glad to hear it, André :)

• nubin

André please i need a customization for add tooltips in the icons…

thank you

• http://blog.ismailsimsek.com/pratik-bilgiler/windows-birlikte-ac-problemi.html ismail şimşek

superb tutorial thanks for writing.

• Charles

great tutorial…!
but if i want to edit it and add xml so i can load my own image instead of a built in symboles :)

any help?

thank you

• http://www.kongregate.com/accounts/aakash Aakash

Umm… so now how do I edit it?
I’ve got the source file but when I go into it, draw something, save it and test it. It comes up with errors and it doesn’t work.
I’ve tried going back to the source folder after saving and testing then opening the swf but it just doesnt work :S

• http://www.kongregate.com/accounts/aakash Aakash

Oh sorry. Nevermind now. I’ve found an alternative. Thanks anyway. Really good tut.
+1

• Louis

How did you manage to get it working? I’m killing myself trying to get this to exporting/saving this properly.

• http://ilovebakedbeans.com b18269

Nice tut. One thing I don’t like with the final file is if you roll far right/left without touching the icons, they all shift into the opposite corner. Other than that, very nice :)

• thug

can u upload in video….i wan 2 faint now..after see all d coding….

• Tin

How can you assign links and make the buttons clickable to open a frame? Like gotoandplay

• Vince Noir

really nicely done and love this example so i’m trying it out. just downloaded your updated file and tried publishing the SWF. I get the following errors, though:

effects/DockItem.as, Line 6 1172: Definition com.greensock:TweenLite could not be found.
effects/DockItem.as, Line 31 1120: Access of undefined propertyTweenLite.
effects/DockItem.as, Line 39 1120: Access of undefined propertyTweenLite.
effects/DockItem.as, Line 49 1120: Access of undefined propertyTweenLite.

i have downloaded the latest from Greensock for AS3 and all the material resides in the following directory path:

macmenu/com/greensock (TweenLite.as is clearly in the folder)

wonder why it doesn’t pick it up – thanks in advance.

• Vince

Really great example and great work done! Downloaded a copy of your updated file and published the SWF – however, got the following Error 1065 of TweenLite variable not defined.

Downloaded the latest from greensock and created the macmenu/com/greensock folder. TweenLite.as is clearly in there.

any way to correct this?

• Vince

sorry for the double post!

• Vincey

SORTED IT!

arranged the directories wrong – works brilliantly now :)

• Pingback: 用AS3制作苹果风格的鱼眼菜单 « Learning-AS

• http://www.jamieholliday.co.uk jamie

Excellent tutorial. Easy to understand.
I will be using these techniques in future projects for sure

• http://www.think360studio.com/ Aish

Great tutorial
thank you :)

• http://cgtutes.net John

Hellow,

You know what, I did learn from this tutorial lot of things. Not only creating a Mac Doc menu.

But how to use packages and inheritance of as 3 etc. This is great tutorial. But I think readers need a little bit of previous knowledge about as3 to understand this.

It is fine as this is not a very basic type tutorial. This is a professional type tutorial. Thank you very much for sharing this tutorial with us.

John

• Putt

Hey,

Is it also possible to align them in a circle?

• http://www.billyreano.com Billy

This has been a great help. Thanks a bunch for the tutorial.

I’ve tried to gather from the comments left and your tutorial how to have the individual icon movie clips animate as their rolled over. However, I run into errors. What would be the best way to do this? i’ve tried placing the individual icon swfs into their prospective icon location. When I test it, the roll over states do not occur. I’m not for sure why it’s doing this. Would it be easier to have UI loaders for each icon and have them be loaded in? I’m not for sure what to do, so any advice would be especially loved by me.

Thanks

• Guest

How to implement the same in Flex?

• http://www.think360studio.com/ Think360 Studio – Web Design Company

superb tutorial thanks for sharing :)

• Ben

Hey I’ve been trying to figure this out for a while but i cant get it to work. When i preview the animation in the final stages i get these errors. It’d be great if someone could help me out with this.

Line 45 1120: Access of undefined property gt.
Line 48 1120: Access of undefined property lt.

• Ben

nvm :D i figured it out, all i needed was to swap those letters for the symbols .

thanks for the tutorial!

• http://peanutbuttereggdirt.com/e Johnny5k

Thanks for the tutorial! This was VERY helpful!!

• David

I keep on getting the same problem. Every time I get to Step 6 and I test the movie it comes up with 7 errors:

1017: The definition of base class DockItem was not found.
5000: The class ‘org.effects.DockItem’ must subclass ‘flash.display.MovieClip’ since it is linked to a library symbol of that type.
5000: The class ‘org.effects.DockItem’ must subclass ‘flash.display.MovieClip’ since it is linked to a library symbol of that type.
5000: The class ‘org.effects.DockItem’ must subclass ‘flash.display.MovieClip’ since it is linked to a library symbol of that type.
5000: The class ‘org.effects.DockItem’ must subclass ‘flash.display.MovieClip’ since it is linked to a library symbol of that type.
5000: The class ‘org.effects.DockItem’ must subclass ‘flash.display.MovieClip’ since it is linked to a library symbol of that type.
5000: The class ‘org.effects.DockItem’ must subclass ‘flash.display.MovieClip’ since it is linked to a library symbol of that type.

I’m kind of a noob at Action Script so I’m don’t know what to do. I think it might be because the bitmaps of the icons are in the Library alongside the symbols.

PLEASE HELP ME ANDRE!!! THANKS. NICE TUTORIAL BY THE WAY!

• dmd79

Hi. Wonderful tut!!! By far, the best one around, on this subject, thank you. And I hate to be another person asking for “more”, I am having trouble implementing the fscommand function within the Main.as. It works fine when done inside a class definition but the variables are giving issues. I work at a non profit organization that helps teach kids about computers and technology and we would like to be able to link the menu items to local system files, such as task manager, resource monitor, etc. The code we changed is below. It is just the Main.as you provided, just changed. Incorrectly, apparently. We are not flash gurus and you will be helping kids, thanks.

package{

import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.system.fscommand;

public class Main extends Sprite{

public function Main():void{
mc_star.addEventListener(MouseEvent.CLICK,buttonClick);
mc_gear.addEventListener(MouseEvent.CLICK,buttonClick);
mc_apple.addEventListener(MouseEvent.CLICK,buttonClick);
mc_photo.addEventListener(MouseEvent.CLICK,buttonClick);
mc_buy.addEventListener(MouseEvent.CLICK,buttonClick);
mc_contact.addEventListener(MouseEvent.CLICK,buttonClick);
}

private function buttonClick(e:MouseEvent):void{
var exe:fscommand=new fscommand(“exec”,e.target.name);
switch(e.target.name){
case “mc_star”: exe.fscommand=”MyComp.exe”; break;
case “mc_gear”: exe.fscommand=”TaskMan.exe”; break;
case “mc_apple”: exe.fscommand=”ControlPanel.exe”; break;
case “mc_photo”: exe.fscommand=”ResMon.exe”; break;
case “mc_buy”: exe.fscommand=”CoMD.exe”; break;
case “mc_contact”: exe.fscommand=”Explorer.exe”; break;
}
fscommand(“exec”,e.target.name);
}

}
}

• v

hi,

can anyone tell me how to properly make the images so that they don’t look all pixelated upon onmouseover zoom?

thanks!

• v

nevermind, figured it out! for some reason my icons weren’t saving as vectors.

• http://adan.co.il/test.html Mohammad

Hi,
Thanx for great tut… but I have something when i create all in as3 code:
see this http://adan.co.il/test.html

the objects (black) not moving smooth, I tried also 120 fps but nothig..!!

when i create it using the interface of cs5.5 it working good but building all dynamic it is looking very bad
I also tried to embed the font and use antialias but nothing :-(

Can you help me:-)

• Mohammad

I found it :-)

var dock_btn:DockButton=new DockButton;
var bitmap:Bitmap = new Bitmap;
bitmap = (event.target.content as Bitmap);
bitmap.smoothing =true; //this the slution + you can play arround with rate (fps) 32 fps or abov

• CookieMonster

Good day!

I’m aware this is pretty late and aren’t sure if Sir Andre still looks on the queries about this tut. Nonetheless, I’ll still give it a try.

Here’s the problem: I’m following this tut flawlessly and managed to execute it. However, when I tried working on the buttons, which I wanted to navigate on different frames on the same timeline, I can’t manage to do it. I’ve already looked on the material posted on the comments which links the buttons on external swf files, but I can’t manage to rewrite it so that it would link on different frames inside the same fla file. How should I do this? Help would be greatly appreciated! :)

Anyway, I would like to thank the author for this tut. I learned a lot on how classes, methods, and functions work on ActionScript. Kudos!

• dess

HI i don´t know if i can do this but when the mouse is over a button i want it to fade into another button, not just another color. if this is possible PLEASE HELP!!!

• Nando

Hi,

Great tutorial! But how do we load external content through the buttons?

Thanks

• Daniel

Thank you so much!
I am 13 years old, and even I was able to understand your tutorial.
This helped me alot, again, thank you!

My apologize, I am Dutch, so I’m sorry if you can’t read or understand my comment.

• Karl – a newbie programmer

Hey Daniel,

You are a better man than I am. I have been working on this the whole night – got stuck more than a couple of times, and my head hearts from banging it against the monitor’s screen. Gave up in the morning.
I just wanted to share a little piece of kit that I found on a developer’s site. Their Dock Menu is AS2 and is XML customizable, and they offer it for free. I really liked the control panel they have, allows me to customize everything using the interface, not from code (helps when you see live the modifications you want).
For those interested, I found it here, http://www.flashxml.net/dock-menu.html

• Ashwin

This is a wonderful tutorial, it would be great if anybody could help me out in this. I have not yet reached the button stages, so when i test it the icons seem to scale up even when my pointer is at the top left of the stage, so after a couple of trace statements and finally homing in on tracing the stage i found that i have 6 objects on the stage, when i have just 5 icons on the stage and i suspect the 6th object to be the stage itself. Can anybody help me out in sorting this one??

• nikolai

Hi, its the best tutorial I have ever seen in the Web. Thank you for making us, the beginners, able to understand how to make good effects and many other things. But I am having a slight problem with gt and lt. but the code is copy-pasted. So there shouldn’t be any mistake.
That is the mistake – 1120 Access of undefined property gt. 1120 Access of undefined property It. Please help me. The deadline is really soon.

• http://michaeljameswilliams.com/ Michael James Williams

Hey Nikolai,

It’s basically a typo on our part – sorry! You need to replace “&gt;” with “>” and “&lt;” with “<".

• nikolai

Thank you mate – you are really great! In other forums I don’t even expect answer. I have another question
how can I link the buttons with certain frames of the fla file target. And where the code for these buttons must be written (well perhaps in DockButton.as) I mean I want after clicked the button to lead to certain frame or scene in the fla file. Maybe the following code would be useful

this.addEventListener(MouseEvent.CLICK,click);
in the constructor function and added the function:
private function click(e:MouseEvent):void{
gotoAndPlay(2);
}
in the class

or maybe this one:

package{

import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.system.fscommand;

public class Main extends Sprite{

public function Main():void{
mc_star.addEventListener(MouseEvent.CLICK,buttonClick);
mc_gear.addEventListener(MouseEvent.CLICK,buttonClick);
mc_apple.addEventListener(MouseEvent.CLICK,buttonClick);
mc_photo.addEventListener(MouseEvent.CLICK,buttonClick);
mc_buy.addEventListener(MouseEvent.CLICK,buttonClick);
mc_contact.addEventListener(MouseEvent.CLICK,buttonClick);
}

private function buttonClick(e:MouseEvent):void{
var exe:fscommand=new fscommand(“exec”,e.target.name);
switch(e.target.name){
case “mc_star”: gotoAndPlay(14); break;
case “mc_gear”: gotoAndPlay(12); break;
case “mc_apple”:gotoAndPlay(11); break;
case “mc_photo”: gotoAndPlay(15); break;
case “mc_buy”: gotoAndPlay(18); break;
case “mc_contact”: gotoAndPlay(10); break;
}
fscommand(“exec”,e.target.name);
}

}
}
Really thank you – you the ONE!

• nikolai

Hi, it’s me again, I would be really grateful if you help me make link each button with a certain frame from the stage of the fla file! Do I have to import any other classes
I tried many things, one of the things was to write this code:
button_apple.addEventListener(MouseEvent.CLICK,appleClick);
private function appleClick(e:MouseEvent):void{
gotoAndPlay(2);
}

I event tried writing

package {

import org.effects.DockButton;
import flash.display.DisplayObject;
import flash.events.MouseEvent;
import flash.display.MovieClip;
//import flash.net.navigateToURL;
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);
this.addEventListener(MouseEvent.CLICK,click);
TweenPlugin.activate([TintPlugin]);
}

private function mouseOver(e:MouseEvent):void {
new TweenLite(_object,.5,{tint:0x33FF00});
}

private function mouseOut(e:MouseEvent):void {
new TweenLite(_object,.5,{tint:null});
}
private function click(e:MouseEvent):void {
gotoAndPlay(2);
}
}
}

but still the buttons don’t lead to the second frame. Please help me, the deadline is really soon!

• maximus

nikolai,
Did you ever get your problem figured out because I’m trying the same thing and can’t get any of the buttons to navigate to anything!

• Ken

How can I reduce the scaling of my icons if the max scale is too large