14 Replies Latest reply on May 15, 2009 9:46 AM by kglad

    Tween image in image gallery

    Walter Elias Level 2

      Man, I am embarrassed to be asking these questions. That's what happens when I haven't used ActionScript in over a year. Time to learn AS3 instead. But meanwhile, I'm stuck with a project that is driving me crazy.

       

      I'm trying to set up an image gallery without thumbnails. Instead the "thumbnails" are just the full images (loaded dynamically) shrunk down. I have a vertical scrolling column of 20 comic strips. When the user clicks a thumbnail it enlarges using the Tween class. When the user clicks again, it returns to its previous size. Trouble is, the user can easily click on a second strip and both will remain enlarged. I don't want that.

       

      My workaround was to add a onRollOut/onDragOut function, so that when the user moves to another comic strip, the first one will automatically shrink.

       

      So far, so good. It works...until I want to make the enlarged image change its _y value. In my script, on the first click, the image scales up and the _y value changes +20. On the second click or the onRollOut, the _y changes -20. That's okay, but if the user clicks and then rolls out, then the _y-=20 enacts twice and the smaller image ends up in the wrong place.

       

      I like to keep the onRollOut function, but how do I stop the _y value from changing twice, if the user rolls out and clicks?

       

      This is the middle of a for() loop:

       

      var thisX:Number = toonScroll["toon"+i]._x;

          toonScroll["toon"+i].onPress = function() {
              if (this._xscale>100) {
                  var scaleXDown:Tween = new Tween(this, "_xscale", Bounce.easeOut, this._xscale, 100, 15, false);
                  var scaleYDown:Tween = new Tween(this, "_yscale", Bounce.easeOut, this._yscale, 100, 15, false);
                  var moveXback:Tween = new Tween(this, "_x", Bounce.easeOut, this._x, thisX, 15, false);
                  var moveYback:Tween = new Tween(this, "_y", Bounce.easeOut, this._y, this._y+20, 15, false);
                  scaleYDown.onMotionFinished = function() {
                      this.swapDepths(_y);
                  };
              } else {
                  this.swapDepths(_y);
                  var scaleXUp:Tween = new Tween(this, "_xscale", Strong.easeOut, 100, 159, 25, false);
                  var scaleYUp:Tween = new Tween(this, "_yscale", Strong.easeOut, 100, 159, 25, false);
                  var moveX:Tween = new Tween(this, "_x", Strong.easeOut, thisX, bigX, 25, false);
                  var moveY:Tween = new Tween(this, "_y", Strong.easeOut, this._y, this._y-20, 1, true);
              }
          };
          toonScroll["toon"+i].onRollOut = toonScroll["toon"+i].onDragOut = function() {
              if (this._xscale>100) {
                  this.swapDepths(dt);
                  var scaleXDown:Tween = new Tween(this, "_xscale", Bounce.easeOut, this._xscale, 100, 15, false);
                  var scaleYDown:Tween = new Tween(this, "_yscale", Bounce.easeOut, this._yscale, 100, 15, false);
                  var moveXback:Tween = new Tween(this, "_x", Bounce.easeOut, this._x, thisX, 15, false);
                  var moveYback:Tween = new Tween(this, "_y", Bounce.easeOut, this._y, this._y+20, 15, false);
              }
          };

       

      If anyone has the patience to help me, I have another question:

       

      How can I make the _y value based on the Stage rather than on the movie clip inside a movie clip. Ideally I want the enlarged image to be centered vertically on the stage, then return to its original position when small again. I can't seem to figure this one out either. Note that the images are on a vertical scroller, so the starting image _y value is always different in relation to the stage.

       

      Help will be appreciated. This has driven me nuts for two full days now.

        • 1. Re: Tween image in image gallery
          kglad Adobe Community Professional & MVP

          use an if-statement to prevent your code from executing if a button is clicked.  ie, assign a boolean to true if the button is clicked, onrollout check if the boolean is false before executing your code and finally assign the boolean to be false at the end of your rollout code.

          1 person found this helpful
          • 2. Re: Tween image in image gallery
            Walter Elias Level 2

            Thanks. it shows how rusty I am at my ActionScript that I didn't even remember to think of this solution. One final question before I deliver this to the client:

             

            When my images animate and change _y values, it's in relation to the coordinates of the movie clip that they are embedded in. How do I get them to animate to an absolute _y value based on the Stage, and then animate back to their original _y values? Again, the solution must be obvious. But I've forgotten a lot by not scripting for a year.

            • 3. Re: Tween image in image gallery
              kglad Adobe Community Professional & MVP

              check the movieclip globalToLocal() method.

              • 4. Re: Tween image in image gallery
                Walter Elias Level 2

                Thanks again. The Boolean was easy to implement. But localToGlobal baffles me. All online documentation about it may as well be in Mongolian. Nothing I try will make my clicked image move to a coordinate based on the Stage.

                 

                I set a myPoint with a _y coordinate, but when I try to use the above methods to make the image move to that point, it traces as "undefined". I'm tied in knots here. How do I use localToGlobal or globalToLocal to create a variable which can go into my Tween script as the _y value?

                 

                If anyone has a link to a plain English tutorial on this method (Adobe LiveDocs is incomrehensible) so that I can actually comprehend it, I will appreciate it.

                • 5. Re: Tween image in image gallery
                  kglad Adobe Community Professional & MVP

                  if you want to move "this" to have _x,_y property of 0,0 relative to the stage (ie, you want it at stage-top-left), you could use:

                   

                  var pt:Object={x:0,y:0};  // if you wanted something other than 0,0 change this line

                  this.globalToLocal(pt);

                  this._x=pt._x;

                  this._y=pt.y;

                   

                  because you want to animate "this", you would use pt._x and pt._y as destinations for _x and _y properties of "this" in your tweens.

                  • 6. Re: Tween image in image gallery
                    Walter Elias Level 2

                    Thanks. It does seem simple. And this is exactly what I was trying earlier. But it doesn't work.

                     

                    Main question, which no tutorial answers: Where does each line of the code go?

                     

                    My setup is this: On the Stage is a movie clip (toonScroll). It contains 20 separate movie clips (toon1, toon2, etc.) arranged vertically, and it scrolls up and down, controlled by a scrollbar. My timeline code is a for() loop which tells the separate embedded movies to animate larger and (ideally) to a certain place on the stage. Here is what I have been doing.

                     

                    The first line of code - var pt:Object={x:0,y:150} - goes at the top of the script


                    The second line of code - this.globalToLocal(pt); - goes inside the for() loop, so that each time the user clicks, no matter what the position of the target movie clip, the globalToLocal function gets triggered.

                     

                    The value - pt.y - becomes the _y corrdinate in a Tween script

                     

                    That should work, right? Well it does...

                     

                    Until I scroll the main movie clip up to access some of the lower images. When I click on those, they shoot off-screen.

                     

                    Here is a very simplified version of my script. I've left out the dozens of lines controlling the scrollbar and also the script to scale the images back down. It's only the scale-up function which concerns me right now.

                     

                    var pt:Object={x:0,y:150}
                    for (i=1; i<=20; i++) {
                        toonScroll["toon"+i].createEmptyMovieClip("cartoon",this.getNextHighestDepth());
                        toonScroll["toon"+i].cartoon._xscale = toonScroll["toon"+i].cartoon._yscale=60;
                        toonScroll["toon"+i].cartoon._x = toonScroll["toon"+i].cartoon._y=10;
                        var thisX:Number = toonScroll["toon"+i]._x;
                        var bigX:Number = -210;
                        toonScroll["toon"+i].onPress = function() {
                                this.globalToLocal(pt)
                                var scaleXUp:Tween = new Tween(this, "_xscale", Strong.easeOut, 100, 159, 25, false);
                                var scaleYUp:Tween = new Tween(this, "_yscale", Strong.easeOut, 100, 159, 25, false);
                                var moveX:Tween = new Tween(this, "_x", Strong.easeOut, thisX, bigX, 25, false);
                                var moveY:Tween = new Tween(this, "_y", Strong.easeOut, this._y, pt.y, 1, true);
                        };
                    }

                    • 7. Re: Tween image in image gallery
                      kglad Adobe Community Professional & MVP

                      that code doesn't make sense.

                       

                      and usually for a scrolling sequence of movieclips, the movieclips would be children of a parent so all you need to do is scroll the parent to move all the movieclips.

                      • 8. Re: Tween image in image gallery
                        Walter Elias Level 2

                        My sample script has nothing to do with scrolling. It is only a section of a larger script. I didn't want to post all 180 lines of code. I only posted an excerpt. I did not post the image loading, scrolling, or other functions.

                         

                        Yes, you're right, the parent movie clip moves all the images. And each child image is clickable. When the child image is clicked, it expands and moves.

                         

                        That's what my for() loop (the excerpt that I posted above) does: it expands and moves whichever child movie clip is clicked. I want the clicked child movie clip to move to the center of the Stage. But of course it doesn't, because it can't see the coordinates of the Stage. That's why I need the globalToLocal function. And that doesn't seem to work.

                         

                        Sigh. I'm ready to give up and tell the client it's impossible to create a proper image gallery. At least for me.

                        • 9. Re: Tween image in image gallery
                          kglad Adobe Community Professional & MVP

                          i'm not sure about your setup, but you can try:

                           


                           

                          var pt:Object={x:Stage.width/2,y:Stage.height/2};
                          for (i=1; i<=20; i++) {
                              toonScroll["toon"+i].createEmptyMovieClip("cartoon",this.getNextHighestDepth()) ;
                              toonScroll["toon"+i].cartoon._xscale = toonScroll["toon"+i].cartoon._yscale=60;
                              toonScroll["toon"+i].cartoon._x = toonScroll["toon"+i].cartoon._y=10;

                              toonScroll["toon"+i].onPress = function() {
                                      this.globalToLocal(pt);

                                      var scaleXUp:Tween = new Tween(this, "_xscale", Strong.easeOut, 100, 159, 25, false);
                                      var scaleYUp:Tween = new Tween(this, "_yscale", Strong.easeOut, 100, 159, 25, false);
                                      var moveX:Tween = new Tween(this, "_x", Strong.easeOut, this._x, pt.x, 25, false);
                                      var moveY:Tween = new Tween(this, "_y", Strong.easeOut, this._y, pt.y, 1, true);
                              };
                          }

                          • 10. Re: Tween image in image gallery
                            kglad Adobe Community Professional & MVP

                            (and before you give up, send me an email via my website ( www.kglad.com ) about subcontracting me to fix the problem(s).

                            • 11. Re: Tween image in image gallery
                              Walter Elias Level 2

                              Well, thanks for trying. I was trying the identical thing, except with numerical values rather than based on Stage dimensions. But when I trace the value of pt.y, it changes every time, with no pattern that I can figure out, and my images go flying all over the place, especially after (for some odd reason) the third time I click. And whenever the main movie clip scrolls. The whole thing makes no sense to me.

                               

                              Thanks for your offer to help on a commissioned basis. I'd do it, but this is a freebie I'm doing, so I can't put any money into it. They'll just have to put up with a broken image gallery or hire someone like you to do it. Cheers.

                               

                              If anyone else has any ideas, I'd be happy to try them.

                              • 12. Re: Tween image in image gallery
                                kglad Adobe Community Professional & MVP

                                in programming there's a reason for everything no matter how screwy it seems.

                                 

                                when the code i gave executes, pt.x and pt.y will be different for each i if each movieclip in the for-loop is at a different on-stage location.  any movieclip whose on-stage position changes after that code executes (whether because its parent scrolls or otherwise), will no longer end up being tweened to stage center.

                                • 13. Re: Tween image in image gallery
                                  Walter Elias Level 2

                                  OK, I get it now that the pt.y needs to change when the main movie clip scrolls. So how can I do that? It seems to me that it should recalculate every time the scrollbar is used to move the main movie. My scrollbar script is pretty generic, with onPress and onRelease for the up and down buttons and the dragger. I assume that if I put some sort of function into the onRelease scripts for the buttons and dragger, I can then recalculate the pt.y.

                                   

                                  I tried coming up with this myself, but it doesn't work.

                                   

                                  Do you mind helping me with this one last bit of advice?

                                  • 14. Re: Tween image in image gallery
                                    kglad Adobe Community Professional & MVP

                                    i can but that would be a screwy setup and cause other issues.

                                     

                                    it would work and look better to make a duplicate of the scrolling movieclip  and center that.