Flex 图片自动播放与图片拉伸

最新推荐文章于 2024-07-08 11:25:57 发布

zhiwei

最新推荐文章于 2024-07-08 11:25:57 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Flex开发文章标签： flex function class parallel import timer

本文链接：https://blog.youkuaiyun.com/zhiweiofli/article/details/5420496

Flex开发专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用Flex实现的图片轮播组件。该组件通过定时器自动切换图片，并结合鼠标悬停停止播放的效果，实现了一种平滑过渡的轮播体验。文章详细展示了如何利用Flex的Canvas和Image组件及脚本代码实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近，做了个小部件，但是被一些小问题纠缠不清，现在拿出来与大家分享。

先看源代码：

    <mx:Parallel id="pe">
            <mx:Fade id="fe" alphaFrom="0" alphaTo="0.8" duration="600" />
            <mx:Blur id="be" blurXFrom="50" blurXTo="0" blurYFrom="50" blurYTo="0" duration="600" />
    </mx:Parallel>

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.EffectEvent;
            import flash.events.MouseEvent;

            [Bindable]
            [Embed(source="1.jpg")]
            private var imgClass1:Class;
            [Bindable]
            [Embed(source="2.jpg")]
            private var imgClass2:Class;
            [Bindable]
            [Embed(source="3.jpg")]
            private var imgClass3:Class;
            [Bindable]
            [Embed(source="4.jpg")]
            private var imgClass4:Class;
            [Bindable]
            [Embed(source="5.jpg")]
            private var imgClass5:Class;
            [Bindable]
            [Embed(source="6.jpg")]
            private var imgClass6:Class;

            private var imgArray:ArrayCollection;

             private var t:Timer = new Timer(3000);
            private var index:int = 0;

            public function init():void{

                    imgArray = new ArrayCollection();
                    imgArray.addItem(imgClass1);
                    imgArray.addItem(imgClass2);
                    imgArray.addItem(imgClass3);
                    imgArray.addItem(imgClass4);
                    imgArray.addItem(imgClass5);
                    imgArray.addItem(imgClass6);

                     img.scaleX = 2;
                     img.scaleY = 1;
                     img.source = imgArray[index] as Class;
                    img.addEventListener(MouseEvent.ROLL_OVER,stopPlay);
                    img.addEventListener(MouseEvent.ROLL_OUT,countinuePlay);
                    t.addEventListener(TimerEvent.TIMER,autoPlay);
                    t.start();
            }

             public function completeEvent(event:Event):void {

                     Bitmap(event.target.content).smoothing = true;
                     img.content.width = thumbnailContainer.width;
                     img.content.height = thumbnailContainer.height;
             }

           //每次完成载入，就对图片进行重新的大小定义

            public function autoPlay(event:TimerEvent):void{
                    index++;
                    if(index > imgArray.length - 1) index=0;
                    img.source = imgArray[index];
            }

            public function stopPlay(event:MouseEvent):void{
                    t.stop();
            }

            public function countinuePlay(event:MouseEvent):void{
                    t.start();
            }


            public function remove(event:EffectEvent):void{
                   event.effectInstance.reverse();
                   event.effectInstance.play();
            }

        ]]>
    </mx:Script>

    <mx:Canvas id="thumbnailContainer" width="529" height="191" y="0" x="0">
        <mx:Image width="100%" height="100%" id="img" completeEffect="pe"
                        maintainAspectRatio="false" scaleContent="true" complete="completeEvent(event)" x="0" y="0"/>
    </mx:Canvas>