RollOver/RollOut event listener with arguments

[Vaidokas]

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!

[Carl]

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.

 

 

http://www.wastedpotential.com/flash-as3-target-vs-currenttarget/

http://www.snorkl.tv/2010/08/assign-eventlisteners-to-multiple-movie-clips-in-a-single-blow-a-look-at-target-vs-currenttarget/

 

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;
  trace(circle);
  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;
  trace(circle);
  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)

 

 

 

rollovers_CS6.zip

[Vaidokas]

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!

vaidokas-rollovers.fla.zip

[Carl]

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. 

 

 

 

 

rollovers_CS5.fla.zip

[Vaidokas]

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. 

[Vaidokas]

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});
}

vaidokas-rollovers.fla.zip

[Carl]

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.