Jump to content
Search Community

How to implement MouseOver/Out code

ngrinchenko test
Moderator Tag

Recommended Posts

What would be a proper way to construct a button in Over/Out stages

I have a button which I need to light up. I can not use the glow feature of GreeSock because the item is a picture of a small LED light so I want only the tip to light up.

For this I took two pictures in photoshop. One in on stage and one in off stage.

I want the picture in the off stage to be the default image on the screen, when on mouse over I want the picture in the on stage gradually come to alpha 100% and then on mouse out gradually to come to alpha 0%

 

I see how I can make the transitions using GreenSock, but how do I script what happens on mouse over/out?

 

I guess I need help with logistics of the button construction.

Do I script button in AS3, and then have stages animation only in GreenSock code? Can GreenSock go in reverse or I have to have two different animations for two different button stages?

Link to comment
Share on other sites

hello, i am having a difficult time distinguishing the difference between this post and your previous one.

 

you can create one tween that fades in the LED on image. and then you can play() and reverse() it as needed

 

 

   btn.theImage.alpha = 0;
      var  myTween:TweenLite = TweenLite.to(btn.theImage, .5, {alpha:1, paused:true});

        btn.addEventListener(MouseEvent.ROLL_OVER, overHandler);
        btn.addEventListener(MouseEvent.ROLL_OUT, outHandler);





function overHandler(e:MouseEvent):void{
        myTween.play();
        trace("you rolled over me");
        }

  function outHandler(e:MouseEvent):void{
        myTween.reverse();
        trace("you rolled off me");
        } 

 

based on how your button is constructed, the names and paths will have to be modified

the above code assumes theImage lives inside btn.

Link to comment
Share on other sites

Thanks, the difference with the previous post is that in the one before I wanted to know a general advise on how to structure my button, i.e. where the code will be located and how many layers a button mc should have.

 

So, this code should be located on the main mc somewhere below a regular AS3?

For example I have something like this:

 

floralyte_btn.addEventListener(MouseEvent.CLICK, onClick_FloraLytePopUp);

 

function onClick_FloraLytePopUp(event:MouseEvent) :void {

gotoAndPlay("floralytepp");

 

}

 

the code you provided should be located below this one still on the main mc or inside the "floralyte_btn"?

 

 

If I am asking way too basic questions, could you please point me to a good source tutorial where I can read upon how to properly work with GreenSock and how make not only an animation but how to structure the buttons.

 

Is GreenSock for animation only?

Link to comment
Share on other sites

pls see the attached files to see one way of setting this up.

 

Is GreenSock for animation only?

 

Primarily yes, but there are also tools for loading external assets and building liquid layouts:

 

LoaderMax: http://www.greensock.com/loadermax/

 

LiquidStage: http://www.greensock.com/liquidstage/

 

GreenSock does not have tools for building buttons. To get an AS3 crash course start with lesson 1:

 

http://tv.adobe.com/watch/actionscript- ... episode-1/

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.
×
×
  • Create New...