Giáo trình Thiết kế hoạt hình - Nghề: Công nghệ thông tin

Ủ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

TUYÊN BỐ BẢN QUYỀN

Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể được phép

dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo.

Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu

lành mạnh sẽ bị nghiêm cấm.

1

LỜI GIỚI THIỆU

Adobe Flash (trước đây là Macromedia Flash và trước đó FutureSplash), hay còn

gọ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ạng các

file kiểu html, exe, jpg để phù hợp với các ứng dụng của người sử dụng như trên Web, CD.

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

Nguyễn Bá Thủy

2

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, MovieCli p ........................................................................16

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

3. Làm việc với Common Librar y ......................................................................................18

BÀI 3 THAO TÁC VỚI TIMELIN E .................................................................................20

1. Giới thiệu timeline..........................................................................................................20

2. Vai trò trong xử lý hoạt hìn h ..........................................................................................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 twee n .................................................................................................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 TWEE N ............................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, 3 D ...........................................................35

BÀI 8: SỬ DỤNG KIỂU DỮ LIỆU, BIẾN, HẰNG CHO ACTION SCRIPT..................40

1. Các kiểu dữ liệu ..............................................................................................................40

2. Biến và hằn g ...................................................................................................................41

3.Toán tử và biểu thức ........................................................................................................42

BÀI 9 TẠO ACTION SCRIPT BẰNG CẤU TRÚC LỆNH RẼ NHÁNH........................43

3

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ập

trì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:

4

Thời

Hình thức

STT

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

gian

giảng dạy

1

Khởi đầu với Adobe Flash

5

Tích hợp

2

3

4

5

6

Các biểu tượng symbol

Thao tác với timeline

Tạo hoạt hình Frame by frame và Classic tween

Tạo hoạt hình theo đường dẫn

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

Shape hint

7

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

4

Tích hợp

bone, deco, bind, 3D

8

Sử dụng kiểu dữ liệu, biến, hằng. Toán tử và biểu thức

Tạo Action script bằng cấu trúc lệnh rẽ nhánh

Tạo Action script bằng cấu trúc lặp

5

4

5

Tích hợp

9

10

11

12

13

Sử dụng Hàm

Điều khiển Chuột và Bàn phím bằng các sự kiện

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

trang chi tiết, …)

14

15

16

17

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

Gán âm thanh, lện action script cho các nút bấm

Điều khiển âm nhạc cho trang web

5

4

5

Tích hợp

Chuyển file phim thành Video Flash

5

18

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

5

Tích hợp

external)

19

20

Tạo các điều khiển xem phim

4

5

Tích hợp

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

21

22

Chèn hoạt hình Flash vào trang web

5

4

Tích hợp

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

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

23

24

25

Publish ra Shockwave Flash và HTML

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

Tổng cộng

10

Tích hợp

120

6

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ạng các

file kiểu html, exe, jpg để phù hợp với các ứng dụng của người sử dụng như trên Web, CD.

Mục tiêu

- 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

7

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ác nhau

để chọn lựa tùy theo thói quen và sở thích của từng người, ví dụ như đối với người đã từng

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

Khi bấm vào chữ ESSENTIALS đề cập ở trên, Flash sẽ xổ xuống một menu cho bạn chọn

lựa vùng làm việc như sau:

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

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

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

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

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

Hình 1.3: Chọn ActionScrip 3.0

Flash sẽ tạo ra một file mới có tên là Untitled-1:

8

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

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

Lưu một flash document

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

Sẽ tạo một folder mới có tên FLASH CS4 ONLINE, sau đó lưu file này lại với tên

001_frame_by_frame.fla trong folder vừa tạo ra, sau đó sẽ thực hành tiếp. Cách làm như

sau:

Chọn File > Save:

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

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

9

Hình 1.6: Chọn khu vực lưu

Một folder mới được tạo ra với tên mặc định là New Folder.

Hình 1.7: Chọn thư mục lưu

Đổi tên lại thành FLASH CS4 ONLINE.

Hình 1.8: Chọn lưu đúng tên

Di chuyển vào bên trong folder này và đặt tên file là 001_frame_by_frame.fla, xong bấm

vào nút Save để lưu lại.

10

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:

11

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ọn các hình tương ứng cho hình vẽ.

Text:

12

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

13

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

Hình 1.5: Công cụ gradient

14

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ệu

của Flash. Có thể vẽ một hình dạng và sau đó chuyển đổi nó thành một biểu tượng. Sau khi

chuyển đổi, nó được lưu trữ trong thư viện các tài liệu của Flash. Sau đó, từ thư viện, có

thể dễ dàng làm nhiều bản sao của biểu tượng mà không cần phải tạo lại nó. Có thể biến

bất cứ điều gì muốn vẽ vào biểu tượng.

Mục tiêu

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

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

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

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

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ó

15

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ân

khấ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.

16

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:

17

• 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

18

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ới

bả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

19