Hopefully Simple Problem - Rotation Tweening

[blythy]

Hi,

 

I'm using the tweening classes for the first time and I'm finding them very useful and clever packages. However, I need some help.

 

I have a movie clip (parent_mc) that contains 8 individual movie clips (child_mc) which have their own child (childs_child_mc). The parent movie clip is supposed to rotate constantly, until one of the mouse hovers over one of the child movie clips at which point it stops, and the childs child alpha value is raised to bring it into focus. Whilst I have this working, what I would like to do is speed up/slow down the rotate tween depending on the mouse position to the parent_mc, i.e. the closer to the parent_mc the slower the rotation, and the further away the faster the rotation, until the original tween speed.

 

So far:

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

var myTween:TweenLite = new TweenLite(parent_mc, 10, {rotation:360, ease:Linear.easeOut, onComplete:rotate});
parent_mc.child_mc.addEventListener(MouseEvent.MOUSE_OVER, fadein);
parent_mc.child_mc.addEventListener(MouseEvent.MOUSE_OUT, fadeout);

function rotate():void {
trace("rotate");
myTween.restart();
}
function fadein(event:MouseEvent):void {
TweenLite.to(parent_mc.child_mc.childs_child_mc, 0.5, {alpha:1});
myTween.pause();
}
function fadeout(event:MouseEvent):void {
TweenLite.to(parent_mc.child_mc.childs_child_mc, 0.5, {alpha:0});
myTween.resume();
}
stop();

 

I'm at a loss as to how to update the tween depending on the cursor position, could anyone point me in the right direction?

 

Thanks!

[GreenSock]

You could set up an ENTER_FRAME listener (or an onUpdate on the tween) that calls a function that affects the tween's timeScale property, but make sure you're using TweenMax, not TweenLite (TweenLite doesn't offer timeScale functionality).

 

function myListener():void {
   var dx:Number = mouseX - parent_mc.x;
   var dy:Number = mouseY - parent_mc.y;
   var distance:Number = Math.sqrt(dx * dx + dy * dy);
   myTween.timeScale = distance * 0.01; //or change the multiplier to whatever
}

 

(code written off the top of my head - not tested)

[blythy]

That has worked a treat!

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

var myTween:TweenMax = new TweenMax(parent_mc, 10, {rotation:360, ease:Linear.easeOut, onComplete:rotate});
parent_mc.child_mc.addEventListener(MouseEvent.MOUSE_OVER, fadein);
parent_mc.child_mc.addEventListener(MouseEvent.MOUSE_OUT, fadeout);
parent_mc.addEventListener(Event.ENTER_FRAME, myListener)
function rotate():void {
trace("rotate");
myTween.restart();
}
function fadein(event:MouseEvent):void {
TweenLite.to(parent_mc.child_mc.childs_child_mc, 0.5, {alpha:0});
TweenLite.to(parent_mc.child_mc.childs_other_child_mc, 0.5, {alpha:1});
myTween.pause();
}
function fadeout(event:MouseEvent):void {
TweenLite.to(parent_mc.child_mc.childs_child_mc, 0.5, {alpha:1});
TweenLite.to(parent_mc.child_mc.childs_other_child_mc, 0.5, {alpha:0});
myTween.resume();
}
function myListener(e:Event):void {
   var dx:Number = mouseX - parent_mc.x;
   var dy:Number = mouseY - parent_mc.y;
   var distance:Number = Math.sqrt(dx * dx + dy * dy);
   var speed:Number = distance * 0.005;
if(speed > 1.5){
	myTween.timeScale = 1.5;
} else {
	myTween.timeScale = speed;
}
//trace(myTween.timeScale);
}
stop();

 

One more question that is not necessarily tween related - is there a way I can reference the child_mc in the function fadein/fadeout so I can just add eventListeners to the other 7 child_mc's (each with their own instance name but instances of the same movie clip)? Because ideally I would like to tween another image elsewhere to when a particular child_mc has the mouse over it and writing the same function for each child_mc seems a bit long-winded.

 

Thanks

[GreenSock]

I'd recommend looking into the event.target and event.currentTarget properties. They allow you to sense exactly what object generated the event, and you also might want to use the MOUSE_OVER/MOUSE_OUT on the parent instead of the children because it gets fired whenever any of the children are rolled over/out. Otherwise, if you're adding it to each child, I'd recommend using ROLL_OVER/ROLL_OUT instead because they typically work more the way developers expect (read the docs to understand the difference). So you can have listeners all pointed to one handler that checks the target/currentTarget to determine which object is associated with the event.

 

Hope that helps.

[blythy]

Thanks for your help!

 

I'm coming from a php background and animation is very new to me... but I had worked out that I could get the name of the child_mc by using the event.currentTarget.name. I originally tried putting parent_mc.event.currentTarget.name.childs_child_mc but that threw back errors, and I tried storing it in a variable to try it that way but alas no good. So eventually I settled for a series of if else statements to work out which child_mc was triggering the function.

 

Here's what I've ended up with...

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

var myTween:TweenMax = new TweenMax(parent_mc, 10, {rotation:360, ease:Linear.easeOut, onComplete:rotate});
parent_mc.child8_mc.buttonMode = true;
parent_mc.child1_mc.buttonMode = true;
parent_mc.child2_mc.buttonMode = true;
parent_mc.child3_mc.buttonMode = true;
parent_mc.child4_mc.buttonMode = true;
parent_mc.child5_mc.buttonMode = true;
parent_mc.child6_mc.buttonMode = true;
parent_mc.child7_mc.buttonMode = true;
parent_mc.child1_mc.addEventListener(MouseEvent.ROLL_OVER, fadein);
parent_mc.child1_mc.addEventListener(MouseEvent.ROLL_OUT, fadeout);
parent_mc.child2_mc.addEventListener(MouseEvent.ROLL_OVER, fadein);
parent_mc.child2_mc.addEventListener(MouseEvent.ROLL_OUT, fadeout);
parent_mc.child3_mc.addEventListener(MouseEvent.ROLL_OVER, fadein);
parent_mc.child3_mc.addEventListener(MouseEvent.ROLL_OUT, fadeout);
parent_mc.child4_mc.addEventListener(MouseEvent.ROLL_OVER, fadein);
parent_mc.child4_mc.addEventListener(MouseEvent.ROLL_OUT, fadeout);
parent_mc.child5_mc.addEventListener(MouseEvent.ROLL_OVER, fadein);
parent_mc.child5_mc.addEventListener(MouseEvent.ROLL_OUT, fadeout);
parent_mc.child6_mc.addEventListener(MouseEvent.ROLL_OVER, fadein);
parent_mc.child6_mc.addEventListener(MouseEvent.ROLL_OUT, fadeout);
parent_mc.child7_mc.addEventListener(MouseEvent.ROLL_OVER, fadein);
parent_mc.child7_mc.addEventListener(MouseEvent.ROLL_OUT, fadeout);
parent_mc.child8_mc.addEventListener(MouseEvent.ROLL_OVER, fadein);
parent_mc.child8_mc.addEventListener(MouseEvent.ROLL_OUT, fadeout);
parent_mc.addEventListener(Event.ENTER_FRAME, myListener)
function rotate():void {
trace("rotate");
myTween.restart();
}
function fadein(event:MouseEvent):void {
var spoke_name:String = event.currentTarget.name;
if(spoke_name == 'child1_mc'){
	TweenLite.to(parent_mc.child1_mc.spoke_light, 0.5, {alpha:0});
	TweenLite.to(parent_mc.child1_mc.spoke, 0.5, {alpha:1});
	TweenLite.to(child1_description, 0.5, {alpha:1});
} else if(spoke_name == 'child2_mc'){
	TweenLite.to(parent_mc.child2_mc.spoke_light, 0.5, {alpha:0});
	TweenLite.to(parent_mc.child2_mc.spoke, 0.5, {alpha:1});
	TweenLite.to(child2_description, 0.5, {alpha:1});
} else if(spoke_name == 'child3_mc'){
	TweenLite.to(parent_mc.child3_mc.spoke_light, 0.5, {alpha:0});
	TweenLite.to(parent_mc.child3_mc.spoke, 0.5, {alpha:1});
	TweenLite.to(child3_description, 0.5, {alpha:1});
} else if(spoke_name == 'child5_mc'){
	TweenLite.to(parent_mc.child5_mc.spoke_light, 0.5, {alpha:0});
	TweenLite.to(parent_mc.child5_mc.spoke, 0.5, {alpha:1});
	TweenLite.to(child5_description, 0.5, {alpha:1});
} else if(spoke_name == 'child4_mc'){
	TweenLite.to(parent_mc.child4_mc.spoke_light, 0.5, {alpha:0});
	TweenLite.to(parent_mc.child4_mc.spoke, 0.5, {alpha:1});
	TweenLite.to(child4_description, 0.5, {alpha:1});
} else if(spoke_name == 'child7_mc'){
	TweenLite.to(parent_mc.child7_mc.spoke_light, 0.5, {alpha:0});
	TweenLite.to(parent_mc.child7_mc.spoke, 0.5, {alpha:1});
	TweenLite.to(child7_description, 0.5, {alpha:1});
} else if(spoke_name == 'child8_mc'){
	TweenLite.to(parent_mc.child8_mc.spoke_light, 0.5, {alpha:0});
	TweenLite.to(parent_mc.child8_mc.spoke, 0.5, {alpha:1});
	TweenLite.to(child8_description, 0.5, {alpha:1});
} else if(spoke_name == 'child6_mc'){
	TweenLite.to(parent_mc.child6_mc.spoke_light, 0.5, {alpha:0});
	TweenLite.to(parent_mc.child6_mc.spoke, 0.5, {alpha:1});
	TweenLite.to(child6_description, 0.5, {alpha:1});
}

myTween.pause();
}
function fadeout(event:MouseEvent):void {
var spoke_name:String = event.currentTarget.name;
if(spoke_name == 'child1_mc'){
	TweenLite.to(parent_mc.child1_mc.spoke_light, 0.5, {alpha:1});
	TweenLite.to(parent_mc.child1_mc.spoke, 0.5, {alpha:0});
	TweenLite.to(child1_description, 0.5, {alpha:0});
} else if(spoke_name == 'child2_mc'){
	TweenLite.to(parent_mc.child2_mc.spoke_light, 0.5, {alpha:1});
	TweenLite.to(parent_mc.child2_mc.spoke, 0.5, {alpha:0});
	TweenLite.to(child2_description, 0.5, {alpha:0});
} else if(spoke_name == 'child3_mc'){
	TweenLite.to(parent_mc.child3_mc.spoke_light, 0.5, {alpha:1});
	TweenLite.to(parent_mc.child3_mc.spoke, 0.5, {alpha:0});
	TweenLite.to(child3_description, 0.5, {alpha:0});
} else if(spoke_name == 'child5_mc'){
	TweenLite.to(parent_mc.child5_mc.spoke_light, 0.5, {alpha:1});
	TweenLite.to(parent_mc.child5_mc.spoke, 0.5, {alpha:0});
	TweenLite.to(child5_description, 0.5, {alpha:0});
} else if(spoke_name == 'child4_mc'){
	TweenLite.to(parent_mc.child4_mc.spoke_light, 0.5, {alpha:1});
	TweenLite.to(parent_mc.child4_mc.spoke, 0.5, {alpha:0});
	TweenLite.to(child4_description, 0.5, {alpha:0});
} else if(spoke_name == 'child7_mc'){
	TweenLite.to(parent_mc.child7_mc.spoke_light, 0.5, {alpha:1});
	TweenLite.to(parent_mc.child7_mc.spoke, 0.5, {alpha:0});
	TweenLite.to(child7_description, 0.5, {alpha:0});
} else if(spoke_name == 'child8_mc'){
	TweenLite.to(parent_mc.child8_mc.spoke_light, 0.5, {alpha:1});
	TweenLite.to(parent_mc.child8_mc.spoke, 0.5, {alpha:0});
	TweenLite.to(child8_description, 0.5, {alpha:0});
} else if(spoke_name == 'child6_mc'){
	TweenLite.to(parent_mc.child6_mc.spoke_light, 0.5, {alpha:1});
	TweenLite.to(parent_mc.child6_mc.spoke, 0.5, {alpha:0});
	TweenLite.to(child6_description, 0.5, {alpha:0});
}

myTween.resume();
}
function myListener(e:Event):void {
   var dx:Number = mouseX - parent_mc.x;
   var dy:Number = mouseY - parent_mc.y;
   var distance:Number = Math.sqrt(dx * dx + dy * dy);
var speed:Number = distance * 0.005;
if(speed > 1){
	myTween.timeScale = 1;
} else {
	myTween.timeScale = speed;
}
//trace(myTween.timeScale);
}
stop();

 

 

I have changed to roll_over/out as you suggested; I did a quick read up and found an example of how often an event was fired using mouse_over/out. But I don't see how if I put the event listener on the parent_mc that it will know which child element to alpha in/out? Forgive my ignorance!

 

One last question, sometimes it doesn't seem to recognise that my mouse is over a child element, very rarely but sometimes, is this likely to be a limitation of flash or the way I have set up the tweens?

 

PS I am recommending this package to anyone who will listen - it's been a lot easier to set up what I wanted than I ever expected!

[GreenSock]

I have changed to roll_over/out as you suggested; I did a quick read up and found an example of how often an event was fired using mouse_over/out. But I don't see how if I put the event listener on the parent_mc that it will know which child element to alpha in/out? Forgive my ignorance!

 

If you use MOUSE_OVER/MOUSE_OUT, the event.target will refer to the child that you rolled over, and the event.currentTarget will refer to the parent that you added the listener to.

 

One last question, sometimes it doesn't seem to recognize that my mouse is over a child element, very rarely but sometimes, is this likely to be a limitation of flash or the way I have set up the tweens?

 

I haven't seen this happen before. Not sure what to say. Flash seems to be pretty solid on this stuff, although if you have a filter applied, sometimes the very edges seem to extend too far or not far enough which has to do with Bitmap caching and whole pixel values I believe.

 

PS I am recommending this package to anyone who will listen - it's been a lot easier to set up what I wanted than I ever expected!

 

Cool! Glad to hear it's helping out.

[blythy]

If you use MOUSE_OVER/MOUSE_OUT, the event.target will refer to the child that you rolled over, and the event.currentTarget will refer to the parent that you added the listener to.

 

I gave this a go, but the event.target referred to the childs_child_mc. Nonetheless it's working and the lines of saved code are not that huge really.