Macromedia Flash - Thiết kế flash tải chương trình

Trong bài này, Quản Trị Mạng xin hướng dẫn tới bạn đọc cách thiết kế một giao diện đang tải chương trình bằng Actions Script. Có thể sử dụng tạo hình mẫu như trong bài hoặc tạo bất kỳ hình nào mà bạn muốn.

Bước 1

Mở Flash và tạo một file mới với kích thước 200x100px. Chọn màu nền là màu trắng và thiết lập Frame rate là 24, sau đó kích OK.

Bước 2

Sử dụng công cụ Oval Tool (O). Trong phần Colors của panel Tool, bỏ màu Stroke bằng cách kích vào biểu tượng chiếc bút nhỏ, sau đó chọn ô nhỏ có đường gạch chéo màu đỏ. Trong phần Fill color chọn màu #F80000 và vẽ 3 hình tròn như hình sau:

Bước 3

Sau khi vẽ xong 3 hình tròn, sử dụng công cụ Line Tool (N). Chọn màu nét vẽ là #F80000 và phần Solid là chọn nét vẽ với độ dày là 0.5.

Sau đó vẽ các hình sau

Bước 4

Sử dụng công cụ Paint Bucket Tool (K), tại phần Fill color chọn màu #F80000 và đổ màu cho hình đã tạo ở bước trước.

Bước 5

Nhấn phím Ctrl + A (Chọn toàn bộ) và sau đó nhấn phím F8 (Convert to Symbol) đê chuyển toàn bộ hình vẽ trên sang Movie Clip Symbol. Xem hình dưới.

Bước 6

Kích đúp vào movie clip bạn sẽ thấy phần bên trong của movie.

Bước 7

Kích đúp lên layer 1 để đổi tên. Kích vào frame 100 và nhấn phím F5. Sau đó tạo một layer mới ở trên layer của hình và đặt tên là mask.

Bước 8

Chọn layer mask, dùng công cụ Rectangle Tool (R). Trong phần Colors của panel Tool, bỏ màu của Stroke bằng cách kích vào biểu tượng chiếc bút nhỏ và sau đó vẽ một hình chữ nhật như hình dưới.

Bước 9

Kích lên frame 100 và nhấn phím F6. Sau đó dùng chuột hoặc phím mũi tên để kéo hình chữ nhật đè lên hình đã vẽ ban đầu.

Bước 10

Kích chuột phải vào bất cứ vị trí nào trên vùng màu xám giữa hai keyframe và chọn Create Motion Tween từ menu xuất hiện.

Bước 11

Chọn layer mask và chuyển nó sang dạng mặt nạ bằng cách kích chuột phải vào layer đó và chọn Mask.

Bước 12

Tạo một layer mới ở phía trên layer mask và đặt tên là percent (phần trăm)

Bước 13

Chọn layer percent và kích chọn công cụ Text tool (T). Vào Properties Panel (Ctrl + F3) ở phía dưới và chọn những tuỳ chọn như sau:

a) Chọn Dynamic Text

b) Chọn font Lucida Sans

c) Chọn cỡ chữ 11 và kiểu chữ đậm.

d) Chọn màu là #323232

e) Chọn Anti-alias for readability

f) Tại trường Var: nhập percen101

Sau đó nhập một vào một giá trị 99% ở bên dưới hình.

Bước 14

Trở lại scene chính (Scene1)

Bước 15

Chọn công cụ Selection Tool (V), kích một lần lên preloader để chọn nó và mở phần Action Script Panel (F9). Sau đó đưa vào đoạn mã sau:

onClipEvent (load) {
total = _root.getBytesTotal();
}

onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded();
percent = int(loaded/total*100);
percen101 = ""+percent+"%";
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}

Vậy là chúng ta đã hoàn thành phần preloader. Để xem nó hoạt động như thế nào, kích vào frame đầu tiên và lại sử dụng công cụ Action Script Panel để đưa mã sau vào:

stop ();

Sau đó tạo một layer mới ở trên layer preloader, kích lên frame thứ hai và nhấn phím F6. Sau đó, Import, đặt vị trí, tạo hiệu ứng, ảnh, movie. Và kích một lần nữa vào frame thứ hai, nhập lệnh stop(); vào phần Action panel. Hãy thử chạy file đã tạo hoặc download file mẫu tại đây.