Jump to content


RollOver/RollOut event listener with arguments

Recommended Posts

Hello all,


I have many buttons (instance names: circle1, circle2, etc) with many text objects besides those buttons (instance names: text1, text2, etc) that should animate when rolling over/out those buttons.

I'm trying to create event listeners that pass variable "text1" to "OverCircle"/"OurCircle" functions when rolling over/out "circle1" and so on. Not sure what i'm doing wrong:

import com.greensock.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;

function OverCircle(e:MouseEvent, Text:Object):void {
TweenLite.to(Text, 0.5, {alpha:100});

function OutCircle(e:MouseEvent, Text:Object):void {
TweenLite.to(Text, 0.2, {alpha:0});

circle1.addEventListener(MouseEvent.ROLL_OVER, OverCircle(text1));
circle1.addEventListener(MouseEvent.ROLL_OUT, OutCircle(text1));

circle2.addEventListener(MouseEvent.ROLL_OVER, OverCircle(text2));
circle2.addEventListener(MouseEvent.ROLL_OUT, OutCircle(text2));

Any help would be appreaciated!

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


You can not pass parameters to eventListener functions in that manner.

Here are some articles you can read about mouse events in flash and the target and currentTarget properties.






Here's one way of doing something like you are explaining


import com.greensock.*;

circle1.text_mc = text1;
circle2.text_mc = text2;

circle1.addEventListener(MouseEvent.ROLL_OVER, over)
circle2.addEventListener(MouseEvent.ROLL_OVER, over)

circle1.addEventListener(MouseEvent.ROLL_OUT, out)
circle2.addEventListener(MouseEvent.ROLL_OUT, out)

function over(e:MouseEvent):void {
  var circle = e.currentTarget;
  TweenLite.to(circle, 0.5, {rotation:360});
  TweenLite.to(circle.label_txt, 0.5, {alpha:0.1});
  TweenLite.to(circle.text_mc, 0.5, {y:100});

function out(e:MouseEvent):void {
  var circle = e.currentTarget;
  TweenLite.to(circle, 0.5, {rotation:0});
  TweenLite.to(circle.label_txt, 0.5, {alpha:1});
  TweenLite.to(circle.text_mc, 0.5, {y:0});

pls see attached CS6 fla (export with your greensock files)





Link to comment
Share on other sites

Wow, thanks for the reply.

If i correctly understand from your code text objects should be a property of circle buttons. I'm only using Flash CS5 so tried to apply your code in my file and i get error: 1109 Access of possible undefined property text_mc....

If you could resave to CS5 maybe i could figure out what i'm doing wrong. Or take a look at my file.


Thank you!


Link to comment
Share on other sites

Yup, the text objects essentially become properties of the buttons.

In my example 


circle1.text_mc = text1;


text1 is just a textField sitting on the stage. It could be any Display Object anywhere in the display list. 


Each circle movie clip also has a label_txt textfield sitting inside of it.


Just wanted to illustrate that you could access the properties of any circle when you rollover it. I'm sure you'll understand once you see it all.


Here is the CS5 version. 






Link to comment
Share on other sites

Great! Thank you very much. What i was doing wrong - circle1 and circle2 were button objects and text1 and text2 were MovieClips, converting circles to MovieClip type solved the error. 

Link to comment
Share on other sites

However, the project got more complicated: there will be Circle, on which rollover a header appears, on header's rollover - a text block below header appears:


Basically i'm doing the same way - assigning the head as circle's child, and txt - as head's child.

I'm not sure tho that i'm doing right with .mouseOver property. And not sure how to select e.currentTarget's parent for setting it as a variable in OverHead function.

import com.greensock.*;

circle01.head = head01;
circle01.head.txt = txt01;

// head's roll over disabled untill circle is rolled over
circle01.head.mouseEnabled = false;

// txt's roll over disabled untill head is rolled over
circle01.head.txt.mouseEnabled = false;

//need a property for head and txt to know if mouse is over them 
circle01.head.mouseOver = false;
circle01.head.txt.mouseOver = false;

//head animating on circle rollover

circle01.addEventListener(MouseEvent.ROLL_OVER, OverCircle);
circle01.addEventListener(MouseEvent.ROLL_OUT, OutCircle);

function OverCircle(e:MouseEvent):void
	var circle = e.currentTarget;
	circle.head.mouseEnabled = true;
	trace("Head rollover enabled\n");
	TweenLite.to(circle.head, 0.3, {alpha:1});

function OutCircle(e:MouseEvent):void
	var circle = e.currentTarget;
	trace("Head rollover enabled = " + circle.head.mouseOver + "\nTXT rollover enabled = " + circle.head.txt.mouseOver + "\n");
	if (circle.head.mouseOver == false || circle.head.txt.mouseOver == false)
		TweenLite.to([circle.head, circle.head.txt], 0.0, {alpha:0});
		circle.head.mouseEnabled = false;
		circle.head.txt.mouseEnabled = false;

//txt animating on head rollover

circle01.head.addEventListener(MouseEvent.ROLL_OVER, OverHead);

function OverHead(e:MouseEvent):void
	//need to set e.currentTarget's parent as circle var, the line below doesn't do that
	var circle = e.currentTarget;
	circle.head.txt.mouseEnabled = true;
	TweenLite.to(circle.head.txt, 0.3, {alpha:1});


Link to comment
Share on other sites

Yeah, it seems that rolling off circle hides the head.

I would have to play around with this quite awhile to figure it all out. 

Unfortunately this type of problem is quite beyond what we do to help people with GSAP.


You might want to try posting this problem in the Adobe Flash community forums.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.