07/05/2010 10:57 GMT+7

Flash CS4 - Bài 16: Tìm hiểu về Preloader

GV TRƯƠNG VĂN NĂNGCông ty TNHH Khải Thiên (KTC Co., Ltd)

TTO - Áp dụng color effect để tạo slideshow (Phần lý thuyết bổ sung cho bài thực hành).

Nếu bạn truy cập Internet ở máy sử dụng đường truyền có tốc độ chậm, thông thường bạn phải chờ một lúc mới thấy đủ nội dung của trang web cần xem. Nếu trang web có sử dụng Flash, có thể bạn chỉ thấy một khung màu trắng xuất hiện, sau đó một lúc mới thấy được nội dung Flash hiện lên ở khung này.

Để giúp cho người truy cập đỡ sốt ruột khi xem phải trang web có Flash mà phải chờ lâu, bạn sử dụng preloader.

Preloader thường là một Movie Clip có kích thước thật nhỏ được đặt ở keyframe đầu của một Flash document. Do có kích thước nhỏ nên preloader sẽ được tải về ngay và chạy ngay, trong khi các phần khác của tác phẩm sẽ được tải dần về máy của người xem.

Trong bài thực hành trước, preloader của bạn là một Movie Clip chứa vòng tròn xoay liên tục. Như vậy, khi khách truy cập vào trang web chứa Flash của bạn, preloader sẽ được tải về ngay và vòng tròn xoay liên tục để thông báo cho khách biết là tác phẩm đang được tải về. Ưu điểm của preloader trong bài này là khách truy cập chỉ phải chờ một lúc cho trình duyệt tải các ảnh đầu, trong lúc Flash play các ảnh đầu thì các ảnh sau tiếp tục được tải về và play tiếp. Bạn sẽ tạo các preloader phức tạp hơn khi thực hành các bài có sử dụng actionscript sau này.

Khi bạn đang biên soạn Flash trên máy, do nội dung của Flash movie thu được ở ngay trên máy bạn nên bạn chỉ thấy kết quả ngay mà không nhìn thấy hiệu ứng của preloader:

Phóng to

Để thấy được hiệu ứng của preloader bạn chọn View Simulate Download từ menu (hoặc phím tắt Ctrl+Enter):

Lưu ý: Bạn phải chọn từ menu của Flash Player lúc bạn đang xem tác phẩm chạy.

Phóng to

Simulate Download giúp bạn giả lập đường truyền có tốc độ thấp để thấy được hình ảnh preloader hoạt động. Khi đó bạn sẽ thấy vòng tròn của preloader xoay liên tục, sau đó sẽ thấy hoạt động của slideshow:

Phóng to

Bạn có thể thay đổi thông số giả lập tốc độ đường truyền thông qua menu View Download Settings. Trong ảnh minh họa, thông số đang được chọn là modem quay số loại 56K (4.7KB/s).

Phóng to

Ngoài các thông số giả lập tốc độ đường truyền mặc định, bạn cũng có thể tự thiết lập thông số thông qua tùy chọn Customize…. Bạn điền thông tin vào các ô tương ứng của Menu text và Bit rate rồi bấm nút OK để chấp nhận giá trị mới.

Phóng to

Bạn cũng có thể xem thông tin chi tiết tác phẩm thông qua mục View Bandwidth Profiler từ menu:

Phóng to

Trong ví dụ này, ở ô bên trái bạn có các thông tin sau đây:

- Dim: 320x240pixels: kích thước tác phẩm của bạn tính theo pixel.

- Fr rate: 24.0 fr/sec: tốc độ hoạt động của tác phẩm 24 khung hình/ giây.

- Size: 93 KB (95865 B): kích thước file chiếm trên ổ cứng.

- Duration: 286 fr (11.9s): độ dài tác phẩm tính theo frame và giây.

- Preload: 332 fr(13.8s): tổng thời gian bạn phải chờ đến khi Flash bắt đầu play. Giá trị này thay đổi phụ thuộc vào tốc độ giả lập mà bạn chọn.

- Bandwidth: 4800B/s (200B/fr): tốc độ đường truyền đang giả lập.

- Frame: 1: frame hiện hành

- Loaded:46.9 % (0 frames): % dữ liệu được tải về, giá trị này sẽ thay đổi liên tục khi xem.

Ở khung bên phải bạn thấy được kích thước của từng frame. Ví dụ như frame 1 có kích thước khoảng 2KB, frame 2 có kích thước khoảng 64KB. Các frame tiếp theo có kích thước rất nhỏ.

Các frame có kích thước vượt quá vạch màu đỏ sẽ bị chậm lại khi tải về lần đầu. Trong ví dụ này, frame 2 sẽ bị chậm lại khi tải về, kết quả là bạn thấy preloader xoay liên tục khi Flash chạy đến đây. Sau khi tải xong, Flash chạy qua frame này đến các frame tiếp theo sau, đồng thời tiếp tục tải các frame khác về.

Các ô màu xanh lá cây thể hiện các frame đã được tải về. Ô này đang ở frame 1 vì Flash đang tải nội dung của frame 2 chưa xong. Khi Flash tải xong frame nào, ô màu xanh sẽ lan tỏa đến frame đó. Hình tam giác trên ô màu xanh chính là Playhead. Nếu để ý, bạn sẽ thấy Playhead hoạt động đều theo tốc độ đã thiết lập. Khi đến frame có kích thước lớn, playhead sẽ dừng lại chờ flash tải nội dung của frame đó về. Sau đó playhead tiếp tục di chuyển theo tốc độ đã thiết lập trong khi các ô màu xanh lan tỏa rất nhanh sang phải.

Phóng to

Nếu bạn không nhìn thấy từng frame như trong hình minh họa ở trên. Đó là do tùy chọn Streaming Graph đã được chọn trước đó: (chọn View Streaming Graph từ menu)

Phóng to

Như vậy để đảm bảo nhìn thấy kích thước từng frame, bạn phải chọn View Frame By Frame Graph từ menu:

Phóng to

Tìm hiểu về Bitmap Properties

Khi bạn bấm đúp vào biểu tượng bitmap ở Library, hôp thoại Bitmap Properties xuất hiện:

Bên trái hộp thoại là khung Preview của ảnh. Nếu ảnh có kích cỡ lớn, khi bạn đưa chuột vào khung Preview, chuột biến thành bàn tay và bạn có thể kéo chuột để chuyển đến vùng ảnh cần xem.

Ở giữa là khu vực chứa thông tin về ảnh:

Ô trên cùng là tên ảnh trong Library, bạn có thể đổi tên cho phù hợp với nội dung tấm ảnh.

Phía dưới ô tên là đường dẫn chứa ảnh.

Tiếp đến là ngày cập nhật, kích thước ảnh.

MụcAllow smoothing: chọn mục này giúp ảnh trông mượt hơn. Thông thường nếu bạn không thay đổi kích cỡ ảnh (scale) thì không cần chọn mục này. Nếu có thay đổi kích cỡ để tạo animation thì nên chọn mục này để giúp làm mượt các vùng bị răng cưa do hiệu ứng scale.

Mục Compression: Chọn cách nén ảnh. Có hai phương án:

1. Photo (JPEG): phương án này có các tùy chọn bổ sung cho mục chất lượng (Quality) là:

1.1 Use imported JPEG data: sử dụng chất lượng ảnh gốc, không cần nén thêm.

Phóng to

Nếu ảnh gốc không phải dạng JPEG thì mục này sẽ là Use publish setting:80.

Phóng to

1.2 Custom: thiết lập thông số nén theo ý bạn. Bạn gỏ số vào ô Custom và bấm nút Test để xem thử chất lượng ảnh ở khung Preview bên trái. Kích thước ảnh sau khi nén được thể hiện ở dòng cuối cùng của hộp thoại bao gồm chất lượng nén, kích thước gốc và kích thước sau khi nén. Mục Enable deblocking chỉ xuất hiện khi bạn chọn Custom và xuất tác phẩm cho Flash Player 10. Khi được nén cao (gía trị tại ô Custom nhỏ) chất lượng ảnh giảm và xuất hiện các ô mờ trong ảnh. Bạn chọn mục Enable deblocking để làm mượt các ô này.