Same Roll Over all buttons???

[jeanramirez]

Recently i was doing a menu, a big one, lots of buttons... then i wanted to apply the same rollover to all my buttons, but couldn't find the way to do this without doing a listener and a function button by button... then i found this solution to do this and i want to share it... let's have less script...

 

var clipArray:Array = [menuPintu.m1, menuPintu.m2, menuPintu.m3,
				   menuPintu.m4, menuPintu.m5, menuPintu.m6,
				   menuPintu.m7, menuPintu.m8, menuPintu.m9,
				   menuShop.m1, menuShop.m2, menuShop.m3,
				   menuShop.m4, menuShop.m9];

for(var i:int = 0; i < clipArray.length; i++) {
clipArray[i].buttonMode = true;
clipArray[i].addEventListener(MouseEvent.ROLL_OVER, item_onOver);
clipArray[i].addEventListener(MouseEvent.ROLL_OUT, item_onOut);
}

function item_onOver(event:MouseEvent):void {
TweenLite.to(event.currentTarget, .5, {tint:0x66CC00});
}
function item_onOut(event:MouseEvent):void {
TweenLite.to(event.currentTarget, .5, {tint:null});
}

 

i hope that you find this usefull...

[Innes]

This certainly works, but you might want to look at Carl Schooff's solution which does not require an event listener for every button and should, therefore, be less resource-intensive:

 

http://www.snorkl.tv/2011/01/fade-hide- ... /#more-534

 

I appreciate that the effect Carl is creating is not the same, but the principle is the same; you are looking for the e.target of the nav container and tweening that item.

 

I hope that helps.

[Carl]

thanks to both of you for sharing and welcome to the forums!

 

Carl

[jeanramirez]

wow!!! that is so impressive!!! well not the same that i was looking for right now, cause i was trying to do a simpliest thing, just a roll over without tweening any other button... BUT... this is really cool, off course i was wandering if something like that was possible... and now i see that nothing is impossible... thanks a lot for this i'll use it right now...

[Carl]

check out this one too:

 

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

[jeanramirez]

Excellent... i have one question... if i need a var depending on the number of the clip that is roll over o clicked anything... how can i trace that? is that possible??

[jeanramirez]

by the way, the last example that you posted is kind of impressive! haw is that possible... i love as3...

[Carl]

yeah. just assign each button the variable that you need.

 

Check out my map tutorial it uses the same concept to display the names of each item that you roll over.

http://www.snorkl.tv/2010/11/part-1-bui ... /#more-381

 

import com.greensock.*;

description.storeName_txt.text = "";
description.phone_txt.text = "";

map_mc.buttonMode=true;


map_mc.addEventListener(MouseEvent.MOUSE_OVER, mapOver);
map_mc.addEventListener(MouseEvent.MOUSE_OUT, mapOut);


map_mc.spatulaCity.storeName = "Spatula City"; 
map_mc.spatulaCity.phone = "917-897-0987";

map_mc.justInCaseCases.storeName = "Just In Case Cases"; 
map_mc.justInCaseCases.phone = "917-897-3227";

map_mc.chandlersChandeliers.storeName = "Chandler’s Chandeliers"; 
map_mc.chandlersChandeliers.phone = "917-897-8376";

map_mc.gunsPlus.storeName = "Guns Plus"; 
map_mc.gunsPlus.phone = "917-435-2345";

map_mc.potsNPans.storeName = "Pots N Pans"; 
map_mc.potsNPans.phone = "917-954-6547";

map_mc.campOut.storeName = "Camp Out!"; 
map_mc.campOut.phone = "917-934-9047";




function mapOver(e:MouseEvent):void{
var mapItem:MovieClip = e.target as MovieClip;
description.storeName_txt.text = mapItem.storeName;
description.phone_txt.text = mapItem.phone;



description.gotoAndStop(mapItem.name);
TweenMax.to(mapItem, .5, {tint:0xFF9900});
TweenMax.fromTo(description, .5, {alpha:0, x:50, blurFilter:{blurX:80}}, {alpha:1, x:10, blurFilter:{blurX:0}});
}

function mapOut(e:MouseEvent):void{
var mapItem:MovieClip = e.target as MovieClip;
TweenMax.to(mapItem, .5, {tint:0x990000});
}	

[jeanramirez]

i did not explain myself right... my native language is spanish, sorry... i'm making an application that calculates data depending on the vars, so... with this, but when i tried to add the var to make my calculations, i couldn't make it...

 

contenido.buttonMode = true;
contenido.useHandCursor = true;

contenido.addEventListener(MouseEvent.MOUSE_OVER, navOver);
contenido.addEventListener(MouseEvent.MOUSE_OUT, navOut)

function navOver(e:MouseEvent):void{
TweenMax.to(e.target, .3, {tint:0x66CC00});
}

function navOut(e:MouseEvent):void{
TweenMax.to(e.target, .3, {tint:null});
}

 

i tryied to look for a var using an Array

 

var tipoPaint = 0; //add this var to use it in a conditional calculation, it is different for each of the 23 options...

var tipoArray:Array = [contenido.tipo1, contenido.tipo2, contenido.tipo3,
				   contenido.tipo4, contenido.tipo5, contenido.tipo6,
				   contenido.tipo7, contenido.tipo8, contenido.tipo9,
				   contenido.tipo10, contenido.tipo11, contenido.tipo12,
				   contenido.tipo13, contenido.tipo14, contenido.tipo15,
				   contenido.tipo16, contenido.tipo17, contenido.tipo18,
				   contenido.tipo19, contenido.tipo20, contenido.tipo21,
				   contenido.tipo22, contenido.tipo23];



for(var i:int = 0; i < tipoArray.length; i++) {
tipoArray[i].buttonMode = true;
tipoArray[i].addEventListener(MouseEvent.ROLL_OVER, tipo_onOver);
tipoArray[i].addEventListener(MouseEvent.ROLL_OUT, tipo_onOut);
tipoArray[i].addEventListener(MouseEvent.CLICK, tipo_onClick);
}
function tipo_onOver(event:MouseEvent):void {
TweenLite.to(event.currentTarget, .5, {tint:0x66CC00});
}
function tipo_onOut(event:MouseEvent):void {
TweenLite.to(event.currentTarget, .5, {tint:null});
}
function tipo_onClick(event:MouseEvent):void {
TweenLite.to(contenido.indi, .5, {y:event.currentTarget.y});
tipoPaint = [i]// here is the error, how can i get the number between 1 and 23 not just 23...
trace(tipoPaint);
}

 

But doesn't work, lot of script and... the result is always 23... if you know the solution, i'll be greatfull... i mean i am already greatfull, your examples and tutorials are definetly between "my prayers", i'll be super greatfull... thanks...

[X10]

Hola jeanramirez,

To solve the issue of "tipoPaint" always being 23, you would need to put the line:

tipoPaint = [i]

inside the for loop, at the moment it is outside the for loop, so when you run through your loop, i goes up each time an item is in your tipoArray, so reaches 23 and stops.

 

So you would want to have:

for(var i:int = 0; i < tipoArray.length; i++) {
  tipoArray[i].buttonMode = true;
  tipoArray[i].addEventListener(MouseEvent.ROLL_OVER, tipo_onOver);
  tipoArray[i].addEventListener(MouseEvent.ROLL_OUT, tipo_onOut);
  tipoArray[i].addEventListener(MouseEvent.CLICK, tipo_onClick);
  tipoPaint = [i]
  trace(tipoPaint);
}

 

However, I'm not sure just moving it to the correct place is going to solve your query. Let us know if that helps you any more and post back!

X10

[Carl]

ok, now I understand.

 

going back to your original code, look at this:

 

http://www.snorkl.tv/dev/assignVarsToButtons/

 

here is the fla: http://www.snorkl.tv/dev/assignVarsToBu ... uttons.fla CS4 (save into folder with greensock files)

 

the code looks like this:

import com.greensock.*;


var clipArray:Array = [menuPintu.m1, menuPintu.m2, menuPintu.m3,
                 menuPintu.m4, menuPintu.m5];

for(var i:int = 0; i    clipArray[i].buttonMode = true;
  clipArray[i].addEventListener(MouseEvent.ROLL_OVER, item_onOver);
  clipArray[i].addEventListener(MouseEvent.ROLL_OUT, item_onOut);
  clipArray[i].myValue = i+1 
}

function item_onOver(event:MouseEvent):void {
  TweenMax.to(event.currentTarget, .5, {tint:0x66CC00});
  output_txt.text = event.currentTarget.myValue;
  trace(event.currentTarget.myValue);
}
function item_onOut(event:MouseEvent):void {
  TweenMax.to(event.currentTarget, .5, {tint:null});
}

[jeanramirez]

thnks a lot for your help, i tried but it trace all numbers from 0 zero to 22... but later someone helped me and found this solution...

var tipoPaint:int;
var tipoArray:Array = [];

for (var i:int; i < 23; i++) {
   var tipo:Sprite = contenido["tipo" + (i + 1)];
   tipo.buttonMode = true;
   tipo.addEventListener(MouseEvent.ROLL_OVER, tipo_onOver);
   tipo.addEventListener(MouseEvent.ROLL_OUT, tipo_onOut);
   tipo.addEventListener(MouseEvent.CLICK, tipo_onClick);
   tipoArray[i] = tipo;
}

function tipo_onOver(event:MouseEvent):void {
   TweenLite.to(event.currentTarget, .5, {tint:0x66CC00});
}

function tipo_onOut(event:MouseEvent):void {
   TweenLite.to(event.currentTarget, .5, {tint:null});
}

function tipo_onClick(event:MouseEvent):void {
   var tipo:DisplayObject = event.currentTarget as DisplayObject;
   TweenLite.to(contenido.indi, .5, {y:tipo.y});
   tipoPaint = tipoArray.indexOf(tipo);
   trace(tipoPaint);
}

 

Thank's Carl Schooff your help were really usefull, now i'm a huge fan of snorkl.tv

[jeanramirez]

wow carl... the last one is definetly THE ONE... thank's!!!!!!

[Carl]

you're welcome. glad it worked out fir you.