Tweener載入圖片特效

借一下Albert的網站來做個教學
http://www.albertlan.com/client/mocafusion/
點選網站WORKS選項
小圖被點下後, 開始載入圖片,
後方的背景會跟著縮放, 載入完成後, 會有一個亮度的效果
製作方法如下：

1.按下按鈕後, 開始載入指定的圖片
2.讓背景的黑色框縮小成280x22
讓進度bar縮小成2x20, 當縮小完成後, 開始指入圖片
3.載入進度同時, 讓進度bar縮放。
4.載入成功後, 讓進度bar縮放跟圖片一樣的寬高。
讓背景縮放比圖片的寬高都多出20。
同時讓圖片至中。
5.圖片由亮至沒有效果。

import caurina.transitions.Tweener;
//匯入Tweener
import caurina.transitions.properties.ColorShortcuts;
//匯入ColorShortcuts
ColorShortcuts.init();
//啟動ColorShortcuts.init函式
//這樣即可在Tweener裡來調整亮度。

var ldr:Loader = new Loader();
this.addChild(ldr);
//Loader物件, 載入圖片。
ldr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,progressHandler);
//偵聽載入進度。
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);
//偵聽完成進度

b0.addEventListener(MouseEvent.CLICK,clickHandler);
b1.addEventListener(MouseEvent.CLICK,clickHandler);
//偵聽場景上的按鈕。
function clickHandler (e:MouseEvent):void {
  if(e.currentTarget == b0){
    loadImage("1.jpg");
  }else{
    loadImage("2.jpg");
 }
}
function loadImage (pURL:String):void {
　//按下按鈕後。
　ldr.visible = false;
　//讓ldr不可見。
　Tweener.addTween(progress_mc,{
　　time:.7,
　　width:2,
　　height:20
　});
　//使用Tweener修改progress_mc的寬高。
　Tweener.addTween(bg_mc,{
　　time:.7,
　　width:280,
　　height:22,
　　onComplete:function(){
　　　ldr.load(new URLRequest(pURL));
　　}
　});
　//使用Tweener修改bg_mc的寬高, 完成後開始載入圖片。
}
function progressHandler(e:ProgressEvent):void {
　var _percentage:Number = e.bytesLoaded/e.bytesTotal;
　progress_mc.width = 280 * _percentage;
　//載入進度。
}
function completeHandler(e:Event):void {
　ldr.x = stage.stageWidth/2 - ldr.width/2
　ldr.y = stage.stageHeight/2 - ldr.height/2
　//載入完成後, 讓圖片置中
　Tweener.addTween(progress_mc,{
　　time:.7,
　　width:ldr.width,
　　height:ldr.height
　});
　//修改progress_mc的寬高，和圖片一樣。
　Tweener.addTween(bg_mc,{
　　time:.7,
　　width:ldr.width +20,
　　height:ldr.height +20,
　　onComplete:onTweenerComplete
});
}
function onTweenerComplete () {
　ldr.visible = true;
　//讓圖片出現。
　Tweener.addTween(ldr, {time:0, _brightness:2.5 } );
　//把亮度調高,再使用Tweener讓亮度變回0
　Tweener.addTween(ldr, {time:.8, _brightness:0 } );
}

附上AS2和AS3的原始碼
AS2_AS3_SourceCodeDown