10 Replies Latest reply on Aug 20, 2009 2:57 AM by Cyman666

    Tweening in functions

    Cyman666

      Hi

       

      I have some buttons on a stage that when click change the scale and the position of another movieclip sitting on the stage. All works well but I'd like to make it bit more....cool

       

      Is it possible to tween, maybe with an ease, between the current position and the position when the button is clicked?

       

      Heres an example of the code im currently using:

       

      next_btn01.addEventListener(MouseEvent.CLICK, next01);

       


          function next01(e:MouseEvent):void {

          MovieClip(parent).flow_mc.image.rect01.gotoAndPlay(11);
          MovieClip(parent).zoombar.gotoAndStop(60);
          MovieClip(parent).flow_mc.width = 526.8;
          MovieClip(parent).flow_mc.height = 1143.2;
          MovieClip(parent).flow_mc.x =65;
          MovieClip(parent).flow_mc.y =525
         
          }

       

      Many thanks

      Si

        • 1. Re: Tweening in functions
          kglad Adobe Community Professional & MVP

          yes, you can use the tween class.  check the flash help files for info and sample code.

          • 2. Re: Tweening in functions
            Cyman666 Level 1

            ok cool, ill have a look

            • 3. Re: Tweening in functions
              Cyman666 Level 1

              ok, so i had a look and found out about importing the classes and adding this bit of code:

               

              var myTween:Tween = new Tween(my_box, "y", Strong.easeOut, 40, 300, 5, true);

               

               

              which is all well and good but what if i dont know the current position of "y" (as the movieclip is dragable so at that moment could be anywhere), how do i get round this?

              • 4. Re: Tweening in functions
                Cyman666 Level 1

                ok I tried this:

                button 1:    var myTweena:Tween = new Tween(flow_mc, "y", Strong.easeOut, flow_mc.y, 450, 3, true);

                 

                button 2:    var myTweenb:Tween = new Tween(flow_mc, "y", Strong.easeOut, flow_mc.y, 650, 3, true);

                 

                worked fine when i click button 1, problem occurs when i click on button 2.

                 

                By my thinking if ive clicked the1st button then "flow_mc"'s Y value should have changed to "450". But when i click on the second button it seems to take "flow_mc"'s y value from its initial value and not the "450 which i expect it to?

                 

                hmmm

                can anyone help?

                • 5. Re: Tweening in functions
                  kglad Adobe Community Professional & MVP

                  Tweenb tweens flow_mc from its current y to 650.  if you execute Tweena first (and it completes), flow_mc's current y will be 450.

                  • 6. Re: Tweening in functions
                    Cyman666 Level 1

                    yep thats what i thought, but when i click the 2nd button (after already clicking the 1st button) it seems to tween from flow_mc's initial set  y-value (ie from the begining of the movie) and not 450?

                    • 7. Re: Tweening in functions
                      Cyman666 Level 1

                      i just re-read that and realised it didnt make alot of sense so ill try to explain a bit better

                       

                      movie starts, flow_mc's y value is 0

                       

                      if i click on button 1 it tweens from 0 to 450.

                       

                      now if i click on button 2 im expecting flow_mc to tween from 450 to 650,

                       

                      unfortunately this doesnt seem to be happening, instead it seems to tween from 0 to 650.

                       

                      i could of course just code it like this:

                       

                      var myTween:Tween = new Tween(flow_mc, "y", Strong.easeOut, 450, 600, 3, true);     but seeing as flow_mc is dragable the y value could be anything at the time of clicking button 2 which is why i have the from value as "flow_mc.y"

                       

                      hope that makes more sense

                      • 8. Re: Tweening in functions
                        kglad Adobe Community Professional & MVP

                        show the (relevant only) code you're using.

                        • 9. Re: Tweening in functions
                          Cyman666 Level 1

                          okidoki:

                           

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

                           

                          ////Start Rectangle 1/////

                           

                          flow_mc.image.rect01.addEventListener(MouseEvent.CLICK, rect01)
                          flow_mc.image.rect01.addEventListener(MouseEvent.MOUSE_OVER, rect01over)
                          flow_mc.image.rect01.addEventListener(MouseEvent.MOUSE_OUT, rect01out)

                           

                          var myTween:Tween = new Tween(flow_mc, "y", Strong.easeOut, flow_mc.y, 600, 3, true);
                          myTween.stop();

                           

                          var myTween2:Tween = new Tween(flow_mc, "x", Strong.easeOut, flow_mc.x, 65, 3, true);
                          myTween2.stop();

                           

                          var myTween3:Tween = new Tween(flow_mc, "width", Strong.easeOut, flow_mc.width, 526.8, 3, true);
                          myTween3.stop();

                           

                          var myTween4:Tween = new Tween(flow_mc, "height", Strong.easeOut, flow_mc.height, 1143.2, 3, true);
                          myTween4.stop();

                           

                          flow_mc.image.rect01.addEventListener(MouseEvent.CLICK, onClick);
                          function onClick(e:MouseEvent){
                          myTween.start();
                          myTween2.start();
                          myTween3.start();
                          myTween4.start();
                          }

                           


                              function rect01(e:MouseEvent):void {
                              gubbins.gotoAndPlay (16);
                              zoombar.gotoAndStop(60);}

                           


                              function rect01over (e:MouseEvent):void {
                              flow_mc.inage.rect01.gotoAndPlay (2);}
                             
                              function rect01out (e:MouseEvent):void {
                              flow_mc.image.rect01.gotoAndPlay (11);}
                             
                          ////End Rectangle 1/////

                           

                          ////Start Rectangle 2/////

                           

                          flow_mc.image.rect02.addEventListener(MouseEvent.CLICK, rect02)
                          flow_mc.image.rect02.addEventListener(MouseEvent.MOUSE_OVER, rect02over)
                          flow_mc.image.rect02.addEventListener(MouseEvent.MOUSE_OUT, rect02out)

                           

                          var myTweena:Tween = new Tween(flow_mc, "y", Strong.easeOut, flow_mc.y, 450, 3, true);
                          myTweena.stop();

                           

                          var myTween2a:Tween = new Tween(flow_mc, "x", Strong.easeOut, flow_mc.x, 65, 3, true);
                          myTween2a.stop();

                           

                          var myTween3a:Tween = new Tween(flow_mc, "width", Strong.easeOut, flow_mc.width, 526.8, 3, true);
                          myTween3a.stop();

                           

                          var myTween4a:Tween = new Tween(flow_mc, "height", Strong.easeOut, flow_mc.height, 1143.2, 3, true);
                          myTween4a.stop();

                           

                          flow_mc.image.rect02.addEventListener(MouseEvent.CLICK, onClicka);
                          function onClicka(e:MouseEvent){
                          myTweena.start();
                          myTween2a.start();
                          myTween3a.start();
                          myTween4a.start();
                          }

                           

                              function rect02(e:MouseEvent):void {
                              gubbins.gotoAndPlay (46);
                              zoombar.gotoAndStop(60);

                          }

                             
                              function rect02over (e:MouseEvent):void {
                              flow_mc.image.rect02.gotoAndPlay (2);}
                             
                              function rect02out (e:MouseEvent):void {
                              flow_mc.image.rect02.gotoAndPlay (11);}
                             
                          ////End Rectangle 2/////

                          • 10. Re: Tweening in functions
                            Cyman666 Level 1

                            OK i figured the error of my ways.

                             

                            The problem was having the start and stop functions on my tweens, which effectively were re-setting them.

                             

                            So by putting my tweens directly into the function like this:

                             

                            flow_mc.image.rect01.addEventListener(MouseEvent.CLICK, onClick);
                            function onClick(e:MouseEvent){
                            var myTween:Tween = new Tween(flow_mc, "y", Strong.easeOut, flow_mc.y, 600, 3, true);
                            }

                             

                            sorts out the issue and moves the movieclip from whatever positions its currently at

                             

                            Job done