Quick port of “Mac Dock Style Menu with AS3.0” into a single class

Here’s a Document Class version of an ActiveTuts+ tutorial called Create a Mac Dock Style Menu with AS3.

Here’s what I changed:

  • removed each button’s dependence on 3-level deep inheritance (OverButton > DockButton > DockItem)
  • removed each Library symbol’s linkage to OverButton.as
  • simplified the menu a bit for the purposes of this example, so that only the X axis moves. It’s easy enough to add in the Y axis & scale variables, if/when needed. You should be able to extend DockMenu.as to add the extra features, like Y axis movement & Scaling or add those vars directly.
package 
{	
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
	import com.greensock.TweenMax;
	import flash.display.DisplayObjectContainer;
	
	public class DockMenu extends MovieClip
	{					
		protected var maxXDistance:Number = 50;
		protected var menuXes:Array = []; 
		protected var menuBtns:Array = []; 
		
		public function DockMenu():void 
		{
			addEventListener( Event.ADDED_TO_STAGE, init );			
		}					
	
		public function init(e:Event=null):void
		{			
			removeEventListener( Event.ADDED_TO_STAGE, init );						
			
			//uncheck "Export for Actionscript" for each of 
            //the button mc's in the Library			
			menuBtns = [star, config, apple, photo, shop, cont ]; 
			
			for( var f:uint=0; f < 6; f++ )
			{
				menuXes[f] = menuBtns[f].x; 
				menuBtns[f].buttonMode = true;
				menuBtns[f].mouseChildren = false; 
				var bounds:Rectangle = getBounds( menuBtns[f] );
				var hit:Sprite = new Sprite();
				hit.graphics.beginFill( 0,0 );
				hit.graphics.drawRect( bounds.x, bounds.y, bounds.width, bounds.height );		
				menuBtns[f].addChild( hit );
			}
			
			stage.addEventListener( MouseEvent.MOUSE_MOVE, mouseMove );
			stage.addEventListener( Event.MOUSE_LEAVE, mouseLeave );			
		}
		
		public function mouseMove(e:MouseEvent):void
		{								
			for( var g:uint=0; g < 6; g++ )
			{
				var xDistance:Number = mouseX - menuXes[g]; 
				xDistance = xDistance > maxXDistance ? maxXDistance : xDistance; 			
				xDistance = xDistance < -maxXDistance ? -maxXDistance : xDistance;
				var posX:Number = menuXes[g] - xDistance * 0.2; 
				TweenMax.to( menuBtns[g], .2, { x:posX } );		
			}		
		}
				
		public function mouseLeave(e:Event):void
		{			
			for( var h:uint=0; h < 6; h++ )
				TweenMax.to( menuBtns[h], .3, { x:menuXes[h] } );
		}
	}	
}
Advertisements

7 thoughts on “Quick port of “Mac Dock Style Menu with AS3.0” into a single class

  1. Don’t suppose you could upload the new source code for the above? This is (potentially) exactly what I am looking for but I have no idea how to use your code to alter the original…

  2. I dont know that having the stage listeners work to mimic the doc style functionality. I would imagine it needs to be listeners for mouse over/out events on the menu items themselves.

    • The above version worked fine for what I needed it to do. Your version sounds like it would be more portable & modular. If you have the time, I’m sure folks would appreciate a quick coded example.

  3. I’m not quite understanding how to implement this from another class such as Main.as for a website, also what is menuBtns array being filled with if none of the buttons have linkage to the Library? Thanks for the script helped get rid of a lot of problems I was having with the earlier version but still having trouble getting this working now.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s