Below is the code for each of the examples on the previous page. The only real difference is that in the first example we use the current value of coloredRect.alpha to get the next value by coloredRect.alpha+=0.1;. In the second example, we use a global variable, writePrecentAlpha. At each step, we increase the value of writePercentAlpha by what we want and then assign the value to coloredRect.alpha. This way the error does not accumulate from step to step. In both cases, the code is placed on the Timeline.
Code for Example 1
We keep comments within the code for greater clarity.
/*
On the Stage, we created a rectangular MovieClip, coloredRect. We also
have two buttons, btnAlphaPlus and btnReset, and a dynamic TextField,
infoBox.
*/
var clickCount:int=0;
/*
Initially we set alpha on coloredRect to 0. With all the rounding off errors,
the value will remain 0.
*/
coloredRect.alpha=0;
infoBox.text="coloredRect.alpha=" + String(Math.round(coloredRect.alpha*10000)/10000);
/*
When clicked the first 10 times, btnAlphaPlus, ads 0.1 to the current
value of coloredRect.alpha. Thus after the first click the value of alpha
should be 0.1, after the second 0.2 and so on. The actual values of
coloredRect.alpha are displayed in the infoBox (by 'updateDisplay' function)
and they are different than expected. On the previous page, we give an explanation
of why that happens.
*/
btnAlphaPlus.addEventListener(MouseEvent.CLICK, alphaPlus);
function alphaPlus(e:MouseEvent):void {
if(clickCount>=10){
return;
}
coloredRect.alpha+=0.1;
updateDisplay();
clickCount+=1;
}
function updateDisplay():void {
var curAlpha:String = "\ncoloredRect.alpha=" + String(Math.round(coloredRect.alpha*10000)/10000);
infoBox.appendText(curAlpha);
}
btnReset.addEventListener(MouseEvent.CLICK, resetAll);
function resetAll(e:MouseEvent):void {
var curAlpha:String;
clickCount=0;
coloredRect.alpha=0;
curAlpha="coloredRect.alpha=" + String(Math.round(coloredRect.alpha*10000)/10000);
infoBox.text=curAlpha;
}
Why the Error in Example 1 Compounds?
In Example 1, we take at each step coloredRect.alpha+=0.1 which compounds error.
After the first step, coloredRect.alpha is not 0.1 but 0.0977. Thus,
coloredRect.alpha+=0.1 is 0.1977. We are now assigning alpha a=0.1977.
According to the rule explained on the first page which states that for an assigned value 'a' actual value of alpha equals
coloredRect.alpha=Math.floor(a*256)/256
we obtain the next value to be 0.1953.
Code for Example 2
The difference between Example 2 and Example 1, is that here we do not use the current value of coloredRect.alpha to get the next value of coloredRect.alpha. Instead, we introduce a global variable 'writePercentAlpha'. We make it an integer to avoid floating point errors. When changing alpha, we change values of 'writePercentAlpha' and then assign them to coloredRect.alpha. Thus, the error in coloredRect.alpha does not compound from step to step. As you can see on the previous page, the results are much better than before.
var clickCount:int=0;
var writePercentAlpha:int=0;
coloredRect.alpha=0;
infoBox.text="coloredRect.alpha=" + String(Math.round(coloredRect.alpha*10000)/10000);
function updateDisplay():void {
var curAlpha:String = "\ncoloredRect.alpha=" + String(Math.round(coloredRect.alpha*10000)/10000);
infoBox.appendText(curAlpha);
}
btnAlphaPlus.addEventListener(MouseEvent.CLICK, alphaPlus);
function alphaPlus(e:MouseEvent):void {
if(clickCount>=10){
return;
}
writePercentAlpha+=10;
coloredRect.alpha=writePercentAlpha/100;
updateDisplay();
clickCount+=1;
}
btnReset.addEventListener(MouseEvent.CLICK, resetAll);
function resetAll(e:MouseEvent):void {
var curAlpha:String;
clickCount=0;
coloredRect.alpha=0;
writePercentAlpha=0;
curAlpha="coloredRect.alpha=" + String(Math.round(coloredRect.alpha*10000)/10000);
infoBox.text=curAlpha;
}
How about Using transform.colorTransform Instead?
It doesn't seem to make any difference. You can try to manipulate the alphaMultiplier of coloredRec.transform.colorTransform property but the results are identical. in fact, coloredRect.alpha IS coloredRect.transform.colorTransform.alphaMultiplier.
In case you wanted to experiment with assigning values to coloredRect.transform.colorTransform.alphaMultiplier it has to be done by creating a copy of the colorTransform object:
var ct:ColorTransform=coloredRect.transform.colorTransform;
ct.alphaMultiplier=0.1;
coloredRect.transform.colorTransform=ct;
trace(coloredRect.transform.colorTransform.alphaMultiplier).
You get 0.0977.
Download
- Download all the source files for this How-To: alpha.zip
