4 Replies Latest reply on Feb 2, 2010 3:59 PM by mixmastermichael

    How to stop AS2 carousel from spinning when not moused over...

    mixmastermichael

      Hello Adobe forums,

       

      I've had a challenge that I cannot seem to figure out for the life of me right now.

       

      I have set up a mockup spinning carousel on this page here using Actionscript 2:

      http://iongeo.com/ru_innovation_test_dev/

       

      What I would like however, is for the annimation to only be available when moused over on the .swf.   When the mouse is not placed inside the flash file, the animation would then stop.  Is this possible??

       

      Any help would be greatly appreciated.

       

      Thanks!

       

      Here is the AS2 code that I have used for it:

       

      import mx.utils.Delegate;
      import mx.transitions.Tween;
      import mx.transitions.easing.*;

      var numOfItems:Number;
      var radiusX:Number = 300;
      var radiusY:Number = 75;
      var centerX:Number = Stage.width / 2;
      var centerY:Number = Stage.height / 2;
      var speed:Number = 0.05;
      var perspective:Number = 130;
      var home:MovieClip = this;
      theText._alpha = 0;
      theHeader._alpha = 0;

      var tooltip:MovieClip = this.attachMovie("tooltip","tooltip",10000);
      tooltip._alpha = 0;

      var xml:XML = new XML();
      xml.ignoreWhite = true;

      xml.onLoad = function()
      {
          var nodes = this.firstChild.childNodes;
          numOfItems = nodes.length;
          for(var i=0;i<numOfItems;i++)
          {
              var t = home.attachMovie("item","item"+i,i+1);
              t.angle = i * ((Math.PI*2)/numOfItems);
              t.onEnterFrame = mover;
              t.toolText = nodes[i].attributes.tooltip;
              t.content = nodes[i].attributes.content;
              t.header = nodes[i].attributes.header;
              t.icon.inner.loadMovie(nodes[i].attributes.image);
              t.r.inner.loadMovie(nodes[i].attributes.image);
              t.icon.onRollOver = over;
              t.icon.onRollOut = out;
              t.icon.onRelease = released;
          }
      }

      function over()
      {
          //BONUS Section
          home.tooltip.tipText.text = this._parent.toolText;
          home.tooltip._x = this._parent._x;
          home.tooltip._y = this._parent._y - this._parent._height/2;
          home.tooltip.onEnterFrame = Delegate.create(this,moveTip);
          home.tooltip._alpha = 100;
      }

      function out()
      {
          delete home.tooltip.onEnterFrame;
          home.tooltip._alpha = 0;
      }

      function released()
      {
          //BONUS Section
          home.tooltip._alpha = 100;
          for(var i=0;i<numOfItems;i++)
          {
              var t:MovieClip = home["item"+i];
              t.xPos = t._x;
              t.yPos = t._y;
              t.theScale = t._xscale;
              delete t.icon.onRollOver;
              delete t.icon.onRollOut;
              delete t.icon.onRelease;
              delete t.onEnterFrame;
              if(t != this._parent)
              {
                  var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,t._xscale,0,1,true);
                  var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,t._yscale,0,1,true);
                  var tw3:Tween = new Tween(t,"_alpha",Strong.easeOut,100,0,1,true);
              }
              else
              {
                  var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,t._xscale,100,1,true);
                  var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,t._yscale,100,1,true);
                  var tw3:Tween = new Tween(t,"_x",Strong.easeOut,t._x,150,1,true);
                  var tw4:Tween = new Tween(t,"_y",Strong.easeOut,t._y,250,1,true);
                  var tw5:Tween = new Tween(theText,"_alpha",Strong.easeOut,0,100,1,true);
                  var tw5:Tween = new Tween(theHeader,"_alpha",Strong.easeOut,0,100,1,true);
                  theText.text = t.content;
                  theHeader.header = t.header;
                  var s:Object = this;
                  tw.onMotionStopped = function()
                  {
                      s.onRelease = unReleased;
                  }
              }
          }
      }

      function unReleased()
      {
          //BONUS Section
          var sou:Sound = new Sound();
          sou.attachSound("sdown");
          sou.start();
         
          delete this.onRelease;
          var tw:Tween = new Tween(theText,"_alpha",Strong.easeOut,100,0,0.5,true);
          var tw:Tween = new Tween(theHeader,"_alpha",Strong.easeOut,100,0,0.5,true);
          for(var i=0;i<numOfItems;i++)
          {
              var t:MovieClip = home["item"+i];
              if(t != this._parent)
              {
                  var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,0,t.theScale,1,true);
                  var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,0,t.theScale,1,true);
                  var tw3:Tween = new Tween(t,"_alpha",Strong.easeOut,0,100,1,true);
              }
              else
              {
                  var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,100,t.theScale,1,true);
                  var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,100,t.theScale,1,true);
                  var tw3:Tween = new Tween(t,"_x",Strong.easeOut,t._x,t.xPos,1,true);
                  var tw4:Tween = new Tween(t,"_y",Strong.easeOut,t._y,t.yPos,1,true);
                  tw.onMotionStopped = function()
                  {
                      for(var i=0;i<numOfItems;i++)
                      {
                          var t:MovieClip = home["item"+i];
                          t.icon.onRollOver = Delegate.create(t.icon,over);
                          t.icon.onRollOut = Delegate.create(t.icon,out);
                          t.icon.onRelease = Delegate.create(t.icon,released);
                          t.onEnterFrame = mover;
                      }
                  }
              }
          }
      }


      function moveTip()
      {
          home.tooltip._x = this._parent._x;
          home.tooltip._y = this._parent._y - this._parent._height/2;
      }

      xml.load("icons.xml");

      function mover()
      {
          this._x = Math.cos(this.angle) * radiusX + centerX;
          this._y = Math.sin(this.angle) * radiusY + centerY;
          var s = (this._y - perspective) /(centerY+radiusY-perspective);
          this._xscale = this._yscale = s*100;
          this.angle += this._parent.speed;
          this.swapDepths(Math.round(this._xscale) + 100);
      }

      this.onMouseMove = function()
      {
          speed = (this._xmouse-centerX)/8000;
      }

        • 1. Re: How to stop AS2 carousel from spinning when not moused over...
          kglad Adobe Community Professional & MVP

          it's possible.  but, the main problem is detecting when the mouse is over your swf.

           

          as2 doesn't have a good way to detect that.  there are many work-arounds but no matter which work-around you use, you'll set a boolean (say, mouseOverBool) to true when you detect the mouse is over your swf and set it to false when the mouse is not over your swf.  you can then use:

           

          function mover()
          {

          if(mouseOverBool){
              this._x = Math.cos(this.angle) * radiusX + centerX;
              this._y = Math.sin(this.angle) * radiusY + centerY;
              var s = (this._y - perspective) /(centerY+radiusY-perspective);
              this._xscale = this._yscale = s*100;
              this.angle += this._parent.speed;
              this.swapDepths(Math.round(this._xscale) + 100);

          }
          }

           

          // or to make this nicer, you can start a loop that decrements speed to 0 when the mouse is not over your swf.  and, as long as you're doing that, you may as well start a loop when you detect no mouse movement for some period of time that decrements speed to 0.  that will eliminate the need to check if the mouse is over your swf.

          • 2. Re: How to stop AS2 carousel from spinning when not moused over...
            mixmastermichael Level 1

            Thanks so much for the reply Kglad.

             

            I think I like the later approach to set the speed to zero when there is no mouse movement.

             

            Unfortuately though, I don't know how that could be done by amending my AS2 code.

             

            I'm sorry to ask, but can you please help me set it up so that when the swf loads, the speed is zero and so that when there is mouse movement, the swf detects no mouse movement and sets the speed to 0 as you reccomended?

             

            Thank you so much for input, it's awesome to know that the speed can be stopped using a workaround.

             

            Mike

            • 3. Re: How to stop AS2 carousel from spinning when not moused over...
              kglad Adobe Community Professional & MVP

              use:

               

              // inactive mouse time (in seconds) to start slowing the carousel

              var inactiveMouseTime:Number = 4;

              // rate of slowing carousel;

              var speedDamp:Number = .7;

               

              var speedI:Number;

              var startSlowTO:Number;

               

              this.onMouseMove = function(){

              clearInterval(speedI);

              clearTimeout(startSlowTO);

              startSlowTO = setTimeout(startSlowF,inactiveMouseTime);
                  speed = (this._xmouse-centerX)/8000;
              }

               

              function startSlowF(){

              clearInterval(speedI);

              speedI=setInterval(speedF,100);

              }

               

              function speedF(){

              speed = speedDamp*speed;

              if(speed<.1){

              clearInterval(speedI);

              speed=0;

              }

              }

              • 4. Re: How to stop AS2 carousel from spinning when not moused over...
                mixmastermichael Level 1

                Thanks so much, with a little messing around with your code, I got it to work just how I wanted.

                 

                Sorry having to pretty much ask you how to do that, but I was a little stumped myself.

                 

                Now I just need to figure out how to make it so that after the icons are clicked they can return to the carousel without having to click on the icons but add a back button or something similar... But that's for down the road.