# Slideshow with alpha-blending

**URL:** <https://forum.kirupa.com/t/slideshow-with-alpha-blending/230630>\
**Category:** Uncategorized\
**Created:** [June 27, 2007, 8:00pm UTC](https://forum.kirupa.com/t/slideshow-with-alpha-blending/230630 "2007-06-27T20:00:44Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wampiro\_UHA](https://avatars.discourse-cdn.com/v4/letter/w/eb9ed0/32.png) [@Wampiro\_UHA](https://forum.kirupa.com/u/Wampiro_UHA)\
**Post date:** [June 27, 2007, 8:00pm UTC](https://forum.kirupa.com/t/slideshow-with-alpha-blending/230630/1 "2007-06-27T20:00:44Z")

</div>

I want to make a slideshow as the intro on [http://www.alternativ.be/index\_be\_en.php?sndLvl=2](http://www.alternativ.be/index_be_en.php?sndLvl=2).

For that I’ve made four similar boxes, one with alpha 100% and the other three with apha 50%. They lay on top of each other and on top of the images in my slideshow.

I’ve made this code:

* * *

faderOut = function () {  
clearInterval(setIntervalFaderOut);  
Fader0.\_x = 0;  
Fader1.\_x = 0;  
Fader2.\_x = 0;  
Fader3.\_x = 0;  
tweenOut0 = new Tween(Fader0, “\_width”, Strong.easeOut, 450, 0, 0.5, true);  
tweenOut0.onMotionFinished = function() {  
tweenOut1 = new Tween(Fader1, “\_width”, Strong.easeOut, 450, 0, 0.5, true);  
tweenOut1.onMotionFinished = function() {  
tweenOut2 = new Tween(Fader2, “\_width”, Strong.easeOut, 450, 0, 0.5, true);  
tweenOut2.onMotionFinished = function() {  
tweenOut3 = new Tween(Fader3, “\_width”, Strong.easeOut, 450, 0, 0.5, true);  
tweenOut3.onMotionFinished = function() {  
setIntervalFaderIn = setInterval(faderIn, 5000);  
};  
};  
};  
};  
};  
faderIn = function () {  
clearInterval(setIntervalFaderIn);  
Fader0.\_x = 0;  
Fader1.\_x = 0;  
Fader2.\_x = 0;  
Fader3.\_x = 0;  
tweenIn3 = new Tween(Fader3, “\_width”, Strong.easeOut, 0, 450, 0.5, true);  
tweenIn3.onMotionFinished = function() {  
tweenIn2 = new Tween(Fader2, “\_width”, Strong.easeOut, 0, 450, 0.5, true);  
tweenIn2.onMotionFinished = function() {  
tweenIn1 = new Tween(Fader1, “\_width”, Strong.easeOut, 0, 450, 0.5, true);  
tweenIn1.onMotionFinished = function() {  
tweenIn0 = new Tween(Fader0, “\_width”, Strong.easeOut, 0, 450, 0.5, true);  
tweenIn0.onMotionFinished = function() {  
setIntervalFaderOut = setInterval(faderOut, 500);  
};  
};  
};  
};  
};  
faderOut();

* * *

I’m thinking on switching between the images in tweenIn0.onMotionFinished = function() { … }

My questions is now:

- Can you optimze this code (a lot)?
- Is it possible to, instead of starting the tweens after each other, then to start one and when that is almost halfway done then start the other etc…