浏览 3623 次
|
锁定老帖子 主题：苹果导航按钮-flex版本
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-10-30
做了一个 仿苹果导航的按钮。 算法参考 “流浪儿 ”的MacintoshMenu(仿苹果机菜单)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init();"
verticalScrollPolicy="off"
verticalGap="100"
horizontalScrollPolicy="off"
verticalAlign="bottom"
width="600"
height="200"
layout="horizontal">
<mx:Script>
<![CDATA[
import mx.controls.Image;
import mx.controls.Alert;
public var imageArray:Array;
public var timer:Timer;
public static const ORGINSIZE:int = 60;
public static const CROSSSIZE:int = 80;
public static const TWICENUM:Number = 2.5;
public static const OFFSETY:int = 0;
public static const OFFSETX:int = 0;
private function init():void{
imageArray = new Array();
imageArray.push(getImageObj(image1));
imageArray.push(getImageObj(image2));
imageArray.push(getImageObj(image3));
imageArray.push(getImageObj(image4));
imageArray.push(getImageObj(image5));
imageArray.push(getImageObj(image6));
imageArray.push(getImageObj(image7));
timer = new Timer(50, 0);
timer.addEventListener(TimerEvent.TIMER, modifyImage);
timer.start();
}
private function getImageObj(img:Image):Object{
var obj:Object = new Object();
var imageX:Number = img.x + img.width/2;
var imageY:Number = this.height;
obj.image = img;
obj.orgX = imageX;
obj.orgY = imageY;
return obj;
}
private function modifyImage(event:TimerEvent):void{
for(var i:String in imageArray){
var _image:Image = imageArray[i].image;
var _mouseY:Number = stage.mouseY - OFFSETY;
var _mouseX:Number = stage.mouseX - OFFSETX;
if(_mouseY < imageArray[i].orgY && (imageArray[i].orgY - _mouseY) < _image.height * TWICENUM){
var percentX:Number = 0;
var percentY:Number = 0;
var percentXY:Number = 0;
if(_mouseX < imageArray[i].orgX && (imageArray[i].orgX - _mouseX) < _image.width * TWICENUM){
percentX = 1 - (imageArray[i].orgX - _mouseX)/(_image.width * TWICENUM)
}else if(_mouseX >= imageArray[i].orgX && (_mouseX - imageArray[i].orgX) < _image.width * TWICENUM){
percentX = 1 - (_mouseX - imageArray[i].orgX)/(_image.width * TWICENUM)
}
percentY = 1 - (imageArray[i].orgY - ORGINSIZE/2 - _mouseY)/(_image.height * TWICENUM - ORGINSIZE/2)
if(percentY > 1)percentY = 1;
percentXY = percentX * percentY;
imageArray[i].image.width = CROSSSIZE * percentXY + ORGINSIZE;
imageArray[i].image.height = CROSSSIZE * percentXY + ORGINSIZE;
}
}
}
]]>
</mx:Script>
<mx:Image id="image1" toolTip="Image1" source="@Embed(source='assets/icons/1.png')"
width="{ORGINSIZE}" height="{ORGINSIZE}" click="Alert.show('Click image1')"/>
<mx:Image id="image2" toolTip="Image2" source="@Embed(source='assets/icons/2.png')"
width="{ORGINSIZE}" height="{ORGINSIZE}" click="Alert.show('Click image2')"/>
<mx:Image id="image3" toolTip="Image3" source="@Embed(source='assets/icons/3.png')"
width="{ORGINSIZE}" height="{ORGINSIZE}" click="Alert.show('Click image3')"/>
<mx:Image id="image4" toolTip="Image4" source="@Embed(source='assets/icons/4.png')"
width="{ORGINSIZE}" height="{ORGINSIZE}" click="Alert.show('Click image4')"/>
<mx:Image id="image5" toolTip="Image5" source="@Embed(source='assets/icons/5.png')"
width="{ORGINSIZE}" height="{ORGINSIZE}" click="Alert.show('Click image5')"/>
<mx:Image id="image6" toolTip="Image6" source="@Embed(source='assets/icons/6.png')"
width="{ORGINSIZE}" height="{ORGINSIZE}" click="Alert.show('Click image6')"/>
<mx:Image id="image7" toolTip="Image7" source="@Embed(source='assets/icons/7.png')"
width="{ORGINSIZE}" height="{ORGINSIZE}" click="Alert.show('Click image7')"/>
</mx:Application>
主要是用timer去监听鼠标的移动，然后根据鼠标的坐标去计算按钮的变化。 刚开始是想通过Image控件本身去监听mouseOver事件，但事件响应效果很差，并且不能监听鼠标在Image控件附近时的行为。 后来又考虑给Application添加mouseOver事件的监听，同样是响应效果很差。
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-10-31
|
| 返回顶楼 | |
