Fading color over time

[aurelplouf]

Hello all,

I am new here, and pretty new to actionscript.
Recently i am try to create a loading bar (with a line that goes through the screen and text that follows the line and changes words over time.)

What i want is to have the loading bar and the text change over time in random colors that are clear enough so we can still see the color over a black background.

I have done some research on this website, and found the tutorial by Pixelwit on color fading. I got it to work on my flash project, but it requires a button. How do make the transformation of random color automatically without having to press a button ?


Following is how i set everything up:

On the main stage Actions layer:
stop();
onEnterFrame = function(){
var percent_loaded = _root.getBytesLoaded()/_root.getBytesTotal();
preloader_mc.value = percent_loaded;
loadingCities.value = percent_loaded;
if (percent_loaded == 1){
delete onEnterFrame;
play();
}
}

then i have two layers on the main stage
1)Preloader
2)cityNames (the text that follows the preloader)

in the Preloader layer inside the object "preloader_MC"
in my action layer i have
var value = 0;
onEnterFrame = function(){
bar_mc._xscale = 100 * value;


}
onEnterFrame();


in my cityNames object
i have this in my actions layer
var value = 0;
// update every frame
onEnterFrame = function(){

// base xscale off of value
cityNames._x = 1440 * value;
var frame = 1 + Math.round((cityNames._totalframes - 1) * value);
cityNames.gotoAndStop(frame);
}

// force update when loaded
onEnterFrame();
//


(note it changes the movieclip cityNames into different words).


Now what i want is to incorporate all this for the citynames and the preloader_mc but have it load automatically instead of having to create a button and to click on it

Note2: I wanted to use fadeRandTransform; but if its possible to make the colors lighter, that would be great :D

//
//// FIGLEAF SOFTWARE RGB to Hex
Math.rgbToHex = function(r,g,b){
return(r<<16 | g<<8 | b);
}
// PiXELWiT REVERSE ENGINEERING
Math.hexToRGB = function(hex){
var red = hex>>16;
var grnBlu = hex-(red<<16)
var grn = grnBlu>>8;
var blu = grnBlu-(grn<<8);
return({r:red, g:grn, b:blu});
}
//
//
// Check to see if an object2 has the same properties
// with the same values as those in object1
Color.prototype.transObjSame = function (obj1, obj2){
for(var i in obj1){
if(obj1[i] != obj2[i]){
return false;
}
}
return true;
}
//
// PiXELWiT Color Prototypes
// http://www.pixelwit.com
//
// Just like setTransform but over a period of time
// func is called when desired transformation is reached
Color.prototype.fadeTransform = function(goalTrans, milSecs, func){
if(this.v){
if( this.transObjSame(goalTrans, this.v.goalTrans) ){
trace("Already going there");
return;// already heading to that trans obj so just wait
}else{
clearInterval(this.v.intrvl);
}
}
var getTrans = this.getTransform();
if(this.transObjSame(goalTrans, getTrans)){
trace("already there");
return;// already at that trans obj so don't bother
}
this.v = {};
this.v.goalTrans = goalTrans;
this.v.milSecs = milSecs;
if(typeof func == "function")this.v.func = func;
this.v.startTime = getTimer();
this.v.startTrans = getTrans;
this.v.change = {};
for(var i in goalTrans){
this.v.change[i] = goalTrans[i]-this.v.startTrans[i];
}
this.transShift();
if(milSecs){
this.v.intrvl = setInterval(this, "transShift", 1);
}
}
Color.prototype.transShift = function(){
//trace("Running");
var ratio = (getTimer()-this.v.startTime)/this.v.milSecs;
if(ratio<1){
var newTrans = {};
for(var i in this.v.change){
newTrans[i] = this.v.startTrans[i]+ratio*this.v.change[i];
}
this.setTransform(newTrans);
}else{
this.setTransform(this.v.goalTrans);
clearInterval(this.v.intrvl);
var myFunc = this.v.func;
delete(this.v);
if(myFunc)myFunc();
}
}
Color.prototype.fadeRGB = function(r, g, b, milSecs, func){
var goalTrans = {ra:0, ga:0, ba:0, rb:r, gb:g, bb:b, aa:100, ab:0};
this.fadeTransform(goalTrans, milSecs, func);
}
Color.prototype.fadeHex = function(goalHex, milSecs, func){
var goalRGB = Math.hexToRGB(goalHex);
this.fadeRGB(goalRGB.r, goalRGB.g, goalRGB.b, milSecs, func);
}
Color.prototype.fadeClearTrans = function(milSecs, func){
var goalTrans = {ra:100, rb:0, ga:100, gb:0, ba:100, bb:0, aa:100, ab:0};
this.fadeTransform(goalTrans, milSecs, func);
}
//
//
//
// Usage Example
//
//
// Some additional color cycling functions
function traceDone(){
trace("DONE FADING!");
}
//
function fadeRandHex(){
var randHex = Math.floor(Math.random()*0xFFFFFF);
myCO.fadeHex(randHex, Math.floor(Math.random()*1000+100), fadeRandHex)
}
//
function fadeRandTransform(){
var o = {};
o.ra = Math.floor(Math.random()*200-100);
o.ga = Math.floor(Math.random()*200-100);
o.ba = Math.floor(Math.random()*200-100);
o.rb = Math.floor(Math.random()*512-256);
o.gb = Math.floor(Math.random()*512-256);
o.bb = Math.floor(Math.random()*512-256);
myCO.fadeTransform(o, 3000, fadeRandTransform);
}
//
transArray = [];
transArray[0]={ra:-100, rb:255, ga:-100, gb:150, ba:0, bb:0, aa:100, ab:0};
transArray[1]={ra:100, rb:-61, ga:-100, gb:120, ba:-100, bb:255, aa:100, ab:0};
transArray[2]={ra:-100, rb:139, ga:10, gb:0, ba:-100, bb:255, aa:100, ab:0};
transArray[3]={ra:100, rb:255, ga:100, gb:0, ba:-100, bb:255, aa:100, ab:0};
lastTransArray = 0;
function fadeArrayTrans(){
myCO.fadeTransform(transArray[lastTransArray], 2000, fadeArrayTrans)
lastTransArray++;
lastTransArray%=transArray.length;
}
//
//
// Assign functions to buttons
CLEAR.onRelease = function(){
myCO.fadeClearTrans(1000);
}
RED.onRelease = function(){
myCO.fadeRGB(255, 0, 0, 1000, traceDone);
}
ORANGIFY.onRelease = function(){
myCO.fadeTransform(transArray[0], 1000, traceDone);
}
RANDHEX.onRelease = fadeRandHex;
ARRAYTRANS.onRelease = fadeArrayTrans;
RANDTRANS.onRelease = fadeRandTransform;
//
//
myCO = new Color(SomeImageClip);
//
//
//



Thank you all,

Aurel