homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / Flash and Shockwave
Forum Library, Charter, Moderator: open

Flash and Shockwave Forum

Fade-in or other effects for Flash buttons?
Fade-in or other effects for Flash buttons

 7:20 am on Jun 12, 2008 (gmt 0)

I've managed to create button areas on a Flash swf file (in Flash 8)with images behind them (so when the mouse pointer goes over a defined area, an image pops up)- only thing is now I need to find a way of making the images "fade in" (or have another good transitional / "soft" effect) when the mouse pointer rolls over the button area.

Anyone know how this can be done?



 2:23 pm on Jun 12, 2008 (gmt 0)

Create a new movie clip with the image in frame one.

Set the Alpha setting to 0.

Move ahead 20 frames(or however fast/slow you want) and insert a new keyframe.

Change the Alpha to 100%

Create motion tween (rt click between keyframes)

In your button symbol, place that movie clip in the over state.


 8:54 am on Jun 14, 2008 (gmt 0)

Not sure how I can do this as the image only appears in the "Over" state of the button, and this doesn't seem to allow keyframes to be added as the keyframes area doesn't display (you can only see the various button states).


 8:57 am on Jun 14, 2008 (gmt 0)

Just to add, I need the fade effect of the image to happen only when I hover over the button area- so presumably I need to be inside the properties of the button when adding the movie clip- however I can't add keyframes or motion tweens when in the button properties area (I just get Over, Hit etc.)


 9:18 am on Jun 14, 2008 (gmt 0)

Okay, I created a standalone movie clip instead and placed this on the Over state of the button (removing the existing image). However the behaviour is exactly the same as before?


 1:05 pm on Jun 16, 2008 (gmt 0)

Does your movie clip have the fade in effect in it? You can put a keyframe in the over state and then place the movie clip there.


 7:15 pm on Jun 16, 2008 (gmt 0)

Good idea, did that and got the fade-in working for four different buttons on the graphic. However the customer now wants an enhancement!

They now want the image that fades in to fade out at the same speed when the user hovers over a different button (i.e when the user moves off the first button and effectively kicks off the fade-in procedure on a second button).

In other words, the first image fades out at the same time as the second image fades in.

Not sure if this is possible at all, if there's a quick way of doing this?


 7:23 pm on Jun 16, 2008 (gmt 0)

gonna take some action scripting


 7:34 pm on Jun 16, 2008 (gmt 0)

I was afraid of that. Anyone know the code needed for this kind of trick?!


 12:49 am on Jun 17, 2008 (gmt 0)

something like onRollOver.nameoftheclipwiththefade.gotoAndPlay("go")


 8:52 am on Jun 17, 2008 (gmt 0)

Well, I tried adding this in Actions for the button: (image_tween is the name of the movie clip with the fade)


But I got the following error when trying to play:

**Error** Scene=Scene 1, layer=buttons, frame=1:Line 4: Statement must appear within on handler


 8:56 am on Jun 17, 2008 (gmt 0)

Also tried adding it as a function:

function fadeaway ()

But this gave a different error: Statement must appear within on handler


 9:59 am on Jun 17, 2008 (gmt 0)

Okay, I got rid of the error by doing it this way:

on (rollOver) {

HOWEVER it still doesn't fade out nicely when I move away from the button- it just disappears straight away.


 2:10 pm on Jun 17, 2008 (gmt 0)

right, because you have that movie clip on the over state.


 2:50 pm on Jun 17, 2008 (gmt 0)

But there doesn't seem to be an "Off" or "Out" state for the button- so where would I place this code?


 4:50 pm on Jun 17, 2008 (gmt 0)

ok this should work and please let me know if it does.

Create your movie clip that does the fade effect and insert an action stop(); in frame one. At the peak of the fade in add another stop(); action. Then add the fading out sequence. Add a new layer to the movie clip and put the button in there at frame one. Then rt click the button and select actions and put this:

on (rollOver) {

(replace "fade_mc" with your movieclip instance name)

Now your fade will stop at 100% opacity and you can move off the button while keeping it visible. So on the other button do the same thing but add another line of AS that says something like

on (rollOver) {

(replace "20" with whatever frame comes after the stop(); action to start the fade out sequence.


 6:29 pm on Jun 17, 2008 (gmt 0)

Okay, this is what I've done:

Added stop(); in Frame 1 (there was already a stop(); in frame 21 (the last one) in order to stop it fading continuously).

Then I added a new layer to the movie clip. I then tried to place the button at frame 1 but immediately I got the message "You cannot place a symbol inside itself".

Presumably this is because the movie clip is already "inside" the button so I can't then put the button onto the movie clip.

Not sure where to go from here?!


 7:08 pm on Jun 17, 2008 (gmt 0)

take the movie clip out of the button. The button should be inside the movie clip.

You'll also want to take out the stop at the end because when it tries to loop you already have the stop on frame one.

So start with just your movie clip, then place the button inside there.


 7:09 pm on Jun 17, 2008 (gmt 0)

I tried this method and it works, right now we are just having a miscommunication which is probably my fault. Hope this will help you.


 9:07 am on Jun 18, 2008 (gmt 0)

Ok, well I removed the movie clip from the button, then removed the button from the layer where the other buttons are, and put the movie clip there. Then inside the movie clip I put the button, on frame 1 of a new layer.

I also took out the stop(); at the end of the frames on the movie clip.

I put the following code in Actions for the button:

on (rollOver) {

Then I got to the bit where on the "other button" I should add the other line of AS. Only problem is, which button? I assumed you meant the other three that I have in the main buttons layer, so I put tyhe following into actions for one of them:

on (rollOver) {

But I don't see any fade-out for the first button image- in fact it now doesn't work at all (although the others still do).

Might it be easier if I sent you the FLA?!


 12:55 pm on Jun 18, 2008 (gmt 0)

well I wouldn't send the file, I don't want to do it for you. Also this will help you learn how to do all this by doing it yourself.

The other thing is you will probably need a conditional statement to check and see if the image_tween mc is stopped at frame 1 or 19. Otherwise everytime you roll over a button it will show up and fade out regardless of whether or not it was visible before hand.

You said -
"in fact it now doesn't work at all (although the others still do)."

Can you clarify this please?


 1:33 pm on Jun 18, 2008 (gmt 0)

What I mean is that the fade-in doesn't work when the mouse goes over the button- in other words nothing happens regardless of whether or not the mouse pointer is over the button or not.

I'm surprised it seems so difficult to do the fade-out, as I managed to get the fade-in effect sorted with a lot less difficulty.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Flash and Shockwave
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved