Selteco Software
Selteco.com > FlashDesignerZONE.com > Tutorials > T1031

Create 3D motion.

Create animated 3D movement with ActionScript

Download source project t1031.zip (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