Copy link to clipboard
Copied
I have this snippet of code I've been running successfuly on my image buttons grouped into one MC.
It applies changes to the buttons I am not rolling over, i.e. if I were to roll over a button the rest of the buttons in the group would dim and blur and etc, but not the button I am over.
All worked fine until I decided to group buttons one more time.
With my limited knowledge of AS3 I was able to put all the actions to the buttons except into making the button I am over to stay the way it is.
In my understanding the problem is in the line:
// target = tween the icon you are over to its normal state
TweenMax.to(e.target, .5, {alpha: 1, blurFilter:{blurX:0, blurY:0}, colorMatrixFilter:{colorize:0x000000, amount:0, brightness:1.25, saturation:1}, ease:Sine.easeOut});
}
particularly in properly specifiying e.target
I tried a few variations but nothing seemed to work.
What would be a proper code to go two levels deep into an MC?
Below is my full code:
IMGS_COLLAGE.buttonMode=true;
IMGS_COLLAGE.useHandCursor = true;
IMGS_COLLAGE.imgORIGINAL_collage.addEventListener(MouseEvent.MOUSE_OVER, navOver);
IMGS_COLLAGE.imgORIGINAL_collage.addEventListener(MouseEvent.MOUSE_OUT, navOut);
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function navOver(e:MouseEvent):void
{
//loop through all icons
for (var i in IMGS_COLLAGE.imgORIGINAL_collage)
{
//tween out all icons
TweenMax.to(IMGS_COLLAGE.imgORIGINAL_collage, .2, {alpha:.85, blurFilter:{blurX:11, blurY:11}, colorMatrixFilter:{colorize:0x000000, amount:0.25, brightness:0.65, saturation:0.7}, ease:Sine.easeOut});
}
// target = tween the icon you are over to its normal state
TweenMax.to(e.target, .5, {alpha: 1, blurFilter:{blurX:0, blurY:0}, colorMatrixFilter:{colorize:0x000000, amount:0, brightness:1.25, saturation:1}, ease:Sine.easeOut});
}
function navOut(e:MouseEvent):void
{
for (var i in IMGS_COLLAGE.imgORIGINAL_collage)
{
//tween out all icons to a normal state
TweenMax.to(IMGS_COLLAGE.imgORIGINAL_collage, .5, {alpha: 1, blurFilter:{blurX:0, blurY:0}, colorMatrixFilter:{colorize:0x000000, amount:0, brightness:1, saturation:1}, ease:Sine.easeOut});
}
}
if those mc's are the objects you want to blur in and out, use:
function navOver(e:MouseEvent):void
{
//loop through all icons
for (var i in IMGS_COLLAGE.imgORIGINAL_collage)
{
if(IMGS_COLLAGE.imgORIGINAL_collage.hitTestPoint(mouseX,mouseY)){
TweenMax.to(IMGS_COLLAGE.imgORIGINAL_collage, .2, {alpha:.1, blurFilter:{blurX:0, blurY:0}, colorMatrixFilter:{colorize:0x000000, amount:0, brightness:1.25, saturation:1}, ease:Sine.easeOut});
} else {
...
Copy link to clipboard
Copied
you must have listeners on each icon or use a hittestobject when a parent listener function executes.
Copy link to clipboard
Copied
If I understand you correctly by adding event listeners to each individual button I will have to extend the coding task by manifold, as each individual button will need to be coded?
Is it possible to fix my problem and keep the code to the original few lines or there is something inherently erroneous in its?
I tried a google search for "hittestobject when a parent listener function executes" but it did not seem to return with results applicable to my problem...
Is it possible for you to provide a code sample of how it should work in my case?
Copy link to clipboard
Copied
what are the objects you want to tween?
currently, in your code you're tweening objects in IMGS_COLLAGE.imgORIGINAL_collage which is a variable of unknown (to me) type and contents.
Copy link to clipboard
Copied
the objects inside the IMGS_COLLAGE.imgORIGINAL_collage are jpeg based MCs which act like buttons once clicked. They also have TweenMax animation assigned to them.
Copy link to clipboard
Copied
if those mc's are the objects you want to blur in and out, use:
function navOver(e:MouseEvent):void
{
//loop through all icons
for (var i in IMGS_COLLAGE.imgORIGINAL_collage)
{
if(IMGS_COLLAGE.imgORIGINAL_collage.hitTestPoint(mouseX,mouseY)){
TweenMax.to(IMGS_COLLAGE.imgORIGINAL_collage, .2, {alpha:.1, blurFilter:{blurX:0, blurY:0}, colorMatrixFilter:{colorize:0x000000, amount:0, brightness:1.25, saturation:1}, ease:Sine.easeOut});
} else {
TweenMax.to(IMGS_COLLAGE.imgORIGINAL_collage, .2, {alpha:.85, blurFilter:{blurX:11, blurY:11}, colorMatrixFilter:{colorize:0x000000, amount:0.25, brightness:0.65, saturation:0.7}, ease:Sine.easeOut});
}
}
}
Copy link to clipboard
Copied
Thanks a lot, it works perfectly!
Copy link to clipboard
Copied
you're welcome.
Copy link to clipboard
Copied
P.S.
While further working on the project I realised that sinse there are two img collages with the same navOver and navOut setting I should use one line of code.
Both of those images collages are located inside the IMGS_COLLAGE so I thought of deleting imgORIGINAL_collage out of IMGS_COLLAGE.imgORIGINAL_collage but it did not work.
So now I have two identical blocks of code for two image collages. Is there a way to unify them since both of them are located in IMGS_COLLAGE mc?
Here is how the code looks now:
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// makes a hand cursor appear over a mc acting as a button for all the buttons inside the IMGS_COLLAGE.
IMGS_COLLAGE.buttonMode=true;
IMGS_COLLAGE.useHandCursor = true;
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IMGS_COLLAGE.imgORIGINAL_collage.addEventListener(MouseEvent.MOUSE_OVER, navOver_ORIGINAL);
IMGS_COLLAGE.imgORIGINAL_collage.addEventListener(MouseEvent.MOUSE_OUT, navOut_ORIGINAL);
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//set up a vars object to hold all the properties of the icons in normal state
//since we use these properties twice it makes sense to define them only once
var normalVarsIMGS_COLLAGE_ORIGINAL:Object = new Object();
normalVarsIMGS_COLLAGE_ORIGINAL={colorMatrixFilter:{colorize:0x000000, amount:0, brightness:1, saturation:1}, ease:Sine.easeOut};
function navOver_ORIGINAL(e:MouseEvent):void
{
//loop through all icons
for (var i in IMGS_COLLAGE.imgORIGINAL_collage)
{
if(IMGS_COLLAGE.imgORIGINAL_collage.hitTestPoint(mouseX, mouseY)){
//target = tween the icon you are over to its normal state
TweenMax.to(IMGS_COLLAGE.imgORIGINAL_collage, .5, normalVarsIMGS_COLLAGE_ORIGINAL);
}else{
TweenMax.to(IMGS_COLLAGE.imgORIGINAL_collage, .2, {colorMatrixFilter:{colorize:0x000000, amount:.15, brightness:0.85, saturation:0.45}, ease:Sine.easeOut});
}
}
}
function navOut_ORIGINAL(e:MouseEvent):void
{
for (var i in IMGS_COLLAGE.imgORIGINAL_collage)
{
//tween out all icons to a normal state
TweenMax.to(IMGS_COLLAGE.imgORIGINAL_collage, .5, normalVarsIMGS_COLLAGE_ORIGINAL);
}
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
IMGS_COLLAGE.imgPNP_collage.addEventListener(MouseEvent.MOUSE_OVER, navOver_PNP);
IMGS_COLLAGE.imgPNP_collage.addEventListener(MouseEvent.MOUSE_OUT, navOut_PNP);
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//set up a vars object to hold all the properties of the icons in normal state
//since we use these properties twice it makes sense to define them only once
var normalVarsIMGS_COLLAGE_PNP:Object = new Object();
normalVarsIMGS_COLLAGE_PNP={colorMatrixFilter:{colorize:0x000000, amount:0, brightness:1, saturation:1}, ease:Sine.easeOut};
function navOver_PNP(e:MouseEvent):void
{
//loop through all icons
for (var i in IMGS_COLLAGE.imgPNP_collage)
{
if(IMGS_COLLAGE.imgPNP_collage.hitTestPoint(mouseX, mouseY)){
//target = tween the icon you are over to its normal state
TweenMax.to(IMGS_COLLAGE.imgPNP_collage, .5, normalVarsIMGS_COLLAGE_PNP);
}else{
TweenMax.to(IMGS_COLLAGE.imgPNP_collage, .2, {colorMatrixFilter:{colorize:0x000000, amount:.15, brightness:0.85, saturation:0.45}, ease:Sine.easeOut});
}
}
}
function navOut_PNP(e:MouseEvent):void
{
for (var i in IMGS_COLLAGE.imgPNP_collage)
{
//tween out all icons to a normal state
TweenMax.to(IMGS_COLLAGE.imgPNP_collage, .5, normalVarsIMGS_COLLAGE_PNP);
}
}
Copy link to clipboard
Copied
what class type is IMGS_COLLAGE.imgORIGINAL_collage?
Copy link to clipboard
Copied
they are all MCs.
grouped into other MCs for easier code referencing.
Copy link to clipboard
Copied
then use:
function navOver(e:MouseEvent):void
{
var mc:MovieClip = MovieClip(e.currentTarget);
//loop through all icons
for (var i:int=0;i<mc.numChildren;i++)
{
if(mc.getChildAt(i).hitTestPoint(mouseX,mouseY)){
TweenMax.to(mc.getChildAt(i), .2, {alpha:.1, blurFilter:{blurX:0, blurY:0}, colorMatrixFilter:{colorize:0x000000, amount:0, brightness:1.25, saturation:1}, ease:Sine.easeOut});
} else {
TweenMax.to(mc.getChildAt(i), .2, {alpha:.85, blurFilter:{blurX:11, blurY:11}, colorMatrixFilter:{colorize:0x000000, amount:0.25, brightness:0.65, saturation:0.7}, ease:Sine.easeOut});
}
}
}