6 Replies Latest reply on Jan 5, 2010 6:53 AM by macdavid

    Image actionscript question

    macdavid

      I have created an new Image using actionscript

       

      var img:Image = new Image();

      img.source = images[imageViewer.horizontalScrollPosition].source;

      img.maintainAspectRatio = true;

      img.scaleContent = true;

      img.autoLoad = true;

       

       

      I am trying to find out how to create a Fade effect when the image createCompleted, simular to the completeEffect in MXML. Anyone have a simple example. I would really appreciate it....

       

      Thanks

        • 1. Re: Image actionscript question
          Subeesh Arakkan Level 4

          Hi,

           

          try the following code. It may work

           

          var img:Image = new Image();

          img.addEventListener(Event.COMPLETE,onImageLoadComplete);

          img.setStyle("showEffectFade",new Fade());

          img.visible = false;

           

          img.source = images[imageViewer.horizontalScrollPosition].source;

          img.maintainAspectRatio = true;

          img.scaleContent = true;

          img.autoLoad = true;

           

          private function onImageLoadComplete(event:Event):void
          {
                          Image(event.currentTarget).visible = true;
            }

          • 2. Re: Image actionscript question
            macdavid Level 1

            Unless I am missing something, it did not work. I am trying to create a rotator that does not show the with space in between images. I want each new image to fadein over the previous image and can do it with  HorizontalList, so I am creating a new image and placing it on top of the previous image and trying fadein the each new image. If have any ideas on this I would really appreciate  any help.

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
            title="Our Store"
            width="740" height="450"
            horizontalAlign="center"
            verticalAlign="top"
            horizontalScrollPolicy="off"
            verticalScrollPolicy="off"
            creationComplete="imageService.send()" >
            <mx:Script>
                    <![CDATA[
                    import mx.events.EffectEvent;
                    import mx.events.FlexEvent;
                    import mx.controls.Image;
            import mx.events.SliderEvent;
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
            import mx.controls.Alert;
            import mx.effects.Fade;

             

            [Bindable]
            private var images:ArrayCollection;

             

            [Bindable]
            private var currentSlide:Object;

             

            private var timer:Timer;

             

            private var fade:Fade;

             

            private function resultHandler(event:ResultEvent):void {
            images = event.result.images.image;

             

            init();
            }

             

            private function init():void {
            timer = new Timer(8000);
            timer.addEventListener(TimerEvent.TIMER, onTimer);

             

            firstImage();

             

            startTimer();
            }

             

            private function onTimer(e:TimerEvent):void {
            nextImage();
            }

             

            private function startTimer():void {
            timer.start();
            }

             

            private function stopTimer():void {
            timer.reset();
            private function firstImage():void {
            fade = new Fade();
            fade.alphaFrom = 0;
            fade.alphaTo = 1;
            fade.duration = 4000;

             

             

            var img:Image = new Image();
            img.setStyle("showEffectFade",fade)
            img.source = images[imageViewer.horizontalScrollPosition].source;
            img.maintainAspectRatio = true;
            img.scaleContent = true;
            img.autoLoad = true;
            img.visible = false;
            img.addEventListener(Event.COMPLETE,onImageLoadComplete);

             

            imgContainer.addChild(img); ;
            }

             

            private function prevImage():void {
            var pos:int = imageViewer.horizontalScrollPosition-1;
            var min:int = 0;
            var value:int = Math.max(min, pos);

             

            imageViewer.horizontalScrollPosition = value;
            }
            private function nextImage():void {
            var pos:int = imageViewer.horizontalScrollPosition+1;
            var max:int = imageViewer.maxHorizontalScrollPosition;
            var value:int = Math.min(pos, max);
            if(value >= max){
            value = 1;
            }

             

            fade = new Fade();
            fade.alphaFrom = 0;
            fade.alphaTo = 1;
            fade.duration = 4000;

             

             

            var img:Image = new Image();
            img.setStyle("showEffectFade",fade)
            img.source = images[imageViewer.horizontalScrollPosition].source;
            img.maintainAspectRatio = true;
            img.scaleContent = true;
            img.autoLoad = true;
            img.visible = false;
            img.addEventListener(Event.COMPLETE,onImageLoadComplete);

             

            imgContainer.addChild(img);

             

            if(imgContainer.numChildren > 2){
            imgContainer.removeChildAt(1);
            }
            imageViewer.horizontalScrollPosition = value;

             

            }

               

            /*  private function slideChange(evt:SliderEvent):void {
            imageViewer.horizontalScrollPosition = evt.value;
            } */

             

            private function onImageLoadComplete(event:Event):void {
            Image(event.currentTarget).visible = true;
            }

             

                    ]]>
                </mx:Script>

             

                <mx:HTTPService id="imageService" url="components/store/store.xml" result="resultHandler(event)" showBusyCursor="true" />

             

            <mx:Canvas id="imgContainer" width="100%" height="100%"  verticalCenter="0" horizontalCenter="0" backgroundColor="#D2CECE"  horizontalScrollPolicy="off" verticalScrollPolicy="off>

             

            </mx:Canvas>
            <mx:HorizontalList
            id="imageViewer"
            dataProvider="{images}"
            visible="false"/>

             

            </mx:Panel>

            • 3. Re: Image actionscript question
              Subeesh Arakkan Level 4

              Hi,

               

              Try adding the event listener before setting the source

              • 4. Re: Image actionscript question
                macdavid Level 1

                I made the changes and have tried everything I can think of, but no luck yet.  Thanks for your help. If you have any more ideas, I would love to hear them...

                • 5. Re: Image actionscript question
                  Bertrand G.

                  hum... aren't you missing a fade.play(); somewhere? You could put it in a loadComplete listener...

                  • 6. Re: Image actionscript question
                    macdavid Level 1

                    Ok I have it working now with one exception. If the images are not all the same size then I can't seem to center them in my imgContainer container. I need to be able to do something like img.horizontalCenter=0;  and img.verticalCenter=0; but Flex does not recognize this.

                     

                    Working example www.murphysmusicoftexas.com

                     

                    Please let me know what you think?

                     

                     

                    img = new Image;

                    img.setStyle("showEffect",effects)

                    img.addEventListener(Event.COMPLETE,onImageLoadComplete);

                    img.source = images[imageViewer.horizontalScrollPosition].source;

                    img.maintainAspectRatio = true;

                    img.scaleContent = true;

                    img.autoLoad = true;

                    img.visible = false;

                    img.width = this.width;

                    img.height = this.height;

                    img.horizontalCenter = 0;

                    img.verticalCenter = 0;

                     

                     

                     

                    Example

                     

                    <?xml version="1.0" encoding="utf-8"?>

                    <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"

                    title="Our Store"

                    width="720" height="460"

                    horizontalAlign="center"

                    verticalAlign="top"

                    horizontalScrollPolicy="off"

                    verticalScrollPolicy="off"

                    creationComplete="imageService.send()" >

                     

                    <mx:Script>

                            <![CDATA[

                            import mx.events.EffectEvent;

                            import mx.events.FlexEvent;

                            import mx.controls.Image;

                    import mx.events.SliderEvent;

                    import mx.collections.ArrayCollection;

                    import mx.rpc.events.ResultEvent;

                    import mx.controls.Alert;

                     

                    [Bindable]

                    private var effectTimer:int;

                     

                    [Bindable]

                    private var moveStartDelay:int;

                     

                    [Bindable]

                    private var moveXFrom:int;

                     

                    [Bindable]

                    private var moveXTo:int;

                     

                    [Bindable]

                    private var moveYFrom:int;

                     

                    [Bindable]

                    private var moveYTo:int;

                     

                    [Bindable]

                    private var moveDuration:int;

                     

                    [Bindable]

                    private var fadeStartDelay:int;

                     

                    [Bindable]

                    private var fadeDuration:int;

                     

                    [Bindable]

                    private var metadata:ArrayCollection;

                     

                    [Bindable]

                    private var images:ArrayCollection;

                     

                    [Bindable]

                    private var currentSlide:Object;

                     

                    private var timer:Timer;

                     

                    private var img:Image;

                     

                    private function resultHandler(event:ResultEvent):void {

                    metadata = event.result.root.metadata.control;

                     

                    this.effectTimer = metadata.getItemAt(0).effectTimer.valueOf();

                    this.moveStartDelay =  metadata.getItemAt(0).moveStartDelay.valueOf();

                    this.moveXFrom =  metadata.getItemAt(0).moveXFrom.valueOf();

                    this.moveXTo = metadata.getItemAt(0).moveXTo.valueOf();

                    this.moveYFrom = metadata.getItemAt(0).moveYFrom.valueOf();

                    this.moveYTo = metadata.getItemAt(0).moveYTo.valueOf();

                    this.moveDuration = metadata.getItemAt(0).moveDuration.valueOf();

                    this.fadeStartDelay = metadata.getItemAt(1).fadeStartDelay.valueOf();

                    this.fadeDuration = metadata.getItemAt(1).fadeDuration.valueOf();

                    this.width = metadata.getItemAt(2).width.valueOf();

                    this.height = metadata.getItemAt(2).height.valueOf();

                     

                    images = event.result.root.images.image;

                     

                    init();

                    }

                     

                    private function init():void {

                    timer = new Timer(effectTimer);

                    timer.addEventListener(TimerEvent.TIMER, onTimer);

                     

                    firstImage();

                     

                    startTimer();

                    }

                     

                    private function onTimer(e:TimerEvent):void {

                    nextImage();

                    }

                     

                    private function startTimer():void {

                    timer.start();

                    }

                     

                    private function stopTimer():void {

                    timer.reset();

                     

                    private function mouseOver():void {

                    timer.stop();

                    }

                     

                    private function mouseOut():void {

                    timer.start();

                    }

                     

                    private function firstImage():void {

                    img = new Image;

                    img.setStyle("showEffect",effects)

                    img.addEventListener(Event.COMPLETE,onImageLoadComplete);

                    img.source = images[imageViewer.horizontalScrollPosition].source;

                    img.maintainAspectRatio = true;

                    img.scaleContent = true;

                    img.autoLoad = true;

                    img.visible = false;

                    img.width = this.width;

                    img.height = this.height;

                     

                    imgContainer.addChild(img);

                     

                    }

                     

                    private function prevImage():void {

                    var pos:int = imageViewer.horizontalScrollPosition-1;

                    var min:int = 0;

                    var value:int = Math.max(min, pos);

                     

                    imageViewer.horizontalScrollPosition = value;

                     

                    img = new Image;

                    img.setStyle("showEffect",effects)

                    img.addEventListener(Event.COMPLETE,onImageLoadComplete);

                    img.source = images[imageViewer.horizontalScrollPosition].source;

                    img.maintainAspectRatio = true;

                    img.scaleContent = true;

                    img.autoLoad = true;

                    img.visible = false;

                    img.width = this.width;

                    img.height = this.height;

                     

                    imgContainer.addChild(img);

                     

                    if(imgContainer.numChildren > 2){

                    imgContainer.removeChildAt(0);

                    }

                     

                    }

                     

                    private function nextImage():void {

                    var pos:int = imageViewer.horizontalScrollPosition+1;

                    var max:int = imageViewer.maxHorizontalScrollPosition;

                    var value:int = Math.min(pos, max);

                    if(value >= max){

                    value = 1;

                    }

                     

                    imageViewer.horizontalScrollPosition = value;

                     

                    img = new Image;

                    img.setStyle("showEffect",effects)

                    img.addEventListener(Event.COMPLETE,onImageLoadComplete);

                    img.source = images[imageViewer.horizontalScrollPosition].source;

                    img.maintainAspectRatio = true;

                    img.scaleContent = true;

                    img.autoLoad = true;

                    img.visible = false;

                    img.width = this.width;

                    img.height = this.height;

                     

                    imgContainer.addChild(img);

                     

                    if(imgContainer.numChildren > 2){

                    imgContainer.removeChildAt(0);

                    }

                    }

                     

                    private function onImageLoadComplete(event:Event):void {

                    Image(event.currentTarget).visible = true;

                    Image(event.currentTarget).useHandCursor = true;

                    }

                     

                            ]]>

                        </mx:Script>

                     

                    <mx:Parallel id="effects" >

                    <!--<mx:Move  id="mode" startDelay="{moveStartDelay}" xFrom="{moveXFrom}" xTo="{moveXTo}" yFrom="{moveYFrom}" yTo="{moveYTo}" duration="{moveDuration}" />-->

                    <mx:Fade  id="fade" startDelay="{fadeStartDelay}" duration="{fadeDuration}"/>

                    </mx:Parallel>

                     

                        <mx:HTTPService id="imageService" url="components/store/images.xml" result="resultHandler(event)" showBusyCursor="true" />

                     

                        <mx:Canvas width="{this.width}" height="{this.height}" >

                    <mx:Canvas id="imgContainer" width="{this.width}" height="{this.height}" verticalCenter="0" horizontalCenter="0"  horizontalScrollPolicy="off" verticalScrollPolicy="off"  mouseOver="mouseOver()" mouseOut="mouseOut()"  buttonMode="true" useHandCursor="true">

                     

                    </mx:Canvas>

                    </mx:Canvas>

                     

                    <mx:HorizontalList

                    id="imageViewer"

                    dataProvider="{images}"

                    visible="false"/>

                     

                     

                    </mx:Panel>

                    <?xml version="1.0" encoding="UTF-8"?>

                    <root>

                    <metadata>

                    <control effectTimer="6000" moveStartDelay="0" moveXFrom="2000" moveXTo="0" moveYFrom="0" moveYTo="0" moveDuration="3000"/>

                    <control fadeStartDelay="0" fadeDuration="3000"/>

                    <control width="720" height="488"/>

                    </metadata>

                    <images>

                    <image title="" source="components/store/images/DSC_0006.jpg"  description=""/>

                    <image title="" source="components/store/images/DSC_0007.jpg"  description=""/>

                    <image title="" source="components/store/images/DSC_0008.jpg"  description=""/>

                    <image title="" source="components/store/images/DSC_0009.jpg"  description=""/>

                    <image title="" source="components/store/images/DSC_0010.jpg"  description=""/>

                    <image title="" source="components/store/images/DSC_0011.jpg"  description=""/>

                    <image title="" source="components/store/images/DSC_0012.jpg"  description=""/>

                    <image title="" source="components/store/images/DSC_0015.jpg"  description=""/>

                    <image title="" source="components/store/images/DSC_0016.jpg"  description=""/>

                    <image title="" source="components/store/images/DSC_0024.jpg"  description=""/>

                    <image title="" source="components/store/images/DSC_0026.jpg"  description=""/>

                    <image title="" source="components/store/images/DSC_0028.jpg"  description=""/>

                    <image title="" source="components/store/images/DSC_0030.jpg"  description=""/>

                    <image title="" source="components/store/images/DSC_0033.jpg"  description=""/>

                    <image title="" source="components/store/images/DSC_0034.jpg"  description=""/>

                    </images>

                    </root>