A Flash Developer Resource Site

Results 1 to 15 of 15

Thread: smoothness

Hybrid View

  1. #1
    Senior Member jbum's Avatar
    Join Date
    Feb 2004
    Location
    Los Angeles
    Posts
    2,920
    Upload a simple example of something you made that isn't smooth enough.

    In general, most of the actionscript based animations I've seen posted on this board tend to use 1 of 4 different styles of movement.

    1. Linear movement. This is by far the most common by newbies (cause it's easy to do) and it looks the the jerkiest. Especially when starting and stopping.

    _x += k;

    (where k is a fixed number).

    2. Fractional ease-out. This starts fast but ends up smooth & slow. Often used for alpha fades and slides.

    _x += (target-_x)/k;

    3. Time-based Ease-in/Ease-out. This starts slow, speeds up and then slows down at the end. A personal favorite of mine, see below.

    k = elapsedTime/duration; // k = 0-1
    k = k*k*(3-2*k); // apply easing
    _x = start + (target - start)*k;

    4. Sine wave motion. This performs smooth oscillations or pendulum motions, another favorite of mine.

    _x = midPoint + Math.sin(timeValue) * width;



    #2 above, is VERY popular on this board. And you'll see numerous examples of it every day.

    It suffers from a few problems, which is why I like #3 better.

    a. When used to travel a large distance, such as to alpha fade from 0 to 255, it tends to be either fast and choppy or smooth and slow. It's hard to make it fast and smooth. If you plot subsequent values in a program like Excel, you'll see why - small values of K make big jumps at the beginning, and large values of K take a long time to converge.

    b. You can't easily predict how long it will take. Increasing K makes it slower, but how much?

    c. It's duration is proportional to framerate. Double the framerate, and it's twice as fast. You may like this, but I don't.

    d. It never actually reaches the target value - so to get it to stop, you have to add a test to see if it's close to the target value:

    dx = (target - _x);
    if (Math.abs(dx) < AcceptableMinimum)
    {
    // stop it
    }
    else
    _x += dx/k;


    This is why I prefer method #3. It starts smooth, ends smooth and takes a predictable amount of time, which you can specify in seconds or milliseconds. If you look at my prior posts, you'll see two or three examples of alpha and x tweens that use it.

    - Jim
    Last edited by jbum; 03-24-2004 at 07:20 PM.

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