4 Replies Latest reply on Jan 13, 2010 9:40 AM by Rothrock

    Percentage Resizing problems with images

    AdrianCSS

      I'm having issues with resizing of images. It works initially but they seem to overlap after a resizing the browser. Resizing stops working at random times. Sometimes it stops after resizing the browser a couple of times, and sometimes it stops working after a longer period of resizing he browser.

       

      http://philipcastle.com/test/gallery.html

       

      Actionscript 2 is used.

       

      Hope someone can help.

       

      RESIZING NOT WORKING

      resizing not working.jpg

       

       

      RESIZING WORKING

      site working.jpg

       

       

      Regards,

      Adrian

        • 1. Re: Percentage Resizing problems with images
          Rothrock Level 5

          So how are you doing the resizing?

          • 2. Re: Percentage Resizing problems with images
            AdrianCSS Level 1

            Here is some code,

            I have also included the source files in the attachments.

             

            ----------------------------------------------------------------------

             

             

            import gs.TweenLite;

             

            var preloaderMC:MovieClip = tl.attachMovie("preloaderID","preloaderMC",dep++);

            preloaderMC._alpha = 0;

             

            var loadtargetIndex:Number = 0;

             

            var mcl:MovieClipLoader = new MovieClipLoader();

            var mclLO:Object = {};

            mclLO.onLoadInit = function(target:MovieClip){

            //trace(target._width+":"+target._height)

            //target._x = (stageWidth-target._width)/2 + (stageW - stageWidth)/2

            target.w = target._width;

            target.h = target._height;

            target.aspectRatio = target.w/target.h;

            lastloadedslideMC = target;

            sizeAndPositionSlideF(target);

            target.forceSmoothing = true;

             

            if(tl["targetMC"+(loadtargetIndex-1)]){

                gs.TweenLite.to(tl["targetMC"+(loadtargetIndex-1)],1,{_alpha:0,onComplete:removeF,onCompl eteParams:[tl["targetMC"+(loadtargetIndex-1)]]});

            }

            gs.TweenLite.to(preloaderMC,.5,{_alpha:0});

            if(autoAdvance){

            gs.TweenLite.to(tl["targetMC"+loadtargetIndex],1,{_alpha:100,onComplete:fadeinCompleteF});

            } else {

            gs.TweenLite.to(tl["targetMC"+loadtargetIndex],1,{_alpha:100});

            }

             

            }

            mclLO.onLoadProgress = function(target:MovieClip,bl:Number,bt:Number){

            preloaderMC.fillMC._width = preloaderMC.bg._width*bl/bt;

            //trace(preloaderMC.fillMC._width)

            }

            mcl.addListener(mclLO);

             

            var thumbMCL:MovieClipLoader = new MovieClipLoader();

            var thumbMCLLO:Object = {};

            thumbMCLLO.onLoadInit = function(target:MovieClip){

            target.forceSmoothing = true;

            target.aspectRatio = target._width/target._height;

            target._height = thumbHeight;

            target._width = Math.round(target.aspectRatio*target._height);

             

            target._alpha = 0;

            gs.TweenLite.to(target,1,{_alpha:100});

             

            nextThumbX += target._width+thumbgapX;

            indexJ++;

            if(indexJ<portfoliosA[indexI].length){

                loadThumbF(indexI,indexJ);

            } else {

            // thumb loading complete.  start slideshow.

            if(!tl.thumbHighlightMC){

            thumbHighlightMC = tl.attachMovie("preloaderID","thumbHighlightMC",dep++);

            thumbHighlightMC._height /= 2;

            thumbHighlightMC._y = target._parent._y+target._height+btngapY/2+target._parent._parent._y;

            }

            thumbscrollF();

            thumbHolderMC.thumb0.onRelease();

            }

            }

            thumbMCL.addListener(thumbMCLLO);

             

            function startSlideShowF(i:Number){

            // i undefined, display main ss

            if(i==undefined){

            autoAdvance = true;

            slideIndex = 0;

            displaySlideF();

            } else {

            autoAdvance = false;

            clearTimeout(displaySlideI);

            displayThumbsF(i);

            }

            }

             

            function displayThumbsF(i:Number){

            autoAdvance = false;

            var y:Number = thumbHolderMC._y;

            thumbHolderMC.removeMovieClip();

            tl.createEmptyMovieClip("thumbHolderMC",dep++);

            thumbHolderMC._y = y;

            thumbHolderMC._x = philipcastleMC._x;

             

            indexI = i;

            indexJ = 0;

            nextThumbX = 0;

            loadThumbF(indexI,indexJ);

            positionThumbgradientsF();

            }

            function loadThumbF(indexI:Number,indexJ:Number){

            //trace(indexI+" "+indexJ);

            var thumb:MovieClip = thumbHolderMC.createEmptyMovieClip("thumb"+indexJ,indexJ);

            thumb.createEmptyMovieClip("targetMC",1);

            thumb.ivar = indexI;

            thumb.jvar = indexJ;

            thumb.onRelease = function(){

            lastclickedthumb = this;

            gs.TweenLite.to(thumbHighlightMC,1,{_x:this._x+this._parent._x,_width:this._width,_alpha:1 00});

            //trace(thumbHighlightMC._y+" "+thumbHighlightMC._visible+" "+thumbHighlightMC._alpha)

            displaySlideF(this.ivar,this.jvar);

            }

            thumbMCL.loadClip(portfoliosA[indexI][indexJ][0],thumb.targetMC);

            thumb._x = nextThumbX;

            }

             

            function displaySlideF(i:Number,j:Number){

            // i = portfolio number, j = image number

            if(i==undefined){

            loadImageS = mainSSA[slideIndex];

            slideIndex = (slideIndex+1)%mainSSA.length;

            } else {

            loadImageS = portfoliosA[i][j][1]

            }

            lastindexI = i;

            lastindexJ = j;

             

            if(tl["targetMC"+loadtargetIndex]){

            preloaderMC._alpha = 100;

                preloaderMC.bg._width = tl["targetMC"+loadtargetIndex]._width;

                preloaderMC.fillMC._width = 0;

                preloaderMC._x = tl["targetMC"+loadtargetIndex]._x;

                preloaderMC._y = tl["targetMC"+loadtargetIndex]._y+tl["targetMC"+loadtargetIndex]._height+preloaderY;

            }

             

            loadtargetIndex++;

            var mc:MovieClip = tl.createEmptyMovieClip("targetMC"+loadtargetIndex,dep++);

                mc._alpha = 0;

            mcl.loadClip(loadImageS,mc);

            }

             

            function removeF(mc:MovieClip){

            var s:String = mc._name;

            var n:Number = Number(s.substr(s.indexOf("targetMC")+8));

                for(var i=1;i<=n;i++){

                if(tl["targetMC"+n]){

                tl["targetMC"+n].removeMovieClip();

                }

            }

            }

             

            function fadeinCompleteF(){

            clearTimeout(displaySlideI);

            if(autoAdvance){

                displaySlideI = setTimeout(displaySlideF,displayDuration);

            }

            }

             

            function sizeAndPositionSlideF(target:MovieClip){

            //if(thumbHolderMC._alpha == 100){

            aspectRatio = stageWidth/(thumbHolderMC._y-btngapY-preloaderY);

            //} else {

            //aspectRatio = stageWidth/(btnA[0]._y-btngapY-preloaderY);

            //}

             

            if(target.aspectRatio>aspectRatio){

            target._width = stageWidth;

            target._height = target._width/target.aspectRatio;

            } else {

            //if(thumbHolderMC._alpha == 100){

                target._height = thumbHolderMC._y-btngapY-preloaderY;

            //} else {

            //target._height = btnA[0]._y-btngapY-preloaderY;

            //}

            target._width = target._height*target.aspectRatio;

            }

            //trace(thumbHolderMC._alpha+" "+target._width+" "+target.w+" : "+target._height+" "+target.h);

            target._x = (stageW-target._width)/2;

            }

             

            function thumbscrollF(){

            if(thumbHolderMC._width>stageWidth){

            //if(stageWidth>=stageW){

                scrollParamsF(thumbHolderMC,(stageW-stageWidth)/2,philipcastleMC._x+10,stageWidth-(stageW idth-stageW)/2,stageWidth-thumbHolderMC._width-marginX-(stageWidth-stageW)/2-10);

            //}

            thumbHolderMC.onEnterFrame = thumbhitTestF;

            } else {

            delete thumbHolderMC.onEnterFrame;

            }

            }

            function thumbhitTestF(){

            if(tl.thumbHolderMC.hitTest(tl._xmouse,tl._ymouse)){

            tl.thumbHolderMC._x = tl.thumbHolderMC.m*tl._xmouse+tl.thumbHolderMC.b;

            if(tl.thumbHolderMC._x>philipcastleMC._x){

            tl.thumbHolderMC._x = philipcastleMC._x;

            }

            if(tl.thumbHolderMC._x<stageWidth-thumbHolderMC._width-(stageWidth-stageW)/2-marginX){

            tl.thumbHolderMC._x = stageWidth-thumbHolderMC._width-(stageWidth-stageW)/2-marginX;

            }

             

            //trace(tl.thumbHolderMC._x+" "+tl._xmouse+" "+stageWidth+" "+stageW+" "+tl.thumbHolderMC._width)

            thumbHighlightMC._x = lastclickedthumb._x+lastclickedthumb._parent._x;

            }

            }

            function scrollParamsF(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number){

            mc.m = (y1-y2)/(x1-x2);

            mc.b = y1-mc.m*x1;

            }

            • 3. Re: Percentage Resizing problems with images
              AdrianCSS Level 1

              Here is some code,

              I have also included the source files in the attachments.

               

              ----------------------------------------------------------------------

               

               

              import gs.TweenLite;

               

              var preloaderMC:MovieClip = tl.attachMovie("preloaderID","preloaderMC",dep++);

              preloaderMC._alpha = 0;

               

              var loadtargetIndex:Number = 0;

               

              var mcl:MovieClipLoader = new MovieClipLoader();

              var mclLO:Object = {};

              mclLO.onLoadInit = function(target:MovieClip){

              //trace(target._width+":"+target._height)

              //target._x = (stageWidth-target._width)/2 + (stageW - stageWidth)/2

              target.w = target._width;

              target.h = target._height;

              target.aspectRatio = target.w/target.h;

              lastloadedslideMC = target;

              sizeAndPositionSlideF(target);

              target.forceSmoothing = true;

               

              if(tl["targetMC"+(loadtargetIndex-1)]){

                  gs.TweenLite.to(tl["targetMC"+(loadtargetIndex-1)],1,{_alpha:0,onComplete:removeF,onCompl eteParams:[tl["targetMC"+(loadtargetIndex-1)]]});

              }

              gs.TweenLite.to(preloaderMC,.5,{_alpha:0});

              if(autoAdvance){

              gs.TweenLite.to(tl["targetMC"+loadtargetIndex],1,{_alpha:100,onComplete:fadeinCompleteF});

              } else {

              gs.TweenLite.to(tl["targetMC"+loadtargetIndex],1,{_alpha:100});

              }

               

              }

              mclLO.onLoadProgress = function(target:MovieClip,bl:Number,bt:Number){

              preloaderMC.fillMC._width = preloaderMC.bg._width*bl/bt;

              //trace(preloaderMC.fillMC._width)

              }

              mcl.addListener(mclLO);

               

              var thumbMCL:MovieClipLoader = new MovieClipLoader();

              var thumbMCLLO:Object = {};

              thumbMCLLO.onLoadInit = function(target:MovieClip){

              target.forceSmoothing = true;

              target.aspectRatio = target._width/target._height;

              target._height = thumbHeight;

              target._width = Math.round(target.aspectRatio*target._height);

               

              target._alpha = 0;

              gs.TweenLite.to(target,1,{_alpha:100});

               

              nextThumbX += target._width+thumbgapX;

              indexJ++;

              if(indexJ<portfoliosA[indexI].length){

                  loadThumbF(indexI,indexJ);

              } else {

              // thumb loading complete.  start slideshow.

              if(!tl.thumbHighlightMC){

              thumbHighlightMC = tl.attachMovie("preloaderID","thumbHighlightMC",dep++);

              thumbHighlightMC._height /= 2;

              thumbHighlightMC._y = target._parent._y+target._height+btngapY/2+target._parent._parent._y;

              }

              thumbscrollF();

              thumbHolderMC.thumb0.onRelease();

              }

              }

              thumbMCL.addListener(thumbMCLLO);

               

              function startSlideShowF(i:Number){

              // i undefined, display main ss

              if(i==undefined){

              autoAdvance = true;

              slideIndex = 0;

              displaySlideF();

              } else {

              autoAdvance = false;

              clearTimeout(displaySlideI);

              displayThumbsF(i);

              }

              }

               

              function displayThumbsF(i:Number){

              autoAdvance = false;

              var y:Number = thumbHolderMC._y;

              thumbHolderMC.removeMovieClip();

              tl.createEmptyMovieClip("thumbHolderMC",dep++);

              thumbHolderMC._y = y;

              thumbHolderMC._x = philipcastleMC._x;

               

              indexI = i;

              indexJ = 0;

              nextThumbX = 0;

              loadThumbF(indexI,indexJ);

              positionThumbgradientsF();

              }

              function loadThumbF(indexI:Number,indexJ:Number){

              //trace(indexI+" "+indexJ);

              var thumb:MovieClip = thumbHolderMC.createEmptyMovieClip("thumb"+indexJ,indexJ);

              thumb.createEmptyMovieClip("targetMC",1);

              thumb.ivar = indexI;

              thumb.jvar = indexJ;

              thumb.onRelease = function(){

              lastclickedthumb = this;

              gs.TweenLite.to(thumbHighlightMC,1,{_x:this._x+this._parent._x,_width:this._width,_alpha:1 00});

              //trace(thumbHighlightMC._y+" "+thumbHighlightMC._visible+" "+thumbHighlightMC._alpha)

              displaySlideF(this.ivar,this.jvar);

              }

              thumbMCL.loadClip(portfoliosA[indexI][indexJ][0],thumb.targetMC);

              thumb._x = nextThumbX;

              }

               

              function displaySlideF(i:Number,j:Number){

              // i = portfolio number, j = image number

              if(i==undefined){

              loadImageS = mainSSA[slideIndex];

              slideIndex = (slideIndex+1)%mainSSA.length;

              } else {

              loadImageS = portfoliosA[i][j][1]

              }

              lastindexI = i;

              lastindexJ = j;

               

              if(tl["targetMC"+loadtargetIndex]){

              preloaderMC._alpha = 100;

                  preloaderMC.bg._width = tl["targetMC"+loadtargetIndex]._width;

                  preloaderMC.fillMC._width = 0;

                  preloaderMC._x = tl["targetMC"+loadtargetIndex]._x;

                  preloaderMC._y = tl["targetMC"+loadtargetIndex]._y+tl["targetMC"+loadtargetIndex]._height+preloaderY;

              }

               

              loadtargetIndex++;

              var mc:MovieClip = tl.createEmptyMovieClip("targetMC"+loadtargetIndex,dep++);

                  mc._alpha = 0;

              mcl.loadClip(loadImageS,mc);

              }

               

              function removeF(mc:MovieClip){

              var s:String = mc._name;

              var n:Number = Number(s.substr(s.indexOf("targetMC")+8));

                  for(var i=1;i<=n;i++){

                  if(tl["targetMC"+n]){

                  tl["targetMC"+n].removeMovieClip();

                  }

              }

              }

               

              function fadeinCompleteF(){

              clearTimeout(displaySlideI);

              if(autoAdvance){

                  displaySlideI = setTimeout(displaySlideF,displayDuration);

              }

              }

               

              function sizeAndPositionSlideF(target:MovieClip){

              //if(thumbHolderMC._alpha == 100){

              aspectRatio = stageWidth/(thumbHolderMC._y-btngapY-preloaderY);

              //} else {

              //aspectRatio = stageWidth/(btnA[0]._y-btngapY-preloaderY);

              //}

               

              if(target.aspectRatio>aspectRatio){

              target._width = stageWidth;

              target._height = target._width/target.aspectRatio;

              } else {

              //if(thumbHolderMC._alpha == 100){

                  target._height = thumbHolderMC._y-btngapY-preloaderY;

              //} else {

              //target._height = btnA[0]._y-btngapY-preloaderY;

              //}

              target._width = target._height*target.aspectRatio;

              }

              //trace(thumbHolderMC._alpha+" "+target._width+" "+target.w+" : "+target._height+" "+target.h);

              target._x = (stageW-target._width)/2;

              }

               

              function thumbscrollF(){

              if(thumbHolderMC._width>stageWidth){

              //if(stageWidth>=stageW){

                  scrollParamsF(thumbHolderMC,(stageW-stageWidth)/2,philipcastleMC._x+10,stageWidth-(stageW idth-stageW)/2,stageWidth-thumbHolderMC._width-marginX-(stageWidth-stageW)/2-10);

              //}

              thumbHolderMC.onEnterFrame = thumbhitTestF;

              } else {

              delete thumbHolderMC.onEnterFrame;

              }

              }

              function thumbhitTestF(){

              if(tl.thumbHolderMC.hitTest(tl._xmouse,tl._ymouse)){

              tl.thumbHolderMC._x = tl.thumbHolderMC.m*tl._xmouse+tl.thumbHolderMC.b;

              if(tl.thumbHolderMC._x>philipcastleMC._x){

              tl.thumbHolderMC._x = philipcastleMC._x;

              }

              if(tl.thumbHolderMC._x<stageWidth-thumbHolderMC._width-(stageWidth-stageW)/2-marginX){

              tl.thumbHolderMC._x = stageWidth-thumbHolderMC._width-(stageWidth-stageW)/2-marginX;

              }

               

              //trace(tl.thumbHolderMC._x+" "+tl._xmouse+" "+stageWidth+" "+stageW+" "+tl.thumbHolderMC._width)

              thumbHighlightMC._x = lastclickedthumb._x+lastclickedthumb._parent._x;

              }

              }

              function scrollParamsF(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number){

              mc.m = (y1-y2)/(x1-x2);

              mc.b = y1-mc.m*x1;

              }

              • 4. Re: Percentage Resizing problems with images
                Rothrock Level 5

                Way more than I'm willing to read all that carefully and I don't download files from the forums.

                 

                My guess is that if it is reusing clips to hold the loaded content that the scale needs to be reset at the start of each cycle. I've seen this before.

                 

                So the first thing inside the onInit handler should be:

                 

                target._xscale=target._yscale=100;

                 

                That will then allow the remaining code to get actual widths and heights and make sure that the math works out.