# Alpha fade

**URL:** <https://forum.kirupa.com/t/alpha-fade/24232>\
**Category:** Uncategorized\
**Created:** [June 27, 2003, 4:28pm UTC](https://forum.kirupa.com/t/alpha-fade/24232 "2003-06-27T16:28:42Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![wilma](https://avatars.discourse-cdn.com/v4/letter/w/bbe5ce/32.png) [@wilma](https://forum.kirupa.com/u/wilma)\
**Post date:** [June 27, 2003, 4:28pm UTC](https://forum.kirupa.com/t/alpha-fade/24232/1 "2003-06-27T16:28:42Z")

</div>

using AS, on loading a movie a solid shape is there with alpha at 100% then over a period of 5 secs its alpha is reduced to 0.

i’m new to this…please help if you want to if you don’t have a good weekend but think of me struggling onwards and upwards…

---

<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:** [June 27, 2003, 4:37pm UTC](https://forum.kirupa.com/t/alpha-fade/24232/2 "2003-06-27T16:37:29Z")

</div>

keep the frame rate to 10fps. Draw the shape and convert it to a movie clip symbol with instance name “shape”. Now add a keyframe at frame 2 and one at frame 3. In the actions of frame one, add-  
time=5  
i=0  
in frame 2 add-

i++  
shape.\_alpha-=100 -time\*i

in frame 3 add-

gotoAndPlay(2)

I hope that works!

---

<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:** [June 27, 2003, 4:50pm UTC](https://forum.kirupa.com/t/alpha-fade/24232/3 "2003-06-27T16:50:24Z")

</div>

> \*Originally posted by wilma \*  
> \*\*using AS, on loading a movie a solid shape is there with alpha at 100% then over a period of 5 secs its alpha is reduced to 0.

i’m new to this…please help if you want to if you don’t have a good weekend but think of me struggling onwards and upwards… \*\*

If you are using Flash MX you can use dynamic event handlers to slowly fade the clip.

It would go a little something like this…

On a frame add these actions…

[AS]  
clipInstanceName.onEnterFrame = function(){  
this.\_alpha -= 5;  
if (this.\_alpha \<= 0){  
this.\_alpha = 0;  
delete this.onEnterFrame;  
}[/AS]

---

<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:** [June 28, 2003, 2:31pm UTC](https://forum.kirupa.com/t/alpha-fade/24232/4 "2003-06-28T14:31:36Z")

</div>

very nice effect lostinbeta, works sweet,  
i tried changing the effect to fade an image in, but no luck… is it simple?

---

<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:** [June 28, 2003, 3:15pm UTC](https://forum.kirupa.com/t/alpha-fade/24232/5 "2003-06-28T15:15:32Z")

</div>

to fade an image in, use- onClipEvent(load){\_alpha=0}  
and then use movieclip.\_alpha+=5

---

<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:** [June 28, 2003, 3:23pm UTC](https://forum.kirupa.com/t/alpha-fade/24232/6 "2003-06-28T15:23:28Z")

</div>

Hmm, I couldn’t get it to fade in…

---

<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:** [June 28, 2003, 4:27pm UTC](https://forum.kirupa.com/t/alpha-fade/24232/7 "2003-06-28T16:27:33Z")

</div>

this.\_alpha -= 5;

That line right there decreases the current alpha setting by 5. So if your clip alpha is 100, it will then be 95, then 90, then 85, etc, etc.

To increase the alpha just change -= to +=.

Now my question is this… are you trying to fade in and out successively? or are you just trying to fade a clip in and that is it?

Considering you just asked for fading in I won’t go the extra mile of in and out unless you need that.

[AS]  
//start clips alpha setting at 0  
clipInstanceName.\_alpha = 0;  
//initiate clips onEnterFrame handler  
clipInstanceName.onEnterFrame = function(){  
//keep increasing the alpha by 5  
this.\_alpha += 5;  
//if the alpha setting is greater or equal to 100  
if (this.\_alpha \>= 100){  
//keep it there  
this.\_alpha = 100;  
//and stop running the onEnterFrame  
delete this.onEnterFrame;  
}  
}[/AS]

---

<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:** [June 28, 2003, 4:34pm UTC](https://forum.kirupa.com/t/alpha-fade/24232/8 "2003-06-28T16:34:22Z")

</div>

Thanks a heap ! =) i just added it to my menu with a fade on each.

Was just trying to load it in, tried the +, but forgot to add 100.

thanks again!

=)

---

<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:** [June 28, 2003, 4:45pm UTC](https://forum.kirupa.com/t/alpha-fade/24232/9 "2003-06-28T16:45:40Z")

</div>

yay! :thumb:

---

<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:** [June 30, 2003, 8:26am UTC](https://forum.kirupa.com/t/alpha-fade/24232/10 "2003-06-30T08:26:14Z")

</div>

lostinbeta, thanks for your help on that. since you asked, yeh it would be good to get it to fade in and out successively… it would be great if you could show me that.

cheers for all your help.

---

<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:** [June 30, 2003, 8:36am UTC](https://forum.kirupa.com/t/alpha-fade/24232/11 "2003-06-30T08:36:06Z")

</div>

Ok, to get it to work in and out like that you have to use a variable to hold a true or false value, we will call this variable “trigger”

[AS]  
//start trigger at false  
var trigger = false;  
//start clips alpha setting at 0  
clipInstanceName.\_alpha = 0;  
//initiate clips onEnterFrame handler  
clipInstanceName.onEnterFrame = function(){  
//if trigger is false  
if (!trigger){  
//keep increasing the alpha by 5  
this.\_alpha += 5;  
//if the alpha setting is greater or equal to 100  
if (this.\_alpha \>= 100){  
//set alpha to 100  
this.\_alpha = 100;  
//set trigger to true  
trigger = true;  
}  
//else if trigger is true  
} else {  
//keep decreasing the alpha by 5  
this.\_alpha -= 5;  
//if the alpha setting is less than or equal to 0  
if (this.\_alpha \<= 0){  
//set alpha to 0  
this.\_alpha = 0;  
//set trigger to false  
trigger = false;  
//trigger = false will make it fade back in  
//to just stop it now change trigger=false to delete this.onEnterFrame  
}

}  
}[/AS]

---

<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:** [June 30, 2003, 9:21am UTC](https://forum.kirupa.com/t/alpha-fade/24232/12 "2003-06-30T09:21:13Z")

</div>

```auto
var s = 5;
clipInstanceName._alpha = 0;
clipInstanceName.onEnterFrame = function() {
	s = this._alpha == 100 || this._alpha == 0 ? s*-1 : s;
	this._alpha = Math.min(Math.max(0, this._alpha+s), 100);
};

```

😉 😛

---

<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:** [June 30, 2003, 9:41am UTC](https://forum.kirupa.com/t/alpha-fade/24232/13 "2003-06-30T09:41:31Z")

</div>

Kax, if you’ve got the time or the inclination to explain that code it would be most appreciated, if not no worries. but why, apart from the fact its a more consice piece of code, use yours as opposed to lostinbeta’s code??

thanks for all the help.

---

<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:** [June 30, 2003, 10:20am UTC](https://forum.kirupa.com/t/alpha-fade/24232/14 "2003-06-30T10:20:07Z")

</div>

i really suck at explaining things, but here’s a brief explanation… hope that’s ok. 🙂

```auto
s = this._alpha == 100 || this._alpha == 0 ? s*-1 : s;

```

if \_alpha equals 100 or 0, change the value of **s** from a positive to negative or negative to positive value.

```auto
this._alpha = Math.min(Math.max(0, this._alpha+s), 100);

```

basically adds **s** to \_alpha and keeps the value between 0 and 100.

and well, there’s no reason why you should use my code and not lostinbeta’s… make your choice and have fun! 😛

---

<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:** [June 30, 2003, 4:07pm UTC](https://forum.kirupa.com/t/alpha-fade/24232/15 "2003-06-30T16:07:41Z")

</div>

:thumb: good code, it is the fact that I can’t think like that that makes a lot of my coding inefficient.

---

<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:** [June 30, 2003, 4:21pm UTC](https://forum.kirupa.com/t/alpha-fade/24232/16 "2003-06-30T16:21:02Z")

</div>

I like th min/ max thing to keep it between 0 and 100. :thumb: