Create 3D motion in flash

January 9, 2010

Actionscript 3.0 Tutorial

Create animated 3D movement with ActionScript

Download source project here (2 kb)

  1. Launch Flash Designer and choose “Blank document”
  2. Set frame size to 300 x 300
  3. Set frame delay to Stop
  4. Choose “Ellipse” tool and draw the ball, hold CTRL to draw a circle
  5. Choose “Item” > “Gradient Fill”
  6. Click “Center Color” and change it to your favourite color (this is the light color)
  7. Click “Outer Color” and change it to a color darker than center color (this is the shadow color)
  8. Click “Advanced”
  9. Change “Delta X” and “Delta Y” to -50 (this will move the center of the gradient)
  10. Click OK twice to fill the ball with the gradient
  11. Choose “Edit” > “Convert to Sprite”, the ball will appear as “Sprite2″
  12. Choose “Item” > “Placement Properties”, check “ActionScript Target” and change “Item Name” to “theBall”, click OK
  13. Choose “Frame” > “ActionScript” and enter the following code:
    Angle = 0;

    function moveball()
    {
    Angle++; // increase angle by 1 degree at each frame

    rad = Angle / 20; // divide angle by speed

    // calculate x and y offset of the ball
    // sin and cos are between -1 and 1

    X = Math.sin(rad) * 100; // X: -100 to +100 pixels horizontally
    Y = Math.cos(rad) * 30; // Y: -30 to +30 pixels vertically

    // place the ball at x and y
    // (120,120) is the center
    theBall._x = 120 + X;
    theBall._y = 120 + Y;

    // scale the ball based on y coordinate (vertical axis)
    // negative y will increase the scale
    // 100 is the normal size
    theBall._xscale = 100 + Y;
    theBall._yscale = 100 + Y;

    // fade the ball based on y too
    theBall._alpha = 75 + Y / 2;
    }

    setInterval(moveball,25);

Press F9 to preview the animation

, , , , , ,

Subscribe

Subscribe to our e-mail newsletter to receive updates.

No comments yet.

Leave a Reply