Flex Dock Menu: Custom icon navigation like Apple Dock Menu

Developed a simple Mac dock kind of navigation in flex.

It has two components, Main application & dock container component.

Hope you like it & love to get your comments :)

Main application code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:local="*">
<mx:Style source="/styles.css" />
<mx:Script>
<![CDATA[
import mx.controls.ToolTip;
import mx.managers.ToolTipManager;
import mx.controls.Alert;

private var myToolTip:ToolTip;

[Bindable] [Embed (source="images/Flexicon.png")] private var icon1:Class;
[Bindable] [Embed (source="images/Flash.png")] private var icon2:Class;
[Bindable] [Embed (source="images/adobe_photoshop.png")] private var icon3:Class;
[Bindable] [Embed (source="images/Adobe_dreamweaver_cs5.png")] private var icon4:Class;

private function resetImages():void
{
image1.width = 192;
image1.height = 256;
image2.width = 192;
image2.height = 256;
image3.width = 192;
image3.height = 256;
image4.width = 192;
image4.height = 256;

}

private function iconClickHandler(keyStr:int):void
{
Alert.show("Clicked on icon# " + keyStr);
}

private function glowOn(event:MouseEvent):void {
var glow:GlowFilter=new GlowFilter();
glow.color=0x63B8FF;
glow.blurX=glow.blurY=20;
event.currentTarget.filters=[glow];
}

private function glowOff(event:MouseEvent):void {
event.currentTarget.filters=[];
}

private function showToolTipAbove(evt:MouseEvent, text:String, wid:int):void
{
switch (text)
{
case "Flex":
iconLabel1.visible = false;
iconLabel2.visible = true;
iconLabel3.visible = true;
iconLabel4.visible = true;
break;
case "Flash":
iconLabel1.visible = true;
iconLabel2.visible = false;
iconLabel3.visible = true;
iconLabel4.visible = true;
break;
case "Photoshop":
iconLabel1.visible = true;
iconLabel2.visible = true;
iconLabel3.visible = false;
iconLabel4.visible = true;
break;
case "Dreamweaver":
iconLabel1.visible = true;
iconLabel2.visible = true;
iconLabel3.visible = true;
iconLabel4.visible = false;
break;
}

var pt:Point = new Point(evt.currentTarget.x, evt.currentTarget.y);

pt = evt.currentTarget.parent.contentToGlobal(pt);

myToolTip = ToolTipManager.createToolTip(text, pt.x, pt.y) as ToolTip;
myToolTip.width = wid;
myToolTip.setStyle("borderColor", "#ff6600");
myToolTip.setStyle("color", "black");
myToolTip.setStyle("fontSize","15");
myToolTip.setStyle("backgroundColor",0xFFCC00);

var yOffset:int = myToolTip.height + 5;
myToolTip.y -= yOffset;
}

private function killToolTip():void
{
ToolTipManager.destroyToolTip(myToolTip);
iconLabel1.visible = true;
iconLabel2.visible = true;
iconLabel3.visible = true;
iconLabel4.visible = true;
}

]]>
</mx:Script>
<mx:VBox width="100%" height="70%" verticalAlign="middle" verticalGap="0">
<mx:VBox width="100%" horizontalAlign="center" height="150" verticalAlign="middle">
<mx:HBox width="100%" horizontalAlign="center">
<mx:Label id="iconLabel1" styleName="labelStyle" text="Flex" width="192"/>
<mx:Label id="iconLabel2" styleName="labelStyle" text="Flash" width="192"/>
<mx:Label id="iconLabel3" styleName="labelStyle" text="Photoshop" width="192"/>
<mx:Label id="iconLabel4" styleName="labelStyle" text="Dreamweaver" width="192"/>
</mx:HBox>
<local:Dockcontainer id="dockbar" bottom="0" height="100%" minSize="192" maxSize="256" rollOut="resetImages()">
<mx:HBox height="100%" id="innerCanvas" horizontalGap="5"
backgroundColor="#333333" backgroundAlpha=".0" hideEffect="WipeDown" showEffect="WipeUp">

<mx:Image id="image1" click="iconClickHandler(1)" width="192" height="256" source="{icon1}" buttonMode="true" useHandCursor="true" rollOver="glowOn(event)" rollOut="glowOff(event)" mouseOver="{showToolTipAbove(event,'Flex',50)}" mouseOut="{killToolTip()}"/>
<mx:Image id="image2" click="iconClickHandler(2)" width="192" height="256" source="{icon2}" buttonMode="true" useHandCursor="true" rollOver="glowOn(event)" rollOut="glowOff(event)" mouseOver="{showToolTipAbove(event,'Flash',60)}" mouseOut="{killToolTip()}"/>
<mx:Image id="image3" click="iconClickHandler(3)" width="192" height="256" source="{icon3}" buttonMode="true" useHandCursor="true" rollOver="glowOn(event)" rollOut="glowOff(event)" mouseOver="{showToolTipAbove(event,'Photoshop',100)}" mouseOut="{killToolTip()}"/>
<mx:Image id="image4" click="iconClickHandler(4)" width="192" height="256" source="{icon4}" buttonMode="true" useHandCursor="true" rollOver="glowOn(event)" rollOut="glowOff(event)" mouseOver="{showToolTipAbove(event,'Dreamweaver',120)}" mouseOut="{killToolTip()}"/>
</mx:HBox>
</local:Dockcontainer>
</mx:VBox>
</mx:VBox>

</mx:Application>



Dock container component code:


<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas clipContent="false" xmlns:mx="http://www.adobe.com/2006/mxml" mouseChildren="true"
mouseMove="onmousemove(event)" rollOut="close()" initialize="init()">

<mx:Script>
<![CDATA[
import mx.controls.Label;
import mx.containers.HBox;
import flash.events.MouseEvent;

import mx.containers.Box;
import mx.containers.Canvas;
import mx.controls.Image;

public var items:Array;
public var images:Array=[];
public var innerCanvas:HBox=new HBox();
public var menuLabel:Label;

[Bindable] public var minSize:Number=32;
public var maxSize:Number=64;
public var w:Number;
public var span:Number=20;

private function close():void {
height=20;
}

public function open():void {
innerCanvas.visible=true;
height=150;
}

private function onmousemove(event:MouseEvent):void {

images=innerCanvas.getChildren();
var len:uint=images.length;
var middlei:int=Math.floor(len/2);
var w:Number=0;
for (var i:uint=0; i<len; i++) {
var image:Image=images[i];
var dx:Number=Math.abs(innerCanvas.mouseX-image.x);
var dy:Number=Math.abs(innerCanvas.mouseY-image.y);
var d:Number=Math.sqrt(dx*dx+dy*dy);
var fx:Number=image.width/image.height;
image.width=maxSize-d/5;
if(image.width<minSize) image.width=minSize;
if(image.width>maxSize) image.width=maxSize;
w+=image.width+span;
}
event.updateAfterEvent();
}

public function init():void {
innerCanvas=HBox(this.getChildAt(0));
close();
}

private function onover(event:MouseEvent):void {
open();
}

public function addItem(event:Event):void {
images.push(event.currentTarget);
}
]]>
</mx:Script>
</mx:Canvas>



Addition to this, it requires some images & css files. I have uploaded the project file @ adobe cookbooks.

Please go to the below link to download the project. Demo also.


http://cookbooks.adobe.com/post_Flex_Dock_Menu_Navigation_like_Apple_Dock_Navigati-19014.html