Giáo trình Script và kĩ thuật hoạt hình (Phần 1)
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ểmCHƯƠNG 1. GIỚI THIỆU VỀ FLASH
Đồ họa Fractal: sử dụng thuật toá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 hoà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
Tóm tắt nội dung tài liệu: Giáo trình Script và kĩ thuật hoạt hình (Phần 1)
ĐẶNG NGỌC HOÀ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) - 2 - Blank Page - 3 - 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 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 hoà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 hoà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. Hueá, thaùng 08/2010 Chaân thaønh caûm ôn ! A - 4 - Blank Page - 5 - 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 - 6 - 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. Toá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 - 7 - 5.4.3. Các câu lệnh lặp for, while v{ dowhile ...................................................... 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 - 8 - 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 - 9 - Blank Page 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 - 11 - Đồ họa Fractal: sử dụng thuật toá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 hoà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 Illus ... 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. CHƯƠNG 4. TẠO HOẠT CẢNH - 92 - 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. CHƯƠNG 4. TẠO HOẠT CẢNH - 93 - 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). CHƯƠNG 4. TẠO HOẠT CẢNH - 94 - 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 CHƯƠNG 4. TẠO HOẠT CẢNH - 95 - 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: CHƯƠNG 4. TẠO HOẠT CẢNH - 96 - Max objects: số lượng đối tượng được tạo cực đại trong mỗi lần phun. Spray area: vùng được phun (tính theo pixel). Perspective: cho phép tạo hiệu ứng phối cảnh hay không. Distance scale: độ kéo giãn theo khoảng cách (độ phóng to – zoom). Random scale range: Tỉ lệ kéo giãn ngẫu nhiên (bao nhiêu trong số các biểu tượng đó chịu t|c động của độ kéo giãn ngẫu nhiên). Random rotation range: tạo các góc quay ngẫu nhiên cho các biểu tượng. Hiệu ứng Building Brush Với hiệu ứng Building Brush, bạn có thể tạo dựng các tòa nhà cao tầng. Công cụ này rất hữu ích trong các tác vụ muốn xây dựng một đô thị sầm uất. Hình 91 – Công cụ Deco với hiệu ứng Building Brush Trong mục Advanced Options, có hai chức năng: Tùy chọn thả xuống: cho phép bạn lựa chọn các mẫu nhà cao tầng. Bạn có 4 lựa chọn mẫu nhà cao tầng – skyscraper 1, skyscraper 2, skyscraper 3 và skyscraper 4. Nếu bạn muốn tạo các mẫu nhà ngẫu nhiên, bạn có thể chọn Radom Building. Building size: kích thước (theo chiều ngang) của tòa nhà. CHƯƠNG 4. TẠO HOẠT CẢNH - 97 - Khi xây dựng các tòa nhà, bạn cần lưu ý: sau khi chọn công cụ Deco và chọn mẫu nhà, bạn hãy nhấp chuột và kéo dọc theo hướng lên phía trên. Nếu độ cao của tòa nh{ đ~ phù hợp, bạn thả chuột. Với hiệu ứng này bạn có thể dễ dàng tạo dựng các ngôi nhà cao tầng. Bạn lưu ý rằng, các ngôi nhà cao tầng n{y được tạo bằng cách lắp ghép các phần lại với nhau để tạo nên một tòa nhà hoàn chỉnh. Nếu bạn muốn tạo hiệu ứng cho một đối tượng ngôi nhà hoàn chỉnh, bạn cần nhóm các phần của ngôi nhà thành một đối tượng. Hiệu ứng Decorated Brush Với công cụ Decorated Brush, bạn có thể tạo c|c đường viền nghệ thuật theo các mẫu được cung cấp sẵn. Hình 92 – Công cụ Deco với hiệu ứng Decorated Brush Trong mục tùy chọn Advanced Option, bạn có 3 tùy chọn: Tùy chọn thả xuống: có 20 dạng nghệ thuật đường viền cho bạn chọn lựa. Pattern color: chọn m{u cho đường viền nghệ thuật. Pattern size: kích thước của biểu tượng nghệ thuật. Pattern width: độ rộng của biểu tượng nghệ thuật. CHƯƠNG 4. TẠO HOẠT CẢNH - 98 - Hiệu ứng Fire Animation Hiệu ứng Fire Animation sẽ tạo ra một ngọn lửa cháy sáng. Nó rất hữu dụng trong các tác vụ cần tạo dựng ngọn lửa. Đối với hiệu ứng này, mục Advanced Options có các tùy chọn sau: Fire size: kích thước ngọn lửa. Fire speech: tốc độ cháy của lửa. Fire duration: hiệu ứng động của lửa sẽ diễn ra trong bao nhiêu frame. Bạn sẽ thấy đó chính l{ số keyframe hiển thị trên thanh TimeLine. Nhưng điều này chỉ đúng trong trường hợp tùy chọn End Animation không được chọn. End Animation: ngọn lửa tàn dần (nếu được chọn), hoặc diễn tiến mãi mãi (nếu không được chọn). Flame color: màu phía rìa ngoài của ngọn lửa. Flame core color: màu của lõi ngọn lửa. Fire spark: số ngọn lửa. Hình 93 – Công cụ Deco với hiệu ứng Fire Animation Thông thường, khi tạo dựng một hoạt cảnh có sử dụng đến ngọn lửa, bạn nên kết hợp với hiệu ứng tạo khói (Smoke Animation) mà chúng ta sẽ tìm hiểu ở phần tiếp theo. CHƯƠNG 4. TẠO HOẠT CẢNH - 99 - Hiệu ứng Flame Brush Hiệu ứng này giúp tạo dựng các phun màu theo hình dáng ngọn lửa. Trong mục Advanced Options có 2 tùy chọn: Flame size: kích thước của ngọn lửa. Flame color: màu của ngọn lửa. Hiệu ứng n{y tương đối đơn giản. Nó không có nhiều ứng dụng trong các dự án thiết kế phim hoạt hình. Hình 94 – Công cụ Deco với hiệu ứng Flame Brush Hiệu ứng Flower Brush Hiệu ứng này quả thật rất thú vị. Nhờ vào nó, chúng ta có thể tạo các cành hoa. Với mục Advanced Options, ta có các tùy chọn sau: Tùy chọn thả xuống: cho phép bạn chọn lựa các loại hoa sau: Garden Flower, Rose, PoinSettia và Berry. Flower color: màu cho hoa. Flower size: kích thước của hoa. Leaf color: màu cho lá. Leaf size: kích thước của lá. CHƯƠNG 4. TẠO HOẠT CẢNH - 100 - Hình 95 – Công cụ Deco với hiệu ứng Flower Brush Fruit color: màu của quả. Tùy chọn branch: cho phép hiển thị cành cây hay không. Nếu tùy chọn này được kích hoạt, bạn có thể chọn hiệu ứng ngay dưới đ}y. Branch color: màu của cành cây. Hiệu ứng Lightning Brush Hiệu ứng Lightining dùng để tạo c|c tia s|ng. Nó được ứng dụng trong việc tạo các tia sét, hoặc các hiệu ứng phóng điện khác. Với mục Advanced Options, bạn có các tùy chọn sau đ}y: Lightning color: màu của tia sáng. Lightning scale: độ kéo giãn của tia sáng. Tùy chọn Animation: nếu muốn tạo hiệu ứng động cho tia sáng. Beam width: độ rộng của tia sáng. Complexity: độ rối (độ phức tạp) của chùm tia sáng. CHƯƠNG 4. TẠO HOẠT CẢNH - 101 - Hình 96 – Công cụ Deco với hiệu ứng Lightning Brush Hiệu ứng Particle System Hiệu ứng này tạo một chùm hạt được phóng ra từ một nguồn phát. Bạn sẽ thấy nó cũng rất hữu ích trong nhiều tác vụ: phun bong bóng nước, phun các hạt bụi. Hình 97 – Công cụ Deco với hiệu ứng Particle System CHƯƠNG 4. TẠO HOẠT CẢNH - 102 - Mục Drawing Effect có hai tùy chọn cho các loại hạt. Bạn có thể thay đổi chúng như đối với hiệu ứng vine, grid và 3D brush. Mục Advanced options có các tùy chọn sau: Total length: diễn tiến h{nh động trên bao nhiêu frame. Particle generation: nguồn phát các hạt sẽ diễn ra trên bao nhiêu frame. Rate per frame: tốc độ trên mỗi frame. Life span: mỗi một hạt sẽ có thời gian tồn tại trên bao nhiêu frame. Initial speech: tốc độ khởi tạo. Initial size: kích thước khởi tạo. Min initial direction: góc phun nhỏ nhất. Max initial direction: góc phun lớn nhất. Gravity: trọng lượng của hạt. Rotation rate: tốc độ quay vòng của hạt. Hiệu ứng Smoke Animation Hiệu ứng n{y tương tự với hiệu ứng Fire Animation. Nó dùng để tạo hiệu ứng bóc khói. Thường hiệu ứng này sử dụng kết hợp với hiệu ứng Fire Animation. Hình 98 – Công cụ Deco với hiệu ứng Smoke Animation Trong mục Advanced options có các tùy chọn sau đ}y: CHƯƠNG 4. TẠO HOẠT CẢNH - 103 - Smoke size: kích thước của khói. Smoke speed: tốc độ khói. Smoke duration: diễn tiến của hiệu ứng khói trên bao nhiêu frame. Cũng tương tự Fire Animation, số keyframe trên Timeline sẽ chính là giá trị của Smoke duration trong trường hợp tùy chọn End Animation không được chọn. End Animation: hiệu ứng khói bốc lên và tan biến vào không khí (nếu tùy chọn n{y được chọn) và không tan biến vào không khí (trong trường hợp tùy chọn này không được chọn). Smoke color: màu của khói. Background color: màu của khói khi khói dần tan vào không khí. Hiệu ứng Tree Brush Hiệu ứng này sử dụng để tạo các loại cây khác nhau. Flash cung cấp cho ta khá nhiều dạng c}y để sử dụng. Hình 99 – Công cụ Deco với hiệu ứng Tree Brush Trong mục Advanced options có các tùy chọn sau đ}y: Tùy chọn thả xuống: cho phép bạn chọn lựa các loại cây. Flash cung cấp sẵn cho chúng ta 20 loại cây khác nhau. Tree scale: độ kéo giãn của cây. CHƯƠNG 4. TẠO HOẠT CẢNH - 104 - Branch color: màu của cành cây. Leaf color: màu của lá cây. Flower/Fruit color: màu của hoa hoặc quả. Với công cụ Deco, bạn thả sức để sáng tác các kịch bản cho c|c thước phim hoạt hình của bạn cũng như cho game. Dù rằng công cụ Deco n{y đ~ có trong phiên bản CS4, nhưng với phiên bản CS5 này, công cụ n{y đ~ ho{n thiện hơn, cung cấp cho ta nhiều tùy chọn hơn để sáng tác. Mục tiêu của Adobe đặt ra qua mỗi phiên bản l{ l{m sao để đơn giản hóa công việc thiết kế cho người dùng, để mở rộng phạm vi đối tượng sử dụng – không chỉ d{nh cho người dùng chuyên nghiệp mà còn hướng đến người dùng phổ thông. 4.7. Công cụ 3D Translation và 3D Rotation Công cụ 3D Translation Công cụ này cho phép chúng ta có thể tạo chuyển động 3D cho đối tượng. Như ta đ~ thảo luận ở trên, công cụ này chỉ hoạt động đối với đối tượng được tạo Motion Tween. Ví dụ sau đ}y sẽ minh họa cho việc sử dụng công cụ 3D Translation. Trong ví dụ này, ta sẽ tạo một mặt phẳng và cho phép nó chuyển động trong không gian 3 chiều. Để l{m được điều này, chúng ta sẽ thao t|c theo c|c bước sau đ}y: - Bước 1. Trên Layer 1, bạn hãy một hình bình hành (sử dụng công cụ hình chữ nhật và công cụ Free Transform) để tượng trưng cho mặt phẳng và trên Layer 2 bạn hãy tạo một hệ tọa độ Descartes 3 chiều như hình minh họa. - Bước 2. Chọn hình bình hành, kích chuột phải và chọn Create Motion Tween Sau đó, bấm chọn công cụ 3D Translation. Bạn có thể sử dụng công cụ n{y để di chuyển mặt phẳng theo các chiều x (trục ngang), y (trục đứng) v{ z (điểm chấm trung tâm). - Bước 3. Để đảm bảo rằng trục tọa độ mà ta tạo tồn tại song song với các layer của mặt phẳng, ta hay chọn Frame trên TimeLine của nó tương ứng với Frame cuối cùng của TimeLine mặt phẳng. Sau đó nhấn phím F5. - Bước 4. Nhấn tổ hợp Ctrl+Enter để kiểm tra kết quả. CHƯƠNG 4. TẠO HOẠT CẢNH - 105 - Hình 100 – Công cụ 3D Translation Công cụ 3D Rotation Công cụ này cho phép chúng ta có thể xoay chuyển 3D cho đối tượng. Như ta đ~ thảo luận ở trên, công cụ n{y cũng chỉ hoạt động đối với đối tượng được tạo Motion Tween. Bạn thao t|c ho{n to{n tương tự ví dụ sau trên. Nhưng ở đ}y, mặt phẳng sẽ xoay chuyển 3D trong không gian. Để l{m được điều này, chúng ta sẽ thao tác theo các bước sau đ}y: - Bước 1. Trên Layer 1, bạn hãy một hình bình hành (sử dụng công cụ hình chữ nhật và công cụ Free Transform) để tượng trưng cho mặt phẳng và trên Layer 2 bạn hãy tạo một hệ tọa độ Descartes 3 chiều như hình minh họa. - Bước 2. Chọn hình bình hành, kích chuột phải và chọn Create Motion Tween Sau đó, bấm chọn công cụ 3D Rotation. Bạn có thể sử dụng công cụ n{y để xoay chuyển mặt phẳng theo các chiều x (trục ngang), y (trục đứng) và z (vòng tròn bên trong) . CHƯƠNG 4. TẠO HOẠT CẢNH - 106 - Hình 101 – Công cụ 3D Rotation - Bước 3. Để đảm bảo rằng trục tọa độ mà ta tạo tồn tại song song với các layer của mặt phẳng, ta hay chọn Frame trên TimeLine của nó tương ứng với Frame cuối cùng của TimeLine mặt phẳng. Sau đó nhấn phím F5. - Bước 4. Nhấn tổ hợp Ctrl+Enter để kiểm tra kết quả. CHƯƠNG 4. TẠO HOẠT CẢNH - 107 - Tổng kết chương 4 Trong chương n{y, chúng ta đ~ tìm hiểu cách tạo chuyển động cho c|c đối tượng. Ở đ}y, chúng ta đ~ cùng nhau tìm hiểu về kĩ thuật Frame by Frame, kĩ thuật Tween, các công cụ tạo hoạt hình như Bone, Bind, 3D, Deco. Kĩ thuật Frame by Frame tuy đ~ cũ, nhưng nó vẫn rất hữu ích trong nhiều tác vụ. Kĩ thuật Tween được chia làm ba loại: Classic Tween, Motion Tween và Shape Tween. Mỗi công cụ đều có những nét đặc trưng riêng. Classic Tween v{ Motion Tween tuy có nhiều điểm tương đồng, nhưng chúng không phải lúc n{o cũng có thể thay thế cho nhau: Classic Tween hỗ trợ Action Frame còn Motion Tween thì không; Motion Tween không cần tạo KeyFrame nên đơn giản hơn, hiệu quả hơn Classic Tween; Motion Tween hỗ trợ các hiệu ứng 3D còn Classic Tween thì không. Các công cụ tạo hoạt hình như Bone, Bind, 3D v{ Deco cũng rất hữu ích. Chúng có thể sử dụng độc lập hay kết hợp với kĩ thuật Tween. Nhờ những công cụ mới này, việc tạo hoạt hình cho đối tượng trở nên đơn giản hơn rất nhiều. CHƯƠNG 4. TẠO HOẠT CẢNH - 108 - Blank Page
File đính kèm:
- giao_trinh_script_va_ki_thuat_hoat_hinh_phan_1.pdf