Flash AS3 tweening at an angle

Question

Hi I have a as3 file (listed below) that simply moves a box along the X axis when a mouse is over it (using Tweenlight) . What I want to do though is put the box on a 30 degree angle and have the box move along this angle. Can anybody tell me what I am doing wrong please ?

import com.greensock.*;
import com.greensock.easing.* ;


cont.addEventListener(MouseEvent.ROLL_OVER, onOver);
cont.addEventListener(MouseEvent.ROLL_OUT, onOut);
var stx:Number;

function onOver(e:MouseEvent):void
{
 var stx:Number = cont.x +20 ;

 TweenLite.to(cont, 1, { x:stx });
}

function onOut(e:MouseEvent):void
{
 stx = cont.x - 20 
 TweenLite.to(cont, 1, { x:stx } );
}

Here is live example: http://img42.imageshack.us/i/box.swf/

Answer 1

The hardest thing is to move your box on a line at a 30 degree angle. You'll have to use Trigonometry...remember SOHCAHTOA?

So basically you'll need to move in the x and the y direction.

In you onOver handler...

you want to move x to 20*Math.cos(30*Math.PI/180)

you want to move y to 20*Math.sin(30*Math.PI/180)

The cos and sin gives you the x and y steps to keep your objects moving along 30 degrees.

If you want your object to move more change the 20 parameter.