# Color Gradient Transition

**URL:** <https://forum.kirupa.com/t/color-gradient-transition/14861>\
**Category:** flash\
**Created:** [March 3, 2003, 7:19pm UTC](https://forum.kirupa.com/t/color-gradient-transition/14861 "2003-03-03T19:19:22Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![wyclef](https://avatars.discourse-cdn.com/v4/letter/w/65b543/32.png) [@wyclef](https://forum.kirupa.com/u/wyclef)\
**Post date:** [March 3, 2003, 7:19pm UTC](https://forum.kirupa.com/t/color-gradient-transition/14861/1 "2003-03-03T19:19:22Z")

</div>

Hi,

Any thoughts why this doesn’t work? What have i left out? I’d like to transition between two separate gradients each containing three colors. Something is wrong with this script i think.

[AS]  
function animate(ratio) {  
// change the ratio position, limiting it between  
// 10 and 245…  
ratio.x += ratio.speed;  
if ((ratio.x\>245) || (ratio.x\<10)) {  
ratio.speed = -ratio.speed;  
}  
return ratio.x;  
}  
//  
//  
// define the beginGradientFill parameters…  
matrix = {matrixType:“box”, x:0, y:0, w:550, h:100, r:0};  
colors = [0x00CC66, 0xFFCC00, 0XCC3300];  
alphas = [100, 100, 100];  
ratios = [null, null, null];  
//  
// set our animated ratio points…  
ratio1 = {x:15, speed:.5};  
ratio2 = {x:240, speed:.5};  
ratio3 = {x:255, speed:.5};

//  
// create our clip and give it an  
// onEnterFrame scripr to animate it…  
//  
\_root.createEmptyMovieClip(“clip”, 0);  
clip.onEnterFrame = function() {  
// set new point positions  
ratio1.x = animate(ratio1);  
ratio2.x = animate(ratio2);  
ratio3.x = animate(ratio3);  
if (ratio1.x\<ratio2.x\<ratio3.x) {  
ratios = [ratio1.x, ratio2.x, ratio3.x];  
} else {  
ratios = [ratio3.x, ratio2.x, ratio1.x];  
}  
this.clear();  
this.lineStyle(0, 0xff0000, 100);  
this.beginGradientFill(“linear”, colors, alphas, ratios, matrix);  
this.moveTo(0, 0);  
this.lineTo(550, 0);  
this.lineTo(550, 100);  
this.lineTo(0, 100);  
this.endFill();  
};  
[/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:** [March 3, 2003, 8:06pm UTC](https://forum.kirupa.com/t/color-gradient-transition/14861/2 "2003-03-03T20:06:25Z")

</div>

i don’t know what is wrong with the code. but i don’t know why you don’t just do it in flash with animation / tweening instead of actionscripting.

it would be much easier. than 30 lines of 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:** [March 3, 2003, 8:21pm UTC](https://forum.kirupa.com/t/color-gradient-transition/14861/3 "2003-03-03T20:21:43Z")

</div>

wouldn’t it be more processor intensive to just use tweening? and how would i control the speed with actionscript then? because i need the blend to be very slow it would take about 10000 frames if i tweened it.

---

<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:** [March 3, 2003, 9:05pm UTC](https://forum.kirupa.com/t/color-gradient-transition/14861/4 "2003-03-03T21:05:05Z")

</div>

10000 frames?!?!?! omgosh

what could you possibly have a movie that long for?

please excuse my astonishment =)

tweening in actionscript i think would be more processor intensive. flash’s tweening ability is desiged by macromedia to be the best way to do that in flash. making your own script (i would imagine) would only be slower. so i think a tween would be the way to go although i can’t imagine why you would have one movie that is so incredibly lone … without breaking it up into scenes or whatever

although i guess that’s only a few minutes long. either way. if you’re going to do an animation sequence that is that long then tweening something over a span of 10000 frames shouldn’t be a big deal. try it

---

<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:** [March 3, 2003, 9:11pm UTC](https://forum.kirupa.com/t/color-gradient-transition/14861/5 "2003-03-03T21:11:12Z")

</div>

i want to have a slowly changing background that is very subtle throughout my movie. so you really think that tweening is the way to go here?

---

<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:** [March 3, 2003, 9:25pm UTC](https://forum.kirupa.com/t/color-gradient-transition/14861/6 "2003-03-03T21:25:21Z")

</div>

that’s how i would do it =)

i would make a symbol on the main stage in it’s own layer

in that symbol i would have one gradient filled box shape tween to another gradient filled box of the same dimensions but with different colors over 10000 frames … that way your main timeline’s animation doesn’t necessarily need to be 10000 frames exactly.