Giáo trình Thiết kế hoạt hình - Trình độ: Cao đẳng - Trường Cao đẳng kỹ thuật công nghệ

Nội dung text: Giáo trình Thiết kế hoạt hình - Trình độ: Cao đẳng - Trường Cao đẳng kỹ thuật công nghệ

1. BM/QT10/P.ĐTSV/04/04 Ban hành lần: 3 UBND TỈNH BÀ RỊA – VŨNG TÀU TRƯỜNG CAO ĐẲNG KỸ THUẬT CÔNG NGHỆ GIÁO TRÌNH MÔ ĐUN: THIẾT KẾ HOẠT HÌNH NGHỀ: CÔNG NGHỆ THÔNG TIN TRÌNH ĐỘ: CAO ĐẲNG (Ban hành kèm theo Quyết định số: /QĐ-CĐKTCN ngày .tháng .năm của Hiệu trưởng Trường Cao đẳng Kỹ thuật Công nghệ BR – VT) BÀ RỊA-VŨNG TÀU, NĂM 2020
2. TUYÊN BỐ BẢN QUYỀN Nhằm đáp ứng nhu cầu học tập và nghiên cứu cho giảng viên và sinh viên nghề Công nghệ Thông tin trong trường Cao đẳng Kỹ thuật Công nghệ Bà Rịa – Vũng Tàu, chúng tôi đã thực hiện biên soạn tài liệu Thiết kế hoạt hình Flash này. Tài liệu được biên soạn thuộc loại giáo trình phục vụ giảng dạy và học tập, lưu hành nội bộ trong Nhà trường nên các nguồn thông tin có thể được phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo. Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu lành mạnh sẽ bị nghiêm cấm. 1
3. LỜI GIỚI THIỆU Giáo trình “Thiết kế hoạt hình Flash” được biên soạn trên khung chương trình đào tạo Cao đẳng nghề Công nghệ thông tin đã được Trường Cao đẳng Kỹ thuật Công nghệ Bà Rịa – Vũng Tàu phê duyệt. Giáo trình đề cập đến những nội dung chi tiết nhất, trọng tâm nhất cung cấp những kiến thức và kỹ năng tới người học đáp ứng nhu cầu thực tế của doanh nghiệp. Giáo trình Thiết kế hoạt hình Flash là công cụ để phát triển các ứng dụng như thiết kế các phần mềm mô phỏng. Hướng dẫn chi tiết để tạo các tương tác, các hoạt cảnh trong phim hoạt hình và có thể nhúng các file âm thanh, hình ảnh động lên trang Web. Nội dung giáo trình được chia làm 18 bài: Bài 1: Khởi đầu với Adobe Flash Bài 2:Sử dụng các công cụ vẽ Bài 3:Sử dụng các công cụ chọn và tô màu Bài 4: Các biểu tượng symbol Bài 5: Thao tác với timeline Bài 6: Tạo hoạt hình Frame by frame và Classic Tween Bài 7: Tạo hoạt hình Classic Tween, Guide Bài 8: Tạo hoạt hình Motion Tween Bài 9: Tạo hoạt hình Shape Tween. Sử dụng Shape hint Bài 10: Sử dụng mặt nạ (mask) Bài 11: Các công cụ tạo hoạt hình: bone, deco, bind, 3D Bài 12: Điều khiển Chuột và Bàn phím bằng các sự kiện Bài 13: Tạo các banner quảng cáo bằng biến đổi hình dạng, mặt nạ, biến đổi chuyển động Bài 14: Vẽ giao diện các trang web (trang intro, trang chủ, các trang chi tiết, ) Bài 15: Tạo các movie clip và các nút bấm liên kết đặt lên trang Bài 16: Gán âm thanh, lện action script cho các nút bấm Bài 17: Chuyển file phim thành Video Flash 2
4. Bài 18: Publish ra Shockwave Flash và HTML Trong quá trình biên soạn giáo trình, tác giả đã cố gắng cập nhật thông tin mới, đồng thời tham khảo nhiều giáo trình khác, nhưng chắc chắn sẽ không tránh khỏi những hạn chế nhất định. Rất mong nhận được ý kiến đóng góp của các nhà chuyên môn, đồng nghiệp và các bạn độc giả để giáo trình được hoàn thiện hơn. Bà Rịa – Vũng Tàu, ngày tháng năm 2020 Tham gia biên soạn 1. Nguyễn Bá Thủy – Chủ biên 3
5. MỤC LỤC LỜI GIỚI THIỆU 2 MỤC LỤC 4 BÀI MỞ ĐẦU: KHỞI ĐẦU VỚI ADOBE FLASH 10 1. Giới thiệu giao diện Adobe Flash 10 2. Các thao tác cơ bản trên file: Tạo mới, lưu, đóng, mở 11 Câu hỏi ôn tập, bài tập 14 BÀI 1: SỬ DỤNG CÁC CÔNG CỤ VẼ 15 1. Công cụ vẽ: Pencil, Brush, Eraser, AirBrush, Line 15 1.1. Công cụ Pencil: 15 1.2. Công cụ Brush 16 1.3. Công cụ Erase 16 2. Rectangle, Oval, PolyStar, Text 16 2.1. Công cụ Rectangle 16 2.2. Sử dụng công cụ Oval ( ) 18 2.3. Sử dụng công cụ PolyStar ( ) 20 2.4. Sử dụng công cụ Text (T) 22 Câu hỏi ôn tập, bài tập 22 BÀI 2: SỬ DỤNG CÁC CÔNG CỤ CHỌN VÀ TÔ MÀU 23 1. Công cụ Pen, Selection Tool, subselection, Free Transform 23 1.1. Pen Tool ( ): dùng tạo các nét thẳng hoặc cong. 23 1.2. Selection Tool ( ): Di chuyển phần đối tượng được chọn 25 1.3. Subselection Tool ( ): Làm biến dạng đối tượng 25 1.4. Free Transform Tool ( ): Di chuyển đối tượng được chọn 26 2. Công cụ tô màu Paint Bucket, Eye dropper 27 2.1. Bucket Tool ( ): dùng tô màu các hình được tạo ra từ đường viền (màu bên trong hình). 27 2.2. Eye dropper ( ): 28 3. Công cụ Gradient Transform ( ) 28 4
6. Câu hỏi ôn tập, bài tập 28 BÀI 3: CÁC BIỂU TƯỢNG SYMBOL 32 1. Biểu tượng Graphic, Button, MovieClip 32 2. Làm việc với thư viện Library 37 3. Làm việc với Common Library 38 Câu hỏi ôn tập, bài tập 39 BÀI 4: THAO TÁC VỚI TIMELINE 41 1. Giới thiệu timeline 41 2. Vai trò trong xử lý hoạt hình 43 3. Xử lý hoạt hình cho đối tượng 46 Câu hỏi ôn tâp, bài tập 47 BÀI 5: TẠO HOẠT HÌNH BẰNG FRAME BY FRAME VÀ CLASSIC TWEEN 48 1. Hoạt hình Frame by frame 48 2. Hoạt hình Classic Tween 50 Câu hỏi ôn tập, bài tập 52 BÀI 6: TẠO HOẠT HÌNH THEO ĐƯỜNG DẪN 53 1. Giới thiệu hoạt hình theo đường dẫn 53 2. Thao tác hoạt hình theo đường dẫn 53 Câu hỏi ôn tập, bài tập 54 BÀI 7: TẠO HOẠT HÌNH VỚI MOTION TWEEN 56 1. Mô tả cơ chế 56 2. Hoạt hình Motion Tween 57 3. Tạo chuyển động nhờ vào Motion Presets 58 Câu hỏi ôn tập, bài tập 59 BÀI 8: TẠO HOẠT HÌNH VỚI SHAPE TWEEN 60 1. Mô tả cơ chế 60 2. Các bước sử dụng Shape Tween. 60 3. Sử dụng Shape hint 61 Câu hỏi ôn tập, bài tập 62 BÀI 9: SỬ DỤNG SỬ DỤNG MẶT NẠ (MASK) 64 1. Mặt nạ (mask) 64 2. Sử dụng mặt nạ động 64 3. Sử dụng mặt nạ biến hình 65 5
7. 4. Tạo SlideShow ảnh 67 Câu hỏi ôn tập, bài tập 70 BÀI 10: CÁC CÔNG CỤ TẠO HOẠT HÌNH: BONE, DECO, BIND, 3D 71 1. Bone Tool 71 2. Công cụ Bind Tool 75 3. Công cụ 3D 75 Câu hỏi ôn tập, bài tập 81 BÀI 11: ĐIỀU KHIỂN CHUỘT VÀ BÀN PHÍM BẰNG CÁC SỰ KIỆN 82 1. Sự kiện Chuột 82 2. Sự kiện Bàn phím 83 3. Đưa một đối tượng vào ActionScript 83 Câu hỏi ôn tập, bài tập 85 BÀI 12: TẠO CÁC BANNER QUẢNG CÁO 88 1. Giới thiệu banner quảng cáo 88 2. Tạo các banner quảng cáo bằng biến đổi hình dạng, mặt nạ 89 3. Tạo banner quảng cáo bằng các biến đổi chuyển động 94 Câu hỏi ôn tập, bài tập 96 BÀI 13: VẼ GIAO DIỆN CÁC TRANG WEB 97 1. Mô tả giao diện 97 2. Chuẩn bị công cụ vẽ 98 3. Thiết kế và vẽ 99 Câu hỏi ôn tập, bài tập 100 BÀI 14: TẠO CÁC MOVIE CLIP VÀ CÁC NÚT BẤM 101 1. Tạo các movie clip đặt lên trang 101 2. Tạo các nút bấm liên kết 105 Câu hỏi ôn tập, bài tập 108 BÀI 15: TẠO ÂM THANH, XỬ LÝ ÂM THANH 109 1. Xử lý âm thanh 109 2. Xử lý âm thanh 110 Câu hỏi ôn tập, bài tập 111 BÀI 16: CHUYỂN FILE PHIM THÀNH VIDEO FLASH 112 1. Chọn file phim 112 2. Chuyển file phim thành flash 112 6
8. Câu hỏi ôn tập, bài tập 114 BÀI 17: PUBLISH RA SHOCKWAVE FLASH VÀ HTML 115 1. Chọn banner 115 2. Chọn vị trí phù hợp trên trang 115 3. Publish để xuất bản tập tin 116 Câu hỏi ôn tập, bài tập 117 TÀI LIỆU THAM KHẢO 118 7
9. GIÁO TRÌNH MÔ ĐUN Tên môn học/mô đun: THIẾT KẾ HOẠT HÌNH FLASH Mã môn học/mô đun: MĐ17 Vị trí, tính chất, ý nghĩa và vai trò của môn học/mô đun: - Vị trí: Môn học được bố trí sau khi học sinh học xong các môn học chung, các môn học, mô đun kỹ thuật cơ sở, photoshop và học trước các môn thiết kế và lập trình Web, lập trình Windows. - Tính chất: Là mô đun kết hợp làm công cụ cho các môn lập trình giao diện, làm baner động cho trang web, banner quảng cáo. Flash là công cụ để phát triển các ứng dụng như thiết kế các phần mềm mô phỏng. Sử dụng ngôn ngữ lập trình ActionScript để tạo các tương tác, các hoạt cảnh trong phim hoạt hình. - Ý nghĩa và vai trò của môn học/mô đun: Flash là công cụ để phát triển các ứng dụng như thiết kế các phần mềm mô phỏng. Sử dụng ngôn ngữ lập trình ActionScript để tạo các tương tác, các hoạt cảnh trong phim. Điểm mạnh của Flash là có thể nhúng các file âm thanh, hình ảnh động. Người lập trình có thể chủ động lập các điều hướng cho chương trình. Flash cũng có thể xuất bản đa dạng các file kiểu html, exe, jpg, để phù hợp với các ứng dụng của người sử dụng như trên Web, CD, Mục tiêu của mô đun: - Về kiến thức: + Trình bày được các kiến thức căn bản về công cụ xử lý hoạt hình; các kiến thức cơ sở về hoạt hình và đồ họa trên vi tính. + Giải thích được các kiến thức cơ sở về hình ảnh tĩnh, hình động, video, audio, nền tảng làm phim hoạt hình. + Giải thích được Flash là công cụ được tạo ra để giúp các chuyên viên và kỹ thuật viên tạo ra các ứng dụng Flash (Hình ảnh động). + Ứng dụng được các kiến thức cơ bản về công cụ và các sự kiện tích hợp sẵn để xử lý hình ảnh, xử lý âm thanh, dựng video; các kiến thức cơ bản về chế bản 8
10. banner, logo; các kiến thức cơ bản về thiết kế website để thiết kế các website cơ bản. - Về kỹ năng: + Cài đặt và sử dụng được phần mềm Flash các phiên bản theo yêu cầu thực tế. + Giao tiếp, tìm hiểu, nắm bắt được nhu cầu của khách hàng, tư vấn cho khách hàng, hình thành sản phẩm theo yêu cầu của khách hàng. + Khai thác được Internet, tra cứu được tài liệu tiếng Việt hoặc tiếng Anh phục vụ cho yêu cầu công việc. + Thiết kế website flash, làm banner, logo động cho website. + Làm game, E-card, E-Calalog. + Dựng phim hoạt hình trên nền flash. + Làm hình động cho điện thoại di động. + Làm các CD tương tác với ưu điểm là file siêu nhẹ, tương thích rất tốt với Photoshop và Illustrator để dùng làm hình minh họa, phù hợp với xu hướnng website tương tác với giao diện đẹp hiện nay. - Về năng lực tự chủ và trách nhiệm: + Làm việc độc lập trong điều kiện nơi làm việc, chịu trách nhiệm về sản phẩm thiết kế flash của cá nhân đối với sản phẩm được giao phù hợp với pháp luật. + Hướng dẫn, giám sát những người khác thực hiện công việc theo kế hoạch đã định sẵn. + Đánh giá hoạt động của nhóm và kết quả thực hiện. Nội dung của mô đun: 9
11. BÀI MỞ ĐẦU: KHỞI ĐẦU VỚI ADOBE FLASH Mã bài: 17.01 Giới thiệu: Flash là công cụ để phát triển các ứng dụng như thiết kế các phần mềm mô phỏng. Sử dụng ngôn ngữ lập trình ActionScript để tạo các tương tác, các hoạt cảnh trong phim. Điểm mạnh của Flash là có thể nhúng các file âm thanh, hình ảnh động. Người lập trình có thể chủ động lập các điều hướng cho chương trình. Flash cũng có thể xuất bản đa dạng các file kiểu html, exe, jpg để phù hợp với các ứng dụng của người sử dụng như trên Web, CD. Mục tiêu: - Khởi động được Adobe Flash CS6 - Trình bày được các đối tượng trên không gian làm việc - Sắp xếp không gian làm việc đúng, hợp lý người sử dụng - Lưu đúng tên theo yêu cầu - Rèn luyện tính cẩn thận, tư duy sáng tạo Nội dung chính: 1. Giới thiệu giao diện Adobe Flash Khi khởi động lần đầu tiên, Flash CS6 có giao diện như sau: 10
12. Hình 1.1. Cửa sổ khởi động Flash Vùng khoanh tròn màu đỏ ở hình trên có chữ ESSENTIALS. Đây là vùng làm việc (workspace) mặc định khi khởi động Flash CS6 lần đầu. Có nhiều vùng làm việc khác nhau để chọn lựa tùy theo thói quen và sở thích của từng người, ví dụ như đối với người đã từng sử dụng Flash có thể chọn vùng làm việc CLASSIC. Khi bấm vào chữ ESSENTIALS đề cập ở trên, Flash sẽ xổ xuống một menu cho bạn chọn lựa vùng làm việc như sau: Hình 1.2. Menu lựa chọn vùng làm việc Để giúp làm quen với Flash không gặp khó khăn trong việc thiết lập vùng làm việc, bạn sẽ thực hành dựa trên vùng làm việc mặc định. 2. Các thao tác cơ bản trên file: Tạo mới, lưu, đóng, mở Dùng chuột bấm vào nút Flash File (ActionScript 3.0): Hình 1.3. Chọn ActionScrip 3.0 Flash sẽ tạo ra một file mới có tên là Untitled-1: 11
13. Hình 1.4. Tạo tên file flash (Xem thêm phần Flash document và Flash movie ở phần kế tiếp) Lưu một flash document: Tất cả các bài thực hành được lưu vào một folder chính để tiện cho việc quản lý. Sẽ tạo một folder mới có tên FLASH CS4 ONLINE, sau đó lưu file này lại với tên 001_frame_by_frame.fla trong folder vừa tạo ra, sau đó sẽ thực hành tiếp. Cách làm như sau: Chọn File > Save: Hình 1.5. Chọn lưu tập tin Ở hộp thoại mới mở ra, bấm nút Create New folder: 12
14. Hình 1.6. Chọn khu vực lưu Một folder mới được tạo ra với tên mặc định là New Folder. Hình 1.7. Chọn thư mục lưu Đổi tên lại thành FLASH CS4 ONLINE. Hình 1.8. Chọn lưu đúng tên Di chuyển vào bên trong folder này và đặt tên file là 001_frame_by_frame.fla, xong bấm vào nút Save để lưu lại. 13
15. Hình 1.9. Lưu đúng định dạng file Nội dung cần thể hiện trong các tiểu mục/tiểu tiêu đề gồm: - Làm quen với một số khái niệm cơ bản về đồ họa, cái khái niệm về Flash. - Tìm hiểu về một số vùng chức năng của Flash. Các vùng chức năng này được bố trí trong menu Windows. - Tùy biến giao diện cho phù hợp với chính bạn. Câu hỏi ôn tập, bài tập 1.1. Trình bày sự khác nhau giữa đồ họa điểm và đồ họa flash. 1.2. Nêu khái niệm về Layer, Frame, Scene và Movie. 1.3. Nêu tác dụng các vùng chức năng cơ bản của flash CS6. 1.4. Mở tập tin mới và lưu vào thư mục BaiTapFlash với tên “BaiTapFlash.fla” 14
16. BÀI 1: SỬ DỤNG CÁC CÔNG CỤ VẼ Mã bài: 17.1 Giới thiệu: Sử dụng thành thạo các công cụ trong Flash, chúng ta đã làm quen và sử dụng thành thạo các công cụ vẽ hình cơ bản trong Flash. Với các công cụ vẽ này, sẽ sử dụng nó một cách thuần thục. Khi sử dụng các công cụ cũng cần quan tâm đến các thao tác đồng hành với nó. Mục tiêu: - Trình bày rõ công dụng các công cụ vẽ - Thao tác vẽ cho đối tượng hình cơ bản - Rèn luyện tính cẩn thận, tư duy sáng tạo Nội dung chính: 1. Công cụ vẽ: Pencil, Brush, Eraser, AirBrush, Line 1.1. Công cụ Pencil: Hình 1.1. Công cụ Pencil Đối với công cụ Pencil, bạn có thể dùng để vẽ các đối tượng bằng tay. Các thuộc tính tương ứng với công cụ Pencil mà bạn có thể hiệu chỉnh là: - Stroke color: màu sắc của nét vẽ. 15
17. - Stroke: kích thước của nét vẽ. - Style: dạng thức của nét vẽ - đường liền nét, đứt nét 1.2. Công cụ Brush Cũng tương tự công cụ Pencil, Brush cũng được dùng để vẽ. Chỉ có một khác biệt là nét vẽ của Brush không bao gồm viền chỉ có màu nền, còn Pencil thì ngược lại chỉ có màu viền không có màu nền. Các thuộc tính của Brush bao gồm: - Fill color: chọn màu cho nét vẽ brush. - Smoothing: độ mềm dẻo cho nét vẽ. Hình 1.2. Công cụ Smoothing 1.3. Công cụ Erase Công cụ dùng để tẩy xóa các nét vẽ. 2. Rectangle, Oval, PolyStar, Text 2.1. Công cụ Rectangle Sử dụng công cụ Rectangle vẽ hình chữ nhât, hình vuông (bấm giữ phím Shift) trên cửa sổ làm việc. Khi bấm vào biểu tượng công cụ Rectangle, trong bảng thuộc tính Properties của nó, ta chú ý đến các thuộc tính sau đây: 16
18. - Stroke color: chọn màu viền cho nét vẽ. - Fill color: chọn màu nền cho nét vẽ. - Stroke: kích thước của nét vẽ. Hình 1.3. Công cụ Rectangle - Style: dạng thức của nét vẽ. - Scale: độ kéo dãn của hình được vẽ. Nó có thể là None, Normal, Horizontal hoặc Vertical – tương ứng với không kéo giãn, kéo giãn bình thường, kéo giãn theo chiều ngang và theo chiều dọc. - Hinting: giúp bảo vệ nét vẽ ở đường cong khỏi bị mờ. - Cap: thiết lập dạng thức cho đường kết thúc. - Join: xác định cách mà hai phân đoạn của đối tượng nối với nhau. - Mitter: điều khiển độ sắc nét của Mitter, khi Cap được chọn là Mitter. - Rectangle Option: cho phép hiệu chỉnh góc tròn cho hình chữ nhật. Nếu bạn chọn Lock Corner Radius Controls to one Control – giúp bạn cho phép chỉnh góc tròn của hình chữ nhật theo dạng 4 góc đồng thời hay riêng lẻ - tức là khi bạn hiệu chỉnh độ cong của một góc, các góc khác cũng sẽ sao chép số liệu của góc hiệu chỉnh này. Các số liệu 4 góc ở phía trên tương ứng với độ cong của các góc. Bạn 17
19. có thể nhập số liệu vào các ô được cung cấp sẵn, hoặc sử dụng thanh trượt ở phía bên dưới để hiệu chỉnh độ cong các góc cho hình chữ nhật cong này. - Reset: đưa về các số liệu tùy chỉnh mặc định cho các góc tròn. 2.2. Sử dụng công cụ Oval ( ) Hình 1.4. Công cụ vẽ hình tròn Sử dụng công cụ Oval ( ) vẽ hình elip trên cửa sổ làm việc, Giữ phím Shift + di chuột để vẽ hình tròn. Hình 1.5. Công cụ Oval Trong bảng thuộc tính Properties, ta có các tùy chọn sau đây: - Stroke color: chọn màu cho nét vẽ. - Fill color: chọn màu nền cho hình thể. - Stroke: chọn kích thước của nét vẽ. 18
20. - Scale: độ kéo dãn của hình được vẽ. Nó có thể là None, Normal, Horizontal hoặc Vertical. - Hinting: giúp bảo vệ nét vẽ ở đường cong khỏi bị mờ. - Cap: thiết lập dạng thức cho đường kết thúc. - Join: xác định cách mà hai phân đoạn của đối tượng nối với nhau. - Mitter: điều khiển độ sắc nét của Mitter, khi Cap được chọn là Mitter. - Oval Option: góc mở Start Angle và góc đóng End Angle giúp tạo hình Oval nhờ vào sự giới hạn của hai góc này. Góc mở Start Angle quay theo chiều kim đồng hồ, lấy vị trí gốc là vị trí góc 900, số đo của góc chính là số đo góc của phần bị khuyết. Góc đóng End Angle quay theo chiều ngược kim đồng hồ, số đo góc phần bị khuyết là góc bù 2 của góc này (tức 360-góc đóng). Ví dụ, khi thiết lập góc mở Start Angle là 600, ta thu được hình như sau: Hình 1.6. Hình tạo bởi góc mở Trong hình này, góc khuyết có số đo là 600. Góc khuyết sẽ được lấy từ vị trí 900 và quay theo chiều kim đồng hồ. Nếu ta thiết lập góc đóng End Angle là 600, ta sẽ thu được hình như sau: Hình 1.7. Hình tạo bởi góc đóng Trong hình này, góc khuyết có số đo là 3600-600=3000, hay phần hình thể chiếm 600. Góc khuyết sẽ được lấy từ vị trí 900 và quay theo chiều ngược kim đồng hồ. 19
21. Tương tự như trên, ta có thể kết hợp hình thể có số đo góc đóng 600 và góc mở 1200. Ta sẽ thu được hình thể bên dưới. Phần hình thể được vẽ ra là sự kết hợp của cả hai hình tạo bởi góc đóng và góc mở như trên. Hình 1.8. Hình tạo bởi góc đóng và góc mở - Inner Radius: độ lớn bán kính của đường tròn bên trong. Đây là cách thức để tạo hình vành khăn. Hình vành khăn là hình được tạo bởi hai đường tròn đồng tâm, những phần chồng khít nhau sẽ bị loại bỏ. - Close Path: có tác dụng đối với hình thể tạo bởi góc đóng và góc mở. Nó sẽ tự động làm cho các đường kết nối trở nên liền mạch. Hình 1.9. Hình tạo bởi góc mở 600 và kết hợp với tùy chọn Close Path Hình bên trái không kích hoạt Close Path. Hình bên phải kích hoạt Close Path. Như ta thấy, với tùy chọn Close Path, hình thể sẽ được khép kính và thuộc tính Fill Color mới có tác dụng. 2.3. Sử dụng công cụ PolyStar ( ) Dùng để vẽ đa giác và hình sao. Khi bấm chọn công cụ này, ta chú ý các tùy chọn trong bảng thuộc tính Propeties. - Fill color: chọn màu nền cho vật thể. 20
22. - Stroke color: chọn màu viền cho nét vẽ. Hình 1.10. Công cụ PolyStar - Stroke: chọn kích thước cho nét vẽ. - Style: chọn dạng thức cho nét vẽ. - Cap: thiết lập dạng thức cho đường kết thúc. - Join: xác định cách mà hai phân đoạn của đối tượng nối với nhau. - Hinting: giúp bảo vệ nét vẽ ở đường cong khỏi bị mờ. - Mitter: điều khiển độ sắc nét của Mitter, khi Cap được chọn là Mitter. - Tool Setting: thiết lập các tùy chọn nâng cao. Khi bấm vào nút Option, sẽ hiện ra hộp thoại sau Hình 1.11. Thiết lập PolyStar Trong đó: 21
23. + Style: lựa chọn hình dạng của đa giác là đa giác lồi hay hình sao. + Number of Sides: số lượng các cạnh đa giác (hay số lượng cánh hình sao). + Star point size (SPS): tỉ lệ giữa khoảng cách từ tâm của hình sao đến đỉnh lõm của hình sao và khoảng cảnh từ tâm của hình sao đến đỉnh lồi của hình sao. Tỉ lệ này nằm trong dải từ 0 1. Nếu tỉ lệ này càng lớn (càng gần 1) thì hình sao càng mập, ngược lại, nếu tỉ lệ này càng nhỏ thì hình sao càng gầy. Hình 1.12. Hình sao mập (tỉ lệ SPS = 0.9) và hình sao gầy (tỉ lệ SPS = 0.1) 2.4. Sử dụng công cụ Text (T) Chức năng chính: viết chữ trong flash Kết hợp cùng bảng Properties để điều chỉnh (font, màu sắc, kích thước vị trí, ) Có 3 định dạng kiểu văn bản: Hình 1.13. Công cụ văn bản Câu hỏi ôn tập, bài tập 1.1. Vẽ hình tròn, hình vuông, hình ngôi sao, hình quạt có màu stroke và fill khác nhau. 1.2. Sử dụng công cụ để tách Stroke và Fill của các đối tượng trên. 22
24. BÀI 2: SỬ DỤNG CÁC CÔNG CỤ CHỌN VÀ TÔ MÀU Mã bài: 17.2 Giới thiệu: Sử dụng thành thạo các công cụ chọn và tô màu trong Flash, sẽ giúp tạo các đối tượng đồ họa đẹp mắt, phục vụ cho mục đích tạo hoạt hình về sau. Các công cụ hỗ trợ trong Flash, hoàn toàn có thể tạo dựng những đối tượng đồ họa đỉnh cao. Mục tiêu: - Trình bày được công dụng các công cụ tô màu - Thao tác tô màu cho đối tượng hình cơ bản - Rèn luyện tính cẩn thận, tư duy sáng tạo Nội dung chính: 1. Công cụ Pen, Selection Tool, Subselection, Free Transform 1.1. Pen Tool ( ): dùng tạo các nét thẳng hoặc cong. Công cụ này dùng để vẽ các đường đa giác bằng cách tạo các điểm điều khiển, sau đó, tự động nối các điểm này lại với nhau. Các thông số liên quan đến công cụ này hoàn toàn tương tự với công cụ Line. Khi sử dụng công cụ Pen, bạn cũng lưu ý rằng, nếu bạn tạo hình thể có dạng đường thẳng, bạn chỉ việc nhấp vào nút đầu và nút cuối. Nếu bạn muốn tạo dạng đường cong, mà cần rê chuột liên tiếp để hiệu chỉnh đường điều khiển của nó. Hình 2.1. Công cụ Pen 23
25. Công cụ Add Anchor Point và Delete Anchor Point : Công cụ Add Anchor Point dùng để bổ sung thêm điểm điều khiển cho đường Bezier, ngược lại, Delete Anchor Point xóa bớt đi các điểm điều khiển cho đường Bezier. Để bổ sung thêm điểm điều khiển, ta chỉ việc chọn công cụ Add Anchor Point, sau đó bấm vào một vị trí trên đường biên. Để xóa đi điểm điều khiển, ta chỉ việc chọn công cụ Delete Anchor Point, sau đó bấm vào một điểm điều khiển cần xóa bỏ. Việc bổ sung và xóa bỏ các điểm điều khiển rất hữu ích trong việc tạo các đường uốn. Với các đường uốn đặc thù, ta cần bổ sung vào một số lượng điểm điều khiển tối ưu cho việc hiệu chỉnh. Ta có thể lấy ví dụ: đối với đường Parabol, ta chỉ cần ba điểm điều khiển; với đường đồ thị hàm số đa thức bậc ba ta cần bốn điểm điều khiển. Các điểm điều khiển là các điểm nằm trên đường biên. Những điểm không nằm trên đường biên là các điểm thuộc đường điều khiển. Hình 2.2. Hình các điểm điều khiển Công cụ Convert Anchor Point : Dùng để chuyển đổi điểm điều khiển góc cạnh thành điểm điều khiển uốn cong. Ngoài ra nó còn có chức năng hiệu chỉnh góc uốn nhờ vào các đường điều khiển. Chức năng này tương đối giống với chức năng hiệu chỉnh góc cạnh của công cụ SubSelection. Nhưng điểm khác biệt ở chỗ, công cụ Convert Anchor Point hiệu chỉnh các đường điều khiển một cách độc lập (tại một điểm điều khiển có hai 24
26. đường điều khiển bên trái và bên phải. Công cụ này hiệu chỉnh các đường điều khiển bên trái và bên phải một cách riêng biệt.), trong khi đó công cụ SubSelection hiệu chỉnh đồng thời hai đường điều khiển này (điểm uốn đối xứng). Để chuyển đổi điểm điều khiển góc cạnh thành điểm uốn cong, ta chỉ việc chọn công cụ và nhấp vào điểm cần chuyển đổi. Để hiệu chỉnh góc xoay cho các đường điều khiển, ta chỉ việc xoay các đường điều khiển. Hình 2.3. Công cụ Convert Anchor Point 1.2. Selection Tool ( ): Di chuyển phần đối tượng được chọn Hình 2.4. Công cụ Selection Với công cụ này, bạn có thể chọn đối tượng, một phần đối tượng bằng cách kích đôi chuột vào nó hoặc bôi đen một phần của nó. Bạn có thể kéo giãn, uốn các biên của hình thể (khi con trỏ chuột đặt ở các biên của hình và nó có dạng như biểu tượng Selection bổ sung thêm đường cong màu đen). 1.3. Subselection Tool ( ): Làm biến dạng đối tượng 25
27. Nhấp chọn biểu tượng SubSelection, sau đó bấm vào đối tượng. Khi đó, đường viền của đối tượng sẽ hiệ ra các đường Bezier cấu thành nên vật thể. Các điểm được đánh dấu bằng chấm tròn được gọi là các điểm điều khiển đường Bezier. Với công cụ này, ta có thể hiệu chỉnh vị trí của các điểm này. Điểm điều khiển trong đường Bezier cũng chia làm hai nhóm: nhóm điểm góc cạnh và nhóm điểm uốn cong. Bạn có thể nhận thấy chúng – hình vuông, chữ nhật tạo nên từ các điểm góc cạnh; đường tròn, eclipse được tạo từ các điểm uốn cong. Hình 2.5. Công cụ SubSelection 1.4. Free Transform Tool ( ): Di chuyển đối tượng được chọn Hình 2.6. Công cụ Free Transform Đây là công cụ để tinh chỉnh góc cạnh, xoay đối tượng. Khi bấm chọn biểu tượng này, sau đó chọn đối tượng, ta có thể thay đổi sự dịch chuyển tương đối của các phần đối tượng. Khi đó, ta đặt trỏ chuột theo cách cạnh của đối tượng và dịch chuyển nó. Nếu muốn phóng to, thu nhỏ đối tượng, ta chỉ đặt trỏ chuột vào các nút của đối tượng, và kéo ra ngoài nếu muốn tăng kích thước, và kéo vào trong 26
28. nếu muốn làm giảm kích thước. Nếu muốn xoay đối tượng, ta nhấn vào nút ở các góc của đối tượng, và xoay đối tượng. Khi làm việc với các đối tượng bằng công cụ này bạn cần lưu ý đến một chức năng xoay đối tượng. Hình 2.7. Thay đổi tâm xoay của đối tượng 2. Công cụ tô màu Paint Bucket, Eyedropper 2.1. Bucket Tool ( ): dùng tô màu các hình được tạo ra từ đường viền (màu bên trong hình). Đây là công cụ dùng để đổ màu nền cho vật thể. Khi kích vào biểu tượng này trên thanh công cụ, trên bảng thuộc tính Properties sẽ hiện ra các thông số liên quan đến công cụ này: - Fill color: đổ màu nền cho đối tượng. Để đổ màu bên trong đối tượng, bạn cần lưu ý rằng khung viền bao quanh nó cần phải kín. Nếu có một khoảng hở trên đường viền này, thì công cụ không hoạt động (khác với các trình biên tập khác, thường thì trong trường hợp này, công cụ sẽ đổ màu lên cả những phần liền kềnó). Đó cũng chính là ưu điểm của công cụ này trong Flash của Adobe. Với công cụ này, bạn có thể tạo ra những hiệu ứng màu phức tạp. Nó hỗ trợ các chế độ màu RGB, HSL, chế độ màu Alpha, chế độ không màu, màu dạng kiểu cầu vồng. Bảng màu của Paint Bucket không cho phép bạn hiệu chỉnh dải màu cầu vồng với các màu tùy chọn, để làm điều này bạn cần kết hợp với bảng màu đầy đủ (Windows>Color). Trong hộp thoại màu này, cho phép bạn có thể sử dụng các kiểu pattern, bitmap và dải màu cầu vồng tùy chọn để đổ màu nền cho đối tượng. Nhưng bạn cũng lưu ý rằng, nó cần kết hợp với công cụ Paint Bucket này. 27
29. Hình 2.8. Công cụ Paint Bucket 2.2. Eyedropper ( ): Dùng cho phép lấy mẫu tô, kiểu đường nét của 1 đối tượng rồi áp dụng mẫu tô đó cho 1 đối tượng khác. (chọn 1 mẫu rồi quét vào 1 mẫu khác). Đây là công cụ dùng để lấy thông số màu tại một vị trí trên đối tượng. Ta chỉ việc chọn biểu tượng, sau đó kích vào một vị trí nào đó trên bức ảnh (vị trí mà ta cần lấy thông số màu), khi đó, thông số màu nền mặc định sẽ là màu của vị trí vừa kích vào. 3. Công cụ Gradient Transform ( ) Flash hỗ trợ 2 loại kiểu màu gradient: Linear: hòa trộn màu theo cách đồng dạng theo một đường thẳng đi theo một hướng hoặc một góc xác định Radial: hòa trộn màu theo cách thức tỏa tròn, theo 2 hướng: hướng tâm và hướng ra ngoài Hình 2.9. Công cụ gradient Câu hỏi ôn tập, bài tập 28
30. 2.1. Sử dụng các công cụ Free Transform, Gradient Transform để hòa trộn màu sắc theo các hướng khác nhau. 2.2. Sử dụng các công cụ tô vẽ cơ bản, vẽ hình các nhân vật sau 2.3. Sử dụng các công cụ tô vẽ, vẽ các phong cảnh sau: 2.4. Bài tập tổng hợp Hãy sử dụng các công cụ vẽ để tạo các nội dung sau đây trên cùng một Stage: 1. Tạo Layer 1 và đổi tên thành BauTroi. Chọn biểu tượng bảng màu. Chọn Stroke color = None, Fill Color = Linear Gradient. Chọn chế độ đổ màu Extends Color. Trong kiểu đổ màu cầu vồng này, bạn chỉ chọn hai màu: màu đen (mã màu là #000000) đến màu đen trắng (mã màu #999999), trong đó màu đen ở phía trên, màu đen trắng ở phía dưới. Sử dụng công cụ Rectangle, tạo một hình chữ nhật ở trên Layer này. Sử dụng bảng hiệu chỉnh Align để can chỉnh kích thước và vị trí cho hình chữ nhật này trùng khớp với kích thước Stage. 29
31. 2. Tạo Layer 2 và đổi tên thành MatTrang. Chọn biểu tượng Oval với thuộc tính Stroke Color = None, Fill Color là màu Radial Gradient (màu một có mã màu là #FFFF00, màu 2 có mã màu là #FFFFFF). Hãy sử dụng công cụ Gradient Transform để hiệu chỉnh kích thước của vòng màu bên trong lớn hơn và đặt mặt trăng vào vị trí thích hợp trên bức tranh này. 3. Sử dụng công cụ PolyStar để tạo một ngôi sao màu vàng nhạt, kích thước là 20x20. Convert ngôi sao này sang biểu tượng Graphics và đặt tên là Sao. Chọn công cụ Spray Brush, chọn biểu tượng cho nó là Sao ở trên. Hiệu chỉnh các thông số như sau: Scale width = 20% Scale height = 25% Chọn cả ba tùy chọn Random Scaling, Rotate Symbol và Random Rotation. Hiệu chỉnh kích thước của Brush là width=height=300px, Brush Angel là 90 CW. Tạo mới Layer đặt tên là Sao. Hãy quét nhanh công cụ Spray Brush này lên Layer này để tạo các ngôi sao nhỏ trên bầu trời. 4. Tạo mới một Layer và đặt tên là KhungCua. Sử dụng công cụ Rectangle Primitive để tạo một hình chữ nhật có kích thước width=200, height=150, chọn Fill color là None, Stroke color là màu đen, loại đường viền style là stippled, kích thước của đường viền là 5px. Sử dụng công cụ Deco để đổ màu nghệ thuật (cành hoa nho) cho khung cửa sổ này. 5. Tạo mới Layer đặt tên là NgoiNha. Hãy sử dụng các công cụ cần thiết để vẽ nên ngôi nhà mơ ước của bạn. Lưu ý: hãy sử dụng màu sắc thật hài hòa trong đêm tối. 6. Tạo mới Layer đặt tên là DamMay. Hãy sử dụng công cụ Pen để tạo nên các đám mây có viền cong. Tô màu cho nó bằng màu xanh nhạt (mã màu #66CCCC) và hãy loại bỏ viền của nó. 30
32. 7. Tạo mới Layer đặt tên là ConNguoi. Hãy sử dụng các công cụ cần thiết để phát họa chân dung của một cô gái đang đi dưới ánh trăng. 8. Tạo mới Layer đặt tên là DenLong. Hãy phát họa cây đền lồng và đặt nó vào tay cô gái. 9. Tạo mới Layer đặt tên là CayCoi. Hãy phát họa hình một rặng tre hoặc một cây cổ thụ. Chọn màu sắc hợp lý. 10.Tạo mới Layer đặt tên là TieuDe. Sử dụng công cụ Text để soạn thảo trên Layer này nội dung “Ánh Trăng Trên Quê Hương”. 31
33. BÀI 3: CÁC BIỂU TƯỢNG SYMBOL Giới thiệu Một Symbol là một đối tượng tái sử dụng được lưu trữ trong thư viện một tài liệu của Flash. Có thể vẽ một hình dạng và sau đó chuyển đổi nó thành một biểu tượng. Sau khi chuyển đổi, nó được lưu trữ trong thư viện các tài liệu của Flash. Sau đó, từ thư viện, có thể dễ dàng làm nhiều bản sao của biểu tượng mà không cần phải tạo lại nó. Có thể biến bất cứ điều gì muốn vẽ vào biểu tượng. Mục tiêu - Trình bày vai trò của các biểu tượng, thư viện Library - Thao tác lệnh đồ họa với Graphic, Button, MovieClip - Sử dụng các thư viện cho đối tượng hình - Rèn luyện tính cẩn thận, tư duy sáng tạo Nội dung chính: 1. Biểu tượng Graphic, Button, MovieClip 1.1. Graphics: Biểu tượng Graphic là một hình ảnh tĩnh có thể được tái sử dụng để tạo ra chuyển động. Bất kì một ảnh điểm, vector hay văn bản đều có thể chuyển đổi thành Graphic. Chúng chỉ có một Frame trên thanh TimeLine. Để tạo một Graphic, bạn thao tác như sau: - Chọn đối tượng cần chuyển đổi sang biểu tượng Graphic. - Nhấn phím F8 (hoặc kích chuột phải, chọn Convert to Symbol). Trong hộp thoại Convert to Symbol, có các tùy chọn sau: Hình 3.1. Chuyển đổi sang biểu tượng Graphic 32
34. + Name: tên của biểu tượng sẽ được tạo. +Type: loại biểu tượng cần tạo. Ở đây, chúng ta chọn là Graphic. Tiếp đến, bạn nhấp Ok. Một biểu tượng Graphic sẽ được tạo và đưa vào thư viện. Các thuộc tính của biểu tượng Graphic: - Thanh tùy chọn thả xuống: cho phép chuyển đổi qua lại giữa các loại biểu tượng. - Instance of: khi kích chuột vào tùy chọn swap, bạn có thể thay đổi biểu tượng của đối tượng thể hiện được chọn. - Position and Size: cho phép hiệu chỉnh vị trí theo tọa độ của đối tượng thể hiện (x và y), và kích thước (w – width và h – height). Tùy chọn Lock width and height values together cho phép thay đổi kích thước chiều rộng và cao đồng thời hay riêng lẽ. - Color effect: với tùy chọn Style, bạn có thể hiểu chỉnh các thuộc tính Brightness, Tint, Advanced và Alpha cho đối tượng. - Looping: tùy chọn liên quan đến số lần lặp lại hành động của biểu tượng Graphic. Nó có thể là Loop, Play Once và Single Frame. Hình 3.2. Bảng thuộc tính của biểu tượng Graphic 33
35. 1.2. Button Biểu tượng Button dùng để bổ sung một tương tác với movie, đáp trả các sự kiện kích chuột, ấn phím, kéo các thanh kéo và các hành động khác. Một biểu tượng Button sẽ có bốn Frame tương tác: Up, Down, Over và Hit. Để tạo một Button, bạn thao tác như sau: - Chọn đối tượng cần chuyển đổi sang Button. - Nhấp phím F8 hoặc kích chuột phải, chọn Convert to Symbol. Khi đó, sẽ xuất hiện hộp thoại sau: Hình 3.3. Chuyển đổi sang biểu tượng Button Trong mục Type, chọn Button và nhấp Ok. Tạo hiệu ứng cho Button: Ở đây, ta chỉ thao tác để tạo hiệu ứng cho Button. Ta không thảo luận thêm về việc sử dụng TimeLine và cách tạo hiệu ứng động. Chi tiết về phần này ta sẽ tìm hiểu trong chương tiếp theo. Mỗi biểu tượng Button có 4 Frame trên TimeLine. Tương ứng với Frame Up là hiệu ứng khi trỏ chuột được thả ra (sau khi bấm xuống), Frame Down tương ứng với hiệu ứng khi trỏ chuột nhấn xuống, Frame Over tương ứng với hiệu ứng khi trỏ chuột di chuyển qua đối tượng và Frame Hit tạo một vùng tương tác ảo cho Button (nghĩa là khi thao tác trên vùng này hoàn toàn tương tự với thao tác trên chính Button đó). Vùng tương tác này gọi là ảo bởi nó không hiển thị trên movie. Sau đây, ta sẽ thao tác để tạo hiệu ứng cho Button. (1) Kích đôi chuột vào Button vừa tạo. 34
36. (2) Nhấp chọn Frame Up, nhấn phím F6 và thay đổi thuộc tính cho Button này. Hoàn toàn tương tự cho Frame Down và Frame Over. (3) Nếu bạn muốn tạo vùng tương tác ảo, bạn hãy sử dụng công cụ vẽ để tạo một vùng tương tác này trong Frame Hit: chọn Frame Hit, nhấp F6 và vẽ một hình thể trong Frame Hit này. (4) Quay trở lại Scene, nhấp Ctrl+Enter để kiểm tra. Các thuộc tính của biểu tượng Button: - Instance Name: tên hiển thị của biểu tượng. Được dùng khi làm việc với ActionScript. - Thanh tùy chọn thả xuống: cho phép chuyển đổi qua lại giữa các loại biểu tượng. - Instance of: chọn swap để thay đổi biểu tượng cho đối tượng hiển thị. - Position and Size: thay đổi vị trí và kích thước cho đối tượng. - Color effect: chọn hiệu ứng màu sắc cho đối tượng, bao gồm:Brightness, Tint, Advanced và Alpha. - Display: với thuộc tính Blending, cho phép ta chọn các chế độ pha trộn màu sắc cho Button. - Tracking: với Options, bạn có thể chọn Track as Button hoặc Track as MenuItem. - Filter: hoàn toàn tương tự với Filter khi làm việc với công cụ Text. Hình 3.4. Bảng thuộc tính của biểu tượng Button 35
37. Tạo biểu tượng Button nhanh chóng: bạn có thể sử dụng một trong các chức năng sau đây để tạo một biểu tượng Button hết sức nhanh chóng: + Sử dụng các Button được tạo sẵn: vào Windows > Common Libraries > Button. + Sử dụng Commands: bạn hãy tạo một khối hình thể, nhấp chọn nó. Sau đó vào Commands > Make Button. 1.3. Movie Clip Là một mẫu hoạt hình của Flash có thể được tái sử dụng. Khác với Graphic và Button, MovieClip có riêng một TimeLine với vô số Frame của mình. Một MovieClip có thể bao gồm một hoặc nhiều biểu tượng Graphic, Button hoặc thậm chí là MovieClip. Cũng tương tự như Button, bạn có thể cài đặt một tên hiển thị cho nó để điều khiển nó bằng ActionScript. Tạo hiệu ứng cho Movieclip: chúng ta sẽ tìm hiểu về cách tạo hoạt hình cho một MovieClip trong chương tiếp theo. Các thuộc tính của biểu tượng MovieClip: - Instance Name: tên hiển thị của biểu tượng. Được dùng khi làm việc với ActionScript. - Thanh tùy chọn thả xuống: cho phép chuyển đổi qua lại giữa các loại biểu tượng. - Instance of: chọn swap để thay đổi biểu tượng cho đối tượng hiển thị. - Position and Size: thay đổi vị trí và kích thước cho đối tượng. - 3D Position and View: hiểu chỉnh vị trí trong không gian và khung nhìn 3D. - Perspective Angle: hiệu chỉnh góc phối cảnh theo độ xa gần. - Vanishing Point: hiệu chỉnh tọa độ của điểm triệt tiêu. - Color effect: chọn hiệu ứng màu sắc cho đối tượng, bao gồm:Brightness, Tint, Advanced và Alpha. 36
38. Hình 3.5. Bảng thuộc tính của biểu tượng MovieClip - Display: với thuộc tính Blending, cho phép ta chọn các chế độ pha trộn màu sắc cho Button. - Tracking: với Options, bạn có thể chọn Track as Button hoặc Track as MenuItem. - Filter: hoàn toàn tương tự với Filter khi làm việc với công cụ Text. 2. Làm việc với thư viện Library Để hiển thị cửa sổ Library, thực hiện một trong những bước sau đây: - Chọn trong trình đơn Window > Library. Hoặc nhấp chuột vào nút Library trong thanh Launcher tại góc phải bên dưới của cửa sổ giao diện. 37
39. - Cách dùng mục Item trong đoạn phim hiện hành : Kéo mục Item trong cửa sổ Library vào vùng Stage. Mục Item đó được thêm vào trong Layer hiện hành. Hình 3.6. Chọn thư mục hiện hành trong thư viện Mở thư viện từ trong một file Flash. Chọn trình đơn File > Open as Library. Chọn file Flash bạn muốn mở tại thư viện, sau đó nhấp chuột vào nút Open. Cửa sổ của file được chọn mở trong đoạn phim hiện hành với tên của file đó xuất hiện ở phía trên cùng trong cửa sổ Library. Để sử dụng các mục có trong cửa sổ Library vào trong đoạn phim hiện hành, bạn chỉ việc kéo mục chọn đó và thả vào trong cửa sổ thư viện của đoạn phim hiện hành. Hình 3.7. Khu vực quản lý thư viện Library 3. Làm việc với Common Library 38
40. Tất cả những loại thư viện này được hiển thị trong trình đơn phụ Window > Common Libraries. Hình 3.8. Các lựa chọn của Common Library - Cách tạo ra một thư viện tạm thời trong chương trình Flash: + Tạo một file Flash với một thư viện chứa các biểu tượng muốn đặt chúng vào thư viện tạm thời. + Đặt file Flash vào trong thư mục Libraries trong thư mục chương trình Flash trong đĩa cứng - Cách dùng một mục từ thư viện chung trong đoạn phim: + Chọn trong trình đơn Window > Common Libraries và chọn một thư viện có trong trình đơn phụ. Hình 3.9. Lựa chọn Graphics Câu hỏi ôn tập, bài tập 3.1. Biểu tượng Graphic là gì? Trình bày cách tạo, các thuộc tính của biểu tượng Graphic 39
41. Tạo các biểu tượng graphic hình tròn, vuông và lưu vào thư viện Library, sao chép từ thư viện để có thêm 3 biểu tượng cho mỗi đối tượng. 3.2. Biểu tượng MovieClip là gì? Trình bày cách tạo, các thuộc tính của biểu tượng MovieClip Tạo các biểu tượng MoviecClip hình tròn, vuông và lưu vào thư viện Library 3.3. Trình bày tác dụng của biểu tượng Button, cách tạo hiệu ứng cho biểu tượng button. Tạo các biểu tượng Button hình tròn, vuông và lưu vào thư viện Library 3.4. Thư viện(library) dùng để làm gì? Cách đưa một đối tượng vào library 40
42. BÀI 4: THAO TÁC VỚI TIMELINE Giới thiệu: Phần này có thể coi là quan trong nhất trong flash vì nó là cho ta thể hiện mọi thứ trong quá trình thiết kế như câu lệnh, âm thanh, hình ảnh, chuyển động. TimeLine là vùng tương tác để tạo ra chuyển động trong movie của Flash. Để tạo ra chuyển động, TimeLine thay thế từng Frame một theo thời gian. Mục tiêu: - Trình bày được vai trò của timeline - Vận dụng các công cụ timeline tạo hoạt hình - Rèn luyện tính cẩn thận, tư duy sáng tạo. Nội dung chính: 1. Giới thiệu TimeLine TimeLine là vùng tương tác để tạo ra chuyển động trong movie của Flash. Để tạo ra chuyển động, TimeLine thay thế từng Frame một theo thời gian. Hình 4.1. Vùng TimeLine Trong TimeLine, bạn có thể dễ dàng thấy được ba phần chính: Phần quản lý Layer (bên trái), Phần quản lý Frame (phía trên bên phải) và Phần quản lý Công cụ (phía dưới bên phải). - Layer: quản lý các lớp đối tượng. Mỗi một đối tượng trên Layer sẽ có một thanh TimeLine của riêng mình. Trong trường hợp minh họa trên, thì đối tượng trên 41
43. Layer 1 nằm trên TimeLine phía dưới và đối tượng trên Layer 2 nằm trên TimeLine phía trên. - Thanh TimeLine: chứa nhiều Frame. Khi tạo ra chuyển động, các Frame sẽ lần lượt thay thế cho nhau. Frame sau sẽ thay thế cho Frame trước đó. Ta có thể xem qua hành động bằng cách kéo Frame hiện tại (Frame đánh dấu màu đỏ) sang trái hoặc phải trên TimeLine. - Vùng thanh công cụ - gồm các công cụ sau đây: + Center Frame: xác định Frame trung tâm. + Onion Skin: cho phép hiển thị toàn bộ hình ảnh của đối tượng trên vùng Frame được chọn. Sự hiển thị này bao gồm toàn bộ đối tượng. Hình 4.2. Onion Skin + Onion Skin Outlines: cho phép hiển thị toàn bộ hình ảnh của đối tượng trên vùng Frame được chọn. Sự hiển thị này chỉ bao gồm viền của đối tượng. Hình 4.3. Onion Skin Outlines 42
44. + Edit Multiple Frames: cho phép hiển thị đối tượng gốc trên toàn bộ đối tượng hiển thị theo hai chức năng Onion Skin ở trên. Khi đó, ta có thể chỉnh sửa đối tượng (Hình 44). + Các thông số khác: Current Frame – vị trí của Frame hiện tại. Frame rate – tốc độ chuyển động (tính bằng số Frame trên giây). Elapsed Time – thời gian thực thi toàn bộ Frame trên thanh TimeLine. Hình 4.4. Onion Skin và Onion Skin Outlines kết hợp với Edit Multiple Frames 2. Vai trò trong xử lý hoạt hình Một số chức năng khi làm việc với TimeLine: Khi làm việc với TimeLine, ta thường xuyên sử dụng đến hai phím tắt sau đây: + Phím F5: chèn Frame vào thanh TimeLine (tương ứng với Insert Frame). Nếu vùng TimeLine trong thanh TimeLine đã được tạo Tween, thì nó sẽ tự động giãn vùng Tween này (chèn thêm Frame vào trong vùng Frame đã tạo Tween, các Frame mới tạo này cũng kế thừa Tween). + Phím F6: chèn KeyFrame vào thanh TimeLine (tương ứng với Insert KeyFrame). Frame cuối cùng khi chèn là một KeyFrame. Với KeyFrame này, ta có thể tạo điểm chốt cho hành động trong một movie. Khi kết hợp với Tween, nó sẽ tạo một chuyển động mềm mại cho movie của Flash. Chúng ta có thể tham khảo ví dụ sau đây, để hiểu rõ hơn về hai phím tắt này. Trong ví dụ này, chúng ta sẽ tạo một hình chữ nhật có nền trắng và viền đen. Tại Frame thứ 5, bạn nhấp vào Frame này, nhấn phím F5. Sau đó, bạn thay đổi độ lớn 43
45. của viền (thuộc tính Stroke = 5) – xem Hình 61. Giờ bạn hãy kiểm tra độ lớn của viền trên mọi Frame. Như bạn thấy đấy, viền của tất cả hình chữ nhật trên mọi Frame đều thay đổi thành 5. Bây giờ, hãy làm lạm lại ví dụ trên bằng cách thay phím F5 bằng phím F6. Ta sẽ thấy rằng thuộc tính Stroke sẽ không thay đổi trên mọi Frame, chỉ thay đổi duy nhất ở KeyFrame cuối cùng (KeyFrame mà bạn hiệu chỉnh). Như vậy, có thể thấy rằng, nếu muốn sao chép một Frame cho các Frame tiếp theo, sử dụng phím F5. Ngược lại, nếu muốn tạo một sự thay đổi, cần sử dụng phím F6. Hình 4.5. Khởi tạo một hình thể trên KeyFrame đầu tiên. Hình 4.6. Chèn các Frame bằng phím F5 44
46. Hình 4.7. Chèn KeyFrame bằng phím F6 Sao chép và cắt dán một nhóm Frame: để thực hiện chức năng này, bạn hãy bôi đen nhóm Frame mà bạn muốn sao chép hoặc cắt dán, sau đó bạn kích chuột phải và chọn Copy Frames hoặc Cut Frames. Hình 4.8. Sao chép hoặc Cắt dán nhóm Frame Để thực hiện chức năng dán, bạn hãy chọn vị trí cần dán nhóm Frame đã copy trên TimeLine. Sau đó, kích chuột phải và chọn Paste Frames. 45
47. Hình 4.9. Chép một nhóm Frame đã được sao chép hoặc cắt dán Clear Frames, Clear KeyFrame và Remove Frames: chức năng Clear Frames nó sẽ làm cho các đối tượng trên Layer của Frame được chọn sẽ bị xóa đi. Hay nói cách khác, Clear Frames sẽ tạo ra hai KeyFrame ở vị trí bắt đầu và kết thúc của nhóm Frame được đánh dấu. Tương ứng với vị trí đầu tiên, nó sẽ chèn một Blank KeyFrame (là một KeyFrame nhưng không chứa đối tượng nào trên nó) và KeyFrame tương ứng với vị trí kết thúc. Clear KeyFrame cũng tương tự như Clear Frame, nhưng nó áp dụng cho một KeyFrame. Còn Remove Frames sẽ xóa sạch các Frame này lẫn đối tượng trên nó. Convert to KeyFrames và Convert to Blank KeyFrames: chuyển đổi một Frame thành KeyFrame hoặc Blank KeyFrame. Insert Blank KeyFrame: chèn một Blank KeyFrame. Reverse Frames: cho phép lật ngược thứ tự của một nhóm Frame. Để thực hiện chức năng này, bạn bôi đên nhóm Frame, kích chuột phải và chọn Reverse Frame. Với chức năng này, bạn có thể tạo ra một chuyển động mang tính đối xứng. 3. Xử lý hoạt hình cho đối tượng Khi soạn thảo 1 file Flash, Playhead là 1 vạch đỏ cắt ngang qua Timeline (xem hình dưới). Nó cho biết ta hiện đang thao tác ở frame số bao nhiêu trên Timeline. Ngoài ra, sau khi file Flash được xuất ra thành 1 đoạn phim hoàn chỉnh 46
48. và chạy trên flash player thì không còn vạch đỏ nào cả nhưng người ta vẫn có thể nói tới khái niệm Playhead như 1 con trỏ cho biết hiện thời frame nào đang được trình chiếu. (Trong hình mình hoạ, frame hiện tại được trỏ đến là frame 8). Còn Stage chính là nơi mà ta sẽ vẽ hoặc đặt hình ảnh lên đó (mặc định stage có màu trắng). Stage có dạng một hình chữ nhật. Những gì nằm ngoài phạm vi của stage sẽ không được nhìn thấy khi đoạn hoạt cảnh được trình chiếu. Kích thước của stage cũng chính là kích thước màn hình của đoạn phim mà ta tạo ra. Hình 4.10. Điểm dùng của Frame Câu hỏi ôn tâp, bài tập 1) Tạo trò chơi hứng bóng. Gợi ý sử dụng chọn đối tượng và chuyển thành Graphic sau đó dùng F6 để copy các KeyFrame. 47
49. BÀI 5: TẠO HOẠT HÌNH BẰNG FRAME BY FRAME VÀ CLASSIC TWEEN Giới thiệu: Tạo ảnh động (animation) theo phương pháp frame-by-frame, tức là phương pháp tạo ảnh động với mỗi khung hình có một nội dung khác nhau, cụ thể là cho dòng chữ TUỔI TRẺ CAO ĐẲNG NGHỀ xuất hiện dần theo từng ký tự thông qua các bước sau đây. Mục tiêu: - Trình bày được vai trò Frame by Frame, Classic Tween. - Vận dụng các công cụ Frame by Frame, Classic Tween để tạo hoạt hình cho đối tượng. - Rèn luyện tính cẩn thận, tư duy sáng tạo. Nội dung chính: 1. Hoạt hình Frame by Frame Frame by Frame trong Flash được dùng để tạo một hiệu ứng chuyển động cơ bản nhất trong Flash. Các đối tượng sẽ chuyển động từng frame một và tất cả các frame đó sẽ hình thành một chuyển động chung là Frame by Frame. Thiết kế chuyển động gồm: Sử dụng công cụ Oval Tool để vẽ hình eclips và để vẽ được hình tròn thì bạn cần nhấn phím “Shift” trên bàn phím Một đối tượng hình tròn với kích thước width:150, height: 150 Màu sắc Background là màu đỏ 48
50. Hình 4.1. Sử dụng công cụ Oval Tool để vẽ hình elips Sau khi bạn thiết kế xong bây giờ đến lúc chúng ta tạo nên chuyển động Tại Panel TimeLine sẽ nhận thấy các Frame có biểu tượng là một dấu chấm tròn đen. Bây giờ tiếp theo hấn phím F6 từ bàn phím để được 1 Frame tiếp theo Hình 5.2. Tạo Frame chuyển động cho hình elip Nhấn thêm 19 lần phím F6 để tổng số điểm sẽ là 21 điểm (Frame) Để đối tượng chuyển động được thì ở mỗi vị trí Frame (điểm tròn đen) bạn phải dịch chuyển vị trí của đối tượng hình tròn màu đỏ sang bên phải ví dụ như hình sau: 49
51. Hình 5.3. Tạo điểm đầu và điểm cuối. Điển hình ở vị trí thứ 4 sẽ dịch chuyển sang bên phải sao cho không trùng với điểm trước nó. Và tương tự như vậy so với các frame còn lại cứ dịch chuyển vị trí tương ứng từng Frame Và cuối cùng là ta nhận được kết quả như mong đợi bằng cách bạn sử dụng tổ hợp phím Ctrl + Enter trên bàn phím 2. Hoạt hình Classic Tween Classic Tween là một kỹ thuật tạo chuyển động được cung cấp trong các phiên bản từ Flash CS3 trở về trước (lúc đó gọi là Motion Tween). Từ phiên bản Flash CS4, Adobe vẫn còn duy trì kỹ thuật này nhưng đổi tên là Classic Tween. Về cơ bản, khi thao tác với kỹ thuật Classic Tween ta cần phải sử dụng đến hai Feyframe, đó là KeyFrame khởi đầu và KeyFrame kết thúc. Nguyên tắc: Trong khung hình đầu tiên (gọi là KeyFrame khởi đầu) ta tạo các đối tượng hoạt hình (như là Graphic Symbol, Movie Clip Symbol, Buttom Symbol). Rồi đến một vị trí khác trên timeline ta tạo thêm một Keyframe kết thúc, trong đó đối tượng hoạt hình có thay đổi kích thước, vị trí, xoay, các hiệu ứng Style, Filter, vv. Sau đó thực hiện Classic Tweening. Sử dụng Classic Tween để tạo hiệu ứng động: 50
52. Bước 1: Chọn frame đầu tiên (ví dụ Frame 1) trên tiến trình, rồi tạo các hình (Graphic Symbol, Movie Clip Symbol, Buttom Symbol) trên Stage. Đây là Keyframe đầu tiên. Bước 2: Chọn Frame cuối (ví dụ Frame 45) trên tiến trình, rồi click phải và chọn lệnh Insert KeyFrame thì ta được một khung hình khóa có nội dung giống như khung hình khóa kế trước. Hiệu chỉnh lại nội dung hoạt hình như thay đổi kích thước, vị trí, xoay, vv . Bước 3: Chọn lại Frame đầu tiên (ví dụ Frame 1). Rồi click phải trong TimeLine, chọn lệnh Create Classic Tween. Hình 5.5. Tạo hoạt hình cho hình ảnh Bước 4: Ở Panel Properties. mục Tweening có các tùy chọn: Ease: chỉnh tốc độ bắt đầu, hoặc nhấp Edit Easing để hiện hộp thoại Ease In / Ease Out Rotate: cho phép xoay.(None, Auto, CW, CCW) Snap: bắt dính theo đườmg dẫn. Orient to Path: hướng theo đường dẫn Scale: cho phép co dãn kích thước khi chuyển động. 51
53. Sync: đồng bộ. Hình 5.6. Thiết lập thuộc tính Bước 5: Ctrl + Enter để xem kết quả. Câu hỏi ôn tập, bài tập 5.1. Tạo một hoạt hình ảo giác các hình tròn đồng tâm. 5.2. Tạo một hoạt cảnh hoạt hình bằng Classic Tween 52
54. BÀI 6: TẠO HOẠT HÌNH THEO ĐƯỜNG DẪN Giới thiệu: Hoạt hình theo đường dẫn phản hồi hành động của người dùng và cung cấp tính liên tục trực quan khi người dùng tương tác với ứng dụng. Mục tiêu: - Trình bày được hoạt hình theo đường dẫn - Vận dụng các công cụ tạo hoạt hình theo đường dẫn - Rèn luyện tính cẩn thận, tư duy sáng tạo. Nội dung chính: 1. Giới thiệu hoạt hình theo đường dẫn Đối với Classic Tween ta có thể tạo chuyển động theo đường dẫn duy nhất. Nhưng đối với hoạt hình theo đường dẫn có thể cho đối tượng di chuyển theo đường bất kỳ với hình dạng phức tạp hơn, như: chim bay, lá rụng Tạo thêm một layer mới đặt tên là path, rồi vẽ đường path bằng Pencil Tool Click phải vào tên Layer path > chọn lệnh Guide. (layer Guide sẽ không hiển thị các phần tử trên layer này khi xem hoạt hình). Kéo rê layer kế bên dưới vào bên trong layer Path. Chỉnh tâm của đối tượng hoạt hình ở cả hai frame khóa đầu tiên và frame khóa cuối cùng vào hai đầu mút của đường dẫn. 2. Thao tác hoạt hình theo đường dẫn Bước 1: Chọn đối tượng và thao tác tạo Keyframe đầu và cuối Bước 2: Tạo thêm một Layer mới đặt tên là path. Click phải vào tên Layer path > chọn lệnh Guide. (Layer Guide sẽ không hiển thị các phần tử trên Layer này khi xem hoạt hình). 53
55. Kéo rê Layer kế bên dưới vào bên trong Layer path rồi vẽ đường Path bằng Pencil Tool. Chỉnh tâm của đối tượng hoạt hình ở cả hai Frame khóa đầu tiên và Frame khóa cuối cùng vào hai đầu mút của đường dẫn. Hình 6.1. Tạo đường dẫn cho đối tượng Nếu muốn đối tượng chuyển động theo hướng của đường dẫn và đối tượng thay đổi khi di chuyển, thì trên Panel Properties, mục Tweening: click thiết lập Orient to Path. Hình 6.2. Thiết lập thuộc tính đối tượng Câu hỏi ôn tập, bài tập 54
56. 6.1. Tạo hoạt hình quả bóng nhảy theo hình zich zac 6.2. Tạo hoạt hình cho đàn chim bay. 6.3. Vẽ cảnh mùa thu lá rơi Gợi ý: Có thể dùng thư viện hình ảnh internet đưa vào Library. 55
57. BÀI 7: TẠO HOẠT HÌNH VỚI MOTION TWEEN Giới thiệu: Kỹ thuật Motion Tween cũng được dùng để tạo chuyển động (tương tự như kỹ thuật Classic Tween) nhưng nó không đòi hỏi bạn phải tạo trước các KeyFrame. Một ưu điểm của Motion Tween ( từ phiên bản Flash CS4 trở đi) là hỗ trợ hiệu ứng 3D (có hai hiệu ứng 3D là Transformation và Rotation). Mục tiêu: - Trình bày được vai trò Motion Tween, Shape Tween - Vận dụng các công cụ Motion Tween, Shape Tween tạo hoạt hình - Rèn luyện tính cẩn thận, tư duy sáng tạo. Nội dung chính: 1. Mô tả cơ chế Motion Tween cũng được dùng để tạo chuyển động. Nó cũng tương tự như kĩ thuật Classic Tween, nhưng nó đơn giản hơn kĩ thuật Classic Tween nhiều. Nó không đòi hỏi phải tạo các KeyFrame. Một ưu điểm của Motion Tween mà trong phiên bản Flash CS6 mới được bổ sung vào là hỗ trợ hiệu ứng 3D. Có hai hiệu ứng 3D là Translation và Rotation. Hình 7.1. Kĩ thuật Motion Tween Nếu so sánh với kĩ thuật Frame by Frame và Classic Tween, thì bạn cũng nên biết rằng, với kĩ thuật Motion Tween, có thể tối ưu kích thước của file Flash khi xuất bản. Với Motion Tween, còn có thể hiệu chỉnh đường dịch chuyển, tọa độ, góc 56
58. xoay, Filter, Blending Nhờ vào công cụ Selection và thuộc tính trong bảng Motion Editor. 2. Hoạt hình Motion Tween Kỹ thuật Motion Tween cũng được dùng để tạo chuyển động (tương tự như kỹ thuật Classic Tween) nhưng nó không đòi hỏi bạn phải tạo trước các KeyFrame. Một ưu điểm của Motion Tween ( từ phiên bản Flash CS4) là hỗ trợ hiệu ứng 3D (có hai hiệu ứng 3D là Transformation và Rotation). Nếu so sánh với kỹ thuật Frame by Frame và Classic Tween, thì với kỹ thuật Motion Tween tối ưu kích thước của file Flash khi xuất bản. Ngoài ra với Motion Tween, ta hiệu chỉnh đường dịch chuyển, tọa độ, góc xoay, Filter, Blending Nhờ vào công cụ Selection và thuộc tính trong bảng Motion Editor. Sử dụng Motion Tween để tạo hiệu ứng động Bước 1: Chọn frame đầu tiên (ví dụ frame 1) trên tiến trình, rồi tạo các hình (graphic symbol, movie clip symbol, button symbol) trên stage. Bước 2: Chọn lại frame đầu tiên (ví dụ frame 1). Rồi click phải trong timeline , chọn lệnh Create Motion Tween. Flash sẽ tự động tạo một khoảng Frame mặc định để tạo chuyển động (thông thường 1 second hoạt hình). Nếu số lượng Frame này không thỏa mãn nhu cầu xử dụng, ta thay đổi nó bằng cách đặt con trỏ chuột vào vị trí frame cuối cùng. Khi trỏ chuột có dạng , thì nhấp chuột và kéo sang trái hoặc sang phải. Bước 3: Click chọn frame cuối, rồi di chuyển hình được vẽ sang vị trí mới. Khi đó, trên stage xuất hiện một đường mô tả chuyển động của đối tượng. Sử dụng công cụ Selection để thay đổi dạng thức của đường chuyển động. Bước 4: Ctrl + Enter để xem kết quả. 57
59. Hình 7.2. Tạo hoạt hình bằng Motion Tween 3. Tạo chuyển động nhờ vào Motion Presets Flash CS6 cung cấp sẵn cho ta các hiệu ứng chuyển động có sẵn trong vùng chức năng Motion Presets. Để sử dụng chức năng này, vào Windows > Motion Presets. Vùng chức năng Motion Presets này cung cấp cho chúng ta rất nhiều hiệu ứng làm sẵn. Khi sử dụng các hiệu ứng trong vùng chức năng này, các đối tượng của bạn không cần phải chuyển đổi sang biểu tượng. Bạn có thể thao tác trực tiếp trên các đối tượng. Dĩ nhiên, bạn cũng có thể áp dụng các hiệu ứng này cho các biểu tượng như Graphic, Button hay MovieClip. Để minh họa cho vùng chức năng này, xây dựng một vài hiệu ứng hoạt hình sau đây: Hiệu ứng quả bóng chuyển động: hãy tạo một khối cầu dạng 3D như trên hình vẽ. Sau đó, hãy bấm chọn đối tượng, bấm tiếp vào khung Motion Presets và chọn lựa hiệu ứng chuyển động tương ứng. Hình 7.3. Chức năng Motion Presets: chọn hiệu ứng bounce-in-3D 58
60. Câu hỏi ôn tập, bài tập 7.1. Tạo hoạt hình Classic Tween cho cảnh xe hơi chạy qua dãy núi. 7.2. Hãy sử dụng kĩ thuật Tween kết hợp với các công cụ tạo hiệu ứng 3D để tạo dựng các hiệu ứng sau: a) Hiệu ứng quả bóng di chuyển trong không gian. b) Chữ chạy 3D. 7.3. Sử dụng các công cụ tô vẽ. vẽ hình con lắc đơn sau đó tạo hiệu ứng mô phỏng chuyển động của con lắc đơn như hình sau 59
61. BÀI 8: TẠO HOẠT HÌNH VỚI SHAPE TWEEN Giới thiệu: Kĩ thuật Shape Tween dường như có những tính năng riêng biệt. Mặc dù nó cũng có thể dùng để chuyển đổi màu sắc, hình dáng của vật thể như hai loại Tween còn lại. Nhưng chức năng chính của nó là “biến hình”. Để tạo sự biến hình, cũng tương tự Classic Tween, bạn phải tạo hai KeyFrame mở đầu và kết thúc. Shape Tween không hỗ trợ hiệu ứng 3D, không hỗ trợ chức năng swap symbol để thay đổi biểu tượng nguồn cho một đối tượng thể hiện. Mục tiêu: - Hiểu vai trò Shape Tween - Vận dụng các công cụ Shape Tween tạo hoạt hình - Rèn luyện tính cẩn thận, tư duy sáng tạo. Nội dung chính: 1. Mô tả cơ chế Kĩ thuật Shape Tween dường như có những tính năng riêng biệt. Mặc dù nó cũng có thể dùng để chuyển đổi màu sắc, hình dáng của vật thể như hai loại Tween còn lại. Nhưng chức năng chính của nó là “biến hình”. Để tạo sự biến hình, cũng tương tự Classic Tween, bạn phải tạo hai KeyFrame mở đầu và kết thúc. Shape Tween không hỗ trợ hiệu ứng 3D, không hỗ trợ chức năng swap symbol để thay đổi biểu tượng nguồn cho một đối tượng thể hiện. Khi tạo Shape Tween, đối tượng sẽ chuyển đổi thành hai đối tượng Graphic. Hai biểu tượng này tương ứng với hai Frame đầu tiên và Frame cuối cùng của Shape Tween. Về cơ chế của Shape Tween, nó sử dụng thuật toán Transform – nghĩa là sẽ dịch chuyển các điểm được đánh dấu theo một chỉ số nào đó ở Frame đầu tiên đến vị trí được đánh dấu cùng chỉ số trong Frame cuối cùng. 2. Các bước sử dụng Shape Tween. 60
62. Chúng ta sẽ tạo hiệu ứng biến đường thẳng thành đường cong. Vì không thể tạo được hiệu ứng này bằng các Tween còn lại. Đây cũng là một ví dụ điển hình sử dụng Shape Tween. Hình 8.1. Kĩ thuật Shape Tween Bước 1. Dùng công cụ Line vẽ một đường thẳng trên khung sáng tác. Bước 2. Với công cụ Shape Tween, bạn có thể tạo Tween trước khi chèn KeyFrame hoặc sau khi chèn KeyFrame. Ta sẽ minh họa bằng việc tạo Tween trước. Bạn hãy dùng công cụ Selection, bấm chọn đối tượng, kích chuột phải và chọn Create Shape Tween. Bước 2. Bấm chọn vào Frame 30 trên TimeLine, nhấp phím F6 để chèn KeyFrame kết thúc. Bạn bấm chọn công cụ Add Anchor Point và bấm vào vị trí giữa đường thẳng để bổ sung điểm điều khiển. Tiếp đến, bạn chọn công cụ Convert Anchor Point để tạo điểm uốn. Bạn hãy bấm chọn điểm mà bạn vừa tạo, và uốn đường thẳng này thành đường cong như trên. Bước 3. Nhấn tổ hợp Ctrl+Enter để kiểm tra sản phẩm. Bạn lưu ý rằng, trong hình minh họa trên, tôi đã sử dụng chức năng Onion Skin. 3. Sử dụng Shape hint Khi sử dụng Shape Tween, nó sẽ tự động tạo ra sự biến hình theo một thuật toán được định sẵn. Nếu bạn muốn điều khiển sự biến hình này, Flash cũng cung cấp cho bạn công cụ đó là Shape Hint. 61
63. Shape Hint là một điểm điều khiển khi sử dụng Shape Tween. Để sử dụng chức năng này, bạn cần tạo một Shape Tween cho một đối tượng, sau đó vào menu Modify > Shape > Add Shape Hint (phím tắt là Ctrl+Shift+H). Shape Hint sẽ xuất hiện theo cặp: một điểm ở Frame đầu tiên trên TimeLine của Tween và một điểm ở Frame cuối cùng. Các Shape Hint này được đánh chỉ số là a, b, c . Bạn hãy quan sát hai hình vẽ sau đây: Hình 8.2. Các cặp Shape Hint ở Frame đầu (trái) và Frame cuối (phải) Câu hỏi ôn tập, bài tập 8.1. Tạo hoạt hình Shape Tween các kiểu biến đổi dòng chữ SINH VIÊN CĐ KỸ THUẬT CÔNG NGHỆ BR-VT 8.2. Tạo hoạt hình biến đổi từ các hình dạng khác nhau: hình vuông hình tròn. 8.3. Tạo một đoạn văn bản với nội dung “SAO VÀNG” và một ngôi sao 5 cánh màu vàng. Tạo hiệu ứng biến đổi chữ “SAO VÀNG” thành ngôi sao. 8.4. Bài tập tổng hợp Hãy sử dụng bức ảnh chứa các đối tượng được vẽ ở trên để thực thi bài thực hành số 2. 1. Hãy chuyển đổi MatTrang trong Layer 2 thành biểu tượng MovieClip và đặt tên cho nó là MatTrang. Hãy sử dụng Classic Tween để tạo hiệu ứng động cho mặt trăng. Mặt trăng có hai hiệu ứng động là: đổ bóng mờ và di chuyển. Để tạo hiệu ứng bóng mờ, hãy sử dụng thuộc tính Filter=Blur của MovieClip. Các thao tác này chỉ được sử dụng Classic Tween. 62
64. 2. Hãy xóa bỏ các ngôi sao trên bầu trời ở trên. Trong thư viện, hãy chọn lại biểu tượng Graphic là Sao mà bạn đã tạo. Bạn hãy chuyển đổi nó thành MovieClip. Sử dụng Motion Tween để tạo hiệu ứng tăng giảm độ trong suốt (thuộc tính Alpha của MovieClip). Thuộc tính này thay đổi từ 80% đến 100%. Tiếp tục sử dụng công cụ Spray Brush, lần này bạn chọn biểu tượng cho nó là MovieClip Sao. Hiệu chỉnh các thông số tương tự như bài thực hành số 1. Sau đó, quét lên Layer Sao. 3. Hãy sử dụng công cụ Bone để tạo chuyển động cho đôi chân cô gái. Các phần còn lại không cần tạo chuyển động. Bạn kết hợp với Motion Tween để tạo sự di chuyển (thay đổi vị trí trong bức ảnh) cho cô gái. 4. Sử dụng Motion Tween để tạo chuyển động cho các đám mây. Các đám mây chuyển động theo dạng thức 3D (kết hợp công cụ 3D Rotation và 3D Translation). 5. Hãy tạo mới một Layer đặt tên là BienHinh. Trên Layer này, bạn hãy tạo một ngũ giác. Sử dụng Shape Tween để tạo hiệu ứng biến hình cho hình thể này thành hình ngôi sao năm cánh. Hãy đặt nó vào một vị trí thích hợp. 63
65. BÀI 9: SỬ DỤNG SỬ DỤNG MẶT NẠ (MASK) Giới thiệu: Mask hay còn gọi là mặt nạ trong Flash đúng là một điều bí mật như một người đeo mặt nạ làm người ta không biết phía sau nó ẩn chứa những gì. Mục tiêu: - Hiểu vai trò mặt nạ (mask) - Vận dụng thao tác với các công cụ tạo hoạt hình - Rèn luyện tính cẩn thận, tư duy sáng tạo. Nội dung chính: 1. Mặt nạ (mask) Mặt nạ là một kĩ thuật cho phép tạo riêng một khung trình chiếu với hình dạng phức tạp. Mọi hoạt động chỉ có thể trình chiếu bên trong mặt nạ. Hình 9.1. Kĩ thuật mặt nạ Mask Để tạo một mặt nạ, bạn cần tạo một khung trình chiếu. Để tạo khung này, chỉ đơn thuần vẽ một hình thể nào đó trên một Layer tạm gọi là Layer Mask. Tiếp tục tạo thêm một Layer thứ hai để tạo hoạt cảnh. Để tạo mặt nạ, hãy đặt Layer Mask lên trên layer hoạt cảnh, kích chuột phải vào Layer Mask này, và chọn Mask. Nếu có nhiều Layer hoạt cảnh cần tạo bởi một Layer Mask, chỉ việc kéo chọn Layer này vào trong Layer Mask ở khung Layer. 2. Sử dụng mặt nạ động 64
66. Sử dụng hai lớp: Layer Art và Layer Mask. Hình 9.2. Mặt nạ động Hãy sử dụng Motion Tween (hoặc Classic Tween) để tạo hiệu ứng dịch chuyển lớp mặt nạ dọc theo đường nghệ thuật. Tiếp theo, bạn hãy kích chuột phải lên lớp Mask, chọn Mask. Lập tức lớp mặt nạ chuyển động này sẽ tạo hiệu ứng xuất hiện từng phần cho đối tượng hình nghệ thuật. 3. Sử dụng mặt nạ biến hình Trong kỹ thuật này này, sẽ tạo một mặt nạ biến hình. Hoàn toàn tương tự như ví dụ trên, nhưng chỉ khác một điểm là trong ví dụ trên, sử dụng Motion Tween (hoặc Classic Tween), còn trong ví dụ này, bạn sử dụng Shape Tween. Hình 9.3. Mặt nạ biến hình Mặt nạ động tạo ra một hiệu ứng khá thú vị. Mặt nạ biến hình có chức năng cũng không kém thú vị. Bạn hoàn toàn có thể sử dụng hai loại mặt nạ này tạo ra các hiệu ứng hay khi trình chiếu một Album ảnh. 65
67. Ví dụ về việc sử dụng mặt nạ có thể di chuyển được (draggable mask). Để tạo loại mặt nạ này, chúng ta cần tạo một đối tượng để làm mặt nạ. Đối tượng này phải là biểu tượng movieclip hoặc button. Thông thường, người ta sẽ sử dụng biểu tượng movieclip. Đầu tiên,hãy tạo hai Layer: Layer 1 chứa ảnh nền (tạm gọi là background), Layer 2 tạo một hình ngũ giác để làm mặt nạ (tạm gọi là mask). Hình 9.4. Tạo một draggable mask – Bước 1 Để tạo được hiệu ứng này, bạn cần sử dụng ActionScript. Ở đây, chúng ta sẽ sử dụng ActionScript nhờ vào Code Snippets. Bạn chọn đối tượng hình ngũ giác, bấm vào biểu tượng Code Snippets. Bạn chọn nhóm Actions > Drag and Drop. Sau đó, bạn hãy nhấp đôi chuột vào biểu tượng này. Bạn hãy nhấn Ctrl+Enter để kiểm tra. Tại thời điểm này, bạn có thể di chuyển đối tượng hình ngũ giác này. Hình 9.5. Tạo một draggable mask – Bước 2 Tiếp theo, chúng ta sẽ sử dụng kĩ thuật Mask. Bạn hãy chọn Layer Mask, kích chuột phải, và chọn Mask. Bạn sẽ thu được kết quả như hình bên dưới. 66
68. Hình 9.6. Tạo một draggable mask – Bước 3 Bạn hãy kiểm tra movie một lần nữa bằng cách nhấn tổ hợp Ctrl+Enter. Bạn sẽ thấy rằng, hiệu ứng mask đã hoạt động. Tuy nhiên, bạn không thể di chuyển được đối tượng dùng làm mặt nạ này. Sở dĩ như vậy là vì, khi bạn sử dụng hiệu ứng mask, đối tượng movieclip được làm mặt nạ sẽ được tự động ấn định thuộc tính buttonMode là false. Chúng ta cần thay đổi thuộc tính này. Bạn hãy nhấn phím F9 để quay lại với khung soạn thảo ActionScript. Sau đó, bổ sung dòng lệnh: movieClip_1.buttonMode = true; Có thể tham khảo toàn bộ mã lệnh của chương trình như bên dưới. movieClip_1.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag); function fl_ClickToDrag(event:MouseEvent):void{ movieClip_1.startDrag(); } stage.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop); function fl_ReleaseToDrop(event:MouseEvent):void{ movieClip_1.stopDrag(); } movieClip_1.buttonMode = true; 4. Tạo SlideShow ảnh Để tạo được SlideShow ảnh này, hãy sử dụng một vài bức ảnh và import vào thư viện. Trong ví dụ này, sử dụng 3 ảnh. Tạo 6 Layer, 3 Layer chứa ảnh, và 3 Layer 67
69. dùng để tạo mặt nạ. Mỗi mặt nạ sẽ được đặt ngay trên bức ảnh. Bạn có thể tham khảo hình minh họa bên dưới. Hình 9.7. Tạo Slide ảnh – Bước 1 Hiệu ứng cho mặt nạ Mask 1. Hãy tạo một hình chữ nhật có kích thước nhỏ, nằm ở góc trên bên phải của khung trình chiếu. Hình 9.8. Tạo Slide ảnh – Bước 2 Chọn đối tượng hình vuông này, kích chuột phải và chọn Create Motion Tween. Hiệu chỉnh độ rộng của Tween này, sao cho vị trí kết thúc của nó nằm ở Frame 15. Sau đó, hiệu chỉnh kích thước của hình vuông sao cho nó chiếm toàn khung trình chiếu. Tại Frame thứ 19 của Layer Pic1, nhấn phím F5 (hoặc F6) để sao chép toàn bộ ảnh trên Frame thứ nhất lên các Frame 2 đến 19. Chọn Layer Mask 1 này, kích chuột phải và chọn Mask. 68
70. Hiệu ứng cho mặt nạ Mask 2. Hoàn toàn tương tự với mặt nạ Mask1. Lần này, bạn hãy tạo một dãy các ngôi sao. Tại Frame 20 của Layer Mask2, bạn nhấn phím F6, sử dụng công cụ PolyStar để tạo các ngôi sao. Hình 9.9. Tạo Slide ảnh – Bước 3 Kích chuột phải lên các đối tượng ngôi sao này, chọn Create Motion Tween. Hiệu chỉnh độ rộng của Tween này sao cho vị trí kết thúc của nó nằm ở Frame 35 của Layer Mask 2. Tại Frame 39 của Layer Pic2, nhấn phím F5 hoặc F6 để sao chép Frame 20 lên các Frame từ 21 đến 39. Kích chuột phải lên Layer Mask 2, chọn Mask. Hiệu ứng cho mặt nạ Mask 3. Tương tự như hai mặt nạ trên. Lần này chúng ta sẽ tạo hiệu ứng cắt lát. Trên Layer Mask 3, bạn hãy tạo các hình chữ nhật (không viền), độ rộng 1 pixel. Hãy sao chép hình chữ nhật này thành nhiều hình và sắp xếp chúng gần nhau (không dính liền nhau). Chúng bao phủ toàn khung trình chiếu. Trong hiệu ứng mặt nạ lần này, ta sử dụng loại mặt nạ biến hình. Bạn hãy chọn Layer Mask 3, kích chuột phải và chọn Shape Tween. Tại Frame 55 của Layer Mask3, nhấn phím F6. Bạn tiếp tục bấn vào KeyFrame này (Frame thứ 55 của Layer Mask 3 này), để chọn tất cả các hình chữ nhật. Giữ phím Ctrl và rê chuột để sao chép tất cả chúng và sắp xếp chúng sát với các hình chữ nhật trước. Bạn tiếp tục công việc này cho đến khi các hình chữ nhật chồng khít nhau và che khuất khung trình chiếu. Tại Frame thứ 60 của Layer Pic3, nhấp phím F5 hoặc F6. Chọn Layer Mask 3, kích chuột phải và chọn Mask. 69
71. Hình 9.10. Tạo Slide ảnh – Bước 4 Bạn hãy quan sát lại cách bố trí các Frame trên TimeLine theo hình bên dưới. Hình 9.11. Tạo Slide ảnh – Bước 5 Để kiểm tra kết quả cuối cùng. Bạn hãy nhấp tổ hợp phím Ctrl+Enter. Hi vọng bạn sẽ hài long với các hiệu ứng này. Bạn hoàn toàn có thể tạo ra các hiệu ứng của riêng bạn bằng cách sử dụng hai loại mặt nạ nêu trên. Câu hỏi ôn tập, bài tập 9.1. Tạo mặt nạ Mask cho dòng chữ KHOA CÔNG NGHỆ THÔNG TIN 9.2. Tạo mặt nạ Mask bóng vệt sáng lướt qua sản phẩm xe ô tô 9.3. Tạo một SlideShow anh giới thiệu về các nghề khoa CNTT 70
72. BÀI 10: CÁC CÔNG CỤ TẠO HOẠT HÌNH: BONE, DECO, BIND, 3D Giới thiệu: Với công cụ Bone, bạn có thể tạo ra các chuyển động dựa trên các khớp nối. Các chuyển động này có thể lấy ví dụ như các khớp xương tay chân, các khớp nối của cần cẩu, hình rồng uốn lượn, rắn trườn, Công cụ này rất hữu ích và đơn giản. Mục tiêu: - Hiểu vai trò BONE, DECO, BIND, 3D - Vận dụng thao tác với các công cụ tạo hoạt hình - Rèn luyện tính cẩn thận, tư duy sáng tạo. Nội dung chính: 1. Bone Tool Với công cụ Bone, bạn có thể tạo ra các chuyển động dựa trên các khớp nối. Các chuyển động này có thể lấy ví dụ như các khớp xương tay chân, các khớp nối của cần cẩu, hình rồng uốn lượn, rắn trườn, Công cụ này rất hữu ích và đơn giản. Đây là công cụ mới được bổ sung vào trong Adobe Flash CS4. Khi sử dụng công cụ này, ta cần phân biệt các trường hợp sau: - Trường hợp 1: Nếu đối tượng cần tạo khớp nối là đối tượng liên tục (hình rắn trườn, rồng lượn ), ta sẽ sử dụng công cụ này một cách trực tiếp. - Trường hợp 2: Nếu đối tượng cần tạo không liên tục, cần có khớp nối (như khớp xương, khớp nối cần cẩu ), ta sẽ sử dụng công cụ này sau khi convert các phần của nó thành các biểu tượng. Tiếp theo, ta sẽ minh họa cho việc sử dụng công cụ Bone trong hai trường hợp này. Công cụ Bone trong trường hợp 1: - Bước 1. Bạn hãy sử dụng công cụ Pencil hoặc Brush để tạo hình một chú rắn. 71
73. - Bước 2. Bấm chọn công cụ Bone, sau đó vẽ các đường khớp nối như trong hình minh họa. - Bước 3. Hãy sử dụng công cụ Selection để kiểm tra các mối nối. Để tạo hiệu ứng động, bạn hãy nhấp chọn vào một Frame nào đó (ví dụ Frame 20), nhấn phím F6. Cơ chế làm việc tự động của công cụ Bone sẽ giúp tạo ra chuyển động nếu bạn hiệu chỉnh độ cong của đối tượng tại Frame này nhờ vào các khớp nối. Bạn hoàn toàn không cần sử dụng đến kĩ thuật Tween. - Bước 4. nhấp tổ hợp Ctrl+Enter để kiểm tra kết quả. Bạn thấy chuyển động của chú rắn như thế nào? Rất mềm mại phải không? Với công cụ này kết hợp với ActionScript, bạn hoàn toàn có thể tạo ra trò chơi “Rắn tìm mồi” đấy. Dĩ nhiên đó chỉ là định hướng mà thôi, nếu bạn muốn thực sự tìm hiểu về kĩ thuật lập trình game trong Flash, bạn hãy tìm các giáo trình chuyên về chủ đề này. Trong phạm vi giáo trình này, chúng tôi không đưa ra những dự án game tầm cỡ, chúng ta chỉ tập trung vào kĩ thuật tạo hoạt hình, cách điều khiển đối tượng (đây là một trong những chức năng nền tảng của lập trình game) và một số hiệu ứng thường được sử dụng trong kĩ xảo (cả kĩ xảo truyền hình lẫn kĩ xảo điện ảnh). Hình 10.1 – Công cụ Bone trường hợp 1 Công cụ Bone trong trường hợp 2: - Bước 1. Bạn hãy tạo ba khối hình chữ nhật (tượng trưng cho các phần của cần cẩu) và sau đó convert chúng thành các đối tượng Graphic. 72
74. - Bước 2. Bấm chọn công cụ Bone, sau đó vẽ các đường khớp nối như trong hình minh họa. - Bước 3. Hãy sử dụng công cụ Selection để kiểm tra các mối nối. Chọn Frame 20, nhấn phím F6, sau đó thay đổi hình dạng của cần cẩu bằng cách điều chỉnh các mối nối. - Bước 4. Nhấn tổ hợp Ctrl+Enter để kiểm tra. Hình 10.2 – Công cụ Bone trường hợp 2 Nếu bạn gặp khó khăn trong việc điều khiển các bộ phận của chiếc cần cẩu này, bạn hãy dành chút thời gian để tìm hiểu về các thuộc tính của các đoạn nối trong công cụ Bone này ở ngay dưới đây. Bảng thuộc tính của các đoạn nối bởi công cụ Bone Khi bạn nhấp chuột vào một đoạn thẳng nối các mối nối, trong bảng thuộc tính Properties sẽ hiện ra các thông số trong hình dưới. - Location: Position X và Y (tọa độ của thanh nối), Length (độ dài của thanh nối), Angle (góc nghiêng của thanh nối), Speech (tốc độ xoay của thanh nối). - Joint Rotation: cho phép hoặc không cho phép thanh nối có thể xoay – tương ứng với Enable được chọn hay không được chọn. - Rotation Constrain: cho phép mối nối gốc của thanh nối dịch chuyển trong vùng từ Min đến Max. - Joint x Translation và Joint y Translation: cho phép thanh nối dịch chuyển theo chiều x hay chiều y. 73
75. Hình 10.3 – Bảng thuộc tính của mối nối tạo bởi công cụ Bone Hình 10.4 – Thuộc tính Constrain - Spring: là một chức năng mới của IK Bone, nó có hai thuộc tính Strength (số lượng của Spring. Khi giá trị này lớn hơn 0, khung sườn sẽ phản ứng lại với một chuyển động vật lý có tỷ lệ thuận giữa giá trị Strength và chuyển động tổng thể) và Damping (giá trị đề kháng Strength). Tùy chọn này ảnh hưởng đến độ tắt dần của chuyển động, lần lượt xác định bằng khoảng thời gian giữa sự chhuyển động ban đầu và thời gian khi IK Bone trở lại vị trí dừng của nó). Đây là một tính năng mới đối với công cụ này trong phiên bản Flash CS6 này, mà Adobe đã bổ sung vào. 74
76. 2. Công cụ Bind Tool Công cụ này phải dùng kết hợp với công cụ Bone. Khi sử dụng công cụ Bone trong trường hợp 1, ta có thể kết hợp với công cụ Bind. Với công cụ Bind, bạn có thể ép buộc các thanh nối phụ thuộc lẫn nhau. Khi sử dụng công cụ Bind, và bấm vào một thanh nối, sẽ hiện ra bốn điểm điều khiển đối với thanh nối đó (trong hình minh họa bên dưới, đó là các nút được đ|nh dấu vàng). Tương ứng với các điểm điều khiển này là các viền của phần đối tượng được điều khiển bởi thanh nối. Để cho mỗi mối nối liên kết với một mối nối khác, ta sử dụng công cụ Bind, bấm chọn các nút điều khiển này và kéo thả vào vị trí thanh nối khác (thanh nối mà các điểm này phụ thuộc vào). Hình 10.5 – Công cụ Bind 3. Công cụ 3D Flash mặc định không hỗ trợ các đối tượng đồ họa 3D. Nó không cung cấp cho chúng ta các công cụ để tạo và phối màu 3D. Flash chỉ cung cấp cho ta công cụ tạo ra sự dịch chuyển 3D và quay theo các góc trong không gian. Nếu bạn thật sự muốn tạo một đối tượng động 3D, tôi khuyên bạn nên sử dụng đến các chương trình chuyên dụng: Autodesk Maya là một sự lựa chọn hoàn hảo nhất. Tuy nhiên, nếu bạn là người yêu thích Flash, bạn cũng có thể sử dụng Plugin hỗ trợ 3D – FreeSpin3D. Đây cũng là một Plugin khá thú vị hỗ trợ 3D hoàn hảo. Nhưng Plugin này có giá không rẻ chút nào. Nếu bạn muốn trải nghiệm một cảm giác miễn phí với đồ họa 3D trong Flash, bạn có thể tạo dựng nó nhờ vào ngôn ngữ lập trình ActionScript. Một khó khăn là bạn cần có một lượng kiến thức toán học khá vững 75
77. chắc để tạo dựng các đối tượng đồ họa 3D. Trong giáo trình này, chúng ta sẽ không thảo luận chi tiết về đồ họa 3D trong Flash. Nói như thế không có nghĩa là bạn hoàn toàn không thể tạo ra một thước phim có cảm giác 3D. Dù không cung cấp cho ta các công cụ chuyên dụng để thiết kế 3D, nhưng với kĩ thuật phối màu Gradient và kĩ thuật Layer, chúng ta có thể tạo dựng một thước phim có “cách nhìn 3D”. Trong ví dụ sau đây, tôi sẽ trình bày cách xây dựng đoạn phim đánh golf. Khi người đánh golf đánh vào quả bóng, thì quả bóng sẽ lăn và rơi vào lỗ golf trên sân cỏ. Bước 1. Tạo mới một Layer có tên là Glass. Bạn hãy phối màu Linear Gradient, và chọn chế độ màu như hình bên dưới. Hình 1 – Trò chơi golf: sân golf trên lớp glass. Bước 2. Tạo lỗ golf trên sân golf. Tạo một Layer mới tên là hole. Trên Layer này, bạn hãy tạo một hình Eclipse như sau. 76
78. Hình 2 – Trò chơi golf: Các bước tạo lỗ golf Sau khi tạo xong lỗ golf, bạn bổ sung thêm một thanh dọc làm cờ cắm trên lỗ golf. Sau khi hoàn tất bước này, bạn hãy đặt lỗ golf vào một ví trí thích hợp trên khung trình diễn của bạn. Bạn cũng lưu ý rằng, khung trình diễn trong trường hợp này rộng hơn theo chiều ngang sẽ thích hợp hơn so với khung trình diễn có chiều dọc gần bằng hoặc lớn hơn chiều ngang. Tôi khuyến cáo bạn trong trường hợp này, nên chọn tỉ lệ theo chuẩn HD là 8:3 (trường hợp của tôi là 850px theo chiều ngang, 400px theo chiều dọc. Hình 3– Trò chơi golf: Hoàn tất lớp Hole Bước 3. Tạo quả bóng golf. Hãy sử dụng công cụ vẽ hình Eclipse, tạo một khối hình tròn (giữ Shift và kéo chuột). Sau đó hiệu chỉnh thuộc tính màu Gradient như bên dưới. Quả bóng golf này nằm trên Layer ball. 77
79. Hình 4– Trò chơi golf: Tạo quả bóng chơi golf Bước 4. Tạo thanh chơi golf. Thanh chơi golf này sẽ đánh vào quả bóng để tạo hiệu ứng đánh golf. Thanh chơi golf được đặt trên Layer line. Hình 5– Trò chơi golf: Tạo thanh đánh golf Lưu ý: bạn cần đặt Layer thanh đánh bóng vào sau Layer quả bóng chơi golf. Tiếp theo, bạn sẽ sử dụng kĩ thuật Motion Tween để tạo hiệu ứng cây đánh golf đánh vào quả bóng chơi golf. Trong trường hợp bên dưới, tôi sử dụng kết hợp công cụ 3D Rotation. 78
80. Hình 6– Trò chơi golf: Tạo cảnh đánh bóng Khi sử dụng Motion Tween, bạn hiệu chỉnh vị trí kết thúc của nó là tại Frame thứ 5. Trên các Layer còn lại, bạn bôi đen Layer thứ 5 tương ứng (nhấn thêm phím Ctrl), sau đó nhấn phím F5 để sao chép Frame 1 đến các Frame còn lại (quan sát khung TimeLine ở trên). Bước 5. Tạo hiệu ứng quả bóng lăn. Tại Frame thứ 5 trên Layer ball, bạn nhấn phím F6 để tạo mới một KeyFrame. Sau đó, sử dụng Motion Tween để tạo chuyển động cho quả bóng tiến về phía lỗ đánh golf. Hình 7– Trò chơi golf: Tạo cảnh quả bóng di chuyển 79
81. Đường di chuyển của quả bóng được chia làm hai phần: Phần 1 – từ vị trí ban đầu đến lỗ golf (Frame 5 đến Frame 60). Phần 2 – Từ vị trí bề mặt lỗ golf xuống dưới lỗ golf (Frame 60 đến Frame 65). Bước 6. Theo cách quan sát của chúng ta, thì từ giai đoạn quả bóng trên bề mặt xuống đến đấy của lỗ golf, thì quả bóng sẽ biến mất. Để thực hiện điều này, ta sẽ sử dụng kĩ thuật Layer. Bạn sử dụng công cụ Lasso, chọn trên Layer Glass một phần như hình minh họa bên dưới. Hình 8– Trò chơi golf: Kĩ thuật Layer Lưu ý: Bạn nên sử dụng thuộc tính Lock cho các Layer còn lại (trừ Layer glass và Layer hole). Sau khi chọn được vùng chọn như trên, bạn sử dụng chức năng Distribute to Layers. Khi đó, sẽ xuất hiện một số Layer mới, bạn hãy nhóm các Layer này thành một nhóm bằng một Folder mới (bạn đặt tên cho nó là LayerTech). Sau đó, kéo Folder này lên trên tất cả các Layer còn lại. Hình 9– Trò chơi golf: Thanh TimeLine trong kĩ thuật Layer Đến đây, hầu như bạn đã hoàn tất thước phim. Tuy nhiên để cho phim được thật hơn, chúng ta sẽ bổ sung thêm hiệu ứng đổ bóng. Sau đây là dự án hoàn chỉnh. Hình 10– Trò chơi golf: Dự án hoàn chỉnh Với dự án golf này, hi vọng bạn sẽ có cảm giác 3D sống động. Chúng ta chỉ đơn thuần sử dụng những kĩ thuật đơn giản được cung cấp trong Flash: hiệu ứng 80
82. Shadow, hiệu ứng Gradient và kĩ thuật Frame, và kết quả thu được là một thước phim tựa 3D. Nếu bạn muốn tạo một hiệu ứng 3D tựa như trái đất quay, bạn cũng hoàn toàn có thể dựa vào các hiệu ứng này. Khi đó, bạn cần một bức ảnh về hình ảnh trái đất được phát họa trên một mặt phẳng (chứ không phải là trên mặt cầu). Bạn kết hợp với công cụ Fill Color (bạn chọn là kiểu Bitmap) với kĩ thuật Shape Tween. Lúc này, bạn sử dụng công cụ Gradient Transform để tạo sự dịch chuyển ảnh trong một khối hình tròn. Câu hỏi ôn tập, bài tập 10.1. Tạo hoạt hình cầu thủ bóng đá sút bóng vào khung thành. Gợi ý: Sử dụng công cụ Bond và 3D tương tự ví dụ đánh golf 10.2. Hãy sử dụng các công cụ tạo hoạt hình (Tween, Bone, Bind, 3D, ) để tạo một VideoClips. Lưu ý trong bài này, sinh viên cần kết hợp với một bài hát. Nội dung phim và nội dung bài hát phải tương đối phù hợp. Bài hát dài không dưới 1 phút. 81
83. BÀI 11: ĐIỀU KHIỂN CHUỘT VÀ BÀN PHÍM BẰNG CÁC SỰ KIỆN Giới thiệu Sự kiện (Event): là một tình huống xãy ra (di chuyển chuột lên nút, nhấp chuột vào nút, ), hoặc là thời điểm thiết lập đã đến (tiến trình đã đến khung hình khóa có thiết lập tương tác). Mục tiêu - Hiểu được công dụng của chuột và bàn phím. - Thao tác với chuột và bàn phím. - Rèn luyện tính cẩn thận, tư duy sáng tạo. Nội dung chính: 1. Sự kiện Chuột Khi làm việc với sự kiện trong AS, cần cài đặt tên hiển thị cho đối tượng. Để minh họa cho việc xử lý sự kiện chuột trong AS, sẽ minh họa sự kiện này trên đối tượng stage (khung trình chiếu). import flash.events.MouseEvent; stage.addEventListener(MouseEvent.CLICK, func); function func(e:MouseEvent):void{ trace("Hello"); Để bổ sung một sự kiện cho một đối tượng, ta sử dụng hàm addEventListener. Hàm này có năm tham số, nhưng ba tham số cuối cùng được cài đặt ngầm định. Ta sẽ quan tâm đến hai tham số đầu. - Tham số Event: nó có thể là sự kiện chuột, bàn phím, sự thay đổi kích thước, thay đổi cửa sổ kích hoạt, . Ở đây, ta chọn MouseEvent với phương thức tương ứng như: CLICK, DOUBLE_CLICK, - Tham số Function: là một hàm sẽ thực thi chức năng tương ứng. Nó cần chứa một tham số sự kiện tương tứng với tham số Event. 82
84. 2. Sự kiện Bàn phím Hoàn toàn tương tự sự kiện chuột, nếu ta thay MouseEvent bằng KeyboardEvent, ta sẽ nắm bắt được các sự kiện phím tương ứng. Bạn cũng lưu ý rằng, các phím được quản lý bởi lớp Keyboard trong AS. import flash.events.KeyboardEvent; import flash.ui.Keyboard; stage.addEventListener(KeyboardEvent.KEY_UP, func); function func(e:KeyboardEvent):void{ if(e.keyCode==Keyboard.ENTER) trace("Hello "); 3. Đưa một đối tượng vào ActionScript Flash cho phép tạo một đối tượng bằng các công cụ vẽ. Đưa các đối tượng này và các đối tượng được cung cấp sẵn(như các thành phần GUI) vào AS. Để làm được điều này, cần chuyển đổi các đối tượng thành các biểu tượng MovieClip hoặc Button. Đối tượng Graphic không được hỗ trợ. Sau đó, hãy kích chọn đối tượng. Trong bảng thuộc tính, hãy nhập tên của đối tượng thể hiện cần tạo ra vào mục , sau đó nhấp Enter. Bây giờ, đối tượng đã được khởi tạo và có thể thao tác với nó bên trong AS theo tên thể hiện vừa cài đặt. Hình 11.1. Tạo một tên thể hiện cho đối tượng Nếu import một đối tượng từ bên ngoài vào trong thư viện Library, cũng có thể tạo một lớp chứa nó (tức là lớp để tạo ra đối tượng này). Chúng ta sẽ xây dựng đoạn chương trình sau đây. Import một file âm thanh vào trong Library. Khi bấm chuột vào nút Play thì nó sẽ chơi file âm thanh này. 83
85. Hình 11.2. Thao tác với thuộc tính Properties của đối tượng trong thư viện - Trong Stage, bạn hãy tạo một nút Play (là biểu tượng Button) và cài đặt tên thể hiện cho nó là btPlay. - Thực hiện import file âm thanh vào trong thư viện: vào File > Import > Import to Library. Trong cửa sổ thư viện Library, bấm chọn file âm thanh đã được import vào, kích chuột phải và chọn Properties (xem hình 11.2). - Khi đó, sẽ xuất hiện hộp thoại Properties như sau: Hình 11.3. Hộp thoai Properties của đối tượng file âm thanh Đánh dấu tích vào Export for ActionScript. Trong Class, bạn nhập vào tên lớp sẽ được xây dựng cho đối tượng âm thanh này (ví dụ là myMusic). Ngay bên dưới là Base Class của nó – tức lớp cơ sở mà nó thừa kế. Sau đó nhấp Ok. 84
86. Kết thúc các thao tác trên, bạn đã nhận được một đối tượng btPlay và một lớp myMusic. Tiếp theo, bạn sẽ bắt tay vào viết mã lệnh cho chương trình. - Nhấn F9 để mở khung soạn thảo ActionScript. Bạn hãy bổ sung sự kiện kích chuột cho đối tượng btPlay như sau: import flash.events.MouseEvent; btPlay.addEventListener(MouseEvent.CLICK, func); var Player:flash.media.Sound = new myMusic(); function func(e:MouseEvent):void{ Player.play(); Đối tượng Player là một sự thể hiện của lớp myMusic. Khi bấm chuột vào nút btPlay, hàm func sẽ được gọi đến. Kết quả là phương thức play của đối tượng Player được thực thi. Câu hỏi ôn tập, bài tập 11.1. Tạo chiếc đồng hồ treo tường - Các kim quay phải nằm trên các Layer riêng biệt. Chúng phải là các MovieClip. Tâm xoay của các kim quay này phải nằm ở một đầu của nó. - Các phần còn lại của đồng hồ, tùy thuộc vào mục đích, có thể tạo trên các Layer khác nhau, hoặc trên cùng một Layer. 85
87. 11.2. Tạo Game hứng trái cây đơn giản (Sử dụng chuột, bàn phím để chơi) 11.3. Tạo Game Mario đơn giản (Sử dụng bàn phím để chơi) Gợi ý: 11.1. Tạo đồng hồ: Sử dụng các Layer sau đây: - Layer Oclock: chức phần khung của chiếc đồng hồ, bề mặt đồng hồ. - Layer Node: chứa các mốc thời gian (4 mốc thời gian). - Layer Hours (chứa kim giờ), Layer Minutes (chứa kim phút), Layer Seconds (chứa kim giây). - Layer Center: nút gốc của các kim quay. - Lưu ý đến trật tự của các Layer. Layer Node ở trên Layer Oclock, Layer các kim quay ở trên Layer Node, Layer center trên Layer các kim quay để che đi phần gốc quay của các kim quay. Đối với các kim quay, bạn cần cài đặt tên thể hiện cho nó. Ví dụ tôi đặt tên cho các đối tượng kim quay như sau: kim giờ là hourobj, kim phút là minobj, kim giây là secobj. Tiếp theo, hãy chọn một đối tượng kim quay, bấm vào khung Code Snippets (hoặc Windows > Code Snippets). Trong cửa sổ này, bạn chọn nhóm Animation > Rotate Continuously. 86
88. Khi đó, Flash sẽ chèn tự động một Action Frame vào trong TimeLine và khởi tạo nội dung Action cho bạn như sau: minobj.addEventListener(Event.ENTER_FRAME, fl_RotateContinuously); function fl_RotateContinuously(event:Event) { //Soạn thảo mã chương trình ở đây minobj.rotation += 10; } Bây giờ hãy thay đoạn mã trong hàm fl_RotateContinuously bằng đoạn mã sau: var dd:Date = new Date(); hourobj.rotation = ((dd.getHours()>=12)?(dd.getHours()):(dd.getHours()- 12))*30; minobj.rotation = dd.getMinutes()*6; secobj.rotation = dd.getSeconds()*6; Trước khi thay thế hai đoạn mã này, bạn nên kiểm tra xem chiếc đồng hồ của bạn hoạt động như thế nào đã nhé. Rõ rang nó chỉ xoay duy nhất chiếc kim phút mà thôi. Bạn cũng lưu ý rằng hiệu ứng này của Code Snippets là hiệu ứng quay liên tục (Rotate Continuously), do đó, bạn không cần tương tác với đối tượng Timer. 87
89. BÀI 12: TẠO CÁC BANNER QUẢNG CÁO Giới thiệu: Tạo banner quảng cáo bằng các công cụ động trong giao diện Adobe Flash, bắt đầu bằng tiêu đề văn bản động. Banner quảng cáo có thể chứa thông tin hữu ích và thường hiển thị nổi bật trên trang đầu tiên để thu hút sự chú ý của khách truy cập trang web. Mục tiêu: - Hiểu mục đích tạo banner quảng cáo - Thiết kế các loại banner quảng cáo - Tạo hoạt hình và hiệu ứng cho các banner quảng cáo - Rèn luyện tính cẩn thận, tư duy sáng tạo. Nội dung chính: 1. Giới thiệu banner quảng cáo Việc thiết kế hình ảnh sẽ bắt đầu bằng một phác thảo ý tưởng cho banner muốn thực hiện (ví dụ như làm banner quảng cáo, banner tuyển dụng, banner khuyến mãi, ). Banner đơn giản và dễ làm nhất là kiểu banner dùng một hình có sẵn làm nền, sau đó chèn chữ lên hình. Hình12.1. Một dạng banner đơn giản, dễ thiết kế. 88
90. Từ một kiểu banner đơn giản, có thể tạo ra thành nhiều kiểu chỉ với những thay đổi như: - Vị trí chữ. - Màu chữ. - In hoa hay in thường. - Gạch chân. - Kích cỡ chữ. Nếu muốn sáng tạo hơn, thì bạn có thể ghép nhiều hình ảnh để tạo thành banner. Tuy nhiên, cần đảm bảo bố cục hợp lý, banner được tạo phải hấp dẫn. 2. Tạo các banner quảng cáo bằng biến đổi hình dạng, mặt nạ Bước 1: Đầu tiên, tìm một bức ảnh bạn thích để sử dụng cho bài này. Bước 2: Nhấn tổ hợp phím Ctrl+J trên bạn phím (Document Properties) và thiết đặt kích cỡ cho tài liệu như kích của tấm ảnh. Chọn màu trắng làm màu nền. Đặt frame rate của Flash movie là 32 và nhấn OK. Bước 3: Gọi về ảnh lớp hiện tại. Nhấn kép lên nó để thay đổi tên mặc định của nó (layer 1). Nhấn Enter khi đã gõ vào một tên mới. Bước 4: Bây giờ chọn File -> Import -> Import to stage (Ctrl+R) và import một bức ảnh bất kì vào trong flash stage. Trong khi bức ảnh này vẫn được chọn, vào Align Panel (Ctrl+K) và làm theo các bước sau: 1. Nút To Stage trong phần Align/Distribute được bật. 2. Nhấn vào nút Align horizontal center button 89
91. 3. Nhấn vào nút Align vertical center button. Hình 12.2. Canh lề đối tượng Bước 5: Trong khi tấm ảnh vẫn được chọn, nhấn phím F8 (Convert to Symbol) để chuyển đổi nó vào trong Movie Clip Symbol. Hình 12.3. Chuyển đối tượng thành Movie clip Bước 6: Bây giờ nhấn vào frame 20, 35 và 40 và lần lượt nhấn phím F6. Bước 7: Bây giờ trở lại với frame đầu tiên và đặt nó vào vị trí như bức hình dưới đây. Hình 12.4. Chọn vị trí Frame đặt hình ảnh 90
92. Bước 8: Sau đó, trong khi bạn vẫn ở trên frame 1, chọn Selection Tool (V) và nhấn một lần vào bức ảnh để chọn nó. Sau đó, vào Properties Panel (Ctrl+F3) ở phía dưới của stage. Sau đó, chọn thẻ Filters từ khung bên trái. Nhấn vào biểu tượng dấu cộng (+) và chọn bộ lọc Blur. Làm theo các thay đổi sau: Hình 12.5. Chọn thuộc tính Blur Bước 9: Bây giờ chọn frame 35 và lặp lại các bước trên. Bước 10: Nhấn chuột phải lên bất kì chỗ nào trên khu vực màu xám giữa frame 1 và 20, frame 20 và 35 và frame 35 và 40 trên timeline và chọn Create Motion Tween từ menu hiện ra. Bước 11: Tạo layer mới phí trên layer ảnh và đặt tên cho nó là 'mask'. Bước 12: Chọn layer 'mask' và dùng công cụ flash để vẽ, vẽ một hình dạng như hình dưới đây. 91
93. Hình 12.6. Vẽ các hình dạng tạo Mask Bước 13: Bây giờ nhấn vào frame 20 và nhấn phím F6. Bước 14: Trong khi bạn vẫn đang ở frame 20, chọn Selection Tool (V) và chọn một hình trên stage và nhấn phím Ctrl+X (cắt ). Bước 15: Bây giờ nhấn chọn frame 21 và nhấn phím F7. Trong khi vẫn ở frame 21, nhấn tổ hợp phím Ctrl+Shift+V. Bây giờ chỉ có một hình vẽ. Hình 12.7. Tạo Frame cuối cho đối tượng vẽ Bước 16: Bây giờ nhấn vào frame 35 và nhấn phím F6. Sau đó, dùng Free Transform Tool (Q), mở rộng hình vẽ như hình dưới đây: 92
94. Hình 12.8. Mở rộng hình dạng đối tượng Bước 17: Bây giờ nhấn chọn frame 50 và nhấn phím F6. Trong khi vẫn ở frame 50, mở rộng hình vẽ ra để điền đầy toàn bộ flash stage. Như hình dưới đây: Hình 12.9. Mở rộng đối tượng vừa hình Bước 18: Bây giờ trở lại với frame 21 và và phần Properties Panel (Ctrl+F3) phía dưới stage đó. Ở khung bên trái, sẽ thấy menu Tween xổ xuống. Chọn Shape trong danh sách sổ xuống. Lặp lại tiến trình này cho frame 35 và 40. Bước 19: Chọn layer 'mask' và chuyển nó thành một mặt nạ bằng cách nhấn chuột phải lên layer 'mask' và chọn Mask. Như hình dưới đây: 93
95. Hình 12.10. Chuyển Layer thành mặt nạ Mask Bấm Ctrl+Enter xem kết quả sản phẩm. 3. Tạo banner quảng cáo bằng các biến đổi chuyển động Bước 1: Chọn các hình ảnh và đưa vào thư viện: Hình 12.11. Thư viện hình ảnh Bước 2: Thiết kế nền Banner Hình 12.12. Nền Banner Bước 3: Thiết kế Text và các đối tượng lên Banner 94
96. Hình 12.13. Kéo các đối tượng từ Thư viện vào Banner Bước 4: Tạo hoạt hình cho vòng lửa Tại frame đầu tiên của Layer vòng lửa click phải chuột chọn Motion Tween, tại frame cuối cùng, bấm F6 và kéo điểm tròn màu đen cho bằng vị trí cuối của các Layer khác (frame 290). Hình 12.14. Chọn vị trí đặt frame cuối cho hoạt hình Motion Tween Bước 5: Chọn thuộc tính quay cho vòng lửa khi chọn Motion Tween. Ở đây chọn Direction và tíc vào Orient to path. Hình 12.15. Chọn thuộc tính cho hoạt hình Motion Tween Bấm Ctrl+Enter xem kết quả sản phẩm. 95
97. Câu hỏi ôn tập, bài tập 12.1. Thiết kế banner chào mừng Tân học sinh, sinh viên nhập học Nội dung trong banner phải có: + Họ tên sinh viên thực hiện + Trường CĐ Kỹ thuật Công nghệ Bà Rịa – Vũng Tàu chào mừng các bạn Tân Học sinh, Sinh viên. + Sử dụng ít nhất 5 hình ảnh có liên quan + Sử dụng symbol: button và movie clip + Sử dụng 2 kỹ thuật diễn hoạt: classic Tween và shape Tween 12.2. Thiết kế banner quảng cáo sản phẩm điện thoại di động Nội dung trong banner phải có: + Công ty Họ tên sinh viên thực hiện. + Chào mừng năm học mới – Giảm giá 30% tất cả các sản phẩm + Sử dụng ít nhất 5 hình ảnh có liên quan + Sử dụng symbol: button và movie clip + Sử dụng 2 kỹ thuật diễn hoạt: motion Tween và shape Tween 96
98. BÀI 13: VẼ GIAO DIỆN CÁC TRANG WEB Giới thiệu Các sản phẩm Flash rất đa dạng: Website, Banner, Quảng cáo, Game, Animation, và rất nhiều ứng dụng khác với tên gọi chung là RIA: Rich Internet Applications (các ứng dụng web có tính tương tác cao) Ngoài khả năng chạy trên Web, Flash cũng có thể chạy được trên máy tính cục bộ bằng Flash player standalone, bằng trình duyệt có cài Flash plugin, embed vào các chương trình khác hoặc bằng cách xuất ra định dạng file EXE, vì thế Flash cũng có thể được dùng để tạo ra các ứng dụng và game nhỏ chạy trên desktop hoặc chạy trên đĩa CD. Mục tiêu - Mô tả giao diện trang web theo yêu cầu - Thiết kế giao diện web căn bản - Vẽ giao diện web hoàn chỉnh - Rèn luyện tính cẩn thận, tư duy sáng tạo. Nội dung chính: 1. Mô tả giao diện Hình 13.1. Giao diện Web cơ bản Yêu cầu gồm hai chức năng chính: 97
99. +Chức năng người dùng: Xem máy tính, đặt hàng, tìm kiếm, download +Chức năng người quản trị: Thêm, xóa, sửa các loại máy tính, cập nhật giá, sologan Hình 13.2. Bố cục trang Web Banner: Chứa hình ảnh và logo,sologan của công ty. Menu ngang: Chứa các chức năng của trang web. Menu dọc: Chứa hãng điện thoại cho khách hàng lựa chọn. Mục chọn giao diện: Có các nút chức năng để thay đổi giao diện trang chủ 2. Chuẩn bị công cụ vẽ Nhấp vào Layer 1 và đặt tên lại là Layer Nen. Bây giờ bạn tiến hành việc vẽ khung màu nền cho giao diện bằng cách nhấp chọn công cụ Rectangle Tool. Hình 13.3. Tạo Layer cho các thành phần Web Chọn hộp màu Fill Color với ô màu chọn như hình dưới. Giá trị màu của vùng màu tô này là #3300CC. 98
100. Hình 13.3. Bảng công cụ vẽ giao diện Vẽ vào vùng làm việc hình chữ nhật nằm bên trên và dưới của vùng làm việc. Sau đó dùng công cụ Text Tool để nhập chuỗi văn bản như sau vào trong vùng làm việc. Tất cả các chuỗi ký tự đều xếp thành hai hàng như trong hình (trên). 3. Thiết kế và vẽ Bước 1: Thiết kế cấu trúc trình bày trang Web Mô phỏng giao diện theo dạng đơn giản Bước 2: Thiết kế Banner giao diện Sử dụng thư viện hình ảnh, Mask và các thuật tạo hoạt hình: Motion Tween, Shape Tween Bước 3: Thiết kế Menu Sử dụng công cụ Text và các công cụ vẽ và các hình ảnh Bước 4: Thiết kế Menu trái Sử dụng công cụ Text và các công cụ vẽ và các hình ảnh Bước 5: Thiết kế Menu phải Sử dụng công cụ Text và các công cụ vẽ và các hình ảnh 99
101. Bước 6: Thiết kế Nội dung Sử dụng công cụ Text và các công cụ vẽ và các hình ảnh Bước 7: Thiết kế Chân trang Sử dụng công cụ Text và các công cụ vẽ và các hình ảnh Bước 8: Test Câu hỏi ôn tập, bài tập 13.1. Thiết kế trang Web Khoa CNTT trường Cao đẳng kỹ thuật công nghệ BR – VT 13.2. Thiết kế trang Máy Tính online 100
102. BÀI 14: TẠO CÁC MOVIE CLIP VÀ CÁC NÚT BẤM Giới thiệu: Việc tạo MovieClip và các nút bấm làm tăng thêm sự phong phú và các phương thức thao tác trên các trang Web và các đoạn phim hoạt hình. Mục tiêu: - Hiểu vai trò của các nút bấm và movie clip - Tạo liên kết lên trang bằng các nút bấm và công cụ movie clip - Rèn luyện tính cẩn thận, tư duy sáng tạo. Nội dung chính: 1. Tạo các movie clip đặt lên trang Sau khi bạn đã hoàn chỉnh một video, công việc tiếp theo là cần xuất bản nó. Trước khi xuất bản, cần hiệu chỉnh một vài thông số liên quan trong mục Publish Setting. Để xuất bản phim, hãy chọn chức năng Export Movie. Trong hộp thoại xuất hiện, bạn hãy chọn định dạng *.swf. Với định dạng swf này, có thể tạo nó trong trình Flash Player hoặc trong một file html với trình duyệt có cài đặt plugin flash. Hoàn toàn có thể chọn định dạng video khác, tuy nhiên nó không giữ lại những hiệu ứng tương tác với các nút nhấn. Để đơn giản, Flash Player cung cấp cho ta chức năng tạo trình movie khả thi *.exe. Để tạo một movie dạng này, hãy mở movie vừa xuất bản bằng Flash Player, sau đó chọn File >Create Projector, và nhập tên movie. Xuất bản tập tin cho thiết bị di động. Để xuất bản tập tin cho thiết bị di động, chúng ta có hai hướng tiếp cận: - Nếu thiết bị di động chỉ hỗ trợ flash lite dưới dạng plugin: chúng ta cần chọn lựa khi tạo mới một dự án trong flash (chọn phiên bản flash lite phù hợp). Bạn cũng cần lưu ý rằng, không phải dòng điện thoại nào cũng hỗ trợ ActionScript 3, vì vậy bạn cũng cần lưu ý. Sự hỗ trợ này phụ thuộc vào phiên bản flash lite. Việc xuất 101
103. bản một tập tin cho thiết bị di động là hoàn toàn tự động, hoặc bạn có thể sử dụng chức năng Export Movie như trên. - Nếu thiết bị di động hỗ trợ Adobe AIR (như các dòng máy tính bảng tablet): khi tạo một dự án, chúng ta cần chọn dự án Adobe AIR. Việc xuất bản tập tin đóng gói để cài đặt trên Adobe AIR không diễn ra tự động. Chúng ta cần thiết lập các thông số cấu hình cho nó. Một tập tin cài đặt cho AIR có phần mở rộng là *.air (nếu đã được đính kèm tập tin chứng thực) hoặc *.airi (nếu chưa đính kèm tập tin chứng thực). Chúng ta chỉ có thể cài đặt lên AIR đối với tập tin đã chứng thực *.air. Để thiết lập các thông số cho tập tin cài đặt trên AIR, ta chọn File > Adobe Air 2 Settings. Mục General: Hình 14.1. Thiết lập tập tin cài đặt trên air – Mục General Output file: Tên tập tin cài đặt sẽ xuất bản. Windows Installer (*.exe): Tên tập tin cài đặt xuất bản ở dạng *.exe. File name: Tên tập tin sau khi cài đặt. Apps name: Tên của ứng dụng. Version: Tên phiên bản. Apps ID: ID của ứng dụng. 102
104. Description: một vài đặt tả về ứng dụng. Copyright: bản quyền. Windows Style: dạng hiển thị của cửa sổ Windows dành cho ứng dụng AIR. Có ba dạng hiển thị: System Chrome (theo hệ thống), Custom Chrome (tùy chỉnh) và Transparent (trong suốt). Mục Signature: Hình 14.2. Thiết lập tập tin cài đặt trên air – Mục Signature Tạo một tập tin chứng thực. Nếu chưa có một tập tin chứng thực, chúng ta bấm vào nút Create. Publisher name: tên nhà xuất bản đã tạo ra tập tin. Hình 14.3. Tạo tập tin chứng thực. Organization unit: đơn vị tổ chức. Organization name: tên tổ chức. Country: quốc gia. 103
105. Password/Confirm password: mật khẩu bảo vệ và nhập lại mật khẩu. Type: thuật toán mã hóa. Save as: vị trí lưu tập tin chứng thực. Mục Icon: chọn biểu tượng cho chương trình. Chúng ta cần tạo ra 4 kích thước cho biểu tượng: 16x16, 32x32, 48x48 và 128x128. Mục Advanced: Hình 14.4. Thiết lập tập tin cài đặt trên air – Mục Advanced. Associated file type: chương trình sẽ quản lý tập tin nào. Initial Windows Settings: các thông số về cửa sổ Windows – chiều rộng (width), chiều cao (height), tọa độ x, tọa độ y, độ rộng tối đa (maximum width), độ cao tối đa (maximum height), độ rộng tối thiểu (minimum width), độ cao tối thiểu (minimum height), cho phép hiển thị ở chế độ cực đại (maximizable), cho phép hiển thị ở chế độ tối thiểu (minimizable), cho phép thay đổi kích thước (resizable), cho phép hiển thị (visible). Other settings: các thiết lập khác – install folder (thư mục cài đặt), program menu folder (thư mục hiển thị trong menu program). Sau khi thiết lập xong các thông số, chọn Publish để xuất bản (hoặc nhâp Ok). * Một số thuộc tính thực thi MovieClip: Load Graphic: Load 1 hình bitmap bên ngoài vào một movieClip hoặc screen. 104
106. Load External Movie Clip: Load 1 file.swf ngoài vào một movieClip hoặc 1 screen. Unload Flash Movie: Bỏ load file.swf mà đã được load từ ngoài vào tập tin. Duplicate Movieclip: Nhân bản 1 movieClip hoặc screen GotoAndPlay at frame or label: Nhảy đến frame cụ thể của movieClip và chạy tiếp. GotoAndStop at frame or label: Nhảy đến frame cụ thể của movieClip và dừng. Bring to Front, Bring Forward, Send to Back, Send Backward: Thay đổi thứ tự hiển thị các movieClip trên stage. Start Dragging movieclip: Khởi động drag một movie clip. Stop Dragging movieclip: Ngưng drag một movieClip. 2. Tạo các nút bấm liên kết Chuyển 1 hình shape thành button: Tạo hình shape: Vẽ một hình shape trên stage bằng cách công cụ, hay (có thể import một hình bitmap làm button) Chuyển hình shape thành symbol button: Click chọn hình shape, Rclick > convert to symbol hay Insert > create new symbol (Ctrl_F8). Chọn kiểu symbol là button Tạo các trạng thái button tương ứng với sự kiện con trỏ: Dclick vào instance button trên stage để vào edit mode của button Insert Keyframe vào 3 frame đầu (có tên frame là Up,Over, Down): thay đổi trạng thái button như đổi màu, đổi dạng Tạo vùng tương tác với con trỏ: Thay đổi kích thước, vị trí hình shape trong frame "Hit". Thể hiện trạng thái Button Up: Trạng thái bình thường của button Over: Khi rê chuột lên button 105
107. Down: Khi click chuột lên button Xác định vùng tương tác Hit: (Không hiển thị trong file.swf) Hình 14.5. Tạo vùng tương tác Có thể tách riêng vùng tương tác và button, lúc đó rê con trỏ chuột lên vị trí này thì button ở vị trí khác thay đổi. Hình 14.6. Các trạng thái Button Một số câu lệnh thông dụng: 1. Lệnh thử button: on (release) { trace("r u click me?"); } 2. Lệnh nhảy frame: Nhảy đến frame cùng cấp - Nhảy đến keyframe 3 trong cùng 1 timeline: gotoAndStop(3); - Nhảy đến keyframe "on" trong cùng 1 timeline: gotoAndStop("on"); - Nhảy đến keyframe kế tiếp: nextFrame (); - Nhảy về keyframe kế truớc: 106
108. previousFrame(); Ví dụ: album hình Nhảy đến các keyframe khác cấp: Ví dụ ta có cấu trúc các movieClip lồng nhau là: main timeline > movie1_mc > movie2_mc và main timeline > clip1_mc > clip2_mc Nhảy lên các frame cấp trên: - Nhảy lên 1 cấp (Từ clip2_mc nhảy đến frame 4 của clip1_mc) _parent.gotoAndStop(4); - Nhảy lên 2 cấp (Từ Clip2 nhảy đến frame 2 của main timeline) _parent._parent.gotoAndStop(2); - Trở về main timeline (về frame 3, main timeline từ bất kỳ vi trí nào): _root.gotoAndStop(3); Nhảy xuống các keyframe trong timeline riêng của movieClip: - Từ main timeline nhảy đến frame 2 của movieClip "Clip1_mc": clip1_mc.gotoAndStop(2); - Từ main timeline nhảy đến frame 5 của movieClip "Clip2_mc": clip1_mc.clip2_mc.gotoAndStop(5); Ví dụ: các nút điều khiển biến hình, chuyển màu Nhảy qua lại giữa 2 movieClip không lồng nhau: Từ movieClip "Clip2_mc" nhảy đến keyframe 3 của "movie2_mc": this._parent._parent. movie1_mc.movie2_mc.gotoAndStop(3); Có thể dùng Insert Target Path trong Actions panel để nhập đường dẫn 1 cách chính xác. 107
109. Chạy 1 đoạn chuổi frame hoạt cảnh trong cùng 1 timeline có keyframe đầu là 20: gotoAndPlay(20); 3. Lệnh mở flash toàn màn hình: fscommand("fullscreen", true); 4. Lệnh đóng file flash: fscommand("quit", true); 5. Lệnh mở trang web: getURL(" ", _blank); 6. Lệnh gởi mail: getURL("mailto:dannhut@gmail.com"); Câu hỏi ôn tập, bài tập 14.1. Tạo Movie Clip từ một file hoạt hình .SWF hoặc .GIF 14.2. Tạo một Banner quảng cáo và tạo các button Stop, Play, 108