How to tween to initial state?

[illegalbrain]

Okay, here's an easy one: I am quite the noob at greensock and indeed any kind of scripting.. Until lastnight I didn't even know how to use script in flash.

 

I am trying to create a series of bobbing letters, and Carl helped me on the Adobe forums with this:

 

function dBob(MouseEvent){

TweenMax.to(d_mc, .5, {y:"30", repeat:-1, yoyo:true});

}

 

which worked fine, then all I needed to add was another function to return d_mc to its initial state on mouse ROLL_OUT, which I didn't know how to do but I tried this:

 

function dStop(MouseEvent){

TweenMax.to(d_mc, .5 {x:2.1351, y:8.6333});

}

 

With the x/y being the coordinates that Flash gives me for the d_mc symbol, but when I take the mouse away it flies partially off the screen to the upper left corner, rather than returning to its original state in the lower left corner.

 

Is this because the x/y coordinates as used in TweenMax don't relate to the x/y coordinates in Flash? I'm confused by this, and not sure how to make it work... how do I go about returning the letter to its original state?

 

I also tried gotoAndStop(0) but that dropped the letter a little bit and kept it bobbing, so I obviously am misusing it.

 

Thanks for any help and suggestions, I am really excited by what little I know so far about greensock!

[illegalbrain]

Oops, should be an additional comma in that second function..

[Carl]

x of 2 and y of 8 would most definitely be in the upper left hand corner.

 

if you want to post an fla I'll take a look at it.

 

c

[illegalbrain]

Thanks I'd really appreciate that.

 

I attached the fla.. actually flash is telling me its y is 12.83, it was at 8 when I accidentally had the next letter selected as well. I'm not sure why flash is giving me these coordinates!

 

I tried using a trace to discover the actual coordinates, but how do I get it to trace the x/y for the finishing state?

 

Anyway, it read 60.85 and -200, so at least I managed to find out the right x, but why is flash saying it is 2.14, what have I done wrong?

 

Thanks again.

 

*edit* oops can't attach a fla, here is a dropbox link:

 

http://dl.dropbox.com/u/11465859/Design ... llover.fla

[Carl]

hello illegalbrain,

 

i got hit by hurricane irene. haven't had internet access since sunday am. just checking in on things from a relative's house on my laptop. i tried looking at your file but I couldn't open it with CS4. My ability to help you is going to be EXTREMELY limited until I get internet access back at home.

 

to check the x/y values of your object after a tween completes add an onComplete callback:

 

TweenMax.to(d_mc, .5 {x:2.1351, y:8.6333, onComplete:test});

 

function test(){

trace("x: " + d_mc.x);

trace("y: " + d_mc.y);

}

 

or you could just have a button that you click that does the same trace for you.

 

also in most cases it is best to tween to have your assets in flash set on whole pixel values so that they display accurately. when you place items on half-pixels images and text will blur.

 

I will help you more when things are back to normal. right now there are tons of fallen trees that have messed things up for miles.

 

ps. to upload files to the forum, just make sure you zip them first (i know that isn't totally clear when trying to upload).

 

Best,

 

Carl

[Carl]

it appears your fla is CS5.5 and I only have CS5. please upload again as a CS5 or less. thanks

[illegalbrain]

Wow, sorry to hear about the hurricane, hope you and yours are okay!

 

Thanks for the tips on checking x/y values, what I ended up doing was commenting out the part where the letters bounce in momentarily and copying the values over that way.

 

I have included a version in CS5, would love it if you could tell me why the x/y values are appearing differently within flash.

 

Design 05 TweenMax CS5.zip

 

Also, I have noticed the effect you talked about where when the object moves away from the cursor on mouseover (ie if I place it just at the top edge of one of the letters), it gets glitchy and instead of bobbing in place starts moving slwoly downward until I take the mouse away again.. any way you know of to workaround this?

 

Thanks so much for all your help with this, and for turning me on to greensock in the first place!

[Carl]

we are all safe after the hurricane. Thanks!

 

the reason your values are conflicting is because your stage is set up to measured in centimeters and not pixels.

 

click off stage, go to properties panel, click on "EDIT" button next to the stage size. set "ruler units" to pixels.

 

in order to avoid the over/out glitchiness you can put invisible movieclips on top of your letters that respond to mouse events and don't move.

 

when you roll over the the "invisible hit area" clip you tell the proper letter to tween away.

[illegalbrain]

Glad to hear you are all okay, sounds like some crazy weather!

 

the reason your values are conflicting is because your stage is set up to measured in centimeters and not pixels.

 

Ha! How obvious it seems now and how silly I feel! Thanks so much for taking a look at that, knew I must be missing something pretty obvious!

 

Thanks for the tips on fixing the glitch, I wondered if it might be something to do with invisible buttons, but couldn't quite work it out.. again, now that you have mentioned it I feel silly for not figuring it out myself.

 

 

Having said that, I was wondering if there was a way to make an object return to its initial state without having to specify x/y, so that if I used an event object to set all the letters bobbing like this:

 

addEventListener(MouseEvent.MOUSE_OVER, hover);

function hover(e:MouseEvent):void

{

TweenMax.to(e.target, .5, {y:"30", repeat:-1, yoyo:true});

}

 

I could have each affected object return to a normal state on mouseout?

 

Thanks for all the help here, between you and those Doug Winnie videos you mentioned I am learning a lot!

 

*edit* hey by the way what is the font that you and Doug use in your actions panel in Flash? I found one similar, but then I did a renistallation and can't remember what it was. The semi-circular parentheses are particulalry cool.

[Carl]

you can record the initial y values of your letters when the file first loads.

when you build your ROLL_OUT event handler function it will basically say

 

"tween the movie clip that just fired a ROLL_OUT back to it's initial position

 

you can paste this code into the file you provided:

 

import com.greensock.*;
import com.greensock.easing.*;
import flash.display.MovieClip;



//record the y values of all the letters


d_mc.initY = d_mc.y;
e_mc.initY = e_mc.y;
s_mc.initY = s_mc.y;
i_mc.initY = i_mc.y;
g_mc.initY = g_mc.y;
n_mc.initY = n_mc.y;

//---DESIGN drops in and bounces---\\

TweenMax.from(d_mc, 2, {y:-200, ease:Bounce.easeOut});
TweenMax.from(e_mc, 2, {y:-200, ease:Bounce.easeOut, delay:.5});
TweenMax.from(s_mc, 2, {y:-200, ease:Bounce.easeOut, delay:1});
TweenMax.from(i_mc, 2, {y:-200, ease:Bounce.easeOut, delay:1.5});
TweenMax.from(g_mc, 2, {y:-200, ease:Bounce.easeOut, delay:2});
TweenMax.from(n_mc, 2, {y:-200, ease:Bounce.easeOut, delay:2.5});

//---DESIGN Mouse RollOvers---\\

d_mc.addEventListener(MouseEvent.ROLL_OVER, bob);
e_mc.addEventListener(MouseEvent.ROLL_OVER, bob);
s_mc.addEventListener(MouseEvent.ROLL_OVER, bob);
i_mc.addEventListener(MouseEvent.ROLL_OVER, bob);
g_mc.addEventListener(MouseEvent.ROLL_OVER, bob);
n_mc.addEventListener(MouseEvent.ROLL_OVER, bob);



function bob(e:MouseEvent){
var mc:MovieClip = e.target as MovieClip;
trace(mc.name);
TweenMax.to(mc, .5, { y:"30", repeat:-1, yoyo:true});
}


//---DESIGN Mouse RollOuts---\\

// each button can use the same eventListener as they all use the same tween style

d_mc.addEventListener(MouseEvent.ROLL_OUT, goBack);
e_mc.addEventListener(MouseEvent.ROLL_OUT, goBack)
s_mc.addEventListener(MouseEvent.ROLL_OUT, goBack)
i_mc.addEventListener(MouseEvent.ROLL_OUT, goBack)
g_mc.addEventListener(MouseEvent.ROLL_OUT, goBack)
n_mc.addEventListener(MouseEvent.ROLL_OUT, goBack)



function goBack(e:MouseEvent){
var mc:MovieClip = e.target as MovieClip;
trace(mc.name);
TweenMax.to(mc, .5, { y:mc.initY});
}

 

the font I use for AS is Monaco.

 

although not exactly what is being used here, you may find this tutorial helpful in the future:

 

http://www.snorkl.tv/2010/08/assign-eve ... enttarget/

[illegalbrain]

Awesome, thank you so much for that.. so initY is all that was required.. I was wondering though, instead of writing the code as above, would there be any disadvantages of doing it like this:

 

import com.greensock.*;
import com.greensock.easing.*;
import flash.display.MovieClip;


//record the y values of all the letters

d_mc.initY = d_mc.y;
e_mc.initY = e_mc.y;
s_mc.initY = s_mc.y;
i_mc.initY = i_mc.y;
g_mc.initY = g_mc.y;
n_mc.initY = n_mc.y;

//---DESIGN drops in and bounces---\\

TweenMax.from(d_mc, 2, {y:-200, ease:Bounce.easeOut});
TweenMax.from(e_mc, 2, {y:-200, ease:Bounce.easeOut, delay:.5});
TweenMax.from(s_mc, 2, {y:-200, ease:Bounce.easeOut, delay:1});
TweenMax.from(i_mc, 2, {y:-200, ease:Bounce.easeOut, delay:1.5});
TweenMax.from(g_mc, 2, {y:-200, ease:Bounce.easeOut, delay:2});
TweenMax.from(n_mc, 2, {y:-200, ease:Bounce.easeOut, delay:2.5});

//---DESIGN Mouse RollOvers---\\

addEventListener(MouseEvent.MOUSE_OVER, hover);
function hover(e:MouseEvent):void
{
TweenMax.to(e.target, .5, {y:"30", repeat:-1, yoyo:true});
}

//---DESIGN Mouse RollOuts---\\

addEventListener(MouseEvent.MOUSE_OUT, goBack);
function goBack(e:MouseEvent):void
{
  var mc:MovieClip = e.target as MovieClip;
  trace(mc.name);
  TweenMax.to(mc, .5, { y:mc.initY});
}

 

It seems to work the same and is about half as much code, but I am wondering if I am going to run into problems when I want to put invisible movie clips above the letters as you specified above, because it only operates on the buttons that triggered the event.

 

I'm still not sure of the difference between MOUSE_OVER and ROLL_OVER, but this code doesn't work properly with ROLL_OVER, it makes everything on the stage bob.

 

Haven't had a chance to check your tutorial yet, but will do so now: looking forward to it!

 

*edit* Actually I have seen that tutorial.. I felt like most of it went over my head at the time (this week is the first time I have done coding of any kind) but I think it is what got started me off on the path that led to the above code! Thanks for your great tutorials, I am going to hunt around for another one.

 

Also, I was just wondering what is the difference between this:

function goBack(e:MouseEvent):void

{

var mc:MovieClip = e.target as MovieClip;

TweenMax.to(mc, .5, { y:mc.initY});

}

 

and this:

function goBack(e:MouseEvent):void

{

TweenMax.to(e.target, .5, {y:e.target.initY});

}

?

 

I don't quite understand var yet, so I am not sure what it is doing in this instance.. off to find more tutes!