22 Replies Latest reply on Aug 1, 2006 11:23 AM by

    Tween animation in a sequence

      I want to make a sequence animation for a mc in pure actionscript (not with frames)
      I want to animate this mc in 3 different stages of the total animation like this sequence:

      1. first mc moveTo (x,y)

      2. after mc has movedTo(x,y) move mc To(another x, another y)

      3.after I´ve moved mc To(anotherx, anothery) Scale mc

      I´ve tried alex Uhlmann animation package and http://laco.wz.cz/tween/ but I didn´t figure
      it out how I should solve the scaling part.
      The only sequence I managed to was was this with 2 different parts (movements) and not with 3 (the Scaling part):

      import de.alex_uhlmann.animationpackage.*;
      import de.alex_uhlmann.animationpackage.animation.*;
      import de.alex_uhlmann.animationpackage.drawing.*;
      import de.alex_uhlmann.animationpackage.utility.*;
      import com.robertpenner.easing.*;

      APCore.initialize();
      var myListener:Object = new Object();
      APCore.addListener(myListener);

      var myMove:Move = new Move(mc);
      myMove.animationStyle(2000,Expo.easeInOut,"onCallback");

      myListener.onCallback = function() {
      myMove.run(500,200);
      myMove.callback = "onCallback2";
      myMove.run(100,200);
      };



      Anyone?
      - I´ve serched and reading so my eyes are bleding - please someone out there help me!

        • 1. Re: Tween animation in a sequence
          FlashAmit Level 1
          First break your problem and start as making routines

          1. move(fromx, fromy, tox,toy)
          2. calculatete(nextx, nexty)
          3. doIhaveReched(targetx,targety);
          4. populateNextxy();

          So your problem is solved.
          • 2. Re: Tween animation in a sequence
            Peter Lorent Level 2
            >>my eyes are bleeding
            Tell me something new...

            Do you specifically want to use those packages? If not, you could use the attached code. Put an mc on the stage, give it an instance name square_mc, copy/paste the code on a seperate layer on frame 1.

            • 3. Re: Tween animation in a sequence
              Thanks! great!
              You´ve used Macromedias own mx.transition.tween (right spelled??)
              But where can I read about it. I managed to not find anything about it.
              like some tutorials and description
              So therefore I use Uhlmann and Laco (Uhlmann have the most beutiful and smoot tween animation )
              But anyway..
              The problem is that I dont want to scale the lines around my square mc.
              The lines are now 1 pixel (when not scaled), but when I´m scaling the mc the lines became
              4 pixels or something like that.
              Do ya also know how I solve that problem too (with linestyle or something....)
              • 4. Re: Tween animation in a sequence
                Peter Lorent Level 2
                Info on the mx.transitions.Tween Class: http://www.adobe.com/devnet/flash/articles/tweening.html
                And on kirupa.com and actionscript.org I believe there are some tutorials too.

                The scaling of the line: no, I haven't found a way yet to solve that problem.

                BTW: in the tween code I've set a Boolean to false which means you want to set the animation over x frames. I should have set that Boolean to true because I indicated I wanted to use time (by providing 3.5 as a parameter which in this code now means 3.5 frames...). Sorry, but I whipped up the code from the top of my head. Example:
                Wrong code:
                (target_mc,"_x",mx.transitions.easing.Regular.easeOut,target_mc._x,target_mc._x+200,3.5,fa lse);
                Instead use:
                (target_mc,"_x",mx.transitions.easing.Regular.easeOut,target_mc._x,target_mc._x+200,3.5,tr ue);

                • 5. Re: Tween animation in a sequence
                  Thanks now Im gonna read everything about the mx.transitions.Tween Class:

                  But first of all I must solve the scaling part.

                  It should be possible by setting the lineStyle or something like that

                  anyone??

                  I appreciate every answer I can get from you heroes ot there
                  • 6. Re: Tween animation in a sequence
                    Peter Lorent Level 2
                    Should be possible with 9-slice scaling but I haven't figured it out yet (and you would have to target the version 8 player in that case).
                    • 7. Re: Tween animation in a sequence
                      Peter Lorent Level 2
                      If you target player version 8 you can use 9-slice-scaling to prevent scaling of the line with the attached code. In the example I have a red square on the stage (162x162px, instance name 'square_mc') with a 10 pixel black border. With the attached code the border won't scale. The size of the grid will determine which part of the mc will be scaled.

                      • 8. Re: Tween animation in a sequence
                        Great I did not know there was a tweening and transition
                        class in MX 2004 and Flash 8.
                        I heard about it but I belived that Uhlmann and Laco was the
                        best way to get some great scripted tweening animations.
                        So I never take a notice to use it or pratice it. I was wrong –
                        I was wrong about the quality. and Adobe/Macromedia did
                        not choose to explain and marketing
                        these new features when (until now) they launched Flash 8.

                        continueTo() was something I appreciate with its easy
                        way to make a complex scripted animation.

                        And the code I get from you was brilliant! Fps or seconds
                        - the animation did run fast.

                        If you don’t mind I really appreciate if you can explain the code
                        with comments (you don’t need to do that if you don’t have the time) //

                        But anyway, I still have one big question – I did not manage to call a function
                        so I can play the animation reverse or similar.

                        You know, something like this “if X is == true, play the sequence reverse”
                        or similar or whatever you like to call it.

                        “import flash.geom.Rectangle“ - Flash Help could not find anything about it
                        I could also not find anything in the direction folders (like “first run”..etc)

                        Happy if I get some answer

                        Here´s “my” (your code modified) code:
                        ......................................................................................... ........................................................
                        • 9. Re: Tween animation in a sequence
                          Peter Lorent Level 2
                          The code I provided is very, very basic. The functions just create a new instance of the Tween Class, perform a tween based on hard coded values (so the functions aren't reusable for any other tween) and do something (call another function that performs a tween) when their job is done. Normally you would create functions that are reusable so you can create other tweens with them. Or like you say, reverse a certain animation. Well, as usual, there are many different ways to do this. Using an external class would be my first option. But, let's do this another way and demonstrate how you could use simple objects to create animations using a few reusable functions. Sure, the functions in the first snippet of code are reusable: you can provide another mc as a target but it will perform the same animation. You could do a lot more, like provide the values for the tween as parameters to the function so you would be able to create different animations on different mc's. In your case you want an animation in three steps (and reverse the animation). But what if you want to do something in one or two steps? Want to just scale over x or over y? So, let's make those functions reusable. Not by providing a bunch of values as parameters but by using objects that hold the properties of the animation. Again, in my example I have a square on the stage (this time 90x90px) with an instance name 'square_mc' and it's located at x:445 and y:290. To be able to reverse the animation I have a button on the stage with instance name reverse_btn, located at x:38 and y:360. The code defines an object for the 'forward animation' and one for the reverse animation. It then calls the animateX() function passing it the object 'animation'. Pressing the button reverses the animation using the same functions. The functions decide what to do based on the provided object and its properties. I've commented the code so you should be able to follow what happens. Mind you, I've typed this up quickly and haven't tested much. Don't go nuts if there is a flaw in the code. To create other animations just provide an object with the properties of the animation and pass it to the appropriate function. Questions? Let me know. Oh, and the tween packages you mentioned are great work! If you want to use them, you just need to study the provided doc's and examples.

                          • 10. Re: Tween animation in a sequence
                            Peter Lorent Level 2
                            I'm curious. Is it working out for you?
                            • 11. Re: Tween animation in a sequence
                              Amazing!!
                              What´s your background – are you God or something like that?
                              – your code is working great!!.

                              Now I´m going to try to modify the code so I can call the reverse
                              animation when certain statement is set to true.

                              The worst is that I´m only a unemployed (right now) Swedish Art Director
                              who’s struggling (struggle) with actionscript (for my portfolio) and has no
                              one to ask when I´m want to do some smooth and fine animation, which
                              from my point of view, is a part of the whole design.
                              .......................................
                              Something like this:
                              If( (_global.home == something) &&(_global.homeLoadedPopUp == true)){
                              Call the “Reverse the animation”.. ………
                              .........................
                              There are only a few really good actionscripters here in Sweden.
                              And if there are any really professional actionscripters they probably work in
                              Stockholm at well known agencies as Fantasy Interactvie….
                              The rest of them are working at small companies who’s forced (mostly young people)
                              to work and do the same job for a minimal wage until they are burned out.

                              When my portfolio is done. I´m gonna send you a message..

                              Thank you very much
                              • 12. Re: Tween animation in a sequence
                                Peter Lorent Level 2
                                If( (_global.home == something) &&(_global.homeLoadedPopUp == true)){
                                animateS(reverse_animation);
                                }

                                hmm, sounds like Sweden is the place for experienced actionscripters to make good money...
                                Have a look at http://kaledi.youki.be/
                                and for more info: http://www.youki.be/
                                It's a standard portfolio system. Well, it's an alternative to learning actionscript...
                                • 13. Re: Tween animation in a sequence
                                  Thanks again.
                                  • 14. Re: Tween animation in a sequence
                                    Peter Lorent Level 2
                                    You're welcome. If you have any further questions... if I'm online I'll try to help you. And otherwise someone else will pick up the problem. Good luck!
                                    1 person found this helpful
                                    • 15. Re: Tween animation in a sequence
                                      This was important and I did never tested it with your brilliant code.
                                      I never tested to practise the code on a rectangle (mc_square) with a border of 1pixel.
                                      The problem is still that the line (border 1 pixel) around the rectanlge is scaling too.
                                      Back to basic and start to tween with frames?
                                      • 16. Re: Tween animation in a sequence
                                        Peter Lorent Level 2
                                        The grid defines the area that is going to be scaled. Try different sizes.
                                        var grid:Rectangle = new Rectangle(40, 40, 40, 40);
                                        1 person found this helpful
                                        • 17. Re: Tween animation in a sequence
                                          var grid:Rectangle = new Rectangle(4, 4, 4, 4);
                                          square_mc.scale9Grid = grid;

                                          Now the square_mc scales fine, if I move the registration point from the upper right corner
                                          to the upper left corner, in my "square_mc" (width 15 px, height 100 px, border 1 px).

                                          But I wish to do a tween scale as when you have the registration point in the upper right corner.
                                          • 18. Re: Tween animation in a sequence
                                            Peter Lorent Level 2
                                            First comment the two lines in the code:
                                            //var grid:Rectangle = new Rectangle(40, 40, 40, 40);
                                            //square_mc.scale9Grid = grid;

                                            Now select the mc you want to scale in the library and select 'Properties' from the menu in the upper right corner of the library window. Tick the option 'Enable guides for 9-slice scaling'. Click OK. Now select 'Edit' from the menu in the upper right corner of the library window. You will see the guides and you can drag them just inside the mc. Test the movie.
                                            1 person found this helpful
                                            • 19. Re: Tween animation in a sequence
                                              Thansk for following me so far

                                              'Enable guides for 9-slice scaling'. I don’t have that on Flash8.
                                              What’s your version?

                                              But I know what you mean.

                                              Instead I double-clicked the square_mc and drag the rectangle symbol so
                                              the registration point (crosshair) now is in the upper right.
                                              But it don’t work. he lines are still scaled too much.

                                              But if I place the registration point in the middle, then it works and the lines
                                              scales much thinner. (thin) The problem is that this is not the animation type I want.

                                              'Enable guides for 9-slice scaling'. - very interesting. I’ve also searched the help with "no result"

                                              What could possible be the problem?

                                              • 20. Re: Tween animation in a sequence
                                                Peter Lorent Level 2
                                                'Enable guides for 9-slice scaling'. I don’t have that on Flash8.
                                                Then your Publish Settings are for Flash Player 7. The option 'Enable guides for 9-slice scaling' is only available when you publish for Player version 8 or higher.
                                                • 21. Tween animation in a sequence
                                                  No, I dont have that and my settings are when I`m export to Movie (.swf):
                                                  Flash player 8
                                                  Bottom up
                                                  Actionscript 2.0
                                                  Compress movie 80%

                                                  Anyway - I moved the crosshair by doubbleclicking the mc and drag the symbol (rectangle) so the crosshair
                                                  now is in the upper right corner.
                                                  The animaition now works fine.
                                                  • 22. Re: Tween animation in a sequence
                                                    If you´re still out there:
                                                    How do I know when the when the scaling part of the sequence animation is done/finished?
                                                    I want to show a show a textfield at the end of the animation before I reverse it?