Giáo trình Script và kĩ thuật hoạt hình

248 trang vanle 3570

Download

Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Script và kĩ thuật hoạt hình", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

giao_trinh_script_va_ki_thuat_hoat_hinh.pdf

Nội dung text: Giáo trình Script và kĩ thuật hoạt hình

ĐẶNG NGỌC HỒNG THÀNH SCRIPT VÀ KĨ THUẬT HOẠT HÌNH (Giáo trình giảng dạy trên Flash CS5 và ActionScript 3.0)
Blank Page - 2 -
LỜI NĨI ĐẦU dobe Flash là một phần mềm chuyên nghiệp để tạo c|c thước phim hoạt hình, c|c trị chơi, thiết kế giao diện web (RIA – Rich Internet Application) Flash cĩ một ứng dụng to lớn trong thế giới Internet nĩi chung và trong cơng nghệ giải trí nĩi riêng. Dù rằng nhiều cơng A nghệ mới ra đời đang cố gắng cạnh tranh với Flash, nhưng Flash vẫn chiếm thị phần cao hơn hẳn. Cĩ khá nhiều giáo trình về Flash được biên soạn, nhưng đại đa số đều dựa trên phiên bản MacroMedia Flash MX 2004 tương đối cũ. Với phiên bản CS5, Adobe đ~ bổ sung vào những tính năng mới giúp người dùng thiết kế và lập trình đơn giản hơn. Cuốn giáo trình này gồm cĩ ba phần: Phần 1. Thiết kế dành riêng cho những độc giả khơng chuyên muốn tìm hiểu cách sử dụng cơng cụ vẽ và tạo hoạt hình bằng các cơng cụ cĩ sẵn của Flash. Phần này bao gồm c|c chương 1, chương 2, chương 3, chương 4. Phần 2. Gồm chương 5. Dành cho các độc giả muốn tìm hiểu về ActionScript 3.0 – một ngơn ngữ lập trình cĩ cấu trúc gần giống với Java được sử dụng để tăng cường sức mạnh cho Flash. Phần 3. Mang tính chất tổng hợp. Gồm c|c chương 6 v{ 7. Phần này giúp bạn đọc hồn thiện c|c thước phim hoạt hình bằng c|c kĩ thuật nâng cao. Chúng tơi cịn cung cấp thêm các kiến thức để làm việc với hình ảnh, âm thanh và video. Đồng thời, chúng tơi cịn giới thiệu gĩi thư viện mở PaperVision3D để làm việc với đồ họa 3D trong Flash – một điều mà hầu như chưa cĩ một gi|o trình n{o đề cập đến. Khi biên soạn gi|o trình n{y, tơi đ~ cố gắng hồn thiện nĩ. Tuy nhiên, khơng thể tránh khỏi sai sĩt. Tơi rất mong nhận được sự đĩng gĩp ý kiến quý báu của các bạn độc giả cũng như c|c bạn đồng nghiệp. Mọi thư từ đĩng gĩp xin gửi về các địa chỉ email sau dnhthanh@hueic.edu.vn hoặc myhoangthanh@yahoo.com. Huế, tháng 08/2010 Chân thành cảm ơn ! - 3 -
Blank Page - 4 -
PHỤ LỤC LỜI NĨI ĐẦU 3 CHƯƠNG 1. GIỚI THIỆU VỀ FLASH 10 1.1. Sơ lược về đồ họa vector và lịch sử ra đời của Flash 10 1.2. So sánh Flash với Silverlight và JavaFx 13 1.3. C{i đặt Adobe Flash CS5 14 1.4. Giới thiệu về Adobe Flash CS5 17 1.4.1. Các chế độ tùy biến giao diện 19 1.4.2. Tạo mới dự án cho desktop và mobile 20 1.4.3. Layer, Frame, Scene và Movie 22 1.4.4. Vùng thanh cơng cụ Tools 25 1.4.5. Vùng thuộc tính Properties 25 1.4.6. Vùng soạn thảo ActionScript 26 1.4.7. Các vùng chức năng kh|c 28 Tổng kết chương 1 35 CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN 37 2.1. Các cơng cụ Pencil, Brush và Erase 37 2.2. Cơng cụ vẽ hình cơ bản 39 2.3. Cơng cụ Text 48 2.4. Cơng cụ chọn Selection và Lasso 50 2.5. Các cơng cụ đổ màu Paint Bucket, Ink Bottle và bắt màu EyeDropper 51 2.6. Cơng cụ Free Transform và Gradient Transform 53 2.7. Các cơng cụ làm việc với đường Bezier 56 - 5 -
2.8. Làm việc với c|c đối tượng 59 Tổng kết chương 2 62 CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH 64 3.1. Biểu tượng Graphic 64 3.2. Biểu tượng Button 66 3.3. Biểu tượng MovieClip 68 3.4. Làm việc với Library 69 Tổng kết chương 3 70 CHƯƠNG 4. TẠO HOẠT CẢNH 72 4.1. Tìm hiểu về TimeLine 72 4.2. Classic Tween 79 4.3. Shape Tween 81 4.4. Motion Tween 83 4.5. Cơng cụ Bone và Bind 88 4.6. Cơng cụ Deco 92 4.7. Cơng cụ 3D Translation và 3D Rotation 104 Tổng kết chương 4 107 CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT 109 5.1. Các kiểu dữ liệu 111 5.2. Biến và Hằng 112 5.3. Tốn tử và Biểu thức 113 5.4. Các cấu trúc lệnh điều khiển 121 5.4.1. Câu lệnh if 121 5.4.2. Câu lệnh switch 122 - 6 -
5.4.3. Các câu lệnh lặp for, while v{ do while 123 5.4.4. Các lệnh continue, break và return 126 5.5. Hàm 127 5.6. Lớp v{ Đối tượng 130 5.6.1. Xây dựng lớp 130 5.6.2. Làm việc với đối tượng 134 5.6.3. Sự kiện chuột 137 5.6.4. Sự kiện bàn phím 138 5.7. Đưa một đối tượng vào ActionScript 139 5.8. Làm việc với XML 141 5.9. Vùng chức năng Code Snippets 143 Tổng kết chương 5 170 CHƯƠNG 6. CÁC HIỆU CHỈNH NÂNG CAO 172 6.1. Xử lý âm thanh, hình ảnh và video 172 6.2. Tạo kĩ xảo điện ảnh với Flash 177 6.3. Tạo thước phim Flash tựa 3D 181 6.4. Ghép nối nhiều hoạt cảnh 188 6.5. Kĩ thuật mặt nạ mask 188 6.6. Tạo các nút nhấn điều khiển 196 6.7. Xuất bản một Movie 198 6.8. Xuất bản một tập tin Flash trong suốt trên trình duyệt 202 Tổng kết chương 6 207 CHƯƠNG 7. THƯ VIỆN PAPERVISION3D 209 7.1. Giới thiệu về PaperVision3D và Adobe Flex Builder 209 - 7 -
7.2. Cấu hình v{ c{i đặt PaperVision3D cho Adobe Flex Buider 213 7.3. Chương trình Hello, PaperVision3D ! 216 7.4. C|c đối tượng trong PaperVision3D 220 7.4.1. C|c đối tượng hình thể 220 7.4.2. Đối tượng Material - Phối màu cho hình thể 228 7.4.3. Đối tượng Lights - Hiệu ứng ánh sáng 232 7.4.4. Đối tượng Shader - Hiệu ứng đổ bĩng 233 7.4.5. Đối tượng ShadedMaterial 233 7.4.6. Đối tượng CompositeMaterial 233 7.4.7. Đối tượng MaterialsList 234 7.5. Import một mơ hình 3D 234 Tổng kết chương 7 236 BÀI TẬP THỰC HÀNH 238 BÀI THỰC HÀNH SỐ 1 238 BÀI THỰC HÀNH SỐ 2 239 BÀI THỰC HÀNH SỐ 3 240 BÀI THỰC HÀNH SỐ 4 240 BÀI THỰC HÀNH SỐ 5 242 BÀI THỰC HÀNH SỐ 6 243 TÀI LIỆU THAM KHẢO THÊM 246 - 8 -
Blank Page - 9 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH CHƯƠNG 1. GIỚI THIỆU VỀ FLASH 1.1. Sơ lược về đồ họa vector và lịch sử ra đời của Flash Sơ lược về đồ họa vector Đồ họa máy tính được chia làm ba dạng cơ bản: Đồ họa điểm: cơ sở của nĩ l{ c|c điểm ảnh (pixel). Mỗi bức ảnh của đồ họa điểm là một ma trận điểm, mà mỗi điểm ảnh được x|c định bởi một mẫu màu theo chuẩn phổ biến là RGB (Red-Green-Blue). Mỗi tham số m{u được phân bố từ 0 cho đến 2n -1 (ảnh dạng n bit màu). Khi phĩng to bức ảnh của đồ họa điểm, bạn sẽ thấy rõ từng điểm ảnh. Hãy quan sát ví dụ đối với bức ảnh sau Hình 1 – Đồ họa điểm
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH Đồ họa Fractal: sử dụng thuật tốn đệ quy. Nếu quan t}m đến dạng đồ họa này, hãy tham khảo thêm trong các tài liệu liên quan đến đồ họa Fractal hay hình học Fractal. Hình 2 – Đồ họa Fractal Đồ họa vector: cơ sở của nĩ là vector và đường cong Bezier. Nĩ cĩ nhiều ưu điểm so với đồ họa điểm. Một trong những ưu điểm lớn nhất của nĩ là khơng bị “vỡ hạt” khi phĩng to bức ảnh. C|c chương trình đồ họa vector nổi tiếng bao gồm Adobe Illustrator, Corel Draw, Một bức ảnh dưới dạng đồ họa vector bao giờ cũng mịn m{ng hơn so với đồ họa điểm. Khơng cĩ nhiều định dạng đồ họa điểm hỗ trợ chế độ transparent (hay chế độ màu alpha). Nhưng với đồ họa vector, thì những tính năng n{y được hỗ trợ một cách hồn hảo. Với đồ họa vector, c|c chương trình chỉnh sửa và thiết kế đồ họa luơn hỗ trợ chế độ lớp Layer, nhưng với đồ họa điểm, chỉ cĩ một v{i định dạng mới hỗ trợ lớp Layer n{y (như psd của photoshop). Hãy quan sát một số đối tượng đồ họa được tạo bởi Adobe Illustrator sau đ}y - 11 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH Hình 3 – Đồ họa vector Định dạng Flash mà chúng ta sẽ làm quen ở đ}y cũng thuộc v{o đồ họa vector. Flash thường được sử dụng để tạo ra các hiệu ứng động. Xét ở một phạm trù nào đĩ, nĩ cĩ nhiều điểm tương đồng với kĩ thuật tạo video (kĩ thuật 24 hình/giây). Nhưng nĩ cĩ ưu điểm là phim được tạo bởi Flash khơng bị vỡ hạt khi phĩng to (trừ trường hợp phim cĩ chứa c|c đối tượng đồ họa điểm). V{ đặc biệt, kích thước phim tạo bởi Flash rất nhỏ gọn so với c|c định dạng phim khác. Lịch sử ra đời của Flash Flash là một kĩ thuật tạo các hiệu ứng động, c|c thước phim hoạt hình Flash được giới thiệu đầu tiên bởi cơng ty MacroMedia v{o năm 1999. Đến năm 2005, cơng ty n{y đ~ được Adobe mua lại với giá 3.4 tỉ đơla. Từ khi ra đời cho đến này, Flash đ~ cĩ rất nhiều bước phát triển đ|ng chú ý. Nhiều tính năng mới đ~ liên tục được cập nhập trong các phiên bản của nĩ, kể từ các phiên bản Macromedia Flash cho đến Adobe Flash hiện nay. - 12 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH Với phiên bản Adobe Flash CS4, cơng ty Adobe đ~ bổ sung vào cho Flash những tính năng mạnh mẽ: hỗ trợ nhiều định dạng import dữ liệu; bổ sung các cơng cụ tạo hoạt hình mạnh mẽ như Bone, Bind, 3D Translation, 3D Rotation, Phiên bản mới nhất của Flash l{ CS5 (cho đến năm 2010). Hiện nay, Adobe cũng đ~ tạo ra một ấn bản mã nguồn mở cho Flash đĩ l{ cơng nghệ Flex. Một trong những cơng nghệ ra đời sớm nhất hỗ trợ tạo giao diện web – RIA. Flex là một cơng nghệ hứa hẹn đem lại nhiều lợi nhuận cho Adobe (nhờ vào trình phát triển Adobe Flex Buider). Nĩ là một đối thủ lớn của cơng nghệ Silverlight của Microsoft và JavaFx của Sun (nay được mua lại bởi Oracle). 1.2. So sánh Flash với Silverlight và JavaFx Ngày nay, xu thế thương mại điện tử hĩa đang ng{y c{ng len lỏi vào các ngĩc ngách xã hội. C|c website l{ nơi cung cấp thơng tin, trao đổi v{ tư vấn. Do đĩ, giao diện website đẹp mắt, thiết kế thuận tiện là một lợi thế. Chính vì lẽ đĩ, rất nhiều nhà phát triển chú ý đến điều này. Các hãng phần mềm lớn như Microsoft, Adobe, Sun, phát triển các cơng nghệ hỗ trợ để chiếm lĩnh thị trường phần mềm hỗ trợ cơng nghệ trên. Tính về tuổi đời phát triển của các cơng nghệ hỗ trợ RIA, Adobe tỏ ra l{ người tiên phong. Flash/Flex của Adobe, Silverlight của Microsoft và JavaFx của Sun là những cơng nghệ đ|ng chú ý nhất. Mỗi trong số chúng đều cĩ ưu điểm của nĩ. Một ưu điểm chung của chúng l{ đồ họa rất đẹp và chuyển động rất mềm mại. Flash/Flex cĩ tuổi đời khá cao, với lượng người dùng đơng đảo, hầu hết các nhà phát triển đ~ qu| quen thuộc với Flash. Flash cũng hỗ trợ lập trình hướng đối tượng. Nĩ cũng tương thích với hầu hết các ngơn ngữ lập trình web hiện nay. Flash hỗ trợ hầu hết trên các hệ điều hành: Windows, Linux, MacOS và rất nhiều mẫu Mobile của nhiều hãng khác nhau. Để phát triển một ứng dụng Flash, các nhà phát triển cĩ thể sử dụng trình biên tập Adobe Flash. Trình biên tập này hoạt động tốt trên đa số hệ điều hành: Windows và MacOS. Một yêu cầu để trình khách cĩ thể chạy được Flash là cần c{i đặt một Plugin Flash nhỏ gọn (khơng quá 2 Mb) hoặc hỗ trợ một phiên bản Flash Lite (cho c|c dịng điện thoại). Silverlight mặc dầu ra đời sau Flash, nhưng với sự hậu thuẩn của một tập đo{n lớn như Microsoft, nĩ cũng đang dần cĩ một vị thế đ|ng kể. Ngồi ra, Silverlight được phát triển trên nền .NET, các lập trình viên cĩ thể sử dụng VB.NET hoặc C# - một ngơn ngữ lập trình mạnh mẽ - để phát triển. Nhược điểm của nĩ là chỉ tương thích trên Windows, MacOS và các mẫu điện thoại Windows Mobile. Để phát triển - 13 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH ứng dụng trên Silverlight, các nhà phát triển chỉ cĩ thể sử dụng Visual Studio vốn chỉ dành cho hệ điều hành Windows. Trình khách muốn chạy được Silverlight cần c{i đặt Plugin Silverlight (khoảng 5 Mb). JavaFx ra đời sau cùng, nhưng nĩ cĩ nhiều ưu điểm: mã nguồn mở, hỗ trợ nhiều hệ điều hành – Windows, Linux, MacOS và hứa hẹn hoạt động tốt trên nhiều mẫu Mobile, trình khách khơng cần c{i đặt Plugin hỗ trợ. Để soạn thảo JavaFx, người dùng cĩ thể sử dụng Eclipse hoặc NetBean. Cả hai trình biên dịch n{y đều hoạt động tốt trên Windows, Linux và MacOS. Nhưng một điều đ|ng tiếc là JavaFx lại ra đời quá muộn màng. Với tuổi đời cao, lượng người dùng cĩ kinh nghiệm lớn, các lập trình viên và các nhà phát triển đ~ qu| quen thuộc với Flash. Flash vẫn đang v{ sẽ phát triển trong một khoảng thời gian dài nữa. Flash cĩ ba định hướng trọng tâm: phát triển RIA cho web, tạo c|c chương trình ứng dụng thơng qua Adobe Air cho desktop và Flash Lite cho c|c dịng di động cũng như tạo các thước phim trình diễn. Trong năm 2010, W3C đ~ đưa ra chuẩn mới – chuẩn HTML 5 – hứa hẹn sẽ sốn ngơi RIA của Flash, Silverlight và JavaFx. Dù sau này, vị thế trong việc phát triển RIA cho web cĩ thay đổi, thì những định hướng cịn lại của Flash vẫn là những định hướng phát triển quan trọng, đảm bảo sự trường tồn cho cơng nghệ này. 1.3. C{i đặt Adobe Flash CS5 Yêu cầu cấu hình cài đặt: hệ điều hành Windows XP Pack 3 hoặc cao hơn (MacOS X hoặc cao hơn), 1Gb Ram hoặc cao hơn, Pentium IV hoặc cao hơn. Mặc dầu mục đích chính của chúng ta là sử dụng chương trình Adobe Flash Professional CS5, tuy nhiên các bạn cĩ thể sử dụng thêm một số chương trình đính kèm như: Photoshop dùng để hiệu chỉnh ảnh, Dreamweaver thiết kế giao diện web đồng thời chèn các phim Flash vào, soạn thảo ActionScript chuyên nghiệp hơn với Flash Buider 4, hiệu chỉnh }m thanh, video Chính vì lý do này, tơi đề nghị các bạn nên chọn bộ trọn gĩi Adobe Master CS5. Chúng ta cĩ thể tải trực tiếp từ Adobe, bạn cĩ 30 ng{y để dùng thử. Sau khi tải về, hãy tiến hành giải nén tập tin, khi đĩ ta sẽ thu được một thư mục chính. Nếu ta sử dụng một đĩa c{i đặt DVD, thì h~y đưa đĩa DVD v{o ổ đĩa DVD trên m|y tính. Chúng ta cĩ thể sử dụng chế độ AutoRun của nĩ, hoặc mở đĩa DVD n{y ra. Trong cả hai trường hợp nêu trên, thư mục chính sẽ cĩ 4 thư mục con và một tệp Set-up.exe. Cấu trúc thư mục cĩ dạng như sau: - 14 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH Hình 4 – Cấu trúc thư mục bên trong đĩa DVD c{i đặt Flash CS5 Hãy nhấp đơi chuột vào tập tin Set-up.exe, khi đĩ, sẽ cĩ cửa sổ sau đ}y hiện ra Hình 5 – M{n hình ch{o đĩn khi c{i đặt Adobe Master CS5 H~y đọc qua c|c điều khoản sử dụng phần mềm, nếu đồng ý thì các bạn chỉ việc nhấp Accept. Ngược lại, hãy chọn Quit để hủy bỏ việc c{i đặt. Sau khi nhấp vào Accept, cửa sổ sau đ}y sẽ xuất hiện. Trong cửa sổ này, chúng ta cĩ thể điền serial vào – tương ứng với Provide a serial number (nếu đ~ cĩ một số serial), ngược lại, hãy chọn Install this product as a trial (nếu các bạn muốn sử dụng thử 30 ngày). Nếu muốn chọn ngơn ngữ hiển thị, hãy chọn Select Language. - 15 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH Sau đĩ, bạn nhấp Next. Adobe Master khơng hỗ trợ tiếng việt. Nĩ chỉ hỗ trợ một vài ngơn ngữ như tiếng anh, tiếng nhật Nếu số serial điền v{o đúng, thì sẽ xuất hiện một dấu tích mầu xanh. Ngược lại, nếu số serial sai, dấu nh}n m{u đỏ sẽ xuất hiện. Nếu số serial đúng, ta cĩ thể nhấp Next để tiếp tục qu| trình c{i đặt. Nếu khơng cĩ số serial, hãy chọn chế độ dùng thử. Khi c{i đặt ở chế độ dùng thử, Adobe sẽ thường xuyên đưa ra thơng b|o để nhắc nhở về số ngày dùng thử cịn lại và nĩ sẽ tự động chấm dứt khả năng dùng thử sau 30 ngày. Ta cũng cĩ thể sử dụng chế độ c{i đặt này nếu đ~ cĩ số serial. Và số serial sẽ được bổ sung sau. Hình 6 – Cửa sổ Serial Number Sau khi nhấp next, cửa sổ Adobe ID sẽ hiện ra. Sau đĩ l{ cửa sổ Install Options. Trong cửa sổ này, cho phép ta chọn lựa các thơng số c{i đặt. - 16 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH Hình 7 – Cửa sổ Install Options Trong cửa sổ này, chúng ta cĩ thể chọn lựa các phần mềm cần c{i đặt bằng cách đ|nh dấu tích vào các phần mềm tương ứng. Nếu muốn học Flash CS5, hãy chọn – Flash Professional. Ngồi ra, tơi khuyến nghị hãy chọn thêm các phần mềm sau: Photoshop (xử lý đồ họa điểm), Flash Buider (thiết kế RIA cho web, lập trình ActionScript ), SoundBooth (xử lý âm thanh). Ngồi ra, nếu quan t}m đến các lĩnh vực đồ họa khác, ta cĩ thể c{i đặt thêm các phần mềm như Illustrator l{ phần mềm chuyên xử lí đồ họa vector, Fireworks cũng l{ phần mềm chuyên xử lí đồ họa điểm, Adobe Premier chuyên xử lý phim, After Effect chuyên tạo kĩ xảo điện ảnh. Ở mục Location bên dưới, bạn hãy chọn vị trí mà bạn sẽ c{i đặt. Theo mặc định, nĩ sẽ c{i đặt v{o thư mục C:\Program Files\Adobe. Bạn cũng cần lưu ý dung lượng ổ đĩa d{nh cho việc c{i đặt. Bạn cần luơn đảm bảo rằng dung lượng để cài đặt – Total install phải luơn nhỏ hơn dung lượng ổ đĩa cịn trống – Available. Sau đĩ, hãy nhấp vào nút Install và chờ đợi cho qu| trình c{i đặt hồn tất. Để kết thúc qu| trình c{i đặt, hãy nhấp v{o nút Finish để đĩng cửa sổ c{i đặt lại. 1.4. Giới thiệu về Adobe Flash CS5 Khởi động Adobe Flash Professional CS5: để khởi động Adobe Flash Professional CS5, ta cĩ thể bấm chọn biểu tượng của nĩ trên màn hình Desktop, hoặc tiến h{nh c|c bước sau: - 17 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH - Vào Start > All Programs - Chọn Adobe Master Collection CS5. - Chọn Adobe Flash Professional. Hình 8 – Khởi động Adobe Flash Professional CS5 Khi đĩ, m{n hình Splash – m{n hình ch{o đĩn của Adobe Flash Professional CS5 sau đ}y sẽ hiện ra Hình 9 – M{nh hình ch{o đĩn của Adobe Flash Professional CS5 Sau khi quá trình khởi động hồn tất, bạn sẽ thấy giao diện sau đ}y - 18 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH Hình 10 – Cửa sổ ban đầu của Flash Professional CS5 Phiên bản Adobe Flash CS5 xuất xưởng năm 2010. So với các phiên bản trước đĩ, CS5 cĩ nhiều thay đổi về cả giao diện chương trình lẫn c|c tính năng của nĩ. Về giao diện: phiên bản CS5 dành cho Windows đ~ tuyệt giao với giao diện Window, sử dụng một giao diện độc lập với hệ điều hành. Về tính năng: bổ sung thêm nhiều cơng cụ mới làm cho cơng việc sáng tác trở nên đơn giản hơn như c|c cơng cụ Bone, Bind, 3D Translation, 3D Rotation. 1.4.1. Các chế độ tùy biến giao diện Trong giao diện tổng thể Essential của Flash CS5, cĩ thể chia làm 5 vùng chính: - Vùng hệ thống menu phía trên cùng. - Vùng thanh cơng cụ ở bên phải. - Vùng thuộc tính v{ thư viện bên cạnh thanh cơng cụ. - Vùng sáng tác ở trung tâm. - 19 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH - Vùng TimeLine và Layer ở phía bên dưới. Hình 11 – Giao diện Adobe Flash CS5 Flash CS5 cho phép bạn làm việc theo chế độ Tab. Trên vùng thanh menu, ở gĩc bên phải mục Essentials cho phép ta chuyển đổi qua lại giữa các cách bố trí giao diện. Cĩ 6 chế độ bố trí giao diện: Animator, Classic, Debug, Designer, Developer và Essentials. Tùy vào cảm quan của bạn, bạn hãy chọn lấy một cách bố trí giao diện nào mà bạn cho là phù hợp và tiện lợi cho bạn nhất. Riêng tơi, tơi chọn chế độ Essentials. Để phĩng to hay thu nhỏ khung sáng tác, ta chỉ cần sử dụng phím tắt l{ Ctrl+= để phĩng to và Ctrl+- để thu nhỏ. Hoặc bạn cĩ thể chọn chế độ hiển thị % ở bên dưới thanh menu. 1.4.2. Tạo mới dự án cho desktop và mobile Để tạo mới một dự án, bạn kích chuột vào File, chọn New (phím tắt là Ctrl+N). Hộp thoại sau đ}y sẽ hiện ra - 20 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH Hình 12 – Tạo mới một dự án Ở đ}y, chúng ta quan t}m đến một vài kiểu dự án - Flash File (ActionScript 3.0, ActionScript 2.0): tạo dự án Flash với ActionScript 3.0 hoặc 2.0. Bạn cũng lưu ý rằng, trong gi|o trình n{y, chúng ta đang thảo luận về ActionScript 3.0. Phiên bản này là phiên bản mới nhất của ActionScript cho đến thời điểm này. - Flash File (Adobe Air 2): tạo dự án Flash cho Desktop chạy trên Adobe Air. Adobe Air là một dự án mới của Adobe nhằm tạo ra mơi trường cho các nhà phát triển những ứng dụng dựa vào cơng nghệ Flash cĩ thể chạy độc lập trên các hệ điều hành. Nĩ cĩ nhiều điểm tương đồng với cơng nghệ Java của Sun hay .NET của Microsoft. Để phát triển một trình ứng dụng trên Adobe Air, bạn hồn tồn cĩ thể sử dụng trình soạn thảo Adobe Flash hoặc Adobe Flex Builder. - Flash File (Mobile – iphone OS, Flash Lite 4, Device Central): tạo dự án Flash cho Mobile. Khi chọn kiểu dự án này, Adobe Flash CS5 sẽ tự động gọi đến Adobe Device Central CS5. Đ}y l{ tiện ích quản lý các thơng tin về Flash Lite hỗ trợ trên c|c dịng điện thoại. Bạn chỉ cần tìm kiếm loại điện thoại mà bạn cần tạo dựng dự |n, sau đĩ bấm vào Create. - 21 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH Hình 13 – Adobe Device Central - Ngồi ra, nếu bạn muốn tạo c|c Action độc lập, bạn cĩ thể tạo riêng chúng bằng cách chọn ActionScript File. Việc tạo c|c ActionScript độc lập và sử dụng chúng trong các dự án Flash sẽ được thảo luận kĩ hơn khi chúng ta l{m quen với lập trình với ActionScript ở chương 5. Remarks: Bạn cũng cần lưu ý đến một v{i định dạng trong các dự án của Flash. Định dạng Flash sẽ cĩ phần mở rộng l{ .fla. Định dạng ActionScript File cĩ định dạng l{ .as. Định dạng tập tin cuối cùng của flash là .swf. 1.4.3. Layer, Frame, Scene và Movie Trong kĩ thuật tạo c|c thước phim, kĩ thuật được sử dụng phổ biến để tạo chuyển động trong c|c đoạn phim l{ kĩ thuật 24 hình/ giây. Trong kĩ thuật này, các hình ảnh cĩ nhiều điểm tương đồng sẽ được ghép nối lại một cách liên tiếp. C|c đối tượng cần tạo chuyển động sẽ cĩ chút thay đổi trên mỗi khung hình. Khi các khung hình thay thế cho nhau ở tốc độ mà mắt người khơng nhận ra sự thay đổi này, chúng ta sẽ cảm thấy đối tượng chuyển động. Kĩ thuật tạo hoạt hình trong Flash cũng ho{n to{n tương tự. Trước khi tìm hiểu kĩ về các cách thức tạo chuyển - 22 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH động trong Flash, chúng ta cùng nhau tìm hiểu qua các khái niệm: Lớp – Layer, Khung hình – Frame, Cảnh quay – Scence, Thước phim – Movie. - Layer: là các lớp được dùng trong việc sáng tác. Mỗi một khung hình cĩ thể chứa nhiều layer khác nhau. Mỗi một đối tượng thường được xây dựng trên mỗi layer. Kĩ thuật layer được sử dụng rộng r~i trong đồ họa máy tính, bao gồm cả đồ họa điểm như: photoshop, corel photopaint hay đồ họa vector như: illustrator, coreldraw. Hình 14 – Tạo mới Layer Nhĩm biểu tượng biểu tượng xĩa và tạo layer – : biểu tượng thứ nhất từ trái sang là tạo mới layer, biểu tượng thứ hai là tạo mới một thư mục để chứa layer và biểu tượng cuối cùng là xĩa layer hoặc thư mục chứa layer. Nhĩm biểu tượng hiệu chỉnh layer – : biểu tượng thứ nhất từ trái sang là cho phép ẩn hay hiện layer đĩ, biểu tượng thứ hai là khĩa khơng cho phép chỉnh sửa đối tượng trên layer và biểu tượng cuối cùng l{ cho phép đối tượng trên layer hiển thị đường viền và màu nền hay chỉ đường viền. - Frame: l{ khung hình dùng trong kĩ thuật tạo chuyển động. Vật thể chuyển động được là nhờ v{o kĩ thuật thay thế các khung hình. Như tơi đ~ trình b{y ở trên, mắt người chỉ cĩ thể lưu được khơng quá 24 hình ảnh trong một giây, nếu tốc độ chuyển đổi các khung hình lớn, mắt chúng ta khơng thể nhận thấy được sự thay đổi này mà cảm gi|c như l{ hình ảnh đang chuyển động. Với Flash, số khung hình khơng nhất thiết phải lớn như trong kĩ thuật tạo video, nĩ giảm đi một c|ch đ|ng kể nhờ vào cơng nghệ được sử dụng trong Flash. Điều n{y cũng giúp l{m giảm kích thước của tập tin Flash. - Scene: được hiểu như l{ c|c cảnh quay trong Flash. Một cảnh quay là tập hợp của các khung hình kế tiếp nhau để tạo ra chuyển động. Để chèn thêm scene, ta - 23 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH vào Insert, chọn Insert Scene. Nhờ vào các cảnh quay này, chúng ta cĩ thể tạo các thước phim dài, mà khơng phải quản lý các lớp một cách quá phức tạp khi số lượng đối tượng trên cảnh quay đĩ trở nên quá lớn. Một cảnh quay trong Flash cũng giống một cảnh quay trong phim truyền hình vậy. Khi cần tạo một thước phim hồn chỉnh, chúng ta sẽ ghép nối nhiều cảnh quay lại với nhau. Bạn cũng lưu ý rằng, các cảnh quay sẽ được ghép tự động theo thứ tự mà bạn sắp xếp. Do đĩ, nếu muốn thay đổi thứ tự cảnh quay, bạn chỉ việc thay đổi thứ tự sắp xếp của nĩ. Để làm xuất hiện cửa sổ quản lý các cảnh quay, bạn vào Windows > Other Panels > Scene (hoặc phím tắt Shift+F2). Hình 15 – Cửa sổ quản lý cảnh quay Trong cửa sổ này, bạn chỉ cần sắp xếp lại thứ tự trình bày của các Scence bằng thao tác kéo thả đơn giản. Thứ tự các cảnh quay sẽ diễn ra theo thứ tự từ trên xuống dưới. Khi xây dựng các cảnh quay độc lập, bạn cĩ thể kiểm tra từng cảnh quay này bằng cách vào Control > Test Scene (hoặc tổ hợp phím Ctrl+Alt+Enter). - Movie: là một thước phim hồn chỉnh. Một movie cĩ thể chứa một hoặc nhiều cảnh quay. Để chuyển đổi qua lại giữa các cảnh quay trong một movie, ta bấm vào biểu tượng và chọn tên của scene. Để kiểm tra một bộ phim hồn chỉnh, bạn chọn Control > Test Movie (hoặc tổ hợp Ctrl+Enter). Bạn cũng lưu ý rằng, nếu bạn xây dựng một thước phim chứa nhiều đối tượng đồ họa và cĩ nhiều cảnh quay, thì việc kiểm tra sự hoạt động của từng cảnh quay l{ điều cần thiết. Bạn chỉ nên kiểm tra sự hoạt động của tồn bộ phim khi các cảnh quay đ~ hoạt động tốt. Sở dĩ như vậy là vì, quá trình biên dịch một bộ phim hồn chỉnh bao giờ cũng chậm hơn, chiếm nhiều tài nguyên bộ nhớ hơn so với biên dịch từng cảnh quay riêng lẻ. Điều n{y đặc biệt hữu ích với những máy cĩ cấu hình khơng quá cao. Remarks: Bạn cũng cần lưu ý rằng, Flash cũng hỗ trợ chế độ kiểm tra trực tiếp trong khung s|ng t|c. Để thực hiện chức năng n{y, bạn cĩ thể chọn một trong hai chế độ: chế độ kiểm tra bằng tay, chế độ kiểm tra tự động. Đối với chế độ kiểm tra bằng tay, bạn sử dụng thanh đ|nh dấu Frame hiện tại, sau đĩ kéo trượt nĩ trên - 24 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH thanh TimeLine. Với chế độ kiểm tra tự động, bạn chỉ cần nhấn phím Enter. Nếu phim của bạn nằm trên TimeLine quá dài và bạn đang thực hiện chức năng kiểm tra tự động, bạn muốn dừng chế độ này ngay lập tức ! Khi đĩ, bạn hãy nhấn phím Enter thêm lần nữa. Chế độ kiểm tra tự động sẽ dừng ngay lập tức. 1.4.4. Vùng thanh cơng cụ Tools Vùng thanh cơng cụ chứa các cơng cụ để tạo hình, hiệu chỉnh và tạo các hiệu ứng cho c|c đối tượng. Bạn cĩ thể thu gọn thay cơng cụ bằng cách bấm vào biểu tượng thu nhỏ bên phải trên cùng, thứ hai từ phải sang. Hoặc tắt nĩ đi, bằng cách bấm vào biểu tượng cịn lại. Hình 16 – Thanh cơng cụ Bạn cĩ thể di chuyển nĩ, kéo thả nĩ vào một vị trí n{o đĩ trong giao diện của Flash. Bạn cĩ thể làm xuất hiện hoặc ẩn nĩ đi bằng cách vào menu Window, chọn Tools. 1.4.5. Vùng thuộc tính Properties Mỗi một đối tượng đều cĩ các thuộc tính riêng như m{u viền, loại viền, màu nền Vùng quản lý các thuộc tính này được bố trí trong vùng thuộc tính Properties. Để hiển thị các thuộc tính của một đối tượng, bạn chỉ việc nhấp chọn đối tượng đĩ. Khi đĩ, trong bảng thuộc tính Properties này sẽ hiển thị các thơng số liên quan đến các thuộc tính của đối tượng. Để thay đổi các thơng số thuộc tính của đối tượng đĩ, bạn chỉ việc thay đổi các thơng số trong bảng thuộc tính Properties này. - 25 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH Hình 17 – Vùng thuộc tính Properties Biểu tượng nhỏ ở gĩc trên bên phải cho phép thu nhỏ hoặc đĩng lại vùng thuộc tính Properties. Tương tự, chúng ta cũng cĩ thể làm xuất hiện hoặc đĩng vùng thuộc tính này lại bằng cách vào Windows, chọn Properties. Thuộc tính của vùng soạn thảo: Publish: gồm Player (cho phép phim trình chiếu cĩ thể hoạt động tốt trên phiên bản Flash Player nào), Script (phiên bản ActionScript m{ đoạn phim đang sử dụng), Class (bạn chỉ việc nhập tên Lớp thể hiện vào, lập tức Flash sẽ khởi tạo cho bạn một cú pháp khai báo của lớp nội tại – mặc định là lớp thừa kế từ MovieClip), Profile (quản lý c|c thơng tin liên quan đến việc xuất bản dự án Flash), AIR Settings (các cấu hình thiết lập cho dự án Flash chạy trên Adobe Air). Properties: chứa FPS (tốc độ chơi – đo bằng số frame trên mỗi giây Frames Per Second), Size (kích thước của khung trình chiếu – đo bằng pixel), Stage (quản lý màu nền của khung soạn thảo). 1.4.6. Vùng soạn thảo ActionScript Trong khung soạn thảo ActionScript, phần soạn thảo nằm ở trung tâm của cửa sổ này. Vùng phía bên trái chứa các lớp thư viện và cây phả hệ. Phía trên khung soạn thảo là hệ thống các cơng cụ hỗ trợ soạn thảo ActionScript. - 26 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH Hình 18 – Khung soạn thảo ActionScript (1) – Bổ sung thêm các thành phần vào ActionScript. (2) – Tìm kiếm và thay thế. (3) – Chèn target path. Chức năng n{y thường sử dụng khi làm việc với lớp. (4) – Kiểm tra lỗi cú pháp. (5) – Định dạng cho mã nguồn theo chế độ tự động của ActionScript. (6) – Xem các chỉ dẫn về mã nguồn. (7) – Tạo c|c điểm tho|t khi debug chương trình. (8) – Đĩng mở các khối mã lệnh chương trình. (9) – Hỗ trợ khi viết script. - 27 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH 1.4.7. Các vùng chức năng khác Ta cĩ thể làm hiển thị thêm các vùng chức năng kh|c trong Flash bằng cách vào Windows và chọn cửa sổ tương ứng. o Vùng Align (Ctrl+K): dùng để can chỉnh lề trái, phải, trên v{ dưới cho c|c đối tượng. Can chỉnh kích thước cho đối tượng. Hình 19 – Vùng canh chỉnh vị trí v{ kích thước Align Trong vùng align này chia làm bốn nhĩm: - Nhĩm Align: canh chỉnh vị trí của c|c đối tượng theo thứ tự các biểu tượng từ trái sang phải là canh trái, canh giữa theo chiều ngang, canh phải, canh trên, canh giữa theo chiều dọc v{ canh dưới. Nếu đ|nh dấu kiểm vào tùy chọn Align to Stage thì nĩ sẽ canh chỉnh theo khung soạn thảo, ngược lại, nĩ sẽ can chỉnh theo vị trí tương đối của c|c đối tượng. - Nhĩm Distribute: canh chỉnh theo trục tương đối của c|c đối tượng. Theo thứ tự các biểu tượng từ trái sang phải là: canh chỉnh theo trục ở phía mép trên, theo trục đối xứng ngang, theo trục ở phía mép dưới, theo trục ở phía mép trái, theo trục đối xứng dọc và theo trục ở phía mép phải. - Nhĩm Match Size: hiệu chỉnh cùng kích thước của đối tượng theo chiều ngang, chiều dọc, hoặc theo cả chiều ngang và chiều dọc. Nếu chọn tùy chọn Align to Stage, nĩ sẽ canh chỉnh kích thước đối tượng theo khung soạn thảo. - Nhĩm Space: hiệu chỉnh khoảng cách giữa c|c đối tượng theo chiều dọc và ngang. - 28 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH o Vùng Transform (Ctrl+T): hiệu chỉnh gĩc cạnh cho đối tượng. Việc hiệu chỉnh gĩc cạnh này bao gồm: Hình 20 – Vùng Transform - Nhĩm đầu tiên: kéo giãn chiều dài và chiều rộng (tính theo tỉ lệ %), nếu bạn nhấp chọn tùy chọn cuối cùng trong nhĩm này (biểu tượng mắc xích bị phân đơi), thì độ kéo giãn của đối tượng theo chiều ngang và chiều dọc sẽ diễn ra đồng thời, ngược lại việc hiểu chỉnh kích thước theo chiều dài và chiều rộng l{ độc lập. - Nhĩm thứ hai: Rotate (hiệu chỉnh gĩc quay), Skew (hiệu chỉnh gĩc dịch chuyển xiêng – hay độ kéo trượt theo hai phía). - Nhĩm thứ 3: liên quan đến tọa độ 3D v{ điểm trọng tâm 3D. Chức năng n{y chỉ hoạt động đối với biểu tượng MovieClip. Chúng tơi sẽ trình b{y kĩ hơn về biểu tượng n{y trong chương 3. o Vùng History (Ctrl+F10): quản lý lịch sử các thao tác của bạn khi sáng tác. Hình 21 – Vùng History - 29 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH Bạn chỉ việc chọn thời điểm được chỉ định trong vùng History n{y để phục hồi các thao t|c được đ|nh dấu tại thời điểm đĩ. o Vùng Color: quản lý màu sắc. Bạn cĩ thể hiệu chỉnh trực tiếp màu sắc cho đối tượng (chọn đối tượng, sau đĩ bấm vào bảng màu) hoặc cĩ thể kết hợp với cơng cụ đổ màu mà ta sẽ tìm hiểu trong chương tiếp theo. Hình 22 – Bảng màu chuẩn Trong bảng màu chuẩn này, ta cĩ thể chọn mẫu màu RGB thơng dụng, mẫu màu HSL – bằng cách bấm chuột vào biểu tượng quả cầu phía trên bên phải. Hoặc chọn khơng màu bằng cách bấm vào biểu tượng hình vuơng gạch chéo. Bạn cũng cĩ thể chọn chế độ Transparent bằng c|ch điều chỉnh thơng số Alpha. Bảng màu chuẩn cịn cung cấp cho chúng ta một số mẫu màu Gradient cĩ sẵn. Nếu nhu cầu sử dụng màu trong bảng màu chuẩn khơng đ|p ứng đủ, bạn cĩ thể sử dụng bảng màu nâng cao (tổ hợp phím Alt+Shift+F9). Trong bảng màu nâng cao này, nếu bạn muốn hiệu chỉnh màu cho viền thì bấm chọn stroke, nếu muốn hiệu chỉnh cho màu nền thì chọn fill. Trong hộp thoại thả xuống, cĩ các chế độ m{u sau đ}y: + None: khơng chọn màu. + Solid Color: chọn m{u đơn (hay m{u đặc). Bạn cĩ thể chọn mẫu màu theo chế độ RGB hoặc HSL. Cĩ thể hiệu chỉnh thuộc tính Alpha của nĩ. Nĩi chung, chế độ Solid hồn tồn giống với bảng màu chuẩn ở trên. - 30 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH + Linear Gradient: pha trộn màu theo dạng cầu vồng với các cầu vồng phân bố theo đường thẳng. Hình 23 – Chế độ màu Solid Color Hình 24 – Chế độ màu Linear Gradient Khác với solid, chế độ Linear Gradient cho ta các hiệu chỉnh màu sắc hấp dẫn hơn với dạng thức cầu vồng. Bạn cĩ thể hiệu chỉnh thuộc tính Flow là một dải màu biến thiên theo thang m{u bên dưới (Extend color) hoặc chế độ màu phản xạ (Reflect) hoặc chế độ màu lặp (Repeat). Nếu bạn muốn thay đổi màu trong thang Gradient, bạn chỉ việc bấm chọn nút đ|nh dấu ở mỗi màu trong thang màu ở bên dưới, sau đĩ chọn lại màu mới (hoặc kích đối chuột vào nút này, rồi chọn lại màu mới). Nếu bạn muốn bổ sung thêm một màu trong thang màu Gradient, bạn chỉ việc bấm chọn vào một vị trí bất kì trên thang m{u bên dưới. Ngược lại, nếu bạn muốn loại bỏ một màu ra khỏi thang màu Gradient, bạn chỉ việc kéo thả nĩ ra khỏi thang màu này. Bạn thấy đấy, việc sử dụng màu Gradient rất đơn giản. + Radial Gradient: ho{n to{n tương tự Linear Gradient, chỉ cĩ duy nhất một sự khác biệt là Radial Gradient tạo màu cầu vồng theo dạng xốy trịn khác với Linear Gradient theo dạng đường thẳng. + Fill Bitmap: với chức năng n{y, bạn cĩ thể đổ m{u cho đối tượng bằng các bức ảnh. Đ}y l{ một cách tạo hiệu ứng màu khá thú vị, rất hữu dụng trong nhiều tình huống. - 31 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH o Vùng Common Library (Buttons, Classes và Sounds): quản lý các dạng button, các lớp thư viện và âm thanh. o Vùng Component (Ctrl+F7): quản lý các thành phần GUI trong Flash. Bạn cĩ thể sử dụng c|c đối tượng n{y để tạo một giao diện web, một trình ứng dụng o Vùng Library (Ctrl+L): quản lý c|c đối tượng được import và convert. Chúng ta sẽ đi v{o chi tiết về vùng này trong c|c chương sau. o Vùng Motion Presets: vùng cung cấp các chế độ tạo hoạt hình cĩ sẵn của Flash. Bạn chỉ việc chọn đối tượng, sau đĩ chọn hiệu ứng và nhấp Apply. Lập tức bạn sẽ cĩ một hiệu ứng hoạt hình như mong đợi. Hình 25 – Vùng Motion Presets o Vùng Code Snippets: tương tự như Motion Presets, đ}y l{ vùng tạo ActionScript cĩ sẵn của Flash. Ta chỉ việc chọn đối tượng, sau đĩ nhấp vào chức năng tương ứng, lập tức một đoạn mã ActionScript sẽ được phát sinh tương ứng với đối tượng được chọn theo chức năng m{ bạn đ~ chọn. Chức năng n{y cũng rất hữu ích cho những người dùng phổ thơng, muốn tạo c|c ActionScript để điều khiển đối tượng nhưng lại ngại tìm hiểu về ngơn ngữ lập trình này bởi nhiều lý do khách quan lẫn chủ quan. Tuy nhiên, bạn cũng cần lưu ý rằng, chức năng n{y chỉ cung cấp một v{i tính năng chứ khơng phải là tất cả, bởi vậy, nếu bạn muốn tạo một thước phim chuyên nghiệp, bạn cần - 32 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH cĩ sự hiểu biết tương đối đầy đủ về ngơn ngữ lập trình ActionScript mạnh mẽ này được tích hợp trong Flash. Hình 26 – Vùng Code Snippets Chúng ta sẽ tìm hiểu về vùng chức năng n{y sau khi tìm hiểu về ngơn ngữ lập trình ActionScript. Trong vùng chức năng Code Snippets cĩ c|c nhĩm hiệu ứng Action sau đ}y: - Actions: tạo sẵn các hiệu ứng liên quan đến c|c h{nh động của đối tượng. - Timeline Navigation: điều khiển qu| trình chơi phim. Nĩ cũng tương tự như thanh PlayBack khi điều khiển một thước phim. Trong giáo trình này, chúng ta sẽ thảo luận việc tạo một thanh PlayBack bằng ActionScript mà khơng cần sử dụng chức năng Code Snippets. Chi tiết chúng ta sẽ tìm hiểu trong chương 6. Sau khi tìm hiểu về cách tạo thanh PlayBack khơng cần dùng đến chức năng Code Snippets, tơi đề nghị bạn hãy sử dụng chức năng n{y để tạo thanh PlayBack. - Animation: tạo các hiệu ứng động cho c|c đối tượng MovieClip. - Audio and Video: các chức năng của thanh PlayBack để điều khiển video và audio khi c|c đối tượng n{y được sử dụng trong Flash. - Load and Unload: tạo một m{n hình Splash khi phim được tải. Tải và hủy tải các bức ảnh, đoạn phim, trong phim Flash được tạo. - Event Handlers: quản lý việc thực thi các Event. Event là các sự kiện tương ứng với một h{nh động n{o đĩ của đối tượng. Nĩ cĩ thể l{ h{nh động khi phim được tải (On_Enter), h{nh động tương ứng với sự kiện của chuột, của bàn phím. Các Event sẽ được quản lý bởi các lớp tương ứng. Các lớp này - 33 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH cung cấp các chức năng để lắng nghe các Event diễn ra trên mỗi đối tượng. Khi cĩ một Event n{o đĩ xảy ra, tương ứng với c|c h{m được triệu gọi, nĩ sẽ thực thi các chức năng tương ứng. Chi tiết về các nhĩm chức năng n{y, ta sẽ tìm hiểu thêm trong chương ActionScript. o Vùng String: cho phép bạn tùy chọn ngơn ngữ cho thước phim của mình. Nếu bạn muốn phim của bạn hiển thị đúng ngơn ngữ trên các máy tính khác nhau, bạn hãy hiệu chỉnh trong vùng String này. o Thay đổi phím tắt trong Adobe Flash: vào Insert > KeyBoard Shortcuts. Hình 27 – Hộp thoại quản lý phím tắt Nếu muốn thay đổi phím tắt tương ứng với một chức năng n{o đĩ, bạn hãy chọn chức năng tương ứng trên vùng Commands, sau đĩ ở mục ShortCuts, bạn bổ sung tổ hợp phím tắt. Nếu muốn loại bỏ một phím tắt n{o đĩ, bạn chỉ việc bấm vào dấu – tương ứng với chức năng đĩ. Khi đĩ, phím tắt sẽ bị loại bỏ. Nếu muốn thay đổi phím tắt, bạn sử dụng nút lệnh Change. Remarks: bạn khơng nên thay đổi quá nhiều các phím tắt. Nếu bạn sử dụng các phím tắt theo mặc định, sẽ cĩ một vài lợi thế khi bạn sử dụng Flash trên nhiều máy tính khác nhau. Bởi vì, khơng phải máy tính nào bạn cũng cĩ quyền thay đổi các thiết lập n{y. Đặc biệt đối với các máy bị giới hạn quyền truy cập hoặc những máy tính khơng cho phép bạn lưu lại những thiết lập phím tắt. - 34 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH Tổng kết chương 1 Trong chương n{y, chúng ta đ~ 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. Chúng ta cũng 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. Chúng tơi hi vọng, sau khi kết thúc chương n{y, bạn khơng cịn ngỡ ng{ng trước giao diện của Flash. Bạn sẽ tùy biến giao diện cho phù hợp với chính bạn. Một điều giúp bạn trở nên chuyên nghiệp hơn l{ bạn nên nhớ các phím tắt khi thao tác. Nếu các phím tắt được bố trí khơng thuận tiện, bạn cĩ thể thay đổi nĩ nhờ vào Keyboard Shortcuts. - 35 -
CHƯƠNG 1. GIỚI THIỆU VỀ FLASH Blank Page - 36 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN 2.1. C|c cơng cụ Pencil, Brush v{ Erase Cơng cụ Pencil Hình 28 – 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ẽ. - 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 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.
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN - Smoothing: độ mềm dẻo cho nét vẽ. Hình 29 – Cơng cụ Brush Cơng cụ Spray Brush Khi bạn bấm vào biểu tượng tam giác nhỏ ở trên biểu tượng Brush, thì sẽ xuất hiện biểu tượng của Spray Brush. Đ}y l{ cơng cụ phun màu tuyệt vời của Flash. Bạn cĩ thể định nghĩa mẫu m{u để phun, các chế độ phun m{u: gĩc nghiêng, độ rộng, độ cao, chế độ xoay các biểu tượng theo gĩc ngẫu nhiên, Để tự định nghĩa một mẫu màu tơ, bạn phải tạo một biểu tượng – hoặc là Graphic, Button hoặc MovieClip. Chúng ta sẽ thảo luận chi tiết về chúng trong chương 3. Ở đ}y, để minh họa cho một mẫu tơ màu, chúng ta sẽ sử dụng biểu tượng MovieClip mà khơng thảo luận thêm về nĩ. Để tạo một kiểu phun m{u như trong hình minh họa, bạn phải l{m theo c|c bước sau đ}y: Bước 1: Định nghĩa một mẫu màu. Bạn hãy vẽ một hình đại diện. Ví dụ trong trường hợp của tơi, tơi sử dụng hình ngơi sao 10 cánh cĩ chiều dài của các cánh xen kẻ nhau – tức là cánh dài, cánh ngắn liên tiếp nhau. - 38 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN Bước 2: Hiệu chỉnh kích thước của nĩ sao cho phù hợp. Kích chuột phải vào nĩ, chọn Convert to Symbol > MovieClips và nhấp Ok. Bước 3: Bấm chọn cơng cụ Spray Brush. Trong bảng Properties, chọn mục Symbol, chọn nút Edit, và chọn biểu tượng mà ta vừa tạo. Sau đĩ, bạn hãy hiệu chỉnh các thuộc tính trên bảng Properties n{y như: độ kéo rộng của biểu tượng khi phun (scale width), độ kéo dài của biểu tượng khi phun (scale height), độ rộng của đường phun (width), độ cao của đường phun (height), gĩc phun (Brush angle). Các chế độ tạo mẫu ngẫu nhiên: độ kéo giãn của biểu tượng (random scaling), gĩc xoay của biểu tượng (rotate symbol), gĩc phun (random rotation). Hình 30 – Cơng cụ Spray Brush Cơng cụ Erase Cơng cụ dùng để tẩy xĩa các nét vẽ. 2.2. Cơng cụ vẽ hình cơ bản Cơng cụ Line Là cơng cụ để vẽ đường thẳng. Khi bấm vào biểu tượng cơng cụ này trên thanh cơng cụ, trong bảng thuộc tính Properties sẽ hiện ra các thơng tin liên quan. - 39 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN Hình 31 – Cơng cụ Line Cũng như cơng cụ Pencil, đối với cơng cụ Line, thuộc tính Fill khơng tồn tại. Chỉ cĩ các thuộc tính sau: - Stroke color: chọn m{u cho đường thẳng. - Stroke: kích thước của nét vẽ. - Style: dạng thức của nét vẽ. Cơng cụ Rectangle Là cơng cụ sử dụng để vẽ hình chữ nhật và các dạng biến thể của nĩ. Dạng biến thể này cĩ thể là hình chữ nhật cĩ gĩc trịn. Hình vuơng hay hình bình h{nh cũng l{ c|c trường hợp riêng khi sử dụng cơng cụ này. Khi muốn vẽ hình cĩ tỉ lệ chiều ngang và chiều dọc bằng nhau (hình vuơng chẳng hạn), ta nhấn phím Shift. 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: - 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ẽ. - Style: dạng thức của nét vẽ. - 40 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN - 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ờ. Hình 32 – Cơng cụ Rectangle - 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 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. Cơng cụ Oval - 41 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN Vẽ các hình Oval. Khi bấm chọn vào biểu tượng tam giác nhỏ ở phía dưới biểu tượng Rectangle, sẽ xuất hiện biểu tượng Oval này. Khi sử dụng cơng cụ Oval, ta chú ý đến điểm sau đ}y: nếu muốn tỉ lệ chiều ngang và chiều dọc luơn cân bằng nhau khi vẽ (ví dụ khi vẽ hình trịn) thì ta giữ phím Shift và vẽ, ngược lại tỉ lệ đĩ sẽ khơng cân bằng giữa chiều dọc và chiều ngang (ví dụ khi vẽ hình Eclipse). Hình 33 – 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ẽ. - 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. - 42 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN - 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 34 – 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 35 – 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ồ. 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 - 43 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN Gĩc mở Gĩc đĩng Hình 36 – 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 37 – 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. Cơng cụ Rectangle Primitive Khi bấm vào biểu tượng hình tam giác nhỏ ở trên cơng cụ Rectangle, ta sẽ thấy xuất hiện cơng cụ Rectangle Primitive. Tương tự cơng cụ Rectangle, nhưng với cơng cụ này, ta cĩ thể hiệu chỉnh gĩc trịn của nĩ sau khi nĩ được tạo ra. Đ}y l{ một ưu điểm của cơng cụ này. Nếu muốn thay đổi gĩc trịn, ta chỉ cần dịch chuyển các nút nhấn nhờ vào cơng cụ Selection sang trái hoặc phải (đối với nút nhấn nằm ngang) hoặc lên xuống (đối với nút nhấn nằm dọc). Chi tiết về cơng cụ Selection ta sẽ thảo luận trong các phần tiếp theo. Cơng cụ Selection này cĩ biểu tượng hình con trỏ chuột, m{u đen, - 44 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN nằm phía trên cùng của thanh cơng cụ. Các tùy chỉnh thuộc tính trong bảng thuộc tính Properties ho{n to{n tương tự với cơng cụ Rectangle. Bạn cũng cần lưu ý rằng, cơng cụ Rectangle Primitive dựa trên cơ sở của Rectangle. Điều này bạn cĩ thể nhận thấy được khi phát họa hình bằng cơng cụ này: cĩ một hình chữ nhật gĩc cạnh bao quanh hình thể của chúng ta. Hình 38 – Cơng cụ Rectangle Primitive Cơng cụ Oval Primitive Ho{n to{n tương tự cơng cụ Oval. Bạn cĩ thể hiệu chỉnh các thuộc tính gĩc mở, gĩc đĩng, b|n kính của hình v{nh khăn. V{ cũng tương tự cơng cụ Rectangle Primitive, ta cĩ thể hiệu chỉnh các thuộc tính của hình đ~ vẽ nhờ vào các nút nhấn nhấn. Nút nhấn trung t}m dùng để điều chỉnh kích thước b|n kính v{nh khăn. Nút nhấn biên ngo{i dùng để điều chỉnh gĩc đĩng, gĩc mở. Việc hiệu chỉnh c|c gĩc đĩng, gĩc mở, b|n kính v{nh khăn cũng nhờ vào cơng cụ Selection mà chúng ta sẽ làm quen trong mục tiếp theo. Bạn cũng cần lưu ý, cũng giống cơng cụ Oval, để tạo dựng các hình thể sao cho chiều ngang và chiều dọc (như hình trịn) bằng nhau nhờ vào Oval Primitive, ta cũng nhấn và giữ Shift khi vẽ hình. - 45 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN Với cơng cụ này, ta cĩ thể tạo ra các hình dạng phức tạp mà khơng cần hiệu chỉnh các thơng số ban đầu như cơng cụ cùng loại Oval. Chỉ cần hiệu chỉnh c|c nút điều khiển trên các khối hình cơ sở l{ ta đ~ nhận được những hình biến thể độc đ|o. Hình cơ sở của nĩ cũng l{ hình chữ nhật (hình Oval cĩ biên ngồi nội tiếp hình chữ nhật này). Hình 39 – Cơng cụ Oval Primitive 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ể. - Stroke color: chọn màu viền cho nét vẽ. - 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. - 46 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN - 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. Hình 40 – Cơng cụ PolyStar - 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 41 – Thiết lập PolyStar Trong đĩ, + 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). - 47 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN + 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 42 – Hình sao mập (tỉ lệ SPS = 0.9) và hình sao gầy (tỉ lệ SPS = 0.1) 2.3. Cơng cụ Text Là cơng cụ dùng để soạn thảo nội dung văn bản trong Flash. Hình 43 – Cơng cụ Text - Text Tool: cĩ ba loại – Static Text (văn bản cố định – như nội dung của label trong lập trình hướng đối tượng), Dynamic Text (văn bản cĩ thể chọn, copy - 48 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN nhưng khơng thể thay đổi – như nội dung của TextBox khi hiệu chỉnh thuộc tính Readonly=True), Input Text (nội dung văn bản cĩ thể thay đổi – như nội dung của TextBox khi thuộc tính Readonly=False). - Character: Family (chọn loại phơng chữ), Style (chọn dạng thức cho phơng chữ - in đậm, in nghiêng ), Size (chọn kích thước cho phơng chữ), Letter Spacing (chọn độ rộng cho kí tự trắng giữa các chữ cái), Color (chọn màu cho phơng chữ), Auto Kern (tự động co giãn), Anti-Alias (làm cho nét chữ trở nên mượt m{ hơn). - Show Border around Text: hiển thị đường viền xung quanh văn bản. - SubScript và SuperScript: tạo chữ viết dưới (kiểu x2) và viết trên (kiểu x2). - Format: can chỉnh vị trí văn bản (trái, phải, giữa, hai phía). - Spacing và Margin: Spacing hiệu chỉnh khoảng cách của các từ trong văn bản hoặc c|c dịng văn bản. Margin hiệu chỉnh khoảng cách bên trái hoặc bên phải của nội dung văn bản so với viền bên ngồi. - Behavior: Single Line (chỉ cho phép văn bản hiển thị trên một dịng – tức khơng chấp nhập kí tự xuống dịng hay nĩi cách khác, phím Enter sẽ khơng cĩ hiệu lực khi soạn văn bản dạng này), MultiLine (cho phép văn bản hiển thị trên nhiều dịng, nếu nội dung văn bản d{i hơn khung soạn thảo, nĩ sẽ tự động xuống dịng mà khơng cần phải nhấn phím Enter), MultiLine no Wrap (cho phép văn bản hiển thị trên nhiều dịng, nếu nội dung văn bản d{i hơn khung soạn thảo, nĩ khơng tự động xuống dịng), Password (nội dung văn bản sẽ bị ẩn dưới một kí tự được chọn làm mặt nạ – như c|c ơ nhập password). - Orientation: thay đổi chiều hiển thị của văn bản. Ngồi ra, khi nội dung văn bản đ~ được soạn thảo, ngồi những thuộc tính nêu trên, văn bản cịn cĩ thêm một số thuộc tính sau đ}y: - Options: các tùy chọn như tạo liên kết trong trang html. Link – đường dẫn đến một liên kết n{o đĩ. Target – cách thức mở liên kết, bao gồm _blank, _parent, _self và _top. - Filter: tạo các hiệu ứng n}ng cao như tạo đổ bĩng, hiệu ứng bĩng mờ, hiệu ứng cầu vồng Để sử dụng các hiệu ứng này, bạn chỉ bấm vào biểu tượng đầu tiên trong vùng cơng cụ được tơ vàng, từ bên trái sang. Nếu bạn thay đổi một hiệu ứng n{o đĩ, v{ muốn lưu lại thiết lập này, bạn nhấp vào biểu tượng thứ ba từ trái sang. Nếu bạn muốn quay lại thiết lập mặc định, hãy nhấp biểu tượng thứ hai từ - 49 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN trái sang. Biểu tượng con mắt cho phép bạn tạm ẩn hiệu ứng được chọn. Biểu tượng mũi tên quay lùi, cho phép bạn quay lại thiết lập các thơng số trước đĩ. Biểu tượng thùng rác cuối cùng, cho phép bạn xĩa bỏ một hiệu ứng được chọn. Hình 44 – Thiết lập văn bản nâng cao 2.4. Cơng cụ chọn Selection và Lasso Cơng cụ Selection Hình 45 – 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 - 50 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢ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). Cơng cụ Lasso Tương tự cơng cụ Selection, cơng cụ Lasso cũng cho phép chọn. Điểm khác biệt là cơng cụ Selection dùng để chọn tồn bộ một hay nhiều đối tượng (bằng cách giữ phím Shift) hoặc một phần đối tượng theo khung chọn là hình chữ nhật. Cịn cơng cụ Lasso cĩ thể chọn theo hình dạng phức tạp. Chúng ta chọn Lasso và vẽ ra khung chọn. Nĩ khơng nhanh bằng Selection nhưng tỏ ra hiệu quả trong nhiều trường hợp, nếu c|c đối tượng được chọn nằm phân tán và buộc phải chọn một phần đối tượng. Cũng tương tự Selection, ta cĩ thể giữ phím Shift để chọn theo nhiều vùng khác nhau. Cơng cụ Lasso khơng thể dùng để tinh chỉnh đối tượng. Khi bấm vào biểu tượng này, sẽ xuất hiện thêm các cơng cụ con bao gồm Magic Wand, Magic Wand Setting và Polygon Mode. Hình 46 – Cơng cụ Lasso 2.5. C|c cơng cụ đổ m{u Paint Bucket, Ink Bottle v{ bắt m{u EyeDropper Cơng cụ Paint Bucket Đ}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: - 51 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN - 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. Hình 47 – Cơng cụ Paint Bucket Cơng cụ Ink Bottle Đ}y l{ cơng cụ dùng để đổ màu viền. Khi bấm chọn vào biểu tượng tam gi|c đen nhỏ ở trên biểu tượng Paint Bucket, sẽ xuất hiện biểu tượng cơng cụ Ink Bottle. - 52 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN Hình 48 – Cơng cụ Ink Bottle Khi bấm vào biểu tượng này, trên vùng thuộc tính Properties sẽ xuất hiện các thuộc tính liên quan đến cơng cụ này: - Stroke color: chọn màu viền. - Stroke: chọn kích thước cho viền. - Style: chọn dạng thức cho viền. - 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. Cơng cụ EyeDropper Đ}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í mà bạn vừa kích vào. 2.6. Cơng cụ Free Transform v{ Gradient Transform Cơng cụ Free Transform - 53 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN Hình 49 – 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 ngồi nếu muốn tăng kích thước, và kéo vào trong 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 50 – Thay đổi tâm xoay của đối tượng - 54 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN Mặc định, khi ta tạo một đối tượng thì đối tượng đĩ đ~ tồn tại một t}m điểm xoay (khi xoay đối tượng, đối tượng sẽ quay quanh điểm xoay này). Bạn cĩ thể hiệu chỉnh vị trí của điểm xoay này bằng cách bấm chọn nĩ và di chuyển. Trên hình vẽ trên, bạn cĩ thể thấy sự thay đổi vị trí của t}m xoay trên đối tượng. Ở đối tượng bên trái, tâm xoay nằm ở chính giữa của đường thẳng, cịn ở hình bên phải, t}m xoay được dịch chuyển xuống gĩc phía dưới. Bạn cĩ thể xoay đối tượng để nhận ra sự khác biệt: đường thẳng bên trái xoay theo kiểu chong chĩng (tâm quay ở chính giữa của c|nh chong chĩng), cịn đường thẳng ở bên phải thì xoay theo kiểu kim đồng hồ (tâm quay ở một đầu của kim quay). Bất kì một đối tượng n{o đối xứng tâm, thì theo mặc định, t}m đối xứng của đối tượng chính là tâm xoay của nĩ. Tâm xoay của đối tượng khơng nhất thiết phải nằm trên đối tượng. Nĩ cĩ thể nằm bất kì, tùy thuộc vào mục đích sử dụng của bạn. Xoay một đối tượng là một hiệu ứng tạo kh| đơn giản trong Flash. Bạn sẽ được tìm hiểu kĩ hơn khi học về cách tạo chuyển động bằng kĩ thuật Tween và ActionScript. Cơng cụ Gradient Transform Hình 51 – Cơng cụ Gradient Transform - 55 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN Nhờ vào cơng cụ này, ta cĩ thể hiệu chỉnh các thơng số khi đổ màu cầu vồng cho đối tượng. Sau khi tạo màu cầu vồng cho đối tượng, ta bấm chọn vào biểu tượng tam gi|c đen trên cơng cụ Free Transform, sẽ xuất hiện cơng cụ Gradient Transform, bạn chỉ việc bấm chọn nĩ. Sau đĩ, bấm vào vùng màu cầu vồng. Trên vùng màu này, sẽ hiện ra một dạng thức đổ m{u như hình bên trên. Bạn chỉ việc hiệu chỉnh hình bao m{u n{y như: kéo to (tăng kích thước vùng sáng), thu nhỏ (giảm kích thước vùng sáng), hiệu chỉnh vị trí của tam gi|c (thay đổi tâm của vùng sáng), bấm vào nút trịn và dịch chuyển nĩ (thay đổi vị trí vùng màu). 2.7. C|c cơng cụ l{m việc với đường Bezier Như tơi đ~ giới thiệu ở trên, Flash là một chuẩn đồ họa vector. Mọi đối tượng trong Flash đều dựa trên cơ sở của đường Bezier. C|c đường Bezier được tạo dựng dựa trên phương ph|p nội suy Spline. Một đường Bezier được đặt trưng bởi điểm v{ đường điều khiển của điểm đĩ. Điểm ở đ}y cĩ thể l{ điểm uốn, điểm gĩc cạnh, điểm đối xứng – ta sẽ gọi chung l{ điểm điều khiển (vì tương ứng với đường điều khiển). Nếu bạn đ~ từng làm quen với Microsoft Word, chắc hẳn bạn cũng đ~ biết đến đường Bezier này. Để làm việc với c|c đối tượng này Flash cung cấp cho ta một tập hợp các cơng cụ để làm việc với đường Bezier: cơng cụ SubSelection, Pen, Add Anchor Point, Delete Anchor Point và Convert Anchor Point. Cơng cụ SubSelection nằm riêng, các cơng cụ cịn lại được bố trí chung vào một vị trí trên thanh cơng cụ. Sau đ}y, chúng ta sẽ lần lượt tìm hiểu về các cơng cụ này. Cơng cụ SubSelection Hình 52 – Cơng cụ SubSelection - 56 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN 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. Cơng cụ Pen 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 53 – Cơng cụ Pen 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. - 57 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN Để 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 54 – 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. Ngồ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 đườ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. - 58 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN Hình 55 – Cơng cụ Convert Anchor Point 2.8. L{m việc với c|c đối tượng Khi thao tác với c|c đối tượng, ta thường sử dụng các chức năng sau đ}y: - Nhĩm viền và nền của đối tượng thành một nhĩm: cĩ hai cách nhĩm – sử dụng chức năng Group và chức năng Union. Chọn đối tượng nền và viên (nhấp đơi chuột v{o đối tượng), sau đĩ vào Modify, chọn Group (Ctrl+G) hoặc Combine Object > Union. Để nhĩm nhiều đối tượng thành một nhĩm, ta sử dụng chức năng Group: chọn c|c đối tượng cần nhĩm, nhấn tổ hợp phím Ctrl+G. - Vơ hiệu hĩa việc chỉnh sửa một đối tượng: chọn đối tượng cần khĩa, vào Modify, chọn Arrange > Lock (Ctrl+Alt+L). - Kích hoạt việc chỉnh sửa một đối tượng trở lại: Modify > Arrange > Unlock All (Ctrl+Shift+Alt+L). - Sắp xếp thứ tự đối tượng: chọn đối tượng, v{o Modify > Arrange. Sau đĩ, ta cĩ thể hiệu chỉnh thứ tự sắp xếp như đối với Microsoft Word. - Canh chỉnh vị trí v{ kích thước của đối tượng: vào Modify > Align (Ctrl+K). Hình 56 – Vùng Align - 59 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN Các chức năng trong nhĩm vùng n{y, chúng ta đ~ tìm hiểu ở trên. - Làm việc với Shape: v{o Modify > Shape. Sau đĩ ta chọn chức năng cần hiệu chỉnh. - Làm việc với Bitmap: Bitmap là một đối tượng đồ họa điểm. Flash cũng hỗ trợ đồ họa điểm. Để làm việc với Bitmap, ta v{o Modify > Bitmap. Tương ứng với Bitmap, sẽ cĩ hai chức năng l{ Swap Bitmap (thay đổi hình Bitmap) hay Trace Bitmap (chuyển đổi Bitmap thành dạng vector). Việc chuyển đổi một Bitmap thành một dạng đồ họa vector là rất phức tạp. Cĩ rất nhiều thuật tốn thực hiện chức năng n{y, nhưng nĩi chung, vẫn chưa cĩ một thuật tốn tối ưu n{o thực hiện một cách hồn hảo. Đa số ảnh vector thu được vẫn khơng giữ gìn nguyên trạng như đối với đối tượng ảnh Bitmap ban đầu. - Xây dựng c|c đối tượng trên các Layer khác nhau: việc sử dụng layer là một kĩ thuật hữu ích trong đồ họa máy tính. Hình 57 – Distribute to Layers Đối với Flash, nĩ cũng cực kì quan trọng. Bạn hãy tưởng tượng, trên một Scene của bạn, cĩ một chú chĩ, một chú mèo và một khung cảnh ở phía sau. Khi xây dựng hoạt cảnh, chĩ h{nh động theo thao tác riêng của nĩ, mèo h{nh động theo - 60 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN thao tác riêng của mèo, khung cảnh cĩ thể đứng yên hoặc cĩ những hiệu ứng riêng. Rõ ràng, mỗi đối tượng cĩ một cách thức thực hiện h{nh động riêng. Nếu ta xây dựng tất cả chúng trên cùng một layer, thì việc xây dựng h{nh động khác nhau l{ điều khơng thể. Do đĩ, trong trường hợp này, ta cần sử dụng layer. Để xây dựng từng layer cho từng đối tượng, bạn chỉ việc chọn tồn bộ đối tượng cần xây dựng layer, sau đĩ kích chuột phải và chọn Distribute to Layers. Khi đĩ, c|c đối tượng khác nhau sẽ nằm trên các layer khác nhau. - 61 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN Tổng kết chương 2 Trong chương n{y, chúng ta đ~ làm quen với các cơng cụ vẽ hình cơ bản trong Flash. Với các cơng cụ vẽ này, chúng tơi hi vọng bạn sẽ sử dụng nĩ một cách thuần thục. Khi sử dụng các cơng cụ, bạn cũng cần quan t}m đến c|c thao t|c đồng hành với nĩ. Việc sử dụng thành thạo các cơng cụ trong Flash, sẽ giúp bạn 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. Một điều hiển nhiên là số cơng cụ này cĩ thể khơng phải chuyên dụng cho việc thiết kế đồ họa. Nếu bạn muốn một trình s|ng t|c đồ họa chuyên dụng, bạn cĩ thể sử dụng Illustrator được đính kèm trong bộ sản phẩm Adobe Design. Tuy nhiên, với các cơng cụ hỗ trợ trong Flash, bạn hồn tồn cĩ thể tạo dựng những đối tượng đồ họa đỉnh cao. - 62 -
CHƯƠNG 2. CÁC CƠNG CỤ VẼ CƠ BẢN Blank Page - 63 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH Biểu tượng là một đối tượng được tạo trong Flash và cĩ thể tái sử dụng. Một biểu tượng cĩ thể được sử dụng trong một movie hoặc import v{o thư viện và sử dụng trong một movie khác. Cĩ ba loại biểu tượng là: Graphics, Buttons và MovieClips. Biểu tượng l{ đối tượng được tạo và lưu v{o trong thư viện. Nếu một bản sao của biểu tượng đĩ được sử dụng trong movie thì nĩ được gọi là một sự thể hiện của biểu tượng đĩ. Mỗi sự thể hiện của một biểu tượng cĩ một thuộc tính riêng (màu sắc, kích thước, chức năng ) khác với biểu tượng tạo ra nĩ. Mọi sự thể hiện của đối tượng cĩ thể được tạo nhờ vào chức năng kéo thả biểu tượng từ thư viện vào khung trình chiếu. Khi một biểu tượng được chỉnh sửa thì mọi sự thể hiện của nĩ cũng được cập nhập theo. Việc sử dụng biểu tượng l{ phương ph|p hiệu quả để giảm kích thước của movie. Những biểu tượng khơng được sử dụng trong movie, dù nằm trong thư viện thì nĩ cũng khơng được tính v{o kích thước của movie đĩ. 3.1. Biểu tượng Graphic 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 58 – Chuyển đổi sang biểu tượng Graphic + Name: tên của biểu tượng sẽ được tạo.
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH +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 Hình 59 – Bảng 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. - 65 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH 3.2. Biểu tượng 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 60 – 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. (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. - 66 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH (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 61 – Bảng thuộc tính của biểu tượng Button 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. - 67 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH 3.3. Biểu tượng MovieClip 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. Hình 62 – Bảng thuộc tính của biểu tượng MovieClip - 68 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH - 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. 3.4. L{m việc với Library Library là thư viện quản lý c|c đối tượng được import và convert. Để convert một đối tượng ta kích chuột phải v{o đối tượng và chọn Convert to Symbol. Khi đĩ, biểu tượng này sẽ xuất hiện trong Library. Kích thước của một movie khơng bao gồm tồn bộ c|c đối tượng trong Library, nĩ chỉ bao gồm c|c đối tượng được sử dụng trong movie. Để import một đối tượng từ bên ngồi vào Libray, ta chọn File > Import > Import to Library. Sau đĩ, c|c đối tượng được chọn sẽ được đưa v{o trong Library. Hình 63 – Khu vực quản lý thư viện Library C|c đối tượng nằm trong thư viện được tổ chức và quản lý theo cấu trúc c}y thư mục. Để tổ chức và quản lí theo c}y thư mục, ta cần tạo mới thư mục theo cấu trúc cây của Windows Explorer. C|c đối tượng trong thư viện cĩ thể được chứa trong c|c thư mục của c}y thư mục n{y. Thư viện của Flash cho phép bạn thực hiện thao tác kéo thả c|c đối tượng từ vị trí này trong cây thư mục sang vị trí khác. Ở phía trên của cấu trúc c}y thư mục này là khung Preview, cho phép bạn cĩ thể xem qua c|c đối tượng trong thư viện chương trình của Flash. - 69 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH Tổng kết chương 3 Trong chương n{y, chúng ta đ~ làm quen với ba loại biểu tượng trong Flash. Chúng cĩ một v{i điểm tương đồng và một v{i điểm khác biệt. Một điểm khác biệt nhất giữa chúng là số Frame hỗ trợ cho mỗi biểu tượng là khác nhau: Graphic – 1 Frame, Button – 4 Frame và MovieClip – nhiều Frame. Hi vọng sau khi học xong chương n{y, bạn sẽ hiểu được cách sử dụng các loại biểu tượng này. Cách chuyển đổi một đối tượng đồ họa sang các biểu tượng. Cách chuyển đổi c|c đối tượng gốc cho mỗi biểu tượng . - 70 -
CHƯƠNG 3. CÁC BIỂU TƯỢNG TRONG FLASH Blank Page - 71 -
CHƯƠNG 4. TẠO HOẠT CẢNH CHƯƠNG 4. TẠO HOẠT CẢNH 4.1. Tìm hiểu về 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 64 – 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 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.
CHƯƠNG 4. TẠO HOẠT CẢNH + Onion Skin: cho phép hiển thị tồ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 tồn bộ đối tượng. Hình 65 – Onion Skin + Onion Skin Outlines: cho phép hiển thị tồ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 66 – Onion Skin Outlines + Edit Multiple Frames: cho phép hiển thị đối tượng gốc trên tồ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 tồn bộ Frame trên thanh TimeLine. - 73 -
CHƯƠNG 4. TẠO HOẠT CẢNH Hình 67 – Onion Skin và Onion Skin Outlines kết hợp với Edit Multiple Frames 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 (Hình 60). 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 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ờ, bạn 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. Bạn 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, bạn cĩ thể thấy rằng, nếu bạn muốn sao chép một Frame cho các Frame tiếp theo, bạn sử dụng phím F5. Ngược lại, nếu bạn muốn tạo một sự thay đổi, bạn cần sử dụng phím F6. - 74 -
CHƯƠNG 4. TẠO HOẠT CẢNH Hình 68 – Khởi tạo một hình thể trên KeyFrame đầu tiên. Hình 69 – Chèn các Frame bằng phím F5 - 75 -
CHƯƠNG 4. TẠO HOẠT CẢNH Hình 70 – 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 71 – Sao chép hoặc Cắt dán nhĩm Frame - 76 -
CHƯƠNG 4. TẠO HOẠT CẢNH Để 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. Hình 72 – 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. Tạo chuyển động nhờ vào kĩ thuật “Frame by Frame” - 77 -
CHƯƠNG 4. TẠO HOẠT CẢNH Đ}y l{ kĩ thuật tạo chuyển động dựa trên cơ sở của kĩ thuật 24 hình/giây. Các Frame sẽ hiện thị tuần tự trên Scene. Sự hiển thị từng Frame một này tạo ra chuyển động cho đối tượng. Ta sẽ minh họa kĩ thuật “Frame by Frame”. Ví dụ sau đ}y sẽ tạo hiệu ứng động cho các kí tự trong từ “Flash”. Bước 1. Sử dụng cơng cụ Text, tạo một dịng văn bản cĩ nội dung l{ “Flash”. Bước 2. Chọn cơng cụ Selection. Bấm v{o dịng văn bản sau đĩ kích chuột phải và chọn Break Apart. Bước 3. Nhấp chọn Frame thứ hai trong TimeLine. Nhấp phím F6. Sau đĩ bấm chọn kí tự đầu tiên – kí tự F, và dịch chuyển nĩ lên trên so với các kí tự cịn lại hoặc thay đổi màu sắc của nĩ. Hình 73 – Kĩ thuật Frame by Frame Chọn Frame thứ ba trong TimeLine. Nhấp phím F6. Sau đĩ tiếp tục với kí tự thứ hai – kí tự l. Quá trình này cứ tiếp diễn cho đến kí tự cuối cùng là kí tự h. Bước 4. Nhấp Ctrl+Enter để kiểm tra sản phẩm. Với kĩ thuật Frame by Frame, bạn hồn tồn cĩ thể tạo ra hoạt cảnh. Nhưng một nhược điểm của kĩ thuật này là nếu bạn muốn tạo một hiệu ứng mềm mại thì bạn - 78 -
CHƯƠNG 4. TẠO HOẠT CẢNH phải thao tác rất mất thời gian. Flash cung cấp cho bạn c|c phương ph|p sau đ}y để tạo chuyển động với tên gọi là Tween. Cĩ ba phương ph|p Tween: Classic Tween, Motion Tween và Shape Tween. Về cơ bản, chúng khơng cĩ nhiều điểm tương đồng. Chúng ta sẽ lần lượt khảo sát ba loại Tween này. 4.2. 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. Trong phiên bản Flash CS5, Adobe vẫn cịn duy trì kĩ thuật này. 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 KeyFrame khởi đầu và KeyFrame kết thúc. Kể từ ấn bản CS4, Adobe đ~ đưa v{o một kĩ thuật mới gọi là Motion Tween – một kĩ thuật mà theo Adobe là sử dụng đơn giản, khơng cần tạo KeyFrame rắc rối như Classic Tween. Mục đích tạo ra kĩ thuật Classic Tween là tạo ra chuyển động cho đối tượng. Khi sử dụng Classic Tween, đối tượng sẽ được chuyển đổi thành hai biểu tượng Graphic (một biểu tượng cho KeyFrame đầu tiên và một biểu tượng cho KeyFrame kết thúc). Bạn khơng thể sử dụng các hiệu ứng 3D cho Classic Tween cũng như khơng thể sử dụng chức năng swap symbol cho đối tượng thể hiện. Nhưng sở dĩ Adobe vẫn lưu lại kĩ thuật này trong phiên bản CS5 dù kĩ thuật Motion Tween cĩ nhiều ưu điểm hơn l{ vì kĩ thuật Classic Tween cĩ những ưu điểm riêng mà Motion Tween khơng thể thay thế được. Một trong những ưu điểm đĩ l{ kĩ thuật Classic Tween cho phép chứa một Frame Script. C|c bước sử dụng Classic Tween để tạo hiệu ứng động Ví dụ sau đ}y sẽ trình bày cho bạn phương ph|p tạo quả bĩng rơi nhờ v{o kĩ thuật Classic Tween. Bước 1. Trên khung sáng tác, bạn hãy sử dụng cơng cụ Oval để tạo một hình quả bĩng và trang trí cho nĩ theo hình quả bĩng chuyền. Bước 2. Kích chuột vào Frame thứ 10, nhấp phím F6 để chèn KeyFrame kết thúc. Tại Frame thứ 10 này, bạn h~y thay đổi vị trí của quả bĩng (chạm mặt đất). Sau khi chạm đất, quả bĩng sẽ nẩy lên. Để tạo điều này, bạn bấm vào Frame thứ 20, nhấp phím F6 để chèn KeyFrame kết thúc. Tại KeyFrame này, bạn h~y thay đổi vị trí của quả bĩng lần nữa (vị trí quả bĩng nẩy đến). Bạn hãy tiếp tục qu| trình n{y cho đến khi bạn cảm thấy phù hợp (thời điểm mà quả bĩng dừng). Bạn cĩ thể quan sát quá trình n{y trong hình 46 bên dưới. - 79 -
CHƯƠNG 4. TẠO HOẠT CẢNH Bước 3. Bấm chuột vào khoảng cách giữa KeyFrame mở đầu và KeyFrame kết thúc, kích chuột phải và chọn Classic Tween. Bạn hãy lặp lại điều này cho các khoảng KeyFrame cịn lại. Bước 4. Nhấn Ctrl+Enter để kiểm tra kết quả. Đ}y l{ một ví dụ đặc trưng sử dụng Classic Tween – dùng để tạo chuyển động của đối tượng. Bạn hồn tồn cĩ thể sử dụng nĩ để hiệu chỉnh thuộc tính của đối tượng, dù rằng việc này khơng phải là chức năng chính yếu dành cho nĩ. Bạn cũng cần lưu ý rằng, trong ví dụ ở trên, mỗi lần bạn nhấn phím F6 là bạn đ~ tạo mới một KeyFrame kết thúc và KeyFrame kế tiếp của KeyFrame kết thúc đĩ cũng đĩng chức năng l{ KeyFrame mở đầu của KeyFrame kết thúc sau. Nghĩa l{ mỗi lần bạn nhấp F6, bạn đ~ tạo ra thêm một khoảng đ|nh dấu KeyFrame để tạo Classic Tween. Hình 74 – Kĩ thuật Classic Tween Trong hình minh họa trên, Layer 1 chứa quả bĩng, Layer 2 chứa nền (hình chữ nhật m{u xanh). C|c nút đen trên TimeLine của Layer 1 là các KeyFrame. Các khoảng giữa các nút này là các khoảng đ|nh dấu KeyFrame của Classic Tween. - 80 -
CHƯƠNG 4. TẠO HOẠT CẢNH 4.3. Shape Tween 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 tố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. C|c bước sử dụng Shape Tween để tạo hiệu ứng động Trong ví dụ này, chúng ta sẽ tạo hiệu ứng biến đường thẳng th{nh đường cong. Bạn 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 75 – 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. - 81 -
CHƯƠNG 4. TẠO HOẠT CẢNH 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. Sử dụng Shape Hint để điều khiển sự biến hình Khi sử dụng Shape Tween, nĩ sẽ tự động tạo ra sự biến hình theo một thuật tố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. 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 76 – Các cặp Shape Hint ở Frame đầu (bên trái) và Frame cuối (bên phải) - 82 -
CHƯƠNG 4. TẠO HOẠT CẢNH Khi sử dụng Shape Hint, c|c điểm cùng cặp (cùng chỉ số) sẽ tạo ra sự biến hình tương ứng, nhưng luơn đảm bảo điểm cùng cặp của Frame thứ đầu tiên sẽ chuyển th{nh điểm cùng cặp của Frame cuối cùng (điểm a ở hình bên trái sẽ biến thành điểm a ở hình bên phải, tương tự điểm b và c). Bằng cách bổ sung các Shape Hint này, bạn cĩ thể điều khiển chuyển động của đối tượng. Để gỡ bỏ một Shape Hint, bạn chỉ việc chọn nĩ, kích chuột phải và chọn Remove Hint. 4.4. Motion Tween Như đ~ nêu ở trên, kĩ thuật 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 bạn phải tạo các KeyFrame. Một ưu điểm của Motion Tween mà trong phiên bản Flash CS4 mới được bổ sung vào là hỗ trợ hiệu ứng 3D. Cĩ hai hiệu ứng 3D là Translation và Rotation. Chi tiết về hai chức năng n{y ta sẽ tìm hiểu thêm trong mục cuối cùng của chương n{y. Hình 77 – 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, bạn cĩ thể tối ưu kích thước của file Flash khi - 83 -
CHƯƠNG 4. TẠO HOẠT CẢNH xuất bản. Với Motion Tween, bạn cịn cĩ thể 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. C|c bước sử dụng Motion Tween để tạo hiệu ứng động Trong ví dụ này, ta tạo hiệu ứng chuyển động theo hình c|nh cung cho đối tượng được vẽ. Trong hình minh họa, đường màu xanh minh họa cho đường chuyển động của đối tượng. Bước 1. Dùng cơng cụ Brush vẽ một hình ảnh bất kì trên khung sáng tác. Bước 2. Bấm vào cơng cụ Selection, nhấp chọn đối tượng vừa vẽ. Kích chuột phải chọn Create Motion Tween. Flash sẽ tự động tạo một khoảng Frame mặc định để tạo chuyển động. Nếu số lượng Frame này khơng thỏa mãn nhu cầu xử dụng, bạn cĩ thể thay đổi nĩ bằng c|ch đặt con trỏ chuột vào vị trí cuối cùng cùng vùng Frame được đ|nh dấu. Khi trỏ chuột cĩ dạng , bạn hãy nhấp chuột và kéo sang trái hoặc sang phải. Bước 2. Di chuyển hình được vẽ sang vị trí mới. Khi đĩ, bạn sẽ thấy trên khung sáng tác xuất hiện một thanh mơ tả chuyển động của đối tượng (thanh màu xanh trong hình minh họa). Bạn cĩ thể sử dụng cơng cụ Selection để thay đổi dạng thức của đường chuyển động. Bước 3. Nhấn tổ hợp Ctrl+Enter để kiểm tra sản phẩm. Hiệu chỉnh chuyển động và các hiệu ứng nâng cao với Motion Editor Đ}y l{ một cơng cụ mạnh mẽ được tích hợp với kĩ thuật Motion Tween. Để sử dụng chức năng n{y, đầu tiên bạn hãy tạo một Motion Tween. Sau đĩ, v{o Windows>Motion Editor. Khi đĩ, cửa sổ Motion Editor xuất hiện. Hộp thoại Motion Editor n{y được chia làm hai phần: phần bên trái và phần bên phải. Phần bên trái chứa các chức năng v{ c|c thơng số liên quan, phần bên phải là biểu đồ minh họa. Ta cĩ thể hiệu chỉnh một trong hai phần này. Các nhĩm chức năng trong Motion Editor m{ bạn cần quan tâm là: - Basic Motion: dịch chuyển vị trí của vật trong khơng gian ba chiều (theo tọa độ x, tọa độ y và gĩc z). - 84 -
CHƯƠNG 4. TẠO HOẠT CẢNH Hình 78 – Bảng thuộc tính Motion Editor - Transformation: xoay chuyển (skew) theo chiều x, y hoặc kéo giãn (scale) theo chiều x, y. - Color Effect: bấm vào biểu tượng dấu cộng để bổ sung vào. Cĩ các hiệu ứng Alpha, Tint, Brightness và Advanced color. Nếu muốn loại bỏ, ta chỉ việc nhấp vào dấu trừ, và chọn hiệu ứng cần xĩa. - Filter: cũng tương tự như Filter cho văn bản. Ta cĩ thể bổ sung bằng cách bấm vào dấu cộng, và loại bỏ bằng cách bấm vào dấu trừ. - Eases: bổ sung thêm các hiệu ứng khác. Tạo chuyển động nhờ vào Motion Presets Flash CS5 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, ta 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. - 85 -
CHƯƠNG 4. TẠO HOẠT CẢNH Để minh họa cho vùng chức năng n{y, ta sẽ cùng nhau 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: bạn hãy tạo một khối cầu dạng 3D như trên hình vẽ. Sau đĩ, bạn 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 79 – Chức năng Motion Presets: chọn hiệu ứng bounce-in-3D Ở trong ví dụ này, tơi sử dụng loại chuyển động bounce-in-3D. Sau khi chọn lựa hiệu ứng chuyển động, bạn nhấp nút Apply. Khi kết hợp với Onion Skin, chúng ta sẽ thấy dạng chuyển động của nĩ như hình minh họa. Khi sử dụng dạng thức chuyển động được tạo sẵn của Motion Presets, bạn sẽ nhận thấy rằng việc tạo chuyển động trong trường hợp n{y cũng sẽ quy về việc sử dụng Motion Tween. Bạn sẽ dễ dàng kiểm tra được điều này khi quan sát thanh Timeline. Trên Timeline bạn sẽ nhận thấy được dạng Tween được sử dụng là Motion Tween (hay bạn cĩ thể nhìn thấy đường chuyển động của đối tượng – đ}y là dấu hiệu của Motion Tween). Nếu bạn quan s|t trong thư viện Library, bạn cũng sẽ thấy rằng một movieClip mới đ~ được tạo ra. Điều n{y cĩ nghĩa Flash CS5 đ~ l{m sẵn cho bạn từ A-Z. - 86 -
CHƯƠNG 4. TẠO HOẠT CẢNH Hình 80 – Chức năng Motion Presets: Motion Path Hiệu ứng chữ chạy 3D: thơng thường, khi kết thúc một bộ phim thời trung cổ, các thơng tin về phim sẽ được hiển thị theo dạng thức chữ chạy từ dưới lên và thu nhỏ dần. Chúng ta sẽ sử dụng chức năng Motion Presets để tạo hiệu ứng này. Hình 81 – Chức năng Motion Presets: hiệu ứng text-scroll-3D - 87 -
CHƯƠNG 4. TẠO HOẠT CẢNH Bạn hãy nhập một đoạn nội dung văn bản, sau đĩ chọn hiệu ứng text-scroll-3D trong vùng chức năng Motion Presets. Nhấp Apply. Cuối cùng, bạn hãy nhấn tổ hợp Ctrl+Enter để kiểm tra. Bài tập đề nghị: 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 như trong Motion Presets để thực hiện hai hiệu ứng nêu trên: a) Hiệu ứng quả bĩng di chuyển trong khơng gian. b) Chữ chạy 3D. 4.5. Cơng cụ Bone v{ Bind Cơng cụ Bone 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. - 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 - 88 -
CHƯƠNG 4. TẠO HOẠT CẢNH chỉnh độ cong của đối tượng tại Frame này nhờ vào các khớp nối. Bạn hồn tồ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 hồn tồ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 82 – 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. - 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. - 89 -
CHƯƠNG 4. TẠO HOẠT CẢNH - 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 83 – 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 52. - 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. - 90 -
CHƯƠNG 4. TẠO HOẠT CẢNH Hình 84 – Bảng thuộc tính của mối nối tạo bởi cơng cụ Bone - 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. Hình 85 – Thuộc tính Constrain - 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. Thuộc tính constraint cho hai trường hợp này hồn tồn tương tự thuộc tính constraint của Rotation. - 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 CS5 n{y, m{ Adobe đ~ bổ sung vào. - 91 -
CHƯƠNG 4. TẠO HOẠT CẢNH Cơng cụ Bind 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). Hình 86 – Cơng cụ Bind 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). 4.6. Cơng cụ Deco Là cơng cụ trang trí nghệ thuật. Với cơng cụ này, ta cĩ ba hiệu ứng tùy chọn: Vine Fill, Grid Fill, Symmetry Brush, 3D Brush, Building Brush, Decorated Brush, Fire Animation, Flame Brush, Flower Brush, Lightning Brush, Particle System, Smoke Animation và Tree Brush. Hiệu ứng Vine Fill Tạo hiệu ứng nghệ thuật dạng cây nho. Khi bấm chọn dạng biểu tượng này, sẽ xuất hiện bảng thuộc tính sau Leaf: biểu tượng tương ứng với biểu tượng lá. Nếu bạn muốn thay đổi, bạn chỉ việc nhấp vào Edit và chọn dạng symbol tương ứng. Nếu bạn muốn đổi màu lá, bạn nhấp vào biểu tượng Color tương ứng với Leaf. Nếu muốn sử dụng hình mặc định, bạn bấm chọn Default Shape. Flower: ho{n to{n tương tự nhưng nĩ tương ứng với biểu tượng hoa. Nếu bạn muốn thay đổi màu hoa, bạn nhấp vào biểu tượng Color tương ứng với Flower. Nếu muốn sử dụng hình mặc định, bạn bấm chọn Default Shape. - 92 -
CHƯƠNG 4. TẠO HOẠT CẢNH Advanced Option: Branch Angle (gĩc xoay của các cành nho), Color (màu của cành nho), Pattern Scale (kéo giãn mẫu c{nh nho) v{ Segment Length (độ dài của các cành nho). Animate Pattern: xây dựng một nhĩm lên một Frame. Chức năng n{y giúp tạo hiệu ứng động. Bạn cĩ thể hiệu chỉnh tốc độ nhờ vào Frame Step. Hình 87 – Cơng cụ Deco với hiệu ứng Vine Fill Hiệu ứng Grid Fill Khi bấm chọn hiệu ứng Grid Fill, trong bảng thuộc tính cĩ các thuộc tính sau: Fill: nhấp chọn edit để thay đổi biểu tượng. Bấm vào biểu tượng color để đổi màu cho biểu tượng. Bấm v{o Default Shape để chọn hình mặc định. Advanced Options: Horizontal Spacing (khoảng cách theo chiều ngang), Vertical Spacing (khoảng cách theo chiều dọc) v{ Pattern Scale (độ phĩng to của biểu tượng). - 93 -
CHƯƠNG 4. TẠO HOẠT CẢNH Hình 88 – Cơng cụ Deco với hiệu ứng Grid Fill Hiệu ứng Symmetry Brush Khi bấm chọn hiệu ứng Symmetry Brush, trong bảng thuộc tính sẽ hiện ra các thuộc tính sau đ}y: Hình 89 – Cơng cụ Deco với hiệu ứng Symmetry Brush - 94 -
CHƯƠNG 4. TẠO HOẠT CẢNH Module: bấm edit để thay đổi biểu tượng. Bấm color để đổi màu cho biểu tượng. Chọn Default Shape để chọn hình mặc định. Advanced Options: Reflect Across Line (tạo cặp điểm đối xứng qua đường chuẩn), Reflect Across Point (tạo cặp điểm đối tứng qua điểm chuẩn), Rotate Around (tạo c|c điểm dạng vịng), Grid Translation (tạo một mảng c|c điểm). Test Collisions: cho phép tránh hiện tượng các biểu tượng va chạm vào nhau. Hiệu ứng 3D Brush Hiệu ứng 3D Brush được sử dụng để tạo các kiểu phối màu từ nhiều đối tượng. Mỗi một thao tác phun màu bằng hiệu ứng này cần sử dụng tối đa 4 đối tượng. Hình 90 – Cơng cụ Deco với hiệu ứng 3D Brush Với hiệu ứng n{y, c|c đối tượng sẽ được phun theo hiệu ứng 3D (đối tượng gần, biểu tượng xa ). Để thay đổi c|c đối tượng, bạn chỉ việc nhấp vào nút Edit, và chọn một đối tượng kh|c để thay thế. C|c đối tượng để thay thế phải là các biểu tượng của Flash (movieclip, button hoặc graphic). C|c tính năng trong mục Drawing Effect n{y ho{n to{n tương tự trong hiệu ứng Vine và Grid. Trong mục Advanced Options cĩ các tùy chọn sau đ}y: - 95 -