1 Reply Latest reply on Jan 14, 2010 2:36 PM by boletusEdulis

    AS3: Tween from one MovieClip to Another

    boletusEdulis Level 1

      Hi!

       

      As the title implies, I'm trying to use ActionScript 3 to tween from one movieclip to another based on an external event.

       

      I'm currently using two "Tween" objects to adjust alpha values. The first tweens-out the previous movieclip, and the second tweens-in the current movieclip. Code follows, with headers included for completeness:

       

      // headers

           import fl.transitions.Tween;
           import fl.transitions.easing.*;

       

      // tweens

           var MOVIECLIP1_out:Tween = new Tween(MOVIECLIP1, "alpha", Regular.easeOut, 1, 0, 3, true);

                var MOVIECLIP2_in:Tween = new Tween(MOVIECLIP2, "alpha", Regular.easeIn, 0, 1, 3, true);

       

      My issue, as you might suspect, is that the transition doesn't look right. The previous clip tweens to a blank white screen, and then the second is brought in. I need the tweens to overlap, as they would with a timeline-based tween.

       

      How do I remedy this? My solution was to create a loop, from 0 to 1 incrementing by 0.2, and setting the respective alpha values to increase and decrease. I also planned to set the time for each tween to one-tenth (0.1) of a second:

       

          var _out1: 1

          var _out2: 0.8

          var _in1: 0

          var _in2: 0.2


      while (_in1 <= 1)

      {


          var MOVIECLIP1_out:Tween = new Tween(MOVIECLIP1, "alpha", Regular.easeout, _out1, _out2, 0.1, true);

          var MOVIECLIP2_in:Tween = new Tween(MOVIECLIP2, "alpha", Regular.easeIn, _in1, _in2, 0.1, true);

          _out1 = _out1 - 0.2;

          _out2 = _out2 - 0.2;

          _in1 = _in1 + 0.2;

          _in2 = _in2 + 0.2;


      }

       

      This would result in ten total tweens, over one full second, as follows:

       

      time : Clip : alpha change

      0.1 : MOVIECLIP1 : 1 to 0.8

      0.1 : MOVIECLIP2 : 0 to 0.2

      0.1 : MOVIECLIP1 : 0.8 to 0.6

      0.1 : MOVIECLIP2 : 0.2 to 0.4

      0.1 : MOVIECLIP1 : 0.6 to 0.4

      0.1 : MOVIECLIP2 : 0.4 to 0.6

      0.1 : MOVIECLIP1 : 0.4 to 0.2

      0.1 : MOVIECLIP2 : 0.6 to 0.8

      0.1 : MOVIECLIP1 : 0.2 to 0

      0.1 : MOVIECLIP2 : 0.8 to 1

       

      And the transition is complete.

       

      I feel that there must be a smarter way to accomplish this task. Do I have my head screwed on right here? Any suggestions?

        • 1. Re: AS3: Tween from one MovieClip to Another
          boletusEdulis Level 1

          I think that I posted this in the wrong forum... maybe an admin can move this to the AS3 section?

           

          Anyway, in the absence of an answer, I coded the following, and it works pretty well. I had to round the alpha values to the tenths place.

           

          YOURBUTTON.addEventListener
          (
            MouseEvent.MOUSE_OVER,
            function(evt:MouseEvent):void
            {
              var _out1:Number = 1;
              var _out2:Number = 0.8;
              var _in1:Number = 0;
              var _in2:Number = 0.2;

           

          while (_in2 <= 1)
              {
              var MOVIECLIP1_out:Tween = new Tween(MOVIECLIP1, "alpha", Regular.easeOut, _out1, _out2, 1, true);
              var MOVIECLIP2_in:Tween = new Tween(MOVIECLIP2, "alpha", Regular.easeIn, _in1, _in2, 1, true);
              _out1 = int((_out1 - 0.2 + 0.05)*10)/10;
              _out2 = int((_out2 - 0.2 + 0.05)*10)/10;
              _in1 = int((_in1 + 0.2 + 0.05)*10)/10;
              _in2 = int((_in2 + 0.2 + 0.05)*10)/10;
              }
            }
          );