Bài tập Flash 5: Tạo trình bảo vệ màn hình

THIẾT KẾ WEB - TỰ HỌC MACROMEDIA FLASH BẰNG HÌNH ẢNH BIÊN SOẠ�N : KS PHẠM QUANG HUY


TẠO TRÌNH BẢO VỆ MÀN HÌNH

Trong bài thực hành này bạn sẽ tạo ra một chương trình bảo vệ màn hình giống như Screen Saver của Window. Bài thực hành này rất dễ thực hiện, bạn chỉ cần tạo một vài đối tượng ở chế độ graphic và sau đó ghép thành Movie Clip là xong. Các bước thực hiện được tiến hành như sau:
?? Chọn trên trình đơn Modify > Movie, sau đó nhấp chọn tiếp trong hộp màu Background Color và chọn màu đen làm màu nền.






















?? Tạo file mới và nhấp chọn vào trình đơn Insert > New Symbol, chọn các thuộc tính trong hộp thoại Symbol Properties như sau:






?? Nhấp chọn vào công cụ Brush Tool trong bảng công cụ và chọn tiếp trong mục Brush Size để xác định kích thước của cọ vẽ nhỏ nhất có trong hộp chọn. Bây giờ bạn nhấp chọn trong hộp màu Fill Color là màu trắng.

THẾ GIỚI ĐỒ HỌA - TỦ SÁCH STK 31 GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH



THIẾT KẾ WEB - TỰ HỌC MACROMEDIA FLASH BẰNG HÌNH ẢNH BIÊN SOẠ�N : KS PHẠM QUANG HUY














?? Sau khi xác định xong các thuộc tính cho cây cọ vẽ, bây giờ bạn hãy vẽ vào vùng làm việc để tạo các chấm điểm thưa thớt.












?? Nhấp chọn tiếp vào mục Brush Size để chọn kích thước cọ vẽ lớn hơn kích thước cọ đã chọn trong bước trước đó. Sau đó vẽ vào một vài điểm ngẫu nhiên để thấy được các chấm lớn và nhỏ nằm rải rác nhau.













?? Nhấp chuột tiếp vào trình đơn Insert > New Symbol để tạo mới một đoạn Movie Clip.


THẾ GIỚI ĐỒ HỌA - TỦ SÁCH STK 32 GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH



THIẾT KẾ WEB - TỰ HỌC MACROMEDIA FLASH BẰNG HÌNH ẢNH BIÊN SOẠ�N : KS PHẠM QUANG HUY







?? Nếu thư viện chưa hiển thị trong vùng làm việc, bạn hãy nhấn phím Ctrl + L để mở cửa sổ và nhấp chuột vào ảnh graphic Ngoi sao trong cửa sổ thư viện kéo vào vùng làm việc.














?? Chọn công cụ Scale trong vùng công cụ Arrow Tool để kéo kích thước của đối tượng này nhỏ lại.










?? Nhấp phải chuột tại keyframe thứ nhất, chọn lệnh Create Motion Tween có trong trình đơn.












THẾ GIỚI ĐỒ HỌA - TỦ SÁCH STK 33 GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 


THIẾT KẾ WEB - TỰ HỌC MACROMEDIA FLASH BẰNG HÌNH ẢNH BIÊN SOẠ�N : KS PHẠM QUANG HUY
?? Nhấp chuột tiếp vào frame 30 và nhấn phím F6. Sau đó kéo đối tượng bằng công cụ Scale tại keyframe cuối cùng để có kích thước lớn nhất nếu có thể.






























?? Nhấn phím Enter để xem đoạn phim diễn hoạt. Bạn thấy đoạn phim như thế nào?
?? Nhấp chọn tiếp trên trình đơn Insert > New Symbol để tạo thêm một đoạn Movie Clip khác có tên Sao bay.






?? Nhấp chuột vào cửa sổ thư viện và kéo ảnh graphic Ngoi sao vào trong vùng làm việc. Sau đó nhấp chọn vào công cụ Scale để kéo nhỏ kích thước đối tượng.
Chú ý : Bạn có thể dùng các đường guideline để xác định vị trí của đối tượng đầu tiên để sau này khi bạn tạo ra nhiều lớp và xác định kích thước của đối tượng trên các lớp đều bằng nhau.



THẾ GIỚI ĐỒ HỌA - TỦ SÁCH STK 34 GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 


THIẾT KẾ WEB - TỰ HỌC MACROMEDIA FLASH BẰNG HÌNH ẢNH BIÊN SOẠ�N : KS PHẠM QUANG HUY



















?? Nhấp chuột vào keyframe thứ nhất và kéo keyframe này đến vị trí thứ 30. Sau đó bạn hãy nhấp chọn tại frame 34 và nhấn phím F6.













?? Nhấp chuột tiếp vào keyframe cuối vào kéo sang frame thứ 35 để tạo một frame trống tại frame 34.






?? Tạo mới Layer thứ hai và nhấp chuột tại frame thứ 25, sau đó nhấn phím F6. Bây giờ bạn hãy kéo ảnh graphic Ngoi sao vào trong Layer2 này sao cho hai điển khai báo trùng với

THẾ GIỚI ĐỒ HỌA - TỦ SÁCH STK 35 GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH



THIẾT KẾ WEB - TỰ HỌC MACROMEDIA FLASH BẰNG HÌNH ẢNH BIÊN SOẠ�N : KS PHẠM QUANG HUY
nhau và dùng công cụ Scale để thụ nhỏ kích thước đối tượng trong lớp này cho bằng kích thước của đối tượng trước. Bạn có thể dựa vào đường guideline để xác định đúng vị trí trước đó.

























?? Tạo mới Layer3 và nhấp chọn vào keyframe 20 và nhấn phím F6. Sau đó kéo ảnh graphic Ngoi sao vào trong frame này, các bước khác thực hiện tương tự như bạn đã làm trước đó.






















THẾ GIỚI ĐỒ HỌA - TỦ SÁCH STK 36 GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH



THIẾT KẾ WEB - TỰ HỌC MACROMEDIA FLASH BẰNG HÌNH ẢNH BIÊN SOẠ�N : KS PHẠM QUANG HUY
?? Bạn hãy thực hiện tiếp các bước trên cho các Layer4, Layer5, Layer6 và Layer7. Mỗi Layer cứ cách nhau 5 frame.
Bạn có thể xem hình minh họa để xác định được số frame chính xác.















?? Tạo mới thêm một Layer nữa có tên là Layer Ngoi sao nho, sau đó dùng công cụ Brush Tool để tạo một loạt các ngôi sao nhỏ màu trắng trong nền màu đen. Cách thực hiện này giống như bạn đã thực hiện trên Symbol Ngoi sao lúc đầu.
Khi đó bạn sẽ có các ngôi sao nhỏ như hình sau:



































THẾ GIỚI ĐỒ HỌA - TỦ SÁCH STK 37 GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 


THIẾT KẾ WEB - TỰ HỌC MACROMEDIA FLASH BẰNG HÌNH ẢNH BIÊN SOẠ�N : KS PHẠM QUANG HUY
?? Nhấp đúp chuột trở lại frame 34 trống của Layer1 và nhấp chọn trong bảng Frame Actions lệnh GO TO bằng cách nhấp đúp chuột bên danh sách lệnh Basic Actions.

















?? Khi đó bạn sẽ có mã lệnh như sau : gotoAndPlay (1);
















?? Nhấp chọn vào trong vùng Frame bên dưới bảng Frame Actions và nhập vào giá trị 20 thay cho giá trị 1. Bây giờ bạn sẽ có mã lệnh là :
gotoAndPlay (20);












THẾ GIỚI ĐỒ HỌA - TỦ SÁCH STK 38 GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH



THIẾT KẾ WEB - TỰ HỌC MACROMEDIA FLASH BẰNG HÌNH ẢNH BIÊN SOẠ�N : KS PHẠM QUANG HUY


















?? Bây giờ frame 34 sẽ xuất hiện biểu tượng hình chữ "a" cho biết rằng frame này có gán lệnh.












?? Nhấp chuột vào nút Scene1 bên góc trái phía trên của tên Layer để trở về giao diện chính của Flash.



















THẾ GIỚI ĐỒ HỌA - TỦ SÁCH STK 39 GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH



THIẾT KẾ WEB - TỰ HỌC MACROMEDIA FLASH BẰNG HÌNH ẢNH BIÊN SOẠ�N : KS PHẠM QUANG HUY
?? Bây giờ bạn hãy nhấp chuột vào Movie Clip Ngoi sao và Sao bay hiển thị trong cửa sổ thư viện, kéo vào trong vùng làm việc. Bạn hãy sắp xếp instance Sao bay sao cho nó nằm giữa Movie Clip Ngoi sao.






















?? Nhấp chọn trên trình đơn Control > Test Movie để xem đoạn phim diễn hoạt. Khi đó bạn sẽ thấy đoạn phim này diễn hoạt giống như trình bảo vệ màn hình Starfield Simulation của hệ điều hành Windows.














Chú ý : Số lượng ngôi sao xuất hiện trên màn hình diễn hoạt nhiều hay ít là do bạn vẽ trong ảnh graphic Ngoi sao.



THẾ GIỚI ĐỒ HỌA - TỦ SÁCH STK 40 GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 


THIẾT KẾ WEB - TỰ HỌC MACROMEDIA FLASH BẰNG HÌNH ẢNH BIÊN SOẠ�N : KS PHẠM QUANG HUY
Khi đó bạn có thể hiệu chỉnh lại đoạn phim này bằng cách thêm vào dòng chữ chạy ngang qua màn hình bằng cách nhấn phím Ctrl + F8 để đặt tên cho đoạn Movie Clip trong hộp thoại Symbol Properties.








Dùng công cụ Text Tool nhập vào chuỗi ký tự "Chương trình bảo vệ màn hình
Startfield Simulation". Sau đó tạo chuyển động cho chuỗi ký tự này là Create Motion Tween.









Trở lại giao diện chính và kéo đoạn phim Movie Clip này từ trong cửa sổ thư viện vào vùng làm việc.




















Đoạn phim đang diễn hoạt trong chế độ Flash Player
Bạn cũng có thể thay đổi màu các ngôi sao sao cho khi diễn hoạt đoạn phim bạn sẽ thấy xuất hiện nhiều ngôi sao đủ màu trên vùng màn hình màu đen. Chúc các bạn thành công.

THẾ GIỚI ĐỒ HỌA - TỦ SÁCH STK 41 GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH