5 Replies Latest reply on Jun 6, 2011 12:40 PM by kglad

    Ease the transition

    Ron Colmen Level 2

      How do I ease the photo transition?

       

      myGalleryXML.onLoad = function() {

      _root.gallery_x = myGalleryXML.firstChild.attributes.gallery_x;

      _root.gallery_y = myGalleryXML.firstChild.attributes.gallery_y;

      _root.gallery_width = myGalleryXML.firstChild.attributes.gallery_width;

      _root.gallery_height = myGalleryXML.firstChild.attributes.gallery_height;

       

      _root.myImages = myGalleryXML.firstChild.childNodes;

      _root.myImagesTotal = myImages.length;

      _root.thumb_height = myGalleryXML.firstChild.attributes.thumb_height;

      _root.thumb_width = myGalleryXML.firstChild.attributes.thumb_width;

      _root.full_x = myGalleryXML.firstChild.attributes.full_x;

      _root.full_y = myGalleryXML.firstChild.attributes.full_y;

      };

       

      function callThumbs() {

      var clipLoader = new MovieClipLoader();

      var preloader = new Object();

      clipLoader.addListener(preloader);

       

      for (i=0; i<myImagesTotal; i++) {

      thumbURL = myImages[i].attributes.thumb_url;

      myThumb_mc = placeholder.placeholder2.createEmptyMovieClip(i, placeholder.placeholder2.getNextHighestDepth());

      myThumb_mc._y = _root.thumb_height*i;

      clipLoader.loadClip("http://www.myweb.org/photos/"+thumbURL,myThumb_mc);

       

      preloader.onLoadStart = function(target) {

      fullImg_mc.heading.selectable = false;

      fullImg_mc.caption.selectable = false;

      };

       

      preloader.onLoadComplete = function(target) {

      fullImg_mc.heading.text="";

      fullImg_mc.caption.text="";

      target.onRelease = function() {

      callFullImage(this._name);

      clearTimeout(srch1TO);

      srch1TO=setTimeout(srch1F,6000);

      }

      function srch1F(){

      }

      }

      }

      }

       

      function callFullImage(myNumber) {

      fullImg_mc.heading.text = "";

      fullImg_mc.caption.text = "";

      percentClip.percentDisplay.text = "";

      percentClip._visible =true;

       

      myURL = myImages[myNumber].attributes.full_url;

      myTitle = myImages[myNumber].attributes.heading;

      myCaption = myImages[myNumber].attributes.title;

       

      var fullClipLoader = new MovieClipLoader();

      var fullPreloader = new Object();

      fullClipLoader.addListener(fullPreloader);

       

      fullPreloader.onLoadStart = function(target) {

      fullImg_mc.heading.selectable = false;

      fullImg_mc.caption.selectable = false;

      };

       

      fullPreloader.onLoadProgress = function(target, loadedBytes, totalBytes) {

      bar._width = (loadedBytes/totalBytes)*310;

      percentClip._x = bar._x + bar._width;

      var percentage:Number = Math.round((loadedBytes/totalBytes)*100);

      bar._xscale = percentage;

      percentClip.percentDisplay.text = percentage + "%";

       

      if (loadedBytes >= totalBytes) {

      percentClip._visible = false;

      }

      };

       

      fullClipLoader.loadClip("http://www.myweb.org/photos/"+myURL,fullImg_mc.fullImage_mc);

      }

        • 1. Re: Ease the transition
          kglad Adobe Community Professional & MVP

          what transition?


          • 2. Re: Ease the transition
            Ron Colmen Level 2

            The 2 sections highlighted in bold. All I need is to make the images always appear/load easy and smooth over the previously loaded image.

            Thanks Kglad.

             

            import mx.transitions.Tween;

            import mx.transitions.easing.*;

             

            var urls:Array = new Array();

            var captions:Array = new Array();

            var headings:Array = new Array();

            var imgNow:Number;

             

            var myGalleryXML = new XML();

            myGalleryXML.ignoreWhite = true;

            myGalleryXML.load("http://www.myweb.com/gallery.xml);

             

            myGalleryXML.onLoad = function() {

            _root.myImages = myGalleryXML.firstChild.childNodes;

            _root.myImagesTotal = myImages.length;

             

             

            var photos:Array = this.firstChild.childNodes;

            for(i=0;i<9; i++) {

            urls.push(photos[i].attributes.full_url);

            captions.push(photos[i].attributes.title);

            headings.push(photos[i].attributes.heading);

            }

            _root.holder.loadMovie(urls[0]);

            _root.caption.text = captions[0];

            _root.heading.text = headings[0];

            imgNow = 0;

             

            callThumbs();

            createMask();

            scrolling();

            myShow();

            };

             

            function callThumbs() {

            var clipLoader = new MovieClipLoader();

            var preloader = new Object();

            clipLoader.addListener(preloader);

             

            for (i=0; i<myImagesTotal; i++) {

            thumbURL = myImages[i].attributes.thumb_url;

            myThumb_mc = placeholder.placeholder2.createEmptyMovieClip(i, placeholder.placeholder2.getNextHighestDepth());

            myThumb_mc._y = _root.thumb_height*i;

            clipLoader.loadClip(thumbURL,myThumb_mc);

             

            preloader.onLoadComplete = function(target) {

            target.onRelease = function() {

            callFullImage(this._name);

             

            clearTimeout(srch1TO);

            srch1TO=setTimeout(srch1F,6000);

            fullImg_mc._visible = true;

            }

            function srch1F(){

            fullImg_mc._visible=false;

            };

            }

            }

            }

             

            function callFullImage(myNumber) {

            fullImg_mc.heading.text = "";

            fullImg_mc.caption.text = "";

             

            myURL = myImages[myNumber].attributes.full_url;

            myTitle = myImages[myNumber].attributes.heading;

            myCaption = myImages[myNumber].attributes.title;

             

            var fullClipLoader = new MovieClipLoader();

            var fullPreloader = new Object();

            fullClipLoader.addListener(fullPreloader);

             

            fullPreloader.onLoadProgress = function(target, loadedBytes, totalBytes) {

            bar._width = (loadedBytes/totalBytes)*310;

            percentClip._x = bar._x + bar._width;

            var percentage:Number = Math.round((loadedBytes/totalBytes)*100);

            bar._xscale = percentage;

            percentClip.percentDisplay.text = percentage + "%";

             

            if (loadedBytes >= totalBytes) {

            percentClip._visible = false;

            }

            };

             

            fullPreloader.onLoadComplete = function(target) {

            fullImg_mc.heading.text = myTitle;

            fullImg_mc.caption.text = myCaption;

            };

            fullClipLoader.loadClip(myURL,fullImg_mc.fullImage_mc);

            }

             

            function myShow() {

                 if(imgNow < urls.length-1) {

                      imgNow++;

                 } else {

                      imgNow = 0;

                 }

            _root.heading.text = "";

            _root.caption.text = "";

             

                _root.holder.loadMovie(urls[imgNow]);

                _root.caption.text = captions[imgNow];

            _root.heading.text = headings[imgNow];

            }

            var IntervalID = setInterval(myShow, 6000);

            • 3. Re: Ease the transition
              kglad Adobe Community Professional & MVP

              there's no transition, at all.  there's no way to add easing to a non-existant transition.

               

              use the flash tween class or one of the 3rd party tween classes to add a transition of some type.

              • 4. Re: Ease the transition
                Ron Colmen Level 2

                Thanks Kglad. I tried this.

                1. It does fadein but how can I keep the previous image until the new image alpha is 100?

                2. How can I make the fadein happen after the loading is completed?

                 

                 

                import mx.transitions.Tween;

                import mx.transitions.easing.*;

                 

                //code continues

                 

                var photos:Array = this.firstChild.childNodes;

                for(i=0;i<9; i++) {

                urls.push(photos[i].attributes.full_url);

                captions.push(photos[i].attributes.title);

                headings.push(photos[i].attributes.heading);

                }

                new Tween(holder, "_alpha", Strong.easeOut, 0, 100, 10, true);

                _root.holder.loadMovie(urls[0]);

                _root.caption.text = captions[0];

                _root.heading.text = headings[0];

                 

                //the rest continues...

                • 5. Re: Ease the transition
                  kglad Adobe Community Professional & MVP

                  you must use, at least, 2 different target movieclips if you want to cross-tween (eg, cross-fade) you loaded images.  one to load the next image and fade it in and the other to maintain a stage presence to the previously loaded image.

                  1 person found this helpful