FLEX图形菜单效果

我们先来看看要做到什么效果，我要说明的是这个效果是在AIR中使用效果更好，因为web的方式使用有些不伦不类的感觉，在AIR桌面程序中，在顶部菜单之下加入一行图片菜单，那么我们将要实现的功能就是针对与这个图形菜单效果：

 

 

在鼠标没有碰触之前：   ，在鼠标碰触后： 

 

那么这么看是两幅图片，实际上我在实现的时候也是利用的图片切换的原理是先这个效果的：

 

 

 

请看AS代码：

 

package customClass
{
	import flash.display.BitmapData;
	import flash.display.DisplayObject;
	import flash.display.IBitmapDrawable;
	import flash.events.MouseEvent;
	
	import mx.controls.LinkButton;

	public class MyCustomCanvas extends LinkButton
	{
		[Embed(source="delete_icon.png")]
		private var img:Class;
		[Embed(source="adobelogo.jpg")]
		private var img1:Class;
		public function MyCustomCanvas()
		{
			super();
		}
		override protected function updateDisplayList(w:Number, h:Number):void
		{
			super.updateDisplayList(w,h);
			var myImage= new img();
			var bitMapData:BitmapData = new BitmapData((myImage as DisplayObject).width,(myImage as DisplayObject).height,true);
			//var myImage:Bitmap = new Bitmap(bitMapData);
			bitMapData.draw(myImage as IBitmapDrawable);
			graphics.clear();
		    graphics.beginBitmapFill(bitMapData);
		    graphics.drawRect(0,0,w,h);
			graphics.endFill();
		}
		override protected function rollOverHandler(event:MouseEvent):void
		{
			
			event.preventDefault();
			
			 var myImage= new img1();
			var wi:Number = ((event.target) as DisplayObject).width;
			var he:Number = ((event.target) as DisplayObject).height;
			var bitMapData:BitmapData = new BitmapData((myImage as DisplayObject).width,(myImage as DisplayObject).height,true);
			bitMapData.draw(myImage as IBitmapDrawable);
			graphics.clear();
		    graphics.beginBitmapFill(bitMapData);
		    graphics.drawRect(0,0,wi,he);
			graphics.endFill(); 
		}
		
		override protected function rollOutHandler(event:MouseEvent):void
		{
			event.preventDefault();
			var wi:Number = ((event.target) as DisplayObject).width;
			var he:Number = ((event.target) as DisplayObject).height;
			var myImage= new img();
			var bitMapData:BitmapData = new BitmapData((myImage as DisplayObject).width,(myImage as DisplayObject).height,true);
			//var myImage:Bitmap = new Bitmap(bitMapData);
			bitMapData.draw(myImage as IBitmapDrawable);
			graphics.clear();
		    graphics.beginBitmapFill(bitMapData);
		    graphics.drawRect(0,0,wi,he);
			graphics.endFill();
		}
		/* override protected function clickHandler(event:MouseEvent):void
		{
			
		} */
		
	}
}

 

 

 
MXML调用页面：

 

    

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:myComponent="customClass.*">
	<mx:HBox>
		<myComponent:MyCustomCanvas width="40" height="25">
		</myComponent:MyCustomCanvas>
		<myComponent:MyCustomCanvas width="40" height="25">
		</myComponent:MyCustomCanvas>
		<myComponent:MyCustomCanvas width="40" height="25">
		</myComponent:MyCustomCanvas>
		<myComponent:MyCustomCanvas width="40" height="25">
		</myComponent:MyCustomCanvas>
		<myComponent:MyCustomCanvas width="40" height="25">
		</myComponent:MyCustomCanvas>
	</mx:HBox>
</mx:Application>

 

 

这样基本上就实现了这个效果，很显然有些粗糙，你可以再继续重写一些方法，或者多加一些方法，那么出现的效果更加直观，比如你可以在数据库中取出图片的地址和链接的地址以及链接的方式等，就写到这里吧，有时间我会完善该功能并上传源代码。