Passing arguments on event triggered functions - AS3

[inorganik]

I'm finally getting around to AS3 and the transition is painful. What I'm trying to do is pass function arguments in a event-listened function, if that makes sense.

 

So whereas in AS2 I would go

 

blurToX = function (mc,  amount) {
TweenMax.to(mc, 1, {blurFilter:{blurX:amount}});
}
myButton.onRollover = function () {
       blurToX(myClip1, 100);
}

Now in AS3 I have

myButton.addEventListener(MouseEvent.MOUSE_OVER, blurToX(myClip, 100));

But how would I write the triggered function, blurToX()? The "e:Event" part and ":void" at the end confuse me- where do my function arguments- "myclip" and "100" fit in?

 

Why do I need the e:event piece anyway if I'm specifying a function? Why do we need void if it's always typed? AS3 is frustrating.

 

Thanks for your help.

[GreenSock]

When you add an event listener, the handler function you define must accept an Event parameter, like:

 

myButton.addEventListener(MouseEvent.ROLL_OVER, overHandler);
function overHandler(event:Event):void {
   trace("rollover was triggered!");
}

 

You cannot have it pass whatever parameters you want to the function. It must only be an Event. If you want, you can use that event to find out what object was rolled over by using the event.target property (or event.currentTarget in some cases).

 

In your case, you could do this:

 

myButton.addEventListener(MouseEvent.ROLL_OVER, overHandler);
function overHandler(event:Event):void {
   blurToX(myClip1, 100);
}
function blurToX(mc:DisplayObject,  amount:Number):void {
  TweenMax.to(mc, 1, {blurFilter:{blurX:amount}});
}

 

The ":void" at the end just means that the function isn't expected to return any value.

 

You should get used to data typing your variables - not only does it improve performance in AS3, but it also can really help in terms of debugging.

 

Don't feel bad. Everybody goes through growing pains when moving from AS2 to AS3. But trust me, it is WELL worth it. AS3 is a far superior language in many ways. Give it a few months and you'll never want to go back to AS2 again.

[inorganik]

Thanks for your help! And, I am a huge fan of the Greensock Tweening platform!

[inorganik]

Started to implement this solution and ran into a problem- I'm doing the same function over and over (which is why I wanted to just pass arguments through the triggered function in the first place) so I'm not sure what the best way to optimize this code is- do I need to rename the "overHandler" function for each object? Seems like a lot of extra code for such a great improvement

 

The code below is my actual code, before I simplified it for the example.

function movBar(pos:Number, wid:Number):void {
TweenLite.to(orangeBar, .5, {x:pos, width:wid});
}

btn_about.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
function overHandler(event:Event):void {
   movBar(39, 51.5);
}
btn_portfolio.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
function overHandler(event:Event):void {
   movBar(140.5, 81.5);
}
btn_approach.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
function overHandler(event:Event):void {
   movBar(255.5, 81);
}
btn_blog.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
function overHandler(event:Event):void {
   movBar(350.5, 9);
}
btn_contact.addEventListener(MouseEvent.MOUSE_OVER, overHnadler);
function overHandler(event:Event):void {
   movBar(440, 71);
}

[GreenSock]

No no, you don't have to write all those overHandlers. In fact, you definitely shouldn't do that because you're creating a bunch of functions that have the same name which is a no-no (they'll overwrite each other).

 

Also, be VERY careful about using MOUSE_OVER/MOUSE_OUT instead of ROLL_OVER/ROLL_OUT because they can behave differently (MOUSE_OVER/OUT get dispatched every time any of the children of the object are moused over/out which can happen many times during a single rollover).

 

There are many ways you could handle this sort of thing. Here's one:

 

function movBar(pos:Number, wid:Number):void {

TweenLite.to(orangeBar, .5, {x:pos, width:wid});

}

 

btn_about.addEventListener(MouseEvent.ROLL_OVER, overHandler);

btn_portfolio.addEventListener(MouseEvent.ROLL_OVER, overHandler);

btn_approach.addEventListener(MouseEvent.ROLL_OVER, overHandler);

btn_blog.addEventListener(MouseEvent.ROLL_OVER, overHandler);

btn_contact.addEventListener(MouseEvent.ROLL_OVER, overHandler);

 

function overHandler(event:Event):void {
if (event.target == btn_about) {
	movBar(39, 51.5);
} else if (event.target == btn_portfolio) {
	movBar(140.5, 81.5);
} else if (event.target == btn_approach) {
	movBar(255.5, 81);
} else if (event.target == btn_blog) {
	movBar(350.5, 9);
} else if (event.target == btn_contact) {
	movBar(440, 71);
}
}

[inorganik]

Once again, thanks so much for the help. I realize how rare it is to get this quality of help on the web, especially for a free product. And, really good to know about the MOUSE_OVER vs. ROLL_OVER.

 

This is quite off-topic, but I am curious about how you feel about Apple's stance on flash- flash has always been a very exciting platform of engagement for me, but Jobs makes some very good arguments against using it on mobile devices. I kind of agree with him, and having dabbled in jquery and other java technologies, see javascript as replacing many of flash's duties on the web (however I don't know of a way to reproduce the tweening nav that you have been helping me with). I have read articles by flash developers who argue against Jobs. But it seems to me someone with your skill might begin to focus on an advanced animation platform based on javascript? It would be in high demand.

[GreenSock]

I don't have time to articulate all my thoughts on the matter here, but I will say that I'm not worried that Flash is going away anytime soon. HTML5 isn't even CLOSE to being able to replicate many of its features. By a long shot. Sure, there are some things that will be appropriate to do in HTML5 but Flash has a very long life ahead of it. There's way too much hype around the HTML5 stuff and most people just don't seem to understand the important factors involved. I used to be a super loyal Apple customer. Not any more. I think their posture with Flash will come back to bite them.

 

If you're a Flash developer, the sky is not falling. You'll have plenty of work for a long time to come. This platform rocks and it will continue to improve. A lot of people and companies have significant investments in Flash technology. Adobe isn't sitting still either.

 

I actually have quite a lot to say about this topic but I'm not in a position to share it here. Thanks for asking, though.

[inorganik]

Thanks for sharing. And I agree that flash isn't going anywhere anytime soon. I am kind of a jack-of-all trades web designer, and with assignments I'm given I find myself opening up Flash not because I want to, but because I need to.

 

I was actually talking about javascript though, not HTML5. I agree HTML5 is overhyped. I think javascript what to get excited about. As far as I'm concerned, HTML5 just allows what we've already been doing on the web to validate. But given the similarities between javascript and actionscript, do you think that's a world you'd ever explore? What with the mobile viability and all. jQuery is kind of a "tweenLite" for javascript. I wonder if you could push it even further with your skills.

[inorganik]

I'm glad to see you expanded the library to javascript afterall

[MetaFurionX]

If I may, I'd like to contribute to this old topic with an alternate solution for the record. It's actually more like "the other way around" of GreenSock's solution. I think you guys might find it interesting.

function blurToX(mc:MovieClip, amount:Number):Function {
	return function(event:MouseEvent):void {
		TweenMax.to(mc, 1, {blurFilter:{blurX:amount}});
	};
}
var overHandler:Function = blurToX(myClip, 100);
myButton.addEventListener(MouseEvent.ROLL_OVER, overHandler);
//myButton.removeEventListener(MouseEvent.ROLL_OVER, overHandler);

And on the second case:

function movBar(pos:Number, wid:Number):Function {
	return function(event:MouseEvent):void {
		TweenLite.to(orangeBar, .5, {x:pos, width:wid});
	};
}
btn_about.addEventListener(MouseEvent.ROLL_OVER, movBar(39, 51.5));
btn_portfolio.addEventListener(MouseEvent.ROLL_OVER, movBar(140.5, 81.5));
btn_approach.addEventListener(MouseEvent.ROLL_OVER, movBar(255.5, 81));
btn_blog.addEventListener(MouseEvent.ROLL_OVER, movBar(350.5, 9));
btn_contact.addEventListener(MouseEvent.ROLL_OVER, movBar(440, 71));