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.. Do có kích thước nhỏ nên preloader s
Trang 1Bài 16: Tìm hiểu về Preloader
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:
Trang 2Học Adobe Flash CS4 cơ bản
Để 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
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:
Trang 3Bạ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)
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
Trang 4Học Adobe Flash CS4 cơ bản
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:
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
Trang 5- 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
Trang 6Học Adobe Flash CS4 cơ bản
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)
Trang 7Như 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:
Trang 8Học Adobe Flash CS4 cơ bản
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
Trang 9Mục Allow 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
Nếu ảnh gốc không phải dạng JPEG thì mục này sẽ là Use publish setting:80
Trang 10Học Adobe Flash CS4 cơ bản
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
1 Lossless (PNG/GIF): Bạn bấm chọn menu xổ xuống và chọn mục này nếu muốn
áp dụng chế độ nén không suy giảm chất lượng:
Bấm nút Test để xem thử kết quả ở khung Preview và xem kích thước file sau khi
nén ở dòng cuối của hộp thoại:
Trang 11Bấm nút OK để chấp nhận các thông số mới
Bấm nút Cancel để hủy bỏ các thay đổi
Bấm nút Update để cập nhật ảnh nếu bạn đã dùng Photoshop hoặc một phần
mềm đồ họa nào đó chỉnh sửa ảnh gốc
Bấm nút Import… để sử dụng một ảnh mới thay thế cho ảnh hiện hữu (như trong
bài thực hành)
Bấm nút Test để xem thử kết quả ở khung Preview
Bấm nút Advanced để thiết lập các thông số nâng cao (Sẽ được giới thiệu ở các
bài thực hành nâng cao)
