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

来源：互联网发布：安卓91 数据统计工具编辑：程序博客网时间：2024/04/30 11:10

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

先看源代码：

    <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>

Flex image组件中有一个scaleContent属性，可使载入的图片按比例放大缩小，当然也可以使用scaleX与scaleY属性来定义，但是放大缩小的比例就很难自定义了，以上的脚本就实现了图片与外面容器大小相当的填充效果。