I was just finishing the header flash for this blog. It might look simple from outside, judging that I’m only playing around w/ three pictures and it’s alpha. Well, making such an animation with motion tweens wouldn’t be so hard. But how can you make such animation with only three frames, without any existing movieClip animations

I create two empty movieClips instances first, named pic1 and pic2. These instances will then load custom pictures. To load, I use the MovieClipLoader object

var img_mcl:MovieClipLoader = new MovieClipLoader();
img_mcl.loadClip(pict[pictidx], pic1);

where img_mcl is the MovieClipLoader object, and pict[pictidx] is part of the picture’s name array. And next I load the clip with .loadClip function.

Why MovieClipLoader? Well, movieClipLoader has this cool method so you can execute actionscript at the events of loading a clip. This is useful when u are loading a custom clip, which u cannot guess on the size. Check out this next code :

var loadListener:Object = new Object();
loadListener.onLoadComplete = function(target_mc:MovieClip, httpStatus:Number):Void {
trace(”load pic1 completed”);
}
img_mcl.addListener(loadListener);

MovieClipLoader can be added a Listener object , which has .onLoadComplete method - used to execute actionScript on completion of certain object download, in this case, the img_mcl as the downloader.
Next, is to add action to the clip once it completed downloading. I’m using .onEnterFrame method (movieclip’s method) to replace onClipEvent(enterFrame), which usually used. By using .onEnterFrame, I can define the actions that mast be done everytime a movieclip’s enters a frame. It has ame effect with the onClipEvent(enterFrame), it can be written anywhere, including in a frame actionScript, unlike onClipEvent(enterFrame), which has to be written inside a movieClip script. So what I exactly do after the picture is downloaded is to play with it’s alpha. I added this code inside the .onLoadComplete function :

pic1._alpha=0;
pic1.onEnterFrame=function():Void{
pic1._alpha=pic1._alpha+1;
if (pic1._alpha>=100){
pic1._alpha=100;
trace(”maxAlpha pic1 achieved”);
if (_root.nTimer>=_root.maxTimer){
_root.nTimer=0;
_root.pictidx=_root.pictidx+1;
if(_root.pictidx>=_root.pict.length){
_root.pictidx=0;
}
_root.gotoAndStop(3);
}
};
}
pic2.onEnterFrame=function():Void{
pic2._alpha=pic2._alpha-1;
if (pic2._alpha<=0){
pic2._alpha=0;
};
}

The code meant to change pic1’s alpha gradually to visible, and pic2′ alpha gradually to invisible. So that’s it, you got yourself an animated alpha picture without making a single tween in your flash.

To understand this more, you might wanna download the source code for this header.