flex添加gif图片

Flex里Image控件插入gif动画的图片默认只显示一帧,也就是说是不会动的,我们可以借助GifPlayer类包来实现Flex里插入动画的Gif图片。

GifPlayer下载:http://code.google.com/p/as3gif/downloads/list如图,提取org文件夹并放在程序目录src下面就可以了。


实例一:简单添加gif

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Script>
		<![CDATA[
		import org.bytearray.gif.player.GIFPlayer;
			
		private var gifPlay:GIFPlayer=new GIFPlayer();
		private function init():void{
		var req:URLRequest=new URLRequest("../flex_src/images/复件-雨量图标.gif");
		gifPlay.load(req);
		gifImg.addChild(gifPlay);  
		} 
		]]>
	</fx:Script>
	<mx:TitleWindow title="abc" id="ADwindow" width="1000" height="800" >
		<mx:Image id="gifImg" width="221" height="92" creationComplete="init()"/>
	 </mx:TitleWindow>
</s:Application>


实例二:演示了几个常用的功能:播放、停止、到第几帧播放、到第几帧停止。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="init()">
	<fx:Script>
		<![CDATA[
			import flash.net.URLRequest;  
			import org.bytearray.gif.player.GIFPlayer;  
			import org.bytearray.gif.events.FileTypeEvent;  
			import org.bytearray.gif.events.GIFPlayerEvent;  
			import org.bytearray.gif.events.FrameEvent;  
			import org.bytearray.gif.events.TimeoutEvent;  
			private var _myGIFPlayer:GIFPlayer = new GIFPlayer();//实例化GIFPlayer实例  
			private var _totalFrame:Number;//总帧数  
			//private var _currentFrame:Number;  
			
			private function init():void   
			{  
				var request:URLRequest = new URLRequest("../flex_src/images/复件-雨量图标.gif");//同级目录下得md.gif图片  
				_myGIFPlayer.load(request);  
				img.addChild(_myGIFPlayer);//img控件添加播放  
				_myGIFPlayer.addEventListener(GIFPlayerEvent.COMPLETE, onCompleteGIF);//载入gif图片完毕时的回调函数  
				_myGIFPlayer.addEventListener(FrameEvent.FRAME_RENDERED, onFrameRendered);//读取帧的回调函数  
				//_myGIFPlayer.addEventListener(TimeoutEvent.TIME_OUT, onTimeOut);  
			}  
			
			private function onCompleteGIF(event:GIFPlayerEvent):void   
			{  
				_totalFrame = _myGIFPlayer.totalFrames;//总帧数  
				totalframe.text = String(_totalFrame);  
			}  
			
			private function onFrameRendered(event:FrameEvent):void   
			{  
				currentframe.text = String(_myGIFPlayer.currentFrame);//当前播放的帧数  
			}  
			
			private function onTimeOut(event:TimeoutEvent):void   
			{  
				trace ("gif is error!");  
			}  
			
			private function play():void   
			{  
				_myGIFPlayer.play();  
			}  
			
			private function stop():void   
			{  
				_myGIFPlayer.stop();  
			}  
			
			private function gotoandplay():void   
			{  
				var numFrame:Number = Math.floor(Math.random() * _totalFrame ) + 1;  
				_myGIFPlayer.gotoAndPlay(numFrame);  
				gotoplaybtn.label = "gotoPlay(" + numFrame + ")";  
			}  
			
			private function gotoandstop():void   
			{  
				var numFrame:Number = Math.floor(Math.random() * _totalFrame ) + 1;  
				_myGIFPlayer.gotoAndStop(numFrame);  
				gotostopbtn.label = "gotoStop(" + numFrame + ")";  
			} 
			
		]]>
	</fx:Script>
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<mx:Image id="img" width="217" height="300" top="30" left="240"/>  
	
	<mx:ApplicationControlBar width="80%" bottom="20" horizontalCenter="0">  
		<mx:Button label="Play" height="22" click="play();" styleName="primaryButton" />  
		<mx:Button label="Stop" height="22" click="stop();" />  
		<mx:Button id="gotoplaybtn" height="22" label="gotoPlay(rand)" click="gotoandplay();" />  
		<mx:Button id="gotostopbtn" height="22" label="gotoStop(rand)" click="gotoandstop();" />  
		<mx:Label text="TotalFrame:" />  
		<mx:Label id="totalframe" />  
		<mx:Label text="CurrentFrame:" />  
		<mx:Label id="currentframe" />  
	</mx:ApplicationControlBar>  
</s:Application>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值