Preload First Frame

Hướng dẫn tạo thanh loading bar first frame

* Xem kết quả tại đây!!

Bước 1:

_ Tạo FLA Document “Preload.fla”
_ Tạo 1 moviClip “preload”

  • Vẽ 1 hình chữ nhật kích thướt 400×4
  • Màu #666666
  • Vị trí (0,0)

01

_ Tạo 1 movieClip “preloader” trong movieClip này tạo 3 layer như sau:

  • layer 1 : kéo movie “preload” vừa tạo từ Library ra đặt tên là “fm_bar”
  • layer 2 : kéo movie “preload” từ Library đặt tên là “fm_bar_bg” . Lưu ý frame này nằm dưới frame 1
  • layer 3 : tạo 1 dynamic text đặt tên là “loader_info” font : Verdana – fontSize : 11

_ Trở về Scene chính kéo movie “preloader” từ thư viện ra đặt tên là “preLoad”

02

_ Ở frame 2 tạo 1 frame rỗng import 1 tấm hình bất kỳ vào tạo motion cho nó từ alpha=0 đến alpha=100

03

04

Bước 2:

_ Tạo file “LoadFirstFrame.as” trong thư mục “loader”

CODE:

package loader {
import flash.display.MovieClip;
import flash.events.Event;
import flash.text.TextField;

/**
* @author yoko
*/
public class LoadFirstFrame {
private var __root : MovieClip;
private var __bar : MovieClip;
private var __info : TextField;

public function LoadFirstFrame(movie : MovieClip) {
__root = movie;
__bar = __root.fm_bar;
__info = __root.loader_info;
__bar.addEventListener(Event.ENTER_FRAME, onProgressHandle);
}

private function onProgressHandle(evt : Event) : void {
var percent : Number = Math.floor(__root.stage.loaderInfo.bytesLoaded / __root.stage.loaderInfo.bytesTotal * 100);
__bar.scaleX = percent / 100;
__info.text = "Loading... " + percent + "%";
if(__root.stage.loaderInfo.bytesLoaded == __root.stage.loaderInfo.bytesTotal) {
__bar.removeEventListener(Event.ENTER_FRAME, onProgressHandle);
__root.play();
}
}
// end method
}
// end class
}

Bước 3:

_ Mở file “Preload.fla” tạo thêm 1 layer mới chọn frame 1 và code

CODE

import com.loader.LoadFirstFrame;
new LoadFirstFrame(preLoad);

05

_ Chọn frame cuối cùng tạo 1 frame rỗng gán lệnh stop();

06

_ Lưu file lại và nhấn Ctrl+enter 2 lần để chạy thử

Follow

Get every new post delivered to your Inbox.