• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Tween the icon you are over to its normal state

Explorer ,
Mar 20, 2012 Mar 20, 2012

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

                    }

}

TOPICS
ActionScript

Views

1.1K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Mar 21, 2012 Mar 21, 2012

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 {

   

...

Votes

Translate

Translate
Community Expert ,
Mar 20, 2012 Mar 20, 2012

Copy link to clipboard

Copied

you must have listeners on each icon or use a hittestobject when a parent listener function executes.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 21, 2012 Mar 21, 2012

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 21, 2012 Mar 21, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 21, 2012 Mar 21, 2012

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 21, 2012 Mar 21, 2012

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

}

                    }

                

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 21, 2012 Mar 21, 2012

Copy link to clipboard

Copied

Thanks a lot, it works perfectly!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 21, 2012 Mar 21, 2012

Copy link to clipboard

Copied

you're welcome.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 21, 2012 Mar 21, 2012

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

                    }

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 21, 2012 Mar 21, 2012

Copy link to clipboard

Copied

what class type is IMGS_COLLAGE.imgORIGINAL_collage?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 21, 2012 Mar 21, 2012

Copy link to clipboard

Copied

they are all MCs.

grouped into other MCs for easier code referencing.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 21, 2012 Mar 21, 2012

Copy link to clipboard

Copied

LATEST

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

}

                    }

                

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines