# How to fadeIn fadeout dynamically loaded images using action script?

**URL:** <https://forum.kirupa.com/t/how-to-fadein-fadeout-dynamically-loaded-images-using-action-script/22501>\
**Category:** flash\
**Created:** [June 4, 2003, 8:10pm UTC](https://forum.kirupa.com/t/how-to-fadein-fadeout-dynamically-loaded-images-using-action-script/22501 "2003-06-04T20:10:40Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![cellinis](https://avatars.discourse-cdn.com/v4/letter/c/74df32/32.png) [@cellinis](https://forum.kirupa.com/u/cellinis)\
**Post date:** [June 4, 2003, 8:10pm UTC](https://forum.kirupa.com/t/how-to-fadein-fadeout-dynamically-loaded-images-using-action-script/22501/1 "2003-06-04T20:10:40Z")

</div>

I am dynamically loading images into a blank movie file. I would like if the images fade in as they load.  
Remark, I am not using a slide show effect. All i would like to do is load image and make it fade in. When the user clicks to go to the next frame the image should fade out.  
How to do this?

---

<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 5, 2003, 3:58am UTC](https://forum.kirupa.com/t/how-to-fadein-fadeout-dynamically-loaded-images-using-action-script/22501/2 "2003-06-05T03:58:33Z")

</div>

um, you can’t really fade them in _while_ they’re loading, since the entire image would have to be loaded in order to “fade”. so what you can do is fade it in _once_ it’s loaded. load the image in a movieclip, then just fade in the movieclip:

```auto

onClipEvent (load) {
_alpha = 0;
}
onClipEvent (enterFrame) {
if (_alpha < 100) {
_alpha++; //same as _alpha = _alpha+1;
}

```

---

<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 5, 2003, 4:50am UTC](https://forum.kirupa.com/t/how-to-fadein-fadeout-dynamically-loaded-images-using-action-script/22501/3 "2003-06-05T04:50:45Z")

</div>

after you finish downloading the images (note: its not the same as the load movie command.) I repeat AFTER your images are loaded then you could do something like this:  
[AS]  
movieClip.onRollover = function () {  
this.onEnterFrame = function() {  
this.\_alpha+=10;  
}  
}[/AS]

hope this helps.

---

<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 5, 2003, 12:29pm UTC](https://forum.kirupa.com/t/how-to-fadein-fadeout-dynamically-loaded-images-using-action-script/22501/4 "2003-06-05T12:29:55Z")

</div>

thanks a ton guys! thios really helped 🙂

---

<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 5, 2003, 3:20pm UTC](https://forum.kirupa.com/t/how-to-fadein-fadeout-dynamically-loaded-images-using-action-script/22501/5 "2003-06-05T15:20:02Z")

</div>

im not sure if this would work or not but its just a thought…

you could have some sort of preloader…a super basic one…using the getBytesLoaded & getBytesTotal of the movieclip the images are being loaded into…an once it was loaded…you could set the alpha of the movieclip to 0 and then use the enterframe stuff some one said above…

does that make sense? i think thats what the guy above said, but i wasnt sure…maybe this is just a repeat post…or maybe it will give a lil more light as to what to do

---

<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:** [July 3, 2003, 9:03pm UTC](https://forum.kirupa.com/t/how-to-fadein-fadeout-dynamically-loaded-images-using-action-script/22501/6 "2003-07-03T21:03:37Z")

</div>

I used the above onRollover with an onRollout, how do I get it to work after more than one rollover/out?

thx

---

<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:** [July 3, 2003, 10:50pm UTC](https://forum.kirupa.com/t/how-to-fadein-fadeout-dynamically-loaded-images-using-action-script/22501/7 "2003-07-03T22:50:33Z")

</div>

Hello dezynr, can you post your code?

---

<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:** [July 4, 2003, 10:39am UTC](https://forum.kirupa.com/t/how-to-fadein-fadeout-dynamically-loaded-images-using-action-script/22501/8 "2003-07-04T10:39:30Z")

</div>

shape5.onRollover = function () {  
this.onEnterFrame = function() {  
this.\_alpha-=10;  
}  
}

shape5.onRollout = function () {  
this.onEnterFrame = function() {  
this.\_alpha+=10;  
}  
}

This only lets you rollover it once. How do I change that?  
And can I us onRelease to make it a button? If so, can you show that code too?

Thanks so much.

I know I can do this fade with tween but I 'm determined I’m going to learn Actionscript. :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:** [July 10, 2003, 2:25am UTC](https://forum.kirupa.com/t/how-to-fadein-fadeout-dynamically-loaded-images-using-action-script/22501/9 "2003-07-10T02:25:37Z")

</div>

I was hoping someone knew the answer to this. Oh well, I’ll figure it out someday. :q: 🙂

---

<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:** [July 12, 2003, 5:42pm UTC](https://forum.kirupa.com/t/how-to-fadein-fadeout-dynamically-loaded-images-using-action-script/22501/10 "2003-07-12T17:42:36Z")

</div>

```auto
shape5.onEnterFrame = function() {
this.onRollOver = function () {
this.alpha = 100;
}
this.onRollOut = function () {
this.alpha = 0
}
this._alpha += (this.alpha - this._alpha)/10 // instead of 10 you can put other number (lower the number is, faster the animation is)
}

```