THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY Vẽ vào vùng làm việc đối tượng hình trụ thẳng đứng có kích thước nhỏ, dùng công cụ Zoom Tool để phóng lớn vùng làm việc để vẽ đối tượng như hình bên. Màu viền đối tượng không có, màu tô giống với màu của các hình trụ trước đó. Nhấp chuột vào nút Scene1 để trở về vùng làm việc chính. Nhấp chuột vào công cụ Rectangle Tool và vẽ vào vùng làm việc đối tượng hình vuông có màu đỏ sậm (giá trò màu hexa là #D00000), không có màu viền. Nhấp chuột vào frame 20 và nhấn phím F6, nhấp chuột trở lại keyframe đầu tiên và chọn trên trình đơn Window > Panels > Frame. Trong mục Tweening chọn chế độ Shape. Nhấp chuột vào keyframe 20 và dùng công cụ Scale kéo kích thước của đối tượng hình vuông dài ra để trở thành hình chữ nhật. Đối tượng đang ở chế độ phóng lớn THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 91 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY Bây giờ bạn hãy nhấn phím Enter để xem đoạn phim diễn hoạt. Tạo mới Layer thứ hai và kéo biểu tượng graphic Ong nho trong cửa sổ thư viện vào trong vùng làm việc. Dùng công cụ Scale để xác đònh hai đối tượng trong hai lớp Layer đều bằng nhau, đối tượng trong Layer có thể lớn hơn một chút. Vò trí bên phải của đối tượng trong hai lớp Layer Đối tượng tổng thể ở chế độ phóng đại 400% Nhấp chuột vào keyframe thứ nhất của Layer2 (đối tượng ống nhỏ dài) và chọn trong trình đơn Window > Panels > Effect. Nhấp chọn hiệu ứng Alpha trong bảng Effect có giá trò là 50 để làm mờ chế độ màu của đối tượng. Khi đó bạn sẽ thấy lớp màu đỏ bên dưới trong lớp Layer1. Đối tượng mờ dần khi chọn hiệu ứng Alpha Nhấp chọn tạo mới Layer3 và kéo biểu tượng graphic Thanh ong vào trong vùng làm việc. Thay đổi kích thước của đối tượng sao cho lỗ rỗng của nó lọt vào đúng vò trí của đối tượng trong lớp Layer2. Tạo mới Layer4 và kéo biểu tượng Cham tron vào trong vùng làm việc từ cửa sổ thư viện. Phóng lớn vùng làm việc và đặt đối tượng nằm bên trái thanh ngang, sao đó copy THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 92 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY đối tượng chấm tròn này bằng cách nhấp đối tượng và nhấn phím Ctrl để tạo bản sao của đối tượng. Đặt đối tượng chấm tròn thứ hai bên trái đối tượng chấm tròn thứ nhất. Kéo biểu tượng Tru dung trong cửa sổ thư viện vào vùng làm việc đặt kế bên hai chấm tròn trước đó. Sao chép đối tượng này để có một bản sao cùng kích thước đặt kế bên như trong hình sau. Lặp lại các bước trên cho góc bên phải của đối tượng thanh nằm ngang. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 93 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY Thu nhỏ đối tượng Nhấp chuột chọn trên trình đơn Control > Test Movie để kiểm tra đoạn phim. Đoạn phim đang diễn hoạt trong Flash Player Tương tự như trên bạn hãy làm đoạn phim khác, cách thực hiện cũng giống như bài này nhưng bạn hãy xoay đối tượng cho nó thẳng đứng và vùng màu chuyển động theo hai hướng ngược chiều nhau nếu bạn tạo ra hai đối tượng. Chúc các bạn thành công. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 94 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY TẠO HIỆU ỨNG DẠNG SÓNG MỜ TRÊN KÝ TỰ Có nhiều cách tạo hiệu ứng trên chuỗi ký tự thông qua các chương trình Swish hay Flax rất nổi tiếng (Tủ sách STK sẽ biên soạn tài liệu hướng dẫn trong đầu năm 2002), trong bài thực hành này bạn sẽ dùng hiệu ứng biến dạng đối tượng (văn bản) từ Flash để tạo ra đoạn phim hiển thò chuỗi ký tự mong muốn. Mặc dầu việc thực hành trên Flash khó thực hiện hơn so với hai chương trình nêu trên nhưng qua thực hành các bạn sẽ hiểu rõ hơn với các công cụ của Flash, bạn hãy làm theo các bước hướng dẫn sau đây: Khởi động chương trình Flash, khi đó bạn sẽ làm việc trên một file mới hoàn toàn. Bây giờ bạn hãy nhấp chọn trên trình File > Save để lưu file này với tên là HIEU- UNGKYTU trong hộp thoại Save As. Nhấp chọn công cụ Text Tool trong bảng công cụ và chọn màu tô cho ký tự trong hộp màu Fill Color là màu xám với giá trò màu hexa là #C0C0C0. Nhập vào một ký tự mong muốn với các thuộc tính như sau : THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 24 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY Để tạo cho ký tự biến dạng theo cách chuyển động Shape, bạn phải chuyển đổi ký tự trở thành đối tượng bằng cách chọn trên trình đơn Modify > Break Apart. Nhấp chọn tiếp trên trình đơn Window > Panels > Frame để xuất hiện bảng Frame. Trong mục Tweening nhấp chọn tùy chọn Shape. Nhấp chọn vào frame thứ 10 và nhấn phím F6 để thêm frame chuyển động. Nhấp chọn vào keyframe 10 này, sau đó chọn màu tô cho đối tượng là màu đen. Dùng các đường guideline để xác đònh vò trí cuối cùng của đối tượng tại keyframe thứ 10 này. Nhấp chuột trở lại vò trí keyframe đầu tiên và dùng công cụng Arrow Tool để chọn công cụ Scale. Sau đó kéo kích thước của đối tượng lớn hơn kích thước ban đầu. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 25 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY Nhấn phím Enter để kiểm tra đối tượng chuyển động. Khi đối tượng chuyển động sẽ biến đổi từ màu xám sang màu đen. Bây giờ bạn sẽ tạo tiếp các ký tự khác trên Layer khác. Cách thực hiện cũng tương tự như trên nhưng sẽ khác một chút, bạn có thể thực hiện tiếp như sau: Tạo mới Layer có tên là Layer2 (theo mặc đònh). Nhấp chuột vào frame thứ 5 và nhấn phím F6 để bắt đầu làm việc tại keyframe này. Dùng công cụ Text Tool nhập vào ký tự trên Layer2 (ủ) kế tiếp ký tự trong Layer1 (T) này với các thuộc tính màu, font chữ, kích thước chữ đều giống như ký tự trước đó. Chọn trên trình đơn Modify > Break Apart để chuyển đổi ký tự trở thành đối tượng. Bạn hãy di chuyển đối tượng sao cho nó nằm đúng vò trí cuối cùng của ký tự trong Layer1. Vì vậy trước đó bạn phải sử dụng đến đường guideline như đã nói ở trên. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 26 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY Nhấp chọn vào bảng Frame (trình đơn Window > Panels > Frame), chọn các thuộc tính như trong các bước trước đó. Lúc này bạn sẽ thấy xuất hiện đường chuyển động, nhấp chuột vào keyframe 15 trên Layer2 sau đó nhấn phím F6. Chọn màu tô là màu đen để tô màu cho đối tượng tại keyframe cuối cùng này. Cách thực hiện giống như ký tự T trong Layer1. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 27 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY Nhấp chuột trở lại frame đầu tiên (frame thứ 5) của Layer2 và dùng công cụ Arrow Tool, chọn công cụ Scale đến thay đổi kích thước của đối tượng. Sau đó di chuyển đối tượng này sao cho nó nằm chồng lấp một góc phải của ký tự. Kéo kích thước đối tượng Chú ý : Do một số frame trên Layer1 ít hơn số frame trong Layer2 vì vậy bây giờ thêm vào số frame trên cả hai Layer để sau này nếu bạn có thể thêm số Layer vào nữa thì cũng chẳng có ảnh hưởng gì đến số frame này. Bạn phải xác đònh số frame cần thêm vào là bao nhiêu dựa vào số Layer thêm vào trên ký tự. Vì mỗi một ký tự nằm trên một Layer và mỗi một ký tự sẽ chuyển động 10 frame như bạn đã thực hiện từ trước đến giờ. Do trong bài ví dụ này chúng ta sẽ tạo chuyển động chuỗi ký tự “Tủ Sách STK” chỉ có chín ký tự, bạn sẽ chọn đến frame 55. Nhấp chuột vào keyframe cuối cùng của Layer1 và trong mục Tweening chọn chế độ None. Nhấp chuột vào frame 55 và nhấn phím F6 để thêm vào số lượng frame như đã nói trong phần chú ý ở trên. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 28 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY Bây giờ bạn hãy làm lại các bước trên cho Layer2 để có được số frame như hình. Bây giờ bạn hãy tạo mới Layer thứ 3 có tên là Layer3, nhấn phím F6 tại frame 10 và dùng công cụ Text Tool để nhập vào ký tự kế tiếp (S). Nhớ nhấn phím tổ hợp Crl + B để chuyển đổi ký tự thành đối tượng. Ký tự sau khi nhập Nhấp chuột vào frame 20 và nhấn phím F6, nhấp chuột tiếp trở lại frame 10 trên Layer3 và chọn màu Fill Color là màu xám có giá trò hexa là # C0C0C0 sau đó chọn hiệu ứng trong bảng Frame là Shape. Khi đó keyframe của bạn sẽ xuất hiện giống như hình sau. Chú y ù : Để chọn màu chính xác, bạn hãy nhập giá trò màu Hexa trong hộp thoại màu Fill Color hoặc Stroke Color. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 29 . STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 24 THIẾT KẾ WEB – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY Để tạo cho ký tự biến dạng theo cách chuyển động. 5.0 BẰNG HÌNH ẢNH BIÊN SOẠÏN : KS PHẠM QUANG HUY Nhấn phím Enter để kiểm tra đối tượng chuyển động. Khi đối tượng chuyển động sẽ biến đổi từ màu xám sang màu đen. Bây giờ bạn sẽ tạo. vào keyframe 20 và dùng công cụ Scale kéo kích thước của đối tượng hình vuông dài ra để trở thành hình chữ nhật. Đối tượng đang ở chế độ phóng lớn THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH