Alpha Fade using a Mouse Over?

[Awesome-O 4000]

Hey everyone. Newbie here. To kirupa.com as well as ActionScripting.

What I'm trying to do is have an object go from 0% and fade to 100% when I move the mouse cursor over it.

For the life of me, I can't figure out the code to work this. Any help? I'm sure this is the easiest thing on the planet, but I've been working with AS for only about a week. :)

I've made the object a button symbol and given it an instance name of "btRed." I found the following code in the help file, but it isn't working. Am I doing something wrong?:

function fadeBlock(event:MouseEvent):void {
btRed.alpha = 1;
btRed.addEventListener(MouseEvent.mouseOver, fadeBlock);
}

[ethernal]

First you have to add the listener to the object's event:


btRed.addEventListener( MouseEvent.MOUSE_OVER, fadeBlock );

Then create the function which will listen to that event:


function fadeBlock( evt:MouseEvent ):void {
// fade in using the tween class
var myTween:Tween = new Tween( evt.target, "alpha", Regular.easeIn, 0, 100, 1, true);
}

Note that evt.target is the object that fires the event, in this case btRed. You can learn more about the Tween class in the Flash Help.

[Awesome-O 4000]

Hmm.

Thank you for your help. But I copied that precisely, and it's still not giving me anything. It just shows the pointed finger when I do the MOUSE_OVER, but no fade is happening.

[453.0]

^ don't forget to import the transition classes.

[453.0]

woops :) triple posted it accidentally.

[453.0]

Better said, here's the thing:

import fl.transitions.Tween;
import fl.transitions.easing.*;

var outTween:Tween;

yourButton.addEventListener(MouseEvent.MOUSE_OVER, fadingout);

function fadingout(event:MouseEvent): void {
outTween = new Tween(yourButton, "alpha", None.easeNone, 1, 0, 1, true);
}

"myButton" is the instance name of the mc ( button ) you want to fade.

This should work, just make sure you have your movie clip named accordingly.

Good Luck.

[Awesome-O 4000]

That isn't working either.

[453.0]

^ It's working, I tested it, just be sure you have a movie clip on your stage and be sure that it's instance name is "myButton"... Try understanding the code, don't simply copy-paste it...

[453.0]

Woops, by the way, sorry but I somehow missed the part where you said that you want the object to fade from 0 to 100% :P What I provided you is a fade out not fade in... Well, fading it in is quite the same, just change some variables from 1, 0 to 0, 1 and be sure your object's initial state is at 0% alpha. with something like: myButton.alpha = 0;

[Awesome-O 4000]

Hold on. Now I'm more confused. Why are you saying movie clip? I thought it was supposed to be a button symbol.

[453.0]

^ you can make it a button symbol or a movie clip. I said movie clip because I don't make my button out of button symbols but out of movie clips ( you have more control over a movie clip button then a button symbol and you can have much more complex animations and a tone of frames ). So, don't worry, the code will work even if your symbol is a button... just be sure it's instance name is "myButton" ( without the quotation marks ).

[453.0]

here's an updated version of the code, just a few things added ( once the button is already faded then it will remain faded ):

import fl.transitions.Tween;
import fl.transitions.easing.*;

myButton.alpha = 0;

var outTween:Tween;

myButton.addEventListener(MouseEvent.MOUSE_OVER, fadingout);

function fadingout(event:MouseEvent): void {
if(myButton.alpha == 1 ) trace("Your button is already at 100% alpha.");
else outTween = new Tween(myButton, "alpha", None.easeNone, 0, 1, 1, true);
}

Can't help you with more :) Read up on the basics.

[Awesome-O 4000]

I'll try that.

Thanks for your help and patience.

[Awesome-O 4000]

Well, that certainly worked when I opened a new file and created a new object.

I have no clue why it won't work in the project I am working on, however. Guess I'll just go back to square one. Thanks again 453.

[453.0]

No problem, I'm glad I helped. Maybe your old file wasn't AS 3.0 , whatever, what matters is that it's working now. :)

[ethernal]

The code I posted didn't work because I set the alpha params incorrectly: 0 - 100 instead 0 - 1 :$

[Awesome-O 4000]

I'm sure I'll be nominated for "biggest jackass on this forum" by the day's end.

I seem to be having another problem with this movie I'm working on. Now, neither of those codes worked. But when I created a new button in a new movie, worked fine. I'm noticing the stop(); command isn't working either. Could something be causing code not to work? Everything keeps looping, and no code is working.

Screw it. I'm just going to start from scratch.

[453.0]

Since we can't see the files you are working on it's quite hard telling you where you're doing something wrong... stop(); shouldn't have anything to do with the rest of the code, but be sure that you have the code on the first frame and the stop(); on the frame you want the thing to stop ( better said, have the button code on the frame where your button starts... because if you have the code on frame 1 and your button only appears on frame 2, the code might not work... still, that shouldn't influence your stop(); ). If you can't manage, try posting the .fla and we'll try to take a look.

[Awesome-O 4000]

No problem, I'm glad I helped. Maybe your old file wasn't AS 3.0 , whatever, what matters is that it's working now. :)

That exactly was the problem. I was working on adding some things to an existing file, which was AS 2.0.

Sorry if I was sounding like a complete idiot. I'm just really new to AS and am still figuring out what can and can't be done in terms of AS 2.0 and 3.0. It took me hours just to realize code couldn't be attached to objects, but rather exclusively on the timeline! Ha. And I'm still working on understanding the language. Very frustrating at times. But I'm trying.

Thanks for bearing with me.

[453.0]

Never give up and keep on practicing. AS 3.0 is quite different from 2.0, in 3.0 all the code is now attached on the frame, no more code is attached to the movie clips and buttons. AS 3.0 is quite great actually and it's a beautiful language, just don't forget to practice a lot ( maybe even buy the new AS 3.0 Bible ) and never give up. ;)

Good luck again.

[cemkocabasa]

how to get rid of it when mouse not over?

[RebuiltJorge]

careful, I have tested this because I'm actually at work and don't have Flash CS3, but here is an alternative way to fade, don't forget to do your imports

ActionScript Code:

var targetAlpha = 1;
var easing = .2;

yourButton.alpha = 0;

yourButton.addEventListener(MouseEvent.MOUSE_OVER, btnFadeIn);

function btnFadeIn(evt:MouseEvent){
evt.target.alpha += (targetAlpha - evt.target.alpha) * easing;
}

[thursday0384]

hey i'm new to as3.0 just like this guy was and i was trying to do the same thing. however, i WAS starting out w/ a movie clip. the original mc was called us_mc and then i gave it an instance name of pic_mc all my code was the same but i keep getting the following error message from flash cs3:

Error Message:
1120: Access of undefined property pic_mc.

For Source:

outTween = new Tween(pic_mc, "alpha", None.easeNone,1,0,1,true);

and

pic_mc.addEventListener(MouseEvent.MOUSE_OVER, fadeOut);



here's my code:

import fl.transitions.Tween;
import fl.transitions.easing.*;

import fl.transitions.Tween;
import fl.transitions.easing.*;

var outTween:Tween;

pic_mc.addEventListener(MouseEvent.MOUSE_OVER, fadeOut);


function fadeOut(event:MouseEvent):void
{
outTween = new Tween(pic_mc, "alpha", None.easeNone,1,0,1,true);
}


what am i doing wrong?!?!?! i'm very new to AS3.0, and any help would be greatly appreciated

[Felixz]

outTween = new Tween(event.currentTarget, "alpha", None.easeNone,1,0,1,true);

[kaspermail]

Better said, here's the thing:

import fl.transitions.Tween;
import fl.transitions.easing.*;

var outTween:Tween;

yourButton.addEventListener(MouseEvent.MOUSE_OVER, fadingout);

function fadingout(event:MouseEvent): void {
outTween = new Tween(yourButton, "alpha", None.easeNone, 1, 0, 1, true);
}

"myButton" is the instance name of the mc ( button ) you want to fade.

This should work, just make sure you have your movie clip named accordingly.

Good Luck.


It's working with my project but how should I change the code if I want my button to get from 0 to100 when I mouse over and 100 to 0 when I mouse out?

[kaspermail]

It's working with my project but how should I change the code if I want my button to get from 0 to100 when I mouse over and 100 to 0 when I mouse out?

OK! I 've got it just used two codes that You posted one after another. I've changed fadingout to fadingout2 in the second code and also changed MOUSE_OVER to MOUSE_OUT (in the second code) and it is working.

[ltdsign77]

i'm also new to AS3 and this thread was very helpful to me.
What i want to know is how do you control another movie clip's alpha tween from another button?
in as2 it would be about targeting the object, but not sure how to do it here.

thanks so much

[ltdsign77]

How do you create multiple tweenings on 1 object (fading alpha to 0% and moving its y 100px down) without getting a conflict/duplicate variable error?

thank you