05 November 2009

AS3.0 preloader part II : adding transparency

It occurred to me how it would be much better if loading bar and text field in as3.0 preloader from previous post change alpha during loading process. This is what I wanted to do: both elements (loading bar and text field) start with alpha zero, then it grows constantly to alpha 1 in a moment when 'percent' variable is 0.2 (which means loading bar is loaded 20%). After that alpha remains 1.0 until 'percent' is 0.8 and then starts to fade away so it has alpha 0.0 in a moment when loading is finished. Image explains this idea.

as3 preloader alpha hack

Code for this effect is simple one. Inside ProgressFunction add just few lines:

if (percent < 0.2) {
loadedTF.alpha = percent*5;
lBar.alpha = percent*5;
if (percent > 0.8) {
loadedTF.alpha = 1-(percent-0.8)*5;
lBar.alpha = 1-(percent-0.8)*5;

I'm not some math wizard, but this was really easy to conclude, I only had to draw the numbers on paper. So, it would be great if this works, but it doesn't. It needs one simple hack. Reason is this : as3.0 dynamic text field alpha hack . After I added blur filter to my text field everything worked, although I'm not quite OK with TF rendering quality.



Sam said...

nice! had a needed a preloader do this a few months ago and had a dirty work-around to do it - your implementation is much more efficient- good work!


template by blogger templates