Assign EventListeners to Multiple Movie Clips in a Single Blow! A look at target vs currentTarget

This movie requires Flash Player 9

This video illustrates an incredibly powerful way to minimize the amount of code you need to add eventListeners to tons of movie clips, in this case 8:) This could be one of the most important techniques you need to greatly optimize your code. This video also sheds some light on the confusing difference between ROLL_OVER and MOUSE_OVER. Hours of hair pulling can be avoided.

Please read WastedPotential.com: target vs currentTarget for an excellent written and interactive explanation of the concepts discussed in this video. The rest of his blog is full of really useful info.

Code Used in this Movie

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

//add hand cursor
nav_mc.buttonMode = true;
nav_mc.useHandCursor = true;

//assign eventListeners
nav_mc.addEventListener(MouseEvent.MOUSE_OVER, navOver);
nav_mc.addEventListener(MouseEvent.MOUSE_OUT, navOut)

//on mouse over do this
function navOver(e:MouseEvent):void{
	trace(e.target)
	TweenMax.to(e.target, .8, {scaleY:2, ease:Back.easeOut});
	}

//on mouse out do this
function navOut(e:MouseEvent):void{
	TweenMax.to(e.target, 2.5, {scaleY:1, ease:Back.easeOut});
	}
}

Download Fla and Swf: SnorklTV-Sample -target-vs-currentTarget

Learn More About TweenMax:

My Introduction to TweenMax
Greensock Tweening Platform Official Site

Seasickjavi

This is great stuff Carl ,your lessons are very cool, and the most important thing is ,that in my case well, im learning to fast the basics things, whit your guide and the other resources that u gave me, the Doug ac.1.1, and those articles.

Insted of copy the codes now i can understand it and make my own animations, well there is a lot of thing that i still dont get, for example the “HandCursor, you've create a MovieClip and then you give to it a mouse and button properties?

I like to use Corel Draw X5 for my graphics, and they look nice. i was wondering if you can make a TEXT animation tut, of curse when u can, because I have seen a lot of flasth web templates, whit broken text or random text they look pretty nice.

last question. Changing the ease Visualizer I can modify the path of the tweens and make some kind of wave animation?
http://www.snorkl.tv/ carl schooff

Thanks, my first and number 1 fan. I appreciate the input and suggestions. It helps when I think about what I should talk about next. They are all good topics.

Unfortunately with ease visualizer you can only see the graphs / paths of the eases that are standard with the greensock tweening platform. BUT there is this very cool

http://www.greensock.com/customease/

which allows you to create custom eases. so you can make things bounce, shake, and zip around however you like. You need to join the greensock club for access to the codes that make it work though. There is more info on the page I linked to.

Thanks again for the feedback.

Carl
Seasickjavi

don't mencionate .

thanks to you for taking the time to teach others.
http://www.snorkl.tv/2010/09/tweenmax-tweenlite-grayscale-to-color-tweening-a-review-of-things-you-should-be-able-to-do-on-your-own-by-now/ TweenMax / TweenLite Grayscale to Color Tweening: A Review of Things You Should be Able to Do on Your Own by Now:)

[...] Learn about eventListeneres and target vs currentTarget [...]
Hamish

Hi, awesome site firstly!

Just wondering (and have been for many years), with tweening objects in flash, sometimes the mouse gets stuck on tweens when it hits areas the are usually the edges of the object. It's usually caused when you mouse over an object but place the cursor in a position where the 'hit' area is on and off, which causes the tween to inifintely loop between a couple of frames. If this doesn't make sense, using the clip for this tutorial as a reference, if you place your mouse above any object vertically align with any of the 'eyes', when you move your mouse directly down to a position where the eye will pass your mouse, it will enter a loop. This will also occur if you place the cursor above an ear and move your mouse down so the bottom of the ear passes the cursor when scaling up.

Does anybody know what the the best way is to avoid this very annoying issue? Keep in mind the tween should always be able to start and stop from wherever the mouse enters/leaves, and the tween shouldn't need to start and complete before the listener for the mouse leaving is executed or vice-versa…

Very curious to know how it's done!
http://www.snorkl.tv/ carl schooff

Hello Hamish,

Thank you for the compliments and your well written question. I did not notice the infinite loop when creating this file but they way you describe re-creating it is accurate.

First the reason the loop is happening is because the eyes are literally holes in a very simple shape. so the mouse is constantly doing a MOUSE_OUT and MOUSE_OVER.

The solution would be to make sure that whenever you are scaling something on MOUSE_OVER / ROLL_OVER that it is a solid object with no gaps / holes.

To fix my file I would edit the symbol and fill in the eyes with a fill color, it could even be a transparent color fill BUT in the case of my file, the symbols that I am using are all instances of the same symbol with the the tint changed. So if I fill in the eyes with black, when the tint is applied… they are going to turn the same color as the rest of the symbol.

So to do this perfectly I would suggest:
1) make sure the object getting the mouse event is solid
2) don't take short cuts like me and tint a bunch of clips:)

Also this over / out loop effect happens a lot if you do a rollover tween of a symbol that has a fuzzy edge like a dropshadow or glow. In that cas I will make buttons / movieclips that contain 2 nested symbols, one that is the solid hit area, and another that has the dropshadow, blur or glow applied.

Hope this helps.
Thanks again for stopping in.

Carl
Snefer

how can I put text on those MC in way that text doesnt scale?

anyway very educational stuff, thank you so much
Snefer

i figured this out ;D
I post it as reply because I dont want you to losing time for something so basic… gogogo make more tuts, its so enlightening !

i am not facebook guy but i come here like 10 times a day, just to check something ;d
http://www.snorkl.tv/ carl schooff

Yo Snefer. Thanks for posting that you solved your problem. I am glad you figured it out and it does save me time to know.

I am doing my best to keep things fresh around here. Stay tuned. Catch you soon.

Carl
mklupa

is there a simple fix in making this as2??
http://www.snorkl.tv/ carl schooff

no there really isn't an easy AS2 fix. the best thing you could do if you

want multiple buttons to share the same function would be something like:

btn1.onRollOver=over;

btn2.onRollOver=over;

function over(){

trace(this)

this.x+=10;

}
http://www.snorkl.tv/2011/01/fade-hide-items-youre-not-rolling-over/ Fade / Hide Items You’re NOT Rolling Over

[...] Learn about target vs currentTarget Official GreenSock Getting Started Page Snorkl.tv Introduction To TweenLite Get the icons used in this tutorial from blogperfume.com blog comments powered by Disqus var disqus_url = 'http://www.snorkl.tv/2011/01/fade-hide-items-youre-not-rolling-over/ '; var disqus_container_id = 'disqus_thread'; var facebookXdReceiverPath = 'http://www.snorkl.tv/snorklpress/wp-content/plugins/disqus-comment-system/xd_receiver.htm'; var DsqLocal = { 'trackbacks': [ ], 'trackback_url': 'http://www.snorkl.tv/2011/01/fade-hide-items-youre-not-rolling-over/trackback/' }; (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = "http://snorkl.disqus.com/disqus.js?v=2.0&slug=fade_hide_items_you8217re_not_rolling_over&pname=wordpress&pver=2.33"; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); [...]
http://www.cinefox.org Filmes Cine Fox

Hi I really enjoyed this article, I had long been looking for. congratulations on your site
http://www.cinefox.org Filmes Cine Fox

Hi I really enjoyed this article, I had long been looking for. congratulations on your site
http://www.outdoorstringlightsexclusive.com/outdoor-globe-lights/prices-for-outdoor-string-lights-target/ outdoor string lights target

Please
give me more information. I love it, Thanks again.