# Fading images

**URL:** <https://forum.kirupa.com/t/fading-images/184462>\
**Category:** Uncategorized\
**Created:** [April 5, 2006, 10:18am UTC](https://forum.kirupa.com/t/fading-images/184462 "2006-04-05T10:18:04Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![scarlac](https://avatars.discourse-cdn.com/v4/letter/s/e47c2d/32.png) [@scarlac](https://forum.kirupa.com/u/scarlac)\
**Post date:** [April 5, 2006, 10:18am UTC](https://forum.kirupa.com/t/fading-images/184462/1 "2006-04-05T10:18:04Z")

</div>

Hi,

i’d like to make a loop of 3 images that fade in one after another with some time between the fades, i’d like to do it in code.

any1 got an idea how to do it.

thanx in advance

---

<div class="post-metadata">

**Author:** ![btibia](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/btibia/32/1625_2.png) [@btibia](https://forum.kirupa.com/u/btibia)\
**Post date:** [April 5, 2006, 11:27am UTC](https://forum.kirupa.com/t/fading-images/184462/2 "2006-04-05T11:27:26Z")

</div>

wait a little bit, i’m working on something…i think i can help you!

---

<div class="post-metadata">

**Author:** ![btibia](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/btibia/32/1625_2.png) [@btibia](https://forum.kirupa.com/u/btibia)\
**Post date:** [April 5, 2006, 11:29am UTC](https://forum.kirupa.com/t/fading-images/184462/3 "2006-04-05T11:29:06Z")

</div>

did you try working with tween’s?

---

<div class="post-metadata">

**Author:** ![btibia](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/btibia/32/1625_2.png) [@btibia](https://forum.kirupa.com/u/btibia)\
**Post date:** [April 5, 2006, 11:33am UTC](https://forum.kirupa.com/t/fading-images/184462/4 "2006-04-05T11:33:43Z")

</div>

this is the action script for one picture,

```auto

import mx.transitions.Tween;
import mx.transitions.easing.*;

var tw1:Tween = new Tween(picture,"_alpha",Strong.easeOut,0,100,5,true);

picture.onRelease = function() {
	if(this._alpha < 50) {
		fadeIn(this);
	}
	else {
		fadeOut(this);
		}
}

function fadeIn(who) {
	var tw:Tween = new Tween(who,"_alpha",Strong.easeOut,0,100,1,true);
	}

function fadeOut(who) {
	var tw:Tween = new Tween(who,"_alpha",Strong.easeOut,100,0,1,true);
}

```

make a movie clip with the instance name of picture and in that mc put the first picture…  
the rest i think you can handle

---

<div class="post-metadata">

**Author:** ![btibia](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/btibia/32/1625_2.png) [@btibia](https://forum.kirupa.com/u/btibia)\
**Post date:** [April 5, 2006, 11:44am UTC](https://forum.kirupa.com/t/fading-images/184462/5 "2006-04-05T11:44:21Z")

</div>

ok take this, i think it will help you…if not, reply here!

---

<div class="post-metadata">

**Author:** ![scarlac](https://avatars.discourse-cdn.com/v4/letter/s/e47c2d/32.png) [@scarlac](https://forum.kirupa.com/u/scarlac)\
**Post date:** [April 5, 2006, 12:04pm UTC](https://forum.kirupa.com/t/fading-images/184462/6 "2006-04-05T12:04:13Z")

</div>

thhanx a lot, but i can’t open the file. i suppose you’re using studio 8, i’m still using mx2004

---

<div class="post-metadata">

**Author:** ![btibia](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/btibia/32/1625_2.png) [@btibia](https://forum.kirupa.com/u/btibia)\
**Post date:** [April 5, 2006, 12:27pm UTC](https://forum.kirupa.com/t/fading-images/184462/7 "2006-04-05T12:27:42Z")

</div>

yes, i’m using flash 8, i will make for mx2004

---

<div class="post-metadata">

**Author:** ![btibia](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/btibia/32/1625_2.png) [@btibia](https://forum.kirupa.com/u/btibia)\
**Post date:** [April 5, 2006, 12:42pm UTC](https://forum.kirupa.com/t/fading-images/184462/8 "2006-04-05T12:42:16Z")

</div>

i can’t save for mx2004, make like this:

1. 2 layers, action and movieclip

2. in movieclip layer make 2 keyframes(and in action layer the same)

3. pass this code in the first keyframe:

```auto

import mx.transitions.Tween;
import mx.transitions.easing.*;
stop();
var tw1:Tween = new Tween(picture,"_alpha",Strong.easeOut,0,100,5,true);

picture.onRelease = function() {
	if(this._alpha < 50) {
		fadeIn(this);
	}
	else {
		fadeOut(this);
		nextFrame();
		}
}

function fadeIn(who) {
	var tw:Tween = new Tween(who,"_alpha",Strong.easeOut,0,100,1,true);
	}

function fadeOut(who) {
	var tw:Tween = new Tween(who,"_alpha",Strong.easeOut,100,0,1,true);
}

```

1. in the second keyframe paste this code in the second keyframe in action layer:

```auto

import mx.transitions.Tween;
import mx.transitions.easing.*;
stop();
var tw1:Tween = new Tween(picture,"_alpha",Strong.easeOut,0,100,5,true);

picture.onRelease = function() {
	if(this._alpha < 50) {
		fadeIn(this);
	}
	else {
		fadeOut(this);
		prevFrame();
		}
}

function fadeIn(who) {
	var tw:Tween = new Tween(who,"_alpha",Strong.easeOut,0,100,1,true);
	}

function fadeOut(who) {
	var tw:Tween = new Tween(who,"_alpha",Strong.easeOut,100,0,1,true);
}

```

1. in the movieclip layer first keyframe place the first pic(and in the second keyframe the second picture) and make it a movieclip with the instance name of picture (same step for the second picture in the 2’nd keyframe)

now play the movie…

---

<div class="post-metadata">

**Author:** ![btibia](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/btibia/32/1625_2.png) [@btibia](https://forum.kirupa.com/u/btibia)\
**Post date:** [April 5, 2006, 12:43pm UTC](https://forum.kirupa.com/t/fading-images/184462/9 "2006-04-05T12:43:43Z")

</div>

now you can customize as you want, this depands on you.

give a short info if it’s working!