# How to fade a button with AS?

**URL:** <https://forum.kirupa.com/t/how-to-fade-a-button-with-as/42699>\
**Category:** flash\
**Created:** [February 12, 2004, 12:16am UTC](https://forum.kirupa.com/t/how-to-fade-a-button-with-as/42699 "2004-02-12T00:16:53Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![cmoran](https://avatars.discourse-cdn.com/v4/letter/c/ce7236/32.png) [@cmoran](https://forum.kirupa.com/u/cmoran)\
**Post date:** [February 12, 2004, 12:16am UTC](https://forum.kirupa.com/t/how-to-fade-a-button-with-as/42699/1 "2004-02-12T00:16:53Z")

</div>

I’ve put this code onto a button

on (rollOver) {  
testbutton.\_alpha = 20  
}  
on (rollOut) {  
testbutton.\_alpha = 100  
}

How can I make the fade smooth from 100% to 20% on the rollover and then smooth back out on the rollout?

Any help is appreciated

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 12, 2004, 1:46am UTC](https://forum.kirupa.com/t/how-to-fade-a-button-with-as/42699/2 "2004-02-12T01:46:36Z")

</div>

Well you probably want to make a movieclip act as a button.  
Just make a movieclip consisting of three frames. The first frame just have the button without any rollover or rollout effects. The second frame put a movieclip of the same buttonbut use a motion tween to smoothly change the alpha of the button. Then put the 3d state as a duplicate of the button again but make it start at the lower alpha and make a motion tween change the alpha to 100 %. Here is the action script to attach to the main button (that contains the other 3 movieclips):

[AS]  
manual.onRollOver = manual.onRelease = function(){  
this.gotoAndStop(2)  
}  
manual.onRollOut = manual.onReleaseOutside = function(){  
this.gotoAndStop(1)  
}  
manual.onPress = function(){  
this.gotoAndStop(3)  
}  
[AS]

Just put this in the first frame and replace all the instances ‘manual’ with whatever the main movieclip’s instance name is. Just so you know this is making movieclips act as buttons 🙂

Mike

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 12, 2004, 2:11am UTC](https://forum.kirupa.com/t/how-to-fade-a-button-with-as/42699/3 "2004-02-12T02:11:00Z")

</div>

try something like

Fade Out:

this.onEnterFrame = function() {  
if(testbutton.\_alpha \> 20) {  
testbutton.\_alpha -= 5;  
} else {  
testbutton.\_alpha = 20; //just to be sure but maybe not necessary  
this.onEnterFrame = null;  
}  
}

Fade In:

this.onEnterFrame = function() {  
if(testbutton.\_alpha \< 100) {  
testbutton.\_alpha += 5;  
} else {  
this.onEnterFrame = null;  
}  
}

I typed that really fast but I think it’s right. You can adjust the rate of fade by change “5”. Less is slower, greater is faster.

Hope that helps.

(I think that if you put this code into a button instance then “this” will actually point to the button’s parent. SHould still work however) If you are worried about conflicts of onEnterFrame you could use setInterval instead You can also make “this” “\_root” or “myMovieClip\_mc” instead as well.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 12, 2004, 5:56pm UTC](https://forum.kirupa.com/t/how-to-fade-a-button-with-as/42699/4 "2004-02-12T17:56:59Z")

</div>

thanks for the replies. I’ll try both methods to see which works better for me

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 12, 2004, 7:35pm UTC](https://forum.kirupa.com/t/how-to-fade-a-button-with-as/42699/5 "2004-02-12T19:35:28Z")

</div>

ActionScripting it is the best way to do it in my opinion.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 12, 2004, 9:04pm UTC](https://forum.kirupa.com/t/how-to-fade-a-button-with-as/42699/6 "2004-02-12T21:04:03Z")

</div>

Voetsjoeba, do you have a better way to do it via AS? I tried the solution put forth by dlenner2. It works but I must have done something wrong because the fade ends abrubtly on the rollOver. Any suggestions? Also, in your opinion is it better to use a button or a mc acting as a button? Thanks

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [February 14, 2004, 2:54am UTC](https://forum.kirupa.com/t/how-to-fade-a-button-with-as/42699/7 "2004-02-14T02:54:48Z")

</div>

Hi,

Glad you got thinks working. I did paste the code you posted directly into an fla and it works fine. I don’t experience the cumulative fading that you talked about above. That’s weird!