GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 15 63. Chọn trên trình đơn Insert > New Symbol và đặt tên trong mục Name là Banh Xe Tro Ve, mục Behavior chọn Graphic. Sau đó chọn OK. 64. Cách làm cũng thực hiện tương tự như bạn làm cho hai bánh xe xoay theo cùng chiều kim đồng hồ. Nhưng ở đây chỉ có khác một chút là bánh xe chạy từ bên phải chạy sang. Vò trí ban đầu (ảnh bên trái) và vò trí kết thúc TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 342 GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 15 65. Bây giờ bạn nhấp chuột trở lại vùng làm việc chính. Sau đó bạn nhấp chuột vào keyframe thứ 71 trên Layer Banh Xe và nhấn phím F6. Kéo mục Hai Banh Xe Tro Ve 2 lần vào thay thế cho hai bánh xe đứng yên như đã nói trong các bước trên. Hai bánh xe mới vừa thay vào bằng bánh xe chuyển động trong Layer 71 66. Nhấp chuột tại keyframe thứ 71 trên Layer Duong Ray. Các đối tượng tại keyframe thứ 71 67. Nhấp chuột vào keyframe thứ 110 trên Layer Duong Ray, Layer Banh Xe và Layer Xe và nhấn phím F6 tiếp tục tạo các chuyển động cho các Layer này. Các keyframe vừa được tạo bằng cách nhấn phím F6 TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 343 GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 15 68. Nhấp chuột tại keyframe thứ 71 trên Layer Xe và nhấp phải chuột chọn lệnh Creat Motion Tween trong trình đơn Context. 69. Cuối cùng bạn nhấp chuột tại keyframe thứ 110 trên Layer Xe và di chuyển thùng xe đến vò trí như bạn đã đặt thùng xe trong keyframe đầu tiên. Các đối tượng tại keyframe cuối cùng (keyframe thứ 110) 70. Nhấp chuột tại keyframe thứ 110 tại Layer Banh Xe và di chuyển hai bánh xe đi theo thùng xe, hướng hai bánh xe hướng về điểm xuất phát đầu tiên. 71. Nhấn phím Ctrl + Enter để xem chúng diễn hoạt trong Flash Player. Trong khi xem chúng diễn hoạt không như mong muốn, có điều bất thường xảy ra. Bạn có thể trở lại Flash và xem từng vò trí nào đó không như mong muốn bạn có thể nhấn phím F6 tại keyframe đó và dùng các phím mũi tên để di chuyển chúng đến vò trí mong muốn. Chú ý : Trong khi đối tượng thùng xe di chuyển đến đâu thì các bánh xe luôn luôn di chuyển theo đến đó kể cả lúc chúng di chuyển sang phải rồi sang trái. TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 344 GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG 15 72. Sau đó bạn có thể trang trí thêm các đối tượng phụ tùy thích. Đối tïng chuyển động trong Flash Player Như vậy trong phần bài thực hành ở trên, các bạn vừa thực hiện công việc ghép từng đoạn phim ngắn lại với nhau tạo thành một đoạn phim lớn trên cùng một giao diện. Mà các đối tượng trong các đoạn phim ngắn chỉ có một. Flash đã hỗ trợ các chức năng chuyển động, từ đó bạn có thể thêm vào các đoạn chuyển cảnh cho các đoạn phim ngắn trước khi được kết hợp lại tạo thành một đoạn phim lớn hoàn chỉnh. Trong phần thực hành ở trên, là ví dụ cho các bạn thấy chức năng tạo ghép đối tượng, từng đoạn phim ngắn mà ở trong bài thực hành này là trong từng Behavior ở chế độ Symbol là Graphic, sau đó bạn dùng các Symbol Graphic này lại tạo thành một Symbol Graphic khác và cứ thể tiếp tục. Các Symbol Graphic cứ chất chồng lên nhau và cuối cùng chúng ta dùng từng đoạn Symbol Graphic riêng biệt để tạo thành một đoạn phim hoàn chỉnh. Đối tượng xe tải chuyển động đến một điểm nào đó rồi dừng lại thực hiện chức năng đổ hàng TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 345 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 XUẤT ĐOẠN PHIM Trong phần thực hành bạn sẽ ứng dụng một số chức năng của Flash để xuất đoạn phim chuyển động với các ký tự. Để thực hiện được phần bài tập này bạn hãy thực hiện theo các bước sau đây:  Khởi động Flash.  Tạo file mới có kích thước 100 x 100 px bằng cách chọn trên trình đơn Modify > Movie. Trong hộp thoại Movie Properties, nhập kích thước vào trong mục Dimension. Chọn trong hộp màu Background Color là màu đen cho màu nền. Chọn xong nhấp chuột vào nút OK.  Nhấp chọn tiếp trên trình đơn Insert > New Symbol, nhập các thuộc tính sau đây vào trong hộp thoại Symbol Properties.  Chọn công cụ Oval Tool và vẽ vào vùng làm việc vòng tròn với màu viền đỏ đậm và màu tô là màu vàng sáng. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 65 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 sẽ tạo nút bằng cách chọn trên trình đơn Insert > New Symbol, chọn các thuộc tính như sau trong hộp thoại Symbol Properties.  Chọn công cụ Oval Tool và vẽ vào vùng làm việc vòng tròn với màu viền và màu tô đều là màu trắng tại cả 3 frame Up, Over và Down. Frame Hit bạn có thể tạo đối tượng hoặc không cũng không cần thiết.  Bây giờ bạn tạo tiếp các đối tượng với thuộc tính là Graphic bằng cách nhấn phím tổ hợp Ctrl + F8 và nhấp chọn như sau:  Nhấp chọn tiếp công cụ Text Tool và nhập vào chuỗi ký tự “Xem” với màu tô là màu tím. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 66 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 Lặp lại các bước trên để tạo một đối tượng khác với chuỗi ký tự là “Học” với font chữ VNI-Helve có thuộc tính là Graphic.  Nhấn phím tổ hợp Ctrl + F8 để tạo một đối tượng có tên Ung dung.  Dùng công cụ Text Tool để nhập vào chuỗi ký tự “ứng dụng”, các thuộc tính font chữ bạn có thể xem hình sau: THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 67 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 Ctrl + B để tách ký tự thành đối tượng. Sau đó chọn tiếp trên trình đơn Window > Panels > Stroke, nhập giá trò 3 trong hộp Stroke height vào trong bảng Stroke.  Nhấp chuột vào công cụ Ink Bottle Tool trong bảng công cụ và nhấp chọn vào đường viền của các ký tự. Màu tô bên trong ký tự bạn nên chọn màu trắng và màu viền chọn màu tím. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 68 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 thêm một graphic khác có tên là Hoc ngay và nhập vào chuỗi ký tự “ngay những gì đã học”.  Nhấp chuột vào nút Scene1 để trở về giao diện chính và kéo đối tượng nút có tên Nut trong cửa sổ thư viện vào trong vùng làm việc tại Layer Nut. Nếu đối tượng vừa kéo lớn hơn kích thước vùng làm việc, bạn hãy dùng công cụ Scale của công cụ Arrow Tool để thu nhỏ kích thước lại. Vòng tròn màu trắng là đối tượng nút THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 69 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 Chú ý : Do kích thước giao diện rất nhỏ, bạn hãy dùng công cụ Zoom Tool để phóng lớn vùng làm việc giúp cho việc thao tác dễ dàng hơn.  Tạo mới Layer có tên Layer Vong Tron, kéo đối tượng vòng tròn màu vàng xuất hiện trong cửa sổ thư viện vào trong vùng làm việc. Bạn hãy sắp xếp đối tượng này sao cho nó có kích thước lớn hơn kích thước của nút.  Nhấp chọn vào frame 300 trên thanh thước Timeline và nhấn phím F5 trên Layer Vong Tron. Lặp lại thao tác này cho Layer còn lại.  Tạo mới Layer có tên Layer Hinh Anh, nhấp chuột vào frame thứ 90 và nhấn phím F6. Bây giờ bạn sẽ làm việc trên Layer này bằng cách dùng công cụ Text Tool nhập vào chuỗi ký tự “nhanh chóng - dễ dàng” ngay trên Layer này. THẾ GIỚI ĐỒ HỌA – TỦ SÁCH STK GIÁO TRÌNH ĐIỆN TỬ : SỬ DỤNG FLASH 5.0 70 . trái) và vò trí kết thúc TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY 34 2 GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5. 0 BẰNG HÌNH ẢNH CHƯƠNG 15 65. . GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5. 0 BẰNG HÌNH ẢNH CHƯƠNG 15 63. Chọn trên trình đơn Insert > New Symbol và đặt tên trong mục. : KS PHẠM QUANG HUY 34 3 GIÁO TRÌNH THIẾT KẾ WEB : PHẦN BÀI TẬP – TỰ HỌC MACROMEDIA FLASH 5. 0 BẰNG HÌNH ẢNH CHƯƠNG 15 68. Nhấp chuột tại keyframe thứ 71 trên Layer Xe và nhấp phải chuột chọn