TweenLite Rotation Circle

[akira_lee]

Hello

 

I'm trying to make a circle rotate every x degrees, to get some pens rotate to the same spot. So i've got 21 pens, 360 degrees / 21 pens = 17.14 degrees, i'm moving the circle CCW and CW (+17.14 and -17.14).

 

I'm using the Tweenlite to move the pens but it doesn't work

function functionMoverCanetas(event:Event):void

{

if (botaoPress == true)

{

TweenLite.to(mcCanetas, 1, {rotation:velocidadeCaneta});

//mcCanetas.rotation += velocidadeCaneta;

}

}

 

If I only use mcCanetas.rotation += velocidadeCaneta; in the functionMoverCanetas the rotation almost works fine, some pens just skip in the rotation and i can't figure it out.

 

One more thing, how do i know which pen is in the spot? Is there any way to get the name and save to a var?

 

I'm trying to do this for 3 days :/ You can find the source file in here http://www.carlajesus.com/download/fla.zip Can someone help me out?

 

Thanks in advance

[Carl]

the main problem is that your moverCanetas function is an ENTER_FRAME function and it runs over and over and over again.

so you were creating many many tweens.

 

also this tween always said "tween rotation to 17.4" which is an absolute value. once mcCaneta tweens to 17.4 rotation... there is no animation left to be done.

 

you need to do a relative value which means "the object's CURRENT rotation +/- 17.4. to do a relative tween use a String as your rotation value. rotation:"17.4" OR rotation:String(velocidadeCaneta)

 

ALSO (which made testing difficult) your pens are NOT evenly dispersed inside mcCaneta. they do not have consistent 17.4 degree rotation, so it often appeared the rotation was not landing in the right spot.

 

 

preview fixes: http://www.snorkl.tv/dev/rotateIncrementsSmooth/

 

the main changes I made to the code are as follows:

 

function functionClicarEsquerda(event:MouseEvent):void
{
botaoPress = true;
velocidadeCaneta = -17.14;
//create the tween in separate function so both butons can use same code AND so that doTween() can be called repeatedly
doTween();
}


function doTween()
{

//Make sure a button is pressed AND that a tween is not currently in progress
if (botaoPress && !TweenMax.isTweening(mcCanetas))
{
     //when the tween is done run it again if the button is still pressed notice onComplete
	TweenLite.to(mcCanetas, 1, {rotation:String(velocidadeCaneta), ease:Linear.easeNone, onComplete:doTween});
}
}

 

the above will create smooth and repetitive 17.4 degree rotations. when the user releases the mouse mcCaneta will stop at a 17.4 degree interval every time.

 

In order to get accurate visuals, I programmatically placed "pens" inside mcCaneta with rotations at 17.4 degree intervals.

 

for (var i:int = 0; i	var pen:Pen = new Pen();
pen.rotation = i * 17.14;
mcCanetas.addChild(pen);
}

 

please see my attached file.

[akira_lee]

Hi Carl,

 

First i want to say thank you for your help and explanations it's really more efficient to put all pens in the right spot by code..

I'm just responding now because it took me some time to rotate all pens and to make more code, i'm still a newbie

 

I created a textfield and variable to put the color in the stage of the selected pen and i was trying to make it appear on the right and when it changes go to the left and appear again in the right, but i don't know the best way to do this and the alpha doesn't work.. Could you take a look at the code? The fla is @ http://www.carlajesus.com/download/carlRotaion.zip

 

Thank you for your time and patience

[Carl]

you had a conflict cause you were calling desactivarBotoes() in an onUpdate. so your tweens were fighting each other

 

function doTweenCanetas()

{

//trace(TweenMax.isTweening(mcCanetas));

trace(mcCanetas.rotation);

trace(nrCorCaneta);

 

btCorpoEsquerda.addEventListener(MouseEvent.MOUSE_DOWN,functionClicarEsquerda);

btCorpoEsquerda.mouseEnabled = true;

 

btCorpoDireita.addEventListener(MouseEvent.MOUSE_DOWN,functionClicarDireita);

btCorpoDireita.mouseEnabled = true;

 

TweenLite.to(myCorpo, 0.5, {alpha:1, x:20, ease:Elastic.easeOut});

 

if (botaoPress && !TweenMax.isTweening(mcCanetas))

{

//quando der a volta temos que corrigir o angulo para ficar novamentee nos 90º

if(mcCanetas.rotation == 89.93999999999996){

mcCanetas.rotation = 90;

}

TweenLite.to(mcCanetas, 1, {rotation:String(velocidadeCaneta), ease:Linear.easeNone, onComplete:doTweenCanetas});

}else{

//this is new. this happens when the tween of mcCanetas is no longer running

TweenLite.to(myCorpo, 0.5, {alpha:0, x:0, ease:Back.easeOut});

}

}

 

as for the alpha not working. make sure you are embedding your font

[akira_lee]

Hello

 

Okay but i need to call desactivarBotoes() when the tween doTweenCanetas is running to deactivate the buttons to the right and left or otherwise my count of pens will increase and the color in the text it's going to be wrong. I can't put in onUpdate? Where can i call the function desactivarBotoes() while the pens rotate?

 

I've tried to embed the font but when i wrote the line myCorpo.embedFonts = true; the text disappear, can't figure out why, i follow some tutorials but doesn't work and there's no error on output :/ here is the updated fla http://www.carlajesus.com/download/carlRotaion.zip can you help me one more time?

 

Thank you Carl

[Carl]

try calling desactivarBotoes onStart. or just put it under the line of code for your pen spin tween.

 

desactivarBotoes should only deactivate the buttons and not move your textfield around. by separating that functionality into different functions you will avoid these conflicts.

 

 

as for the textfield and font embedding, just place the textfield on the stage and do the embedding through the properties panel

[akira_lee]

Hello

 

Ok I've putted under the line of the spinning tween and its working well just like the dynamic textfield on stage i just didn't embed the font

 

thank you for everything