注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

有你做翅膀,孤单都是坚强

生命中总要经历曲折,或许是我们不愿意,突然到最后走不通,想重新来过,记录每件小事

 
 
 

日志

 
 
关于我
K24

曾经的生涩,曾经的懵懂,曾经的自恋,都随风去吧。。。

网易考拉推荐
 
 

一组不错的菜单导航  

2012-11-03 10:40:49|  分类: @flex |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
一组不错的菜单导航 - 李印贞 - 有你做翅膀,孤单都是坚强
 
一组不错的菜单导航 - 李印贞 - 有你做翅膀,孤单都是坚强
貌似也没有用到其它太多东西, 下面这样三个文件足够了
1, DockMenu.mxml

<?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>

2, Dockcontainer.mxml

<?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>

3, styles.css

/* CSS file */
@font-face
{
src: url("/assets/MyriadWebPro.ttf");
font-family: main;
font-style: normal;
font-weight: normal;
}

@font-face
{
src: url("/assets/MyriadWebPro-Bold.ttf");
font-family: main;
font-style: normal;
font-weight: bold;
}

Application
{
background-gradient-colors: #D8DCD0, #D8DCD0;
color: #000000;
font-family: main;
backgroundAlpha: 1;
border-thickness: 0px;
backgroundColor: #ffffff;
font-size: 12;
line-height: 2px;
paddingTop:0px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
border-color: #FFFFFF;
theme-color: #77896C;
}

ToolTip{
fontFamily: "main";
fontSize: 13;
fontStyle: "normal";
color: #000000;
backgroundColor: #FAF8CC;
}


  评论这张
 
阅读(32)| 评论(0)
推荐

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017