Giáo trình Thiết kế hoạt hình - Nghề: Công nghệ thông tin - CĐ Kỹ Thuật Công Nghệ Bà Rịa Vũng Tàu

(NB) Mục tiêu của Giáo trình Thiết kế hoạt hình là Thiết kế website flash, làm banner, logo động cho website; Làm game, E card, E Calalog; Dựng phim hoạt hình trên nền flash; Làm hình động cho điện thoại di động

ỦY BAN NHÂN DÂN TỈNH BR – VT

TRƯỜNG CAO ĐẲNG NGHỀ

GIÁO TRÌNH THIẾT KẾ HOẠT HÌNH NGHỀ CÔNG NGHỆ THÔNG TIN TRÌNH ĐỘ CAO ĐẲNG VÀ TRUNG CẤP

Ban hành kèm theo Quyết định số: 01 /QĐ-CĐN ngày 04 tháng 01 năm 2016

của Hiệu trưởng trường Cao đẳng nghề tỉnh Bà Rịa – Vũng Tàu

Bà Rịa – Vũng Tàu, năm 2016

LỜI GIỚI THIỆU

Adobe Flash (trước đây là Macromedia Flash và trước đó FutureSplash), hay còngọi một cách đơn giản là Flash, được dùng để chỉ chương trình sáng tạo đa phương tiện(multimedia) lẫn phần mềm dùng để hiển thị chúng Macromedia Flash Player

Flash là công cụ để phát triển các ứng dụng như thiết kế các phần mềm mô phỏng

Sử dụng ngôn ngữ lập trình ActionScript để tạo các tương tác, các hoạt cảnh trong phim.Điểm mạnh của Flash là có thể nhúng các file âm thanh, hình ảnh động Người lập trình

có thể chủ động lập các điều hướng cho chương trình Flash cũng có thể xuất bản đa dạngcác file kiểu html, exe, jpg để phù hợp với các ứng dụng của người sử dụng như trênWeb, CD

Bà Rịa – Vũng Tàu, ngày tháng năm 2015

Nguyễn Bá Thủy

MỤC LỤC

BÀI 1:

KHỞI ĐẦU VỚI ADOBE FLASH 8

1 Giới thiệu giao diện Adobe Flash 8

2 Các thao tác cơ bản trên file: Tạo mới, lưu, đóng, mở 9

3 Công cụ vẽ: Pencil, Brush, Eraser, AirBrush, Line 12

4 Rectangle, Oval, PolyStar, Text 13

5 Công cụ Pen, Add anchore Point, Delete anchore point 14

BÀI 2 CÁC BIỂU TƯỢNG SYMBOL 16

1 Biểu tượng Graphic, Button, MovieClip 16

2 Làm việc với thư viện Library 17

3 Làm việc với Common Library 18

BÀI 3 THAO TÁC VỚI TIMELINE 20

1 Giới thiệu timeline 20

2 Vai trò trong xử lý hoạt hình 20

3 Xử lý hoạt hình cho đối tượng 21

BÀI 4 TẠO HOẠT HÌNH BẰNG FRAME BY FRAME VÀ CLASSIC TWEEN 22

1 Hoạt hình Frame by frame 22

2 Hoạt hình Classic tween 24

BÀI 5 TẠO HOẠT HÌNH THEO ĐƯỜNG DẪN 27

1 Giới thiệu hoạt hình theo đường dẫn 27

2 Thao tác hoạt hình theo đường dẫn 27

BÀI 6 TẠO HOẠT HÌNH VỚI MOTION TWEEN, SHAPE TWEEN 29

1 Hoạt hình Motion tween 29

2 Hoạt hình Shape tween Sử dụng Shape hint 30

BÀI 7 SỬ DỤNG SỬ DỤNG MẶT NẠ (MASK) 35

1 Mặt nạ (mask) 35

2 Các công cụ tạo hoạt hình: bone, deco, bind, 3D 35

MÔ ĐUN THIẾT KẾ HOẠT HÌNH

Vị trí, tính chất của môn học

- Vị trí của môn học: Môn học được bố trí sau khi học sinh học xong các môn học chung,các môn học, mô đun kỹ thuật cơ sở và học trước các môn thiết kế và lập trình Web, lậptrình Windows

- Flash là công cụ để phát triển các ứng dụng như thiết kế các phần mềm mô phỏng Sửdụng ngôn ngữ lập trình ActionScript để tạo các tương tác, các hoạt cảnh trong phim.Điểm mạnh của Flash là có thể nhúng các file âm thanh, hình ảnh động Người lập trình

có thể chủ động lập các điều hướng cho chương trình

- Tính chất của môn học: Là mô đun kết hợp làm công cụ cho các môn lập trình giao diện

Mục tiêu modun

- Thiết kế website flash, làm banner, logo động cho website

- Làm game, E-card, E-Calalog

- Dựng phim hoạt hình trên nền flash

- Làm hình động cho điện thoại di động

- Làm các CD tương tác với ưu điểm là file siêu nhẹ, tương thích rất tốt với Photoshop và Illustrator để dùng làm hình minh họa, phù hợp với xu hướnng website tương tác với giao diện đẹp hiện nay

Nội dung:

STT Tên các bài trong mô đun Thời

gian

Hình thức giảng dạy

4 Tạo hoạt hình Frame by frame và Classic tween 5 Tích hợp

5 Tạo hoạt hình theo đường dẫn 5 Tích hợp

6 Tạo hoạt hình Motion tween và Shape tween Sử dụng

Shape hint

5 Tích hợp

7 Sử dụng mặt nạ (mask) và các công cụ tạo hoạt hình:

bone, deco, bind, 3D

4 Tích hợp

8 Sử dụng kiểu dữ liệu, biến, hằng Toán tử và biểu thức 5 Tích hợp

9 Tạo Action script bằng cấu trúc lệnh rẽ nhánh 5 Tích hợp

10 Tạo Action script bằng cấu trúc lặp 5 Tích hợp

12 Điều khiển Chuột và Bàn phím bằng các sự kiện 4 Tích hợp

13 Vẽ giao diện các trang web (trang intro, trang chủ, các

trang chi tiết, …)

5 Tích hợp

14 Tạo các movie clip và các nút bấm liên kết đặt lên

trang

5 Tích hợp

15 Gán âm thanh, lện action script cho các nút bấm 5 Tích hợp

16 Điều khiển âm nhạc cho trang web 4 Tích hợp

17 Chuyển file phim thành Video Flash 5 Tích hợp

18 Cách đưa phim video flash vào trang ( embedded hoặc

external)

5 Tích hợp

19 Tạo các điều khiển xem phim 4 Tích hợp

20 Tạo các banner quảng cáo bằng biến đổi hình dạng,

mặt nạ, biến đổi chuyển động

5 Tích hợp

21 Chèn hoạt hình Flash vào trang web 5 Tích hợp

22 Sử dụng phần mềm Banner Design Pro, Swish max để

tạo các hiệu ứng text

4 Tích hợp

23 Publish ra Shockwave Flash và HTML 10 Tích hợp

24 Kiểm tra bài 7, 12, 16, 19, 22

BÀI 1 KHỞI ĐẦU VỚI ADOBE FLASH Giới thiệu

Flash là công cụ để phát triển các ứng dụng như thiết kế các phần mềm mô phỏng

Sử dụng ngôn ngữ lập trình ActionScript để tạo các tương tác, các hoạt cảnh trong phim.Điểm mạnh của Flash là có thể nhúng các file âm thanh, hình ảnh động Người lập trình

có thể chủ động lập các điều hướng cho chương trình Flash cũng có thể xuất bản đa dạngcác file kiểu html, exe, jpg để phù hợp với các ứng dụng của người sử dụng như trênWeb, CD

Mục tiêu

- Hiểu rõ công dụng các công cụ vẽ và tô màu

- Thao tác vẽ và tô màu cho đối tượng hình cơ bản

- Rèn luyện tính cẩn thận, tư duy sáng tạo

1 Giới thiệu giao diện Adobe Flash

Khi khởi động lần đầu tiên, Flash CS4 có giao diện như sau:

Hình 1.1: Cửa sổ khởi động Flash

Vùng khoanh tròn màu đỏ ở hình trên có chữ ESSENTIALS Đây là vùng làm việc(workspace) mặc định khi khởi động Flash CS4 lần đầu Có nhiều vùng làm việc khácnhau để chọn lựa tùy theo thói quen và sở thích của từng người, ví dụ như đối với người

đã từng sử dụng Flash có thể chọn vùng làm việc CLASSIC

Khi bấm vào chữ ESSENTIALS đề cập ở trên, Flash sẽ xổ xuống một menu cho bạn chọnlựa vùng làm việc như sau:

Hình 1.2: Menu lựa chọn vùng làm việc

Để giúp làm quen với Flash không gặp khó khăn trong việc thiết lập vùng làm việc, bạn

sẽ thực hành dựa trên vùng làm việc mặc định

2 Các thao tác cơ bản trên file: Tạo mới, lưu, đóng, mở

Dùng chuột bấm vào nút Flash File (ActionScript 3.0):

Hình 1.4: Tạo tên file flash

(Xem thêm phần Flash document và Flash movie ở phần kế tiếp)

Lưu một flash document

Tất cả các bài thực hành được lưu vào một folder chính để tiện cho việc quản lý

Sẽ tạo một folder mới có tên FLASH CS4 ONLINE, sau đó lưu file này lại với tên001_frame_by_frame.fla trong folder vừa tạo ra, sau đó sẽ thực hành tiếp Cách làm nhưsau:

Chọn File > Save:

Hình 1.5: Chọn lưu tập tin

Ở hộp thoại mới mở ra, bấm nút Create New folder:

Hình 1.9: Lưu đúng định dạng file

3 Công cụ vẽ: Pencil, Brush, Eraser, AirBrush, Line

Công cụ Pencil:

Hình 1.10: 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

- Smoothing: độ mềm dẻo cho nét vẽ

Hình 1.11: Công cụ Smoothing

Công cụ Erase:

Công cụ dùng để tẩy xóa các nét vẽ

4 Rectangle, Oval, PolyStar, Text

Sử dụng công cụ Oval ( ) vẽ hình trên cửa sổ làm việc

Shift + di chuột để vẽ hình tròn

Chức năng chính: viết chữ trong flash

Kết hợp cùng bảng Properties để điều chỉnh (font, màu sắc, kích thước vị trí, …)

Công cụ Text (T)

3 định dạng kiểu văn bản

Hình 1.12: Công vụ văn bản

5 Công cụ Pen, Add anchore Point, Delete anchore point

Pen Tool (P): dùng tạo các nét thẳng hoặc cong

Hình 1.13: Các công cụ chuẩn

6 Convert anchore point, subselection

Sub select tool (A): dùng chọn đối tượng, thành phần của hình

7 Công cụ chọn: Selection, Lasso

Lựa chọn công cụ Selection ( ), lựa chọn 1 vùng trên hình vẽ và di chuyển vùng chọn ra vịtrí khác.

Hình 1.14: Công cụ Selection

8 Công cụ tô màu Paint Bucket, InK Bottle, Eye dropper

Bucket Tool (K): dùng tô màu các hình được tạo ra từ đường viền (màu bên trong hình).Dropper Tool (I): dùng cho phép lấy mẫu tô, kiểu đường nét của 1 đối tượng rồi áp dụng mẫu tô đó cho 1 đối tượng khác (chọn 1 mẫu rồi quét vào 1 mẫu khác)

9 Công cụ Free Transform, Gradient Transform

Flash hỗ trợ 2 loại kiểu màu gradient:

Linear: hòa trộn màu theo cách đồng dạng theo một đường thẳng đi theo một hướng hoặc một góc xác định

Radial: hòa trộn màu theo cách thức tỏa tròn, theo 2

hướng: hướng tâm và hướng ra ngoài

BÀI 2 CÁC BIỂU TƯỢNG SYMBOL Giới thiệu

Một Symbol là một đối tượng tái sử dụng được lưu trữ trong thư viện một tài liệucủa Flash Có thể vẽ một hình dạng và sau đó chuyển đổi nó thành một biểu tượng Saukhi chuyển đổi, nó được lưu trữ trong thư viện các tài liệu của Flash Sau đó, từ thư viện,

có thể dễ dàng làm nhiều bản sao của biểu tượng mà không cần phải tạo lại nó Có thểbiến bất cứ điều gì muốn vẽ vào biểu tượng

Mục tiêu

- Trình bày vai trò của các biểu tượng, thư viện Library

- Thao tác lệnh đồ họa với Graphic, Button, MovieClip

- Sử dụng các thư viện cho đối tượng hình

- Rèn luyện tính cẩn thận, tư duy sáng tạo

1 Biểu tượng Graphic, Button, MovieClip

Graphics:

Sử dụng biểu tượng đồ họa cho tác phẩm nghệ thuật tĩnh và hình ảnh động mà bạn không

có kế hoạch bổ sung thêm bất kỳ chức năng tương tác để Lý do của việc này là bạn sẽ cần ActionScript để thêm các tương tác, và biểu tượng đồ họa không được thiết kế để làm việc với ActionScript

Nút:

Sử dụng các biểu tượng nút nếu bạn muốn thêm các tương tác chuột liên quan như nhấp chuột và cuộn thuyết minh cho phim Flash của bạn Ví dụ, bạn có thể tạo ra một nút mà chơi một bài hát bất cứ khi nào nó được click

Movie Clip:

Các biểu tượng movie clip là giống như một sự kết hợp của đồ họa, các nút và nhiều hơn nữa Nó có thể được sử dụng cho các tác phẩm nghệ thuật tĩnh và hoạt hình, nhưng nó

cũng có thể được sử dụng với ActionScript để chức năng tương tác có thể được thêm vào

nó Nhưng không giống như các nút, clip có khả năng nhiều hơn so với tương tác chuột liên quan

Có thể tạo ra một biểu tượng của bất kỳ tác phẩm nghệ thuật để vẽ hoặc nhập khẩu lên sânkhấu Trong hướng dẫn này, chúng ta sẽ vẽ một hình tròn đơn giản, chuyển đổi nó thành một biểu tượng, và sau đó chỉnh sửa biểu tượng đó

Hình 2.1: Hiểu chỉnh TimeLines

2 Làm việc với thư viện Library

Để hiển thị cửa sổ Library, thực hiện một trong những bước sau đây:

- Chọn trong trình đơn Window > Library

Hoặc nhấp chuột vào nút Library trong thanh Launcher tại góc phải bên dưới của cửa sổ giao diện

- Cách dùng mục Item trong đoạn phim hiện hành : Kéo mục Item trong cửa sổ Library vào vùng Stage Mục Item đó được thêm vào trong Layer hiện hành

Hình 2.2: Chọn thư mục hiện hành trong thư viện

Mở thư viện từ trong một file Flash

Chọn trình đơn File > Open as Library

Chọn file Flash bạn muốn mở tại thư viện, sau đó nhấp chuột vào nút Open

Cửa sổ của file được chọn mở trong đoạn phim hiện hành với tên của file đó xuất hiện ở phía trên cùng trong cửa sổ Library Để sử dụng các mục có trong cửa sổ Library vào trong đoạn phim hiện hành, bạn chỉ việc kéo mục chọn đó và thả vào trong cửa sổ thư viện của đoạn phim hiện hành

3 Làm việc với Common Library

Tất cả những loại thư viện này được hiển thị trong trình đơn phụ Window > Common Libraries

Hình 2.3: Các lựa chọn của Common Library

- Cách tạo ra một thư viện tạm thời trong chương trình Flash:

• Tạo một file Flash với một thư viện chứa các biểu tượng muốn đặt chúng vào thư viện tạm thời

• Đặt file Flash vào trong thư mục Libraries trong thư mục chương trình Flash trong đĩa cứng

- Cách dùng một mục từ thư viện chung trong đoạn phim:

• Chọn trong trình đơn Window > Common Libraries và chọn một thư viện có trong trình đơn phụ.

Hình 2.4: Lụa chọn Graphics

BÀI 3 THAO TÁC VỚI TIMELINE Giới thiệu

Phần này có thể coi là quan trong nhất trong flash vì nó là cho ta thể hiện mọi thứ trong quá trình thiết kế như câu lệnh, âm thanh, hình ảnh, chuyển động…

Mục tiêu

- Hiểu rõ vai trò của timeline

- Vận dụng các công cụ timeline tạo hoạt hình

- Rèn luyện tính cẩn thận, tư duy sáng tạo

1 Giới thiệu timeline

Ta có thể dùng bảng tiến trình (Timeline) để làm cho Flash trở nên động đậy?! Nhưng vớibảng tiến trình ta thường mất nhiều thời gian và thao tác hơn so với dùng ActionScript

2 Vai trò trong xử lý hoạt hình

Timeline dài để đặt chuỗi hình ảnh của mình lên đó (hãy tượng tượng Timeline giống như

1 cuốn băng dài chứa toàn bộ các khung hình của 1 bộ phim vậy)

Timeline đó được thể hiện bằng 1 chuỗi liên tục các Frame nối tiếp nhau theo chiều ngang, mỗi Frame thể hiện 1 hình ảnh nào đó (giống như 1 khung hình riêng biệt trong chuỗi hình ảnh của 1 bộ phim) Khi chạy, Flash sẽ lướt qua lần lượt các frame này từ đầu tới cuối và hiển thị các hình ảnh chứa trong mỗi frame đó để tạo ra 1 đoạn hoạt cảnh

Hình 3.1: Frame trong TimeLine

3 Xử lý hoạt hình cho đối tượng

Khi soạn thảo 1 file Flash, Playhead là 1 vạch đỏ cắt ngang qua Timeline (xemhình dưới) Nó cho biết ta hiện đang thao tác ở frame số bao nhiêu trên Timeline Ngoài

ra, sau khi file Flash được xuất ra thành 1 đoạn phim hoàn chỉnh và chạy trên flash playerthì không còn vạch đỏ nào cả nhưng người ta vẫn có thể nói tới khái niệm Playhead như 1con trỏ cho biết hiện thời frame nào đang được trình chiếu (Trong hình mình hoạ, framehiện tại được trỏ đến là frame 8)

Còn Stage chính là nơi mà ta sẽ vẽ hoặc đặt hình ảnh lên đó (mặc định stage cómàu trắng) Stage có dạng một hình chữ nhật Những gì nằm ngoài phạm vi của stage sẽkhông được nhìn thấy khi đoạn hoạt cảnh được trình chiếu Kích thước của stage cũngchính là kích thước màn hình của đoạn phim mà ta tạo ra

Hình 3.2: Điểm dùng của Frame

BÀI 4 TẠO HOẠT HÌNH BẰNG FRAME BY FRAME VÀ CLASSIC TWEEN Giới thiệu

Tạo ảnh động (animation) theo phương pháp frame-by-frame, tức là phương pháp tạo ảnh động với mỗi khung hình có một nội dung khác nhau, cụ thể là cho dòng chữ TUỔI TRẺ CAO ĐẲNG NGHỀ xuất hiện dần theo từng ký tự thông qua các bước sau đây

Mục tiêu

- Hiểu rõ vai trò Frame by frame, Classic tween

- Vận dụng các công cụ Frame by frame, Classic tween để tạo hoạt hình cho đối tượng

- Rèn luyện tính cẩn thận, tư duy sáng tạo

1 Hoạt hình Frame by frame

Frame by frame trong flash được dùng để tạo một hiệu ứng chuyển động cơ bản nhất trong flash Các đối tượng sẽ chuyển động từng frame một và tất cả các frame đó sẽ hình thành một chuyển động chung là frame by frame

Thiết kế chuyển động gồm:

Sử dụng công cụ Oval tool để vẽ hình eclips và để vẽ được hình tròn thì bạn cần nhấn phím “Shift” trên bàn phím

Một đối tượng hình tròn với kích thước width:150, height: 150

Màu sắc background là màu đỏ

Hình 4.1: Sử dụng công cụ Oval tool để vẽ hình eclips

Sau khi bạn thiết kế xong bây giờ đến lúc chúng ta tạo nên chuyển động

Tại panel timeline sẽ nhận thấy các frame có biểu tượng là một dấu chấm tròn đen

Bây giờ tiếp theo hấn phím F6 từ bàn phím để được 1 frame tiếp theo

Hình 4.2: Tạo Frame chuyển động cho hình elip

Nhấn thêm 19 lần phím F6 để tổng số điểm sẽ là 21 điểm (frame)

Hình 4.3: Tạo điểm đầu và điểm cuối.

Điển hình ở vị trí thứ 4 sẽ dịch chuyển sang bên phải sao cho không trùng với điểm trước nó

Và tương tự như vậy so với các frame còn lại cứ dịch chuyển vị trí tương ứng từng frame

Và cuối cùng là ta nhận được kết quả như mong đợi bằng cách bạn sử dụng tổ hợp phím Ctrl + Enter trên bàn phím

2 Hoạt hình Classic tween

Classic Tween là một kỹ thuật tạo chuyển động được cung cấp trong các phiên bản từ Flash CS3 trở về trước (lúc đó gọi là Motion Tween) Từ phiên bản Flash CS4, Adobe vẫn còn duy trì kỹ thuật này nhưng đổi tên là Classic Tween Về cơ bản, khi thao tác với

kỹ thuật Classic Tween ta cần phải sử dụng đến hai keyframe, đó là KeyFrame khởi đầu

và KeyFrame kết thúc

Nguyên tắc: Trong khung hình đầu tiên (gọi là keyframe khởi đầu) ta tạo các đối tượng hoạt hình (như là graphic symbol, movie clip symbol, buttom symbol) Rồi đến một vị trí khác trên timeline ta tạo thêm một keyframe kết thúc, trong đó đối tượng hoạt hình có thay đổi kích thước, vị trí, xoay, các hiệu ứng style, filter, vv Sau đó thực hiện Classic Tweening

Sử dụng Classic Tween để tạo hiệu ứng động:

Bước 1: Chọn frame đầu tiên (ví dụ frame 1) trên tiến trình, rồi tạo các hình (graphic symbol, movie clip symbol, button symbol) trên stage Đây là keyframe đầu tiên

Bước 2: Chọn frame cuối (ví dụ frame 45) trên tiến trình, rồi click phải và chọn lệnh Insert KeyFrame thì ta được một khung hình khóa có nội dung giống như khung hình khóa kế trước Hiệu chỉnh lại nội dung hoạt hình như thay đổi kích thước, vị trí, xoay, …

vv

Bước 3: Chọn lại frame đầu tiên (ví dụ frame 1) Rồi click phải trong timeline , chọn lệnh Create Classic tween

Hình 4.4: Tạo hoạt hình cho hình ảnh

Bước 4: Ở panel Properties mục Tweening có các tùy chọn:

Ease: chỉnh tốc độ bắt đầu, hoặc nhấp Edit Easing để hiện hộp thoại Ease In / Ease OutRotate: cho phép xoay.(None, Auto, CW, CCW)

Snap: bắt dính theo đườmg dẫn

Orient to Path: hướng theo đường dẫn

Hình 4.5: Thiết lập thuộc tính

Bước 5: Ctrl + Enter để xem kết quả

BÀI 5 TẠO HOẠT HÌNH THEO ĐƯỜNG DẪN Giới thiệu

Hoạt hình theo đường dẫn phản hồi hành động của người dùng và cung cấp tính liên tục trực quan khi người dùng tương tác với ứng dụng

Mục tiêu

- Hiểu hoạt hình theo đường dẫn

- Vận dụng các công cụ tạo hoạt hình theo đường dẫn

- Rèn luyện tính cẩn thận, tư duy sáng tạo

1 Giới thiệu hoạt hình theo đường dẫn

Đối với Classic tween ta có thể tạo chuyển động theo đường dẫn như sau:

Tạo thêm một layer mới đặt tên là path, rồi vẽ đường path bằng pencil tool

Click phải vào tên layer path > chọn lệnh Guide (layer Guide sẽ không hiển thị các phần

tử trên layer này khi xem hoạt hình)

Kéo rê layer kế bên dưới vào bên trong layer Path

Chỉnh tâm của đối tượng hoạt hình ở cả hai frame khóa đầu tiên và frame khóa cuối cùng vào hai đầu mút của đường dẫn

2 Thao tác hoạt hình theo đường dẫn

Hình 5.1: Tạo đường dẫn cho đối tượng

Nếu muốn đối tượng chuyển động theo hướng của đường dẫn, thì trên panel properties, mục Tweening: click thiết lập Orient to Path

Hình 5.2: Thiết lập thuộc tính đối tượng

3 Bài tập áp dụng

Tạo hoạt hình quả bóng nhảy theo hình zich zac

BÀI 6 TẠO HOẠT HÌNH VỚI MOTION TWEEN, SHAPE TWEEN

Giới thiệu

Kỹ thuật Motion Tween cũng được dùng để tạo chuyển động (tương tự như kỹthuật Classic Tween) nhưng nó không đòi hỏi bạn phải tạo trước các KeyFrame Một ưuđiểm của Motion Tween ( từ phiên bản Flash CS4) là hỗ trợ hiệu ứng 3D (có hai hiệu ứng3D là Transformation và Rotation)

Mục tiêu

- Hiểu vai trò Motion tween, Shape tween

- Vận dụng các công cụ Motion tween, Shape tween tạo hoạt hình

- Rèn luyện tính cẩn thận, tư duy sáng tạo

1 Hoạt hình Motion tween

Kỹ thuật Motion Tween cũng được dùng để tạo chuyển động (tương tự như kỹ thuật Classic Tween) nhưng nó không đòi hỏi bạn phải tạo trước các KeyFrame Một ưu điểm của Motion Tween ( từ phiên bản Flash CS4) là hỗ trợ hiệu ứng 3D (có hai hiệu ứng 3D làTransformation và Rotation)

Nếu so sánh với kỹ thuật Frame by Frame và Classic Tween, thì với kỹ thuật Motion Tween tối ưu kích thước của file Flash khi xuất bản Ngoài ra với Motion Tween, ta hiệu chỉnh đường dịch chuyển, tọa độ, góc xoay, Filter, Blending… Nhờ vào công cụ Selection

và thuộc tính trong bảng Motion Editor

Sử dụng Motion Tween để tạo hiệu ứng động

Bước 1: Chọn frame đầu tiên (ví dụ frame 1) trên tiến trình, rồi tạo các hình (graphic

cầu xử dụng, ta thay đổi nó bằng cách đặt con trỏ chuột vào vị trí frame cuối cùng Khi trỏchuột có dạng < >, thì nhấp chuột và kéo sang trái hoặc sang phải.

Bước 3: Click chọn frame cuối, rồi di chuyển hình được vẽ sang vị trí mới Khi đó, trên stage xuất hiện một đường mô tả chuyển động của đối tượng Sử dụng công cụ Selection

để thay đổi dạng thức của đường chuyển động

Bước 4: Ctrl + Enter để xem kết quả

Hình 6.1: Tạo hoạt hình bằng Motoon tween

2 Hoạt hình Shape tween Sử dụng Shape hint

Có những chuyển động đều hoặc chuyển động theo quy luật như theo một curve chẳng hạn, có quyền dùng keyframe để mô tả chuyển động! nhưng có thể sẽ mất hàng đống frame, rất lu bu và khó kiểm soát Nhưng cũng may là chúng ta còn sự lựa chọn khác! đó

là dùng Action Script để điều khiển (biết viết code là khỏe re, viết giỏi có thể dùng chỉ 1 frame cũng đủ), hoặc là vẫn dùng keyframe nhưng hạn chế lại đó là sử dụng motion tween để làm chuyển động suy diễn! chọn 2 keyframe trên bản timeline (tất nhiên là phải cùng layer), sau đó làm 1 motion tween giống như là nối 2 chúng nó lại, chuyển động sẽ rất mượt

Tạo motion tween cho chim bay

Bấm chọn và kéo symbol chim xuống góc dưới bên trái:

Hình 6.2: Tạo motion tween cho chim bay

Bấm phím phải chuột và chọn Create Motion Tween từ menu ngữ cảnh:

Hình 6.3: Thiết lập các thuộc tính

Trong khu vực frame của Timeline, Flash đã tự động bổ sung thêm số frame thành 24 frame (mặc định cho motion tween hoàn thành trong một giây - theo mặc định Flash CS4

Hình 6.4: Tạo frame

Bấm chọn và kéo symbol chim lên góc trên bên phải:

Hình 6.5: Chọn vị trí di chuyển của đối tượng

Khi nhả chuột ra, Flash tự động tạo thêm một đường thẳng nối từ góc dưới bên trái lên góc trên bên phải với các dấu chấm ở giữa, mỗi dấu chấm là một frame của motion tween.Ngoài ra Flash cũng thêm một key frame vào timeline, hiển thị bằng một hình thoi màu đen

Hình 6.6: Tạo frame

Với chỉ một giây cho motion tween, bạn không thể nhìn kịp hiệu ứng chim vỗ cánh Bạn

sẽ cho bổ sung frame cho motion tween hoạt động 4 giây, tức 96 frame

Đưa chuột vào keyframe 24 cho đến khi chuột biến thành mũi tên hai chiều:

Hình 6.7: Tạo điểm cuối cho Frame

Nắm giữ chuột và kéo sang phải cho đến frame 96 thì nhả chuột ra, hình thoi thể hiện keyframe đã được di chuyển từ frame 24 sang frame 96