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

风之泪

风过雨过,花开花落。。。

 
 
 

日志

 
 

Flex实现图片展播+渐出特效  

2010-11-22 23:17:54|  分类: flex |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
         实现的原理是通过XML配置图片数据,Flex读取XML文件获取到图片数据,然后将当前显示的图片设置为XML中配置的第一条数据的图片,通过四个按扭来控制图片播放的索引,同时为图片也加了事件处理函数,点击图片就切换到下一张图片。下面是最终效果图。
 ImageShow.jpg
废话少说,直接上代码。 <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.core.UIComponent;
            [Bindable]
            private var picArray:ArrayCollection;
            [Bindable]
            private var index:Number = 0;
           
            private function init():void
            {
                var loader:URLLoader = new URLLoader();
                loader.addEventListener(Event.COMPLETE,onComplete);
                loader.load(new URLRequest("data/pic.xml"));
            }
           
            private function onComplete(event:Event):void
            {
                var xml:XML = new XML(event.target.data);
               
                picArray = new ArrayCollection();
                for(var i:Number = 0;i <xml.children().length();i++)
                {
                    var o:Object = new Object();
                    o.ImageUrl = xml.pic[i].imageUrl;
                    picArray.addItem(o);
                }
            }
           
            private function onClickHandler(id:String):void
            {
                switch(id)
                {
                    case "btn1":
                        this.index = 0;
                        break;
                    case "btn2":
                        if(this.index != 0)
                        {
                            this.index -= 1;
                        }
                        break;
                    case "btn3":
                        if(this.index != picArray.length-1)
                        {
                            this.index += 1;
                        }
                        break;
                    case "btn4":
                        this.index = picArray.length - 1;
                        break;
                }
            }
           
            private function onImageClick(event:MouseEvent):void
            {
                if(this.index == picArray.length -1)
                {
                    this.index = 0;
                }
                else
                {
                    this.index++;
                }
            }
        ]]>
    </mx:Script>
    <mx:Panel x="73" y="78" width="701" height="536" layout="absolute" fontSize="12">
        <mx:Image x="0" y="0" width="680" height="455" id="imageShow" completeEffect="{fadeIn}"
            source="{picArray.getItemAt(index).ImageUrl}" click="onImageClick(event)"/>
        <mx:Button x="154" y="463" label="第一张" id="btn1" click="onClickHandler(btn1.id)"/>
        <mx:Button x="227" y="462" label="上一张" id="btn2" click="onClickHandler(btn2.id)"/>
        <mx:Button x="300" y="462" label="下一张" id="btn3" click="onClickHandler(btn3.id)"/>
        <mx:Button x="373" y="462" label="最后一张" id="btn4" click="onClickHandler(btn4.id)"/>
        <mx:Label x="607" y="466" width="73" id="indexCount" color="#FF0030" fontWeight="bold"
            text="{(index+1) + '/' + picArray.length}"/>
    </mx:Panel>
    <mx:Fade id="fadeIn" duration="2000" alphaFrom="0.18" alphaTo="1.0"/>
</mx:Application>
  评论这张
 
阅读(411)| 评论(0)
推荐 转载

历史上的今天

评论

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

页脚

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