A Flash Developer Resource Site

Results 1 to 9 of 9

Thread: Building Animation sequences with the Timeline/Actionscript 3

  1. #1
    AS2 intolerant person
    Join Date
    Jan 2009
    Location
    Swansea
    Posts
    352

    Building Animation sequences with the Timeline/Actionscript 3

    i have been looking for a while now on how to use actionscript not only steer a movie, but also power it. basically what i mean is dumping the timeline all together, to use actionscript to not just specify how objects behave, but also decide 'when' animations take place.

    simple example:

    - object moves across the screen.
    - after so many seconds the object moves again.

    is it even possible or smart to attempt abandoning the timeline like this?

    flosculus?

  2. #2
    Space Midget Wrangler
    Join Date
    Sep 2002
    Posts
    129
    Absolutely, in fact it is tremendously useful. Check out Caurina Tweener and TweenLite. Either one will work rather well for what you're talking about.
    A little pain never hurt anyone

  3. #3
    AS2 intolerant person
    Join Date
    Jan 2009
    Location
    Swansea
    Posts
    352
    i've taken a look at tweenlite and i see what it does. however all it appears to do is make tweening more convenient to code, which isnt good for me because i wouldnt be learning how to code for myself.

    it doesnt however allow for delays. so far there are ways for delaying that i know of, allowing a tween to be followed by another tween after so long using the Timer class. however this means creating a function for every animation, and it just seems a bit to much.

    im generally asking whether or not using countless functions for each animation to allow delays between them is more or less efficient that using the timeline.

    for example, is it perfectly acceptable and professionally well structured to use the timeline (combined with actionscript obviously) for MovieClips, whilst keeping a single frame in the root powered by actionscript?

  4. #4
    Space Midget Wrangler
    Join Date
    Sep 2002
    Posts
    129
    Hi Flosculus,

    I think you're selling Tweenlite short. If you read the full documentation, you'll see that not only can you tween, but you can also:

    -add delays
    -string tweens
    -tween to programatically defined values
    -tween effects
    -trigger functions at the end of tweens or at update points
    -send variables into triggered functions

    You don't actually need the timer class. If possible I'd say to avoid the timer class, as there is a tendency for the timer class or the setTimeout class to cause a loss of scope.

    You also don't need to create a function for each tween. You can create a generic function that can send variables into a tween call. That way you can keep to reusable code. You're making it sound like much more of a nightmare that it actually is.

    The choice between code and timeline for animation is very much a matter of how you work best and what you're after. In many cases the two can coincide very nicely together. For example, a character in a game can easily use a timeline animation for a firing sequence but still use Tweenlite for motion, fading and bluring.

    As for running those things from the root. That can definitely be done, though you may find in more advanced as2 work or all as3 work that you'll be working more from classes than from the root.
    A little pain never hurt anyone

  5. #5
    Space Midget Wrangler
    Join Date
    Sep 2002
    Posts
    129
    Here is an example of a game I built using a combination of Caurina Tweener and timeline animation.

    http://www.dashboard.ca/missiletoe/
    A little pain never hurt anyone

  6. #6
    AS2 intolerant person
    Join Date
    Jan 2009
    Location
    Swansea
    Posts
    352
    i'll try to be less cynical :P i'll give it a shot.

    do i just add the path to TweenLite.as to the AS3 language settings?

    EDIT: very nice game lol

  7. #7
    Space Midget Wrangler
    Join Date
    Sep 2002
    Posts
    129
    Did you manage to get past all three bosses? The last one is a very challenging foe

    As for TweenLite, there are two steps:

    1. add it to the as3 language settings
    2. import it into your classes

    Full info is here
    http://blog.greensock.com/tweenliteas2/
    A little pain never hurt anyone

  8. #8
    AS2 intolerant person
    Join Date
    Jan 2009
    Location
    Swansea
    Posts
    352
    got to teh second boss lol

  9. #9
    AS2 intolerant person
    Join Date
    Jan 2009
    Location
    Swansea
    Posts
    352
    ok i've experimented with tweenlite, and it 'appears' so far that my problem is solved.

    however i just wanted to clarify that im using it correctly, this is just me playing around with it. i know the syntax is correct, but im curious if im using the delays correctly.

    import gs.*;
    import gs.easing.*;

    Code:
    TweenLite.to(rec, 1, {y:200, delay:2, ease:Elastic.easeInOut,overwrite:0}); 
    TweenLite.to(rec, 2, {y:300, delay:4, ease:Elastic.easeInOut, overwrite:0}); 
    TweenLite.to(rec, 1, {x:400, y:200, delay:5, ease:Elastic.easeInOut, overwrite:0}); 
    TweenLite.to(rec, 3, {y:100, delay:8, ease:Elastic.easeInOut, overwrite:0}); 
    
    TweenLite.to(rec2, 1, {y:300, delay:2, ease:Elastic.easeInOut, overwrite:0}); 
    TweenLite.to(rec2, 3, {y:100, delay:4, ease:Elastic.easeInOut, overwrite:0}); 
    TweenLite.to(rec2, 1, {x:200, y:300, delay:5, ease:Elastic.easeInOut, overwrite:0}); 
    TweenLite.to(rec2, 2, {y:200, delay:8, ease:Elastic.easeInOut, overwrite:0});
    so i've got 2 rectangles (rec, rec2), and i've used teh delay as the timer, however 'all' the timers start when the movie runs, meaning its accumulates with each new tween.

    is this the way its expected to be used or is there a way of setting the delay to start one after another?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center