optimizing code: ColorTransformation in ActionScript.

[TheJhereg]

Okay,

Basically, I've got some working code. What I want to do is optimize it's processor/memory usage. Let me explain:

This AS 2.0 class extends an objec to be the background of the stage. The object uses actionscript to fill the entire browser window, regardless of resolution (liquid flash layout with noscale). So far no problems.

The background object is actually a set of 5 movieclips, one for each section of the site. When you click a link to move to a new section, the background object is switches out using a Color.setTransform() and SwapDepths() combination.

At resolutions under 1024 x 768, this is fast, smooth and perfect. At 1280 x 1024, this is fairly smooth, but slightly slower. Acceptable. Over that, and it slows to a crawl. The animation is still smooth, just slow.

I'm looking for ways to cut processor work and potentially speed it up.

Here's the applicable code:


[...]
this.colorArray = new Array() ;
// load colorArray with the color transform destinations for each section

this.bgArray = new Array() ;
// load bgArray each movie clip same index is used as in colorArray

[...]

this.duration = 5 ;
this.steps = 60 ;
this.elapsed = 0 ;
this.intervalID = undefined ;

[...]
function activateBG(obj:String) {
if(this.intervalID == undefined && obj != "") {
this.loadingBG = obj ;
this.intervalID = setInterval(this, "tintOut", duration) ;
}
}

function tintOut() {
if(this.currentBG != undefined && this.loadingBG != undefined) {
if(this.elapsed <= this.steps) {
var percent = this.elapsed / this.steps ;
var newTransform = {ra: 100, rb: 0, ga: 100, gb: 0, ba: 100, bb: 0, aa: 100, ab: 0};
newTransform.ra = Math.floor (100 - (100 * percent));
newTransform.rb = Math.floor (this.colorArray[this.loadingBG].rb * percent);
newTransform.ga = Math.floor (100 - (100 * percent));
newTransform.gb = Math.floor (this.colorArray[this.loadingBG].gb * percent);
newTransform.ba = Math.floor (100 - (100 * percent));
newTransform.bb = Math.floor (this.colorArray[this.loadingBG].bb * percent);
var c:Color = new Color(this.bgArray[this.currentBG]) ;
c.setTransform(newTransform) ;
this.elapsed++ ;
} else {
clearInterval(this.intervalID) ;
var c:Color = new Color(this.bgArray[this.loadingBG]) ;
c.setTransform(this.colorArray[this.loadingBG]) ;
this.bgArray[this.loadingBG].swapDepths(this.bgArray[this.currentBG]) ;
this.intervalID = setInterval(this, "tintIn", duration) ;
}
}
}

function tintIn() {
if(this.currentBG != undefined && this.loadingBG != undefined) {
if(this.elapsed >= 0) {
var percent = this.elapsed / this.steps ;
var newTransform = {ra: 100, rb: 0, ga: 100, gb: 0, ba: 100, bb: 0, aa: 100, ab: 0};
newTransform.ra = Math.floor (100 - (100 * percent));
newTransform.rb = Math.floor (this.colorArray[this.loadingBG].rb * percent);
newTransform.ga = Math.floor (100 - (100 * percent));
newTransform.gb = Math.floor (this.colorArray[this.loadingBG].gb * percent);
newTransform.ba = Math.floor (100 - (100 * percent));
newTransform.bb = Math.floor (this.colorArray[this.loadingBG].bb * percent);
var c:Color = new Color(this.bgArray[this.loadingBG]) ;
c.setTransform(newTransform) ;
this.elapsed-- ;
} else {
clearInterval(this.intervalID) ;
this.intervalID = undefined ;
this.currentBG = this.loadingBG ;
this.loadingBG = undefined ;
}
}
}



Menu Items call bg.activateBG(sectionIndex). From there, tintOut applies a color transformationto the currently active background, until it's fully transformed to the desitination color. then the destination color is applied to the new sections background, and the active/loading backgrounds swap depths, and TintIN() removes the transformation from the loading background.

Simple. Anyone see somewhere this could be made more efficient?