Hi all:
Hoping someone can help with this. I have a container clip that has 10 small boxes placed in a circle. I need the “active” box to always be on top, so as soon as the boxes are created, i rotate the container -90 degrees (now box 1 is at the top).
Now…when I click on box 1, I need the container (with all the boxes in it) to rotate counter-clockwise to position box 2 at the top. When I click on box 2, it needs to rotate again so box 3 is at top, etc.
The problem: Everything seems to work fine, until I get to box 3 or 4. When I click on it, the container goes through a full 360 degree rotation, before stopping at the right place.
Code:
import caurina.transitions.*;
var container:Sprite = new Sprite();
addChild(container);
var radians:Number;
var degrees:Number;
var centerX:Number = stage.stageWidth/2;
var centerY:Number = stage.stageHeight/2;
var radius:Number = 200;
var numItems:Number = 9;
var offset:Number = -90;
function buildCircle():void {
for (var i:int = 0; i < numItems; i++) {
var box:Box = new Box();
box.name = i.toString();
box.mouseChildren = false;
box.num_txt.text = i.toString();
radians = i * ((Math.PI * 2) / numItems);
degrees = (radians * 180) / Math.PI;
box.x = (Math.cos(radians) * radius);
box.y = (Math.sin(radians) * radius);
box.rotation = degrees - offset;
box.addEventListener(MouseEvent.CLICK, moveBox);
container.addChild(box);
}
container.x = centerX;
container.y = centerY;
container.rotation = offset;
}
function moveBox(e:MouseEvent):void {
var num:Number = Number(e.currentTarget.name);
offset -= 360/numItems;
Tweener.addTween(container, {rotation:offset, time:1, transition:'easeOutExpo'});
}
buildCircle();
(I’m using Tweener for the animation).
Does anyone have a clue how to make this work correctly? I feel like I’m missing something so obvious!
Attached is the FLA as well in case you care to tinker with it.
Thanks!