2 Replies Latest reply on Aug 20, 2009 1:55 PM by Flex harUI

    progressBar complete event or ... better wayw

    whiterrabbit

      I have a small picture gallery - http://www.jlpeasecommissions.com

      When you click on the thumb images (under works link), a larger image loads in the main view box.

       

      The thumbs are displayed in a HBOX with a repeater and I am using an itemclick event to call a function which then assigns a value to the source property of an image component.

       

      I want to apply a fade out fade in effect. The fade out works but the fade in does not. Below is the function I call to make this happen. Note the website does not have the fade effect, it just pops open the image. I also tried a progress bar but I must not be doing something right as I can't get a listener to fire the complete event ... this could be because I am testing on my machine and the image is loaded already?? Any suggestions on how to best do this??

       

      private function getbigimg(event:ListEvent):void {

      var mainImg:String = event.currentTarget.selectedItem.bigimage;

       

       

       

      imgfadeout = new Fade();

      imgfadeout.duration = 500;

      imgfadeout.alphaFrom =1;

      imgfadeout.alphaTo = 0;

      bigimgholder.setStyle("hideEffect",imgfadeout);

       

       

      bigimgholder.visible= false;

       

       

      // load a new image

      bigimgholder.source = mainImg;

       

       

       

      imgfadein = new Fade();

      imgfadein.duration = 500;

      imgfadein.alphaFrom =0;

      imgfadein.alphaTo = 1;

      bigimgholder.setStyle("showEffect",imgfadein);

       

       

      bigimgholder.visible= true;

       

      }

        • 1. Re: progressBar complete event or ... better wayw
          Flex harUI Adobe Employee

          I think really big images may fail to load.

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

          Blog: http://blogs.adobe.com/aharui

          • 2. Re: progressBar complete event or ... better wayw
            whiterrabbit Level 1

            I see that using an event listener with the progress bar also presents problems when you reclick on an image you have already viewed. In case anyone else is having this problem here is the solution I settled for. Basically you add the image component each time a thumb image is clicked.

             

            private var imgcomp:Image

            private var imgfadein:Fade;

             

            //initialize your event listener and fade effect

            private function initapp():void {

            mainImgLoad.addEventListener(Event.COMPLETE, showMainImg);

             

            imgfadein = new Fade();

            imgfadein.duration = 500;

            imgfadein.alphaFrom =0;

            imgfadein.alphaTo = 1;

            }

             

            //The function that is called by the event listener and triggers the fade effect

            private function showMainImg(event:Event):void {

            imgcomp.visible=true

            }

             

            // The function that is called when a thumb image is called.

            private function getbigimg(event:ListEvent):void {

            var mainImg:String = event.currentTarget.selectedItem.bigimage;

             

            imgfadein = new Fade();

            imgfadein.duration = 500;

            imgfadein.alphaFrom =0;

            imgfadein.alphaTo = 1;

             

            VBimgHolder.removeAllChildren();

             

            imgcomp = new Image;

            imgcomp.id = "bigimgholder";

            VBimgHolder.addChild(imgcomp);

            imgcomp.visible = false;

            imgcomp.source = mainImg;

            mainImgLoad.source = imgcomp;

            imgcomp.setStyle("showEffect",imgfadein);

             

             

             

             

            }

             

            In the mxml ... I just have a VBox with an ID of VBimgHolder, its the only thing in there.

            In Flash I could have done this in a heartbeat with a much nicer effect so I guess I have to learn how to load flash movies and control them from flex.