Giáo trình đồ họa hình động với FLASH

Giao diện của Flash được tạo nên từ những vùng sau: - Thuộc tính Properties: là các tính chất áp dụng cho đối tượng lớp, đối tượng, hình vẽ… - Khung hình Frame: chứa nội dung hoạt hình h

GIÁO TRÌNH

ĐỒ HỌA HÌNH ĐỘNG VỚI FLASH

(Dành cho sinh viên CNTT ngành Đồ họa)

MỤC LỤC

Chương I: GIỚI THIỆU VỀ THIẾT KẾ HOẠT HÌNH VỚI FLASH 5

I Giới thiệu: 5

II Giao diện chương trình: 6

III Hộp công cụ (Toolbar): 7

IV Một số tính năng cơ bản: 8

1 Đặt thuộc tính cho khung hoạt hình: 8

2 Tỉ lệ cửa sổ làm việc: 8

3 Các chế độ hiển thị: View Preview Mode 8

4 Tắt / mở các vùng: view 9

5 Chế độ khung lưới: View Grid 9

6 Chế độ đường gióng: 10

7 Hiện ẩn thanh công cụ chính, thanh điều khiển hoạt hình, thanh hiệu chỉnh: 10

8 Hiện ẩn hộp công cụ, cửa sổ tiến trình: 12

9 Hiện ẩn các cửa sổ thành phần khác: 12

10 Trả về vị trí mặc định các cửa sổ thành phần: 12

11 Ghi lại cách bố trí các cửa sổ thành phần: 12

12 Đóng tất cả các cửa sổ thành phần: 12

Chương II: HỘP CÔNG CỤ VÀ CÁC THAO TÁC CƠ BẢN 13

I Các công cụ vẽ 13

1 Vẽ bằng công cụ Pen 13

2 Line tool (N 14

3 Oval Tools (O): 15

4 Rectangle Tool (R): 15

5 PolyStar Tool 16

6 Pencil Tool (Y) 16

7 Brush (B): 17

II Công cụ tạo văn bản 18

III Các công cụ chọn và hiệu chỉnh 19

1 Selection Tool (V 19

2 Subselect tool (A 19

3 Lasso Tool (L 20

4 Free Transform Tool (Q 20

IV Các công cụ tô màu 22

1 Ink Bottle Tool (S) 22

2 Paint Bucket Tool (K) 22

3 Fill Transform 23

4 EyeDropper tool (I): 23

5 Eraser tool (E): 23

V Công cụ chỉnh màu sắc 24

1 Stroke Color 24

2 Fill Color 24

VI Công cụ hiển thị 25

Giáo trình Đồ họa hình động

2 Zoom tool (M,Z): 25

VII Các thao tác cơ bản: 25

VIII.Thao tác trên đối tượng 27

1 Thay đổi hình dạng của đối tượng 27

2 Mở rộng hình dạng của đối tượng được tô màu 27

3 Làm mềm đường biên của đối tượng (làm nhèo đường biên) 28

4 Dùng trình đơn Modify  Transform… 28

IX Dùng các cửa sổ thành phần 29

1 Cửa sổ Info: hiển thị toạ độ và kích thước đối tượng 29

2 Cửa sổ Transform: 29

3 Cửa sổ Color Mixer: 30

4 Cửa sổ Color Swatches 32

5 Cửa sổ Align: 32

Với các nhóm lệnh 32

X Bài tập chương II: HỘP CÔNG CỤ VÀ CÁC THAO TÁC CƠ BẢN 34

Chương III: THAO TÁC VỚI HÌNH ẢNH VÀ KHUNG HÌNH 38

I Ảnh tĩnh 38

1 Ảnh vector: 39

2 Ảnh bitmap 39

II Ảnh động 42

III Phân loại khung hình (Frame): 42

IV Các thao tác trên kung hình (Frame): 42

Chương IV: THAO TÁC VỚI LỚP (LAYER) VÀ CẢNH (SCENE) 44

I Layer (lớp) 44

1 Định thuộc tính cho lớp: 44

2 Các thao tác trên lớp: 45

II Thanh tiến trình (TIMELINE): 46

III CẢNH (SCENE): 47

Chương V: TẠO HOẠT HÌNH 48

I Tạo hoạt hình bằng các khung hình liên tiếp 48

II TẠO HOẠT HÌNH BẰNG BIẾN ĐỔI HÌNH DẠNG (SHAPE TWEENING) 51

III ĐỊNH CÁC ĐIỂM BIẾN HÌNH (SHAPE HINTS): 54

IV TẠO HOẠT HÌNH CHUYỂN ĐỘNG (MOTION): 55

V TẠO HOẠT HÌNH BẰNG BIẾN ĐỔI CHUYỂN ĐỘNG (MOTION): 56

1 Tạo hoạt hình chuyển động quay vòng theo đường thẳng 57

2 Tạo hoạt hình bằng cách co dãn đối tượng 59

3 Tạo hoạt hình bằng cách đổi màu 59

VI TẠO HOẠT HÌNH BIẾN ĐỔI CHUYỂN ĐỘNG THEO ĐƯỜNG DẪN (MOTION GUIDE LAYER) 59

VII TẠO HOẠT HÌNH BẰNG MẶT NẠ LỚP 61

VIII.Bài tập chương V: TẠO HOẠT HÌNH 63

Chương VI: SỬ DỤNG THƯ VIỆN VÀ ÂM THANH 71

I THƯ VIỆN 71

1 MỞ THƯ VIỆN 71

2 SỬ DỤNG NỘI DUNG TRONG THƯ VIỆN 72

II ÂM THANH: 73

1 Đưa âm thanh vào Flash 73

2 Đưa âm thanh vào hoạt hình: 73

3 Hiệu chỉnh âm thanh 74

III NÉN ÂM THANH 76

Chương VII: TẠO VÀ SỬ DỤNG BIỂU TƯỢNG (SYMBOL) 78

I ĐỊNH NGHĨA 78

II TẠO BIỂU TƯỢNG: 78

1 Tạo biểu tượng từ đầu 78

2 Đưa một đoạn hoạt hình có sẳn vào biểu tượng: 81

3 Đưa một file hoạt hình swf vào thành biểu tượng: 82

4 Tạo biểu tượng sử dụng nội dung trên khung làm việc: 82

5 Lấy biểu tượng từ tập tin Flash khác: 82

III CÁC THAO TÁC TRÊN BIỂU TƯỢNG: 83

IV Bài tập chương VI: TẠO BIỂU TƯỢNG 83

Chương VIII: TẠO HOẠT CẢNH VÀ XUẤT PHIM 84

I ĐỊNH NGHĨA 85

II PHÂN LOẠI SỰ KIỆN 85

1 Các sự kiện của Mouse: 85

2 Các sự kiện của bàn phím: 86

3 Các sự kiện của khung hình (hành động của khung hình): 87

III CÁC HÀNH ĐỘNG : 87

IV Bài tập chương VII: TẠO BIỂU TƯỢNG 89

Giáo trình Đồ họa hình động

Chương I: GIỚI THIỆU VỀ THIẾT KẾ HOẠT HÌNH VỚI

FLASH Mục tiêu:

Sau khi học xong bài học này, sinh viên có khả năng:

- Trình bày và nhận biết được các chức năng khái niệm của phần mềm tạo hoạt hình với flash trên máy tính

- Nhận biết được các thành phần và chức năng cơ bản trong cửa sổ làm việc

- Thực hiện thành thạo các thao tác: tổ chức cửa sổ làm việc, làm việc với tài liệu

- Có thói quen sắp xếp, tổ chức cửa sổ làm việc hợp lý

Nội dung chính:

I Giới thiệu:

 Flash là một trong những công cụ thiết kế hoạt hình thông dụng nhất hiện nay Nó tạo ra những hiệu ứng hoạt hình linh hoạt có tính tương tác cao và hấp dẫn để đặt

nó lên trang Web Hoặc tạo ra những trò chơi với màu sắc và âm thanh hấp dẫn

 Flash với hộp công cụ đa năng và các phép biến hình phối hợp hiệu ứng trên các lớp giúp người thiết kế thể hiện những ý tưởng của mình một cách dễ dàng Âm thanh được điều khiển theo nhiều cách làm cho hoạt hình thêm sống động Ngoài

ra với các hàm tương tác giúp cho người thiết kế còn có khả năng tạo ra những điều khiển tác động trực tiếp lên hoạt hình

 Việc áp dụng đồ họa vector cho các đoạn hoạt hình đã mang lại sức mạnh và sự linh động cho Flash Nên các đoạn phim Flash thường nhỏ gọn và tải xuống nhanh chóng Trình thể hiện phim Flash được cung cấp miễn phí đã tạo thuận lợi cho việc phổ biến tới người dùng

 Tuy nhiên, để tạo đoạn phim Flash, bạn cần phải có một công cụ sáng tác Mặc dù một số chương trình khác có thể xuất ra định dạng Flash, nhưng công cụ Flash của Macromedia vẫn được xem là công cụ chủ yếu, chuyên nghiệp nhất trong việc tạo

ra các đoạn phim Flash cho các trang Web Ngoài ra, Flash còn hỗ trợ người thiết

kế có thể xuất ra nhiều định dạng file hoạt hình tùy theo ứng dụng cần sử dụng

 Một ưu điểm nữa là: giao diện Flash trực quan hơn, dễ sử dụng thông qua những công cụ cho phép ta tạo một giao diện chuyên nghiệp, nếu bạn đã từ dùng một chương trình đồ hoạ vector để vẽ như Corel Draw hay Adobe Illustrator

1 Khởi động chương trình Macromedia Flash MX

- Vào menu lệnh Start\ Programs\ Macromedia Flash (Adobe Flash) chọn

Flash File 2.0

2 Thoát khỏi chương trình Macromedia Flash …

- Kích chọn menu File chọn Exit hoặc kích chuột vào nút Close của cửa sổ

chương trình

II Giao diện chương trình:

Chúng ta sẽ xem xét tổng quan về giao diện trước khi đi vào giải thích mỗi vùng chi tiết hơn Một vài vùng, như giao diện tiến trình và lớp sẽ được đề cập sâu sắc hơn trong những chương về hoạt hình và các lớp

Giao diện của Flash được tạo nên từ những vùng sau:

- Thuộc tính (Properties): là các tính chất áp dụng cho đối tượng (lớp, đối tượng, hình vẽ…)

- Khung hình (Frame): chứa nội dung hoạt hình (hình vẽ, biểu tượng, nút nhấn, âm thanh,…)

- Lớp (Layer): lớp chứa các khung, là thành phần của tiến trình hoạt hình Lớp có nhiều thuộc tính khác nhau Các lớp được xếp chồng lên nhau (che phủ nhau), có bao nhiêu lớp cũng được, đối tượng ở lớp trên ưu tiên hiển thị hơn lớp dưới Hoạt hình thường có nhiều lớp để dễ quản và áp dụng các thuộc tính để tạo các hoạt hình phức tạp

- Mức làm việc: Trong Flash một đối tượng có thể tồn tại một trong hai mức làm việc sau:

Giáo trình Đồ họa hình động

Selection Tool (V)

Pen Tool (P) Line Tool (O) Pencil Tool (Y) Ink Bottle Tool (S) EyedDropper Tool (I)

Subselect Tool (A) Lasso Tool (S) Text Tool (T) Rectangle Tool (R) Brush Tool (B) Paint Bucket Tool (K) Eraser Tool (E) Hand Tool (H)

Stroke Color Fill Color

Swap Color Zoom Tool (M,Z) Free Transform Tool (Q)

Các công cụ hổ trợ

 Mức khung làm việc (các đối tượng vẽ hoặc bị phân rã): chúng sẽ tương tác lên nhau khi đặt chồng lên nhau

 Mức che phủ: ( các đối tượng nhĩm hay chuyển thành biểu tượng) sẽ hiển thị đường bao hình chữ nhật quanh đối tượng

- Cảnh (Scene): Với một nội dung hoạt hình dài thường được chia thành nhiều cảnh để dễ quản lý và thiết lập các tương tác điều khiển

- Tập tin FLA: Tập tin nội dung của Flash

- Tập tin SWF: Tập tin hoạt hình của Flash (khơng chỉnh sửa được nội dung)

III Hộp cơng cụ (Toolbar):

Các cơng cụ vẽ trong Flash MX cho bạn tạo và thay đổi hình dạng ảnh vẽ trong đoạn phim Với các cơng cụ vẽ của Flash MX, bạn cĩ thể vẽ các hình vuơng, hình chữ nhật một cách hồn hảo, vẽ với màu sắc, xĩa lỗi và nhiều thứ khác nữa Nếu bạn cĩ thể trỏ chuột và nhấp chuột, bạn cĩ thể tạo ra các đối tượng Đồ họa trong Flash Với việc xác lập các cơng cụ rất dễ sử dụng, bạn cĩ thể tạo ra một tác phẩm nghệ thuật cạnh tranh với các họa sĩ nổi tiếng khác

Hộp cơng cụ chia làm 4 nhĩm:

 Tools: chứa các cơng cụ vẽ

 View: cơng cụ hiển thị

 Colors: cơng cụ chỉnh màu sắc

 Options: chứa các cơng cụ hỗ trợ cho cơng cụ chính đang được chọn trong nhĩm Tools

IV Một số tính năng cơ bản:

1 Đặt thuộc tính cho khung hoạt hình:

Trong bảng Properties :

- Size: kích thước khung hoạt hình

- Stage: chọn màu nền cho frame

- FPS: tốc độ hoạt hình (fps: frames per second: số khung hình /giây)

2 Tỉ lệ cửa sổ làm việc:

- Chọn View Zoom in, Zoom Out: phóng to, thu nhỏ cửa sổ làm việc Hoặc chọn View Magnification: chọn tỉ lệ cửa sổ làm việc: Show Frame: thấy toàn bộ khung thiết kế, Show All: thấy tất cả nội dung

3 Các chế độ hiển thị: View Preview Mode

- Outline: hiển thị đối tượng ở dạng đường viền để làm việc nhanh hơn

- Fast: tắt tính năng khử răng cưa (Antialiasing) để vẽ nhanh hơn

- Antialias: khử răng cưa làm trơn các đường nét ngoài của hình và không tác dụng lên Text

- Antialias Text: khử răng cưa làm trơn các đường nét ngoài của hình kể

cả văn bản

Giáo trình Đồ họa hình động

4 Tắt / mở các vùng: view

- Paste board: vùng làm việc

- Rulers: cây thước

5 Chế độ khung lưới: View Grid

- Show Grid (Ctrl+’): hiện/ ẩn khung lưới

- Edit Grid…(Ctrl+Alt+G): điều chỉnh ô lưới:

Color: chọn màu lưới

Chỉnh khoảng cách ngang và dọc của khung lưới

Show over objects: bật tắt ính năng bắt dính vào đối tượng

Snap to grid:bật tắt tính năng bắt dính vào lưới

Snap accuracy: xác định khoảng cách bắt dính lưới:

+ Must be close: rất gần điểm lưới

+ Normal: bình thường

+ Can be distant: có thể bắt dính từ khoảng xa

+ Always snap: luôn luôn bắt dính

6 Chế độ đường gióng:

view Guides (muốn sử dụng đường gióng phải cho hiện cây thước, click trên cây thước dọc hoặc ngang và kéo vào khung làm việc để tạo đường gióng kéo chúng thả vào cây thước trở lại)

- Show Guides: hiện/ ẩn đường gióng

- Lock Guides: khoá đường gióng

- Edit Guides: khai báo thuộc tính cho đường gióng

Color: màu đường gióng

Snap to guides:bật tắt chế độ bắt dính vào đường gióng

Snap accuracy: tương tự của cửa sổ Grid

7 Hiện ẩn thanh công cụ chính, thanh điều khiển hoạt hình, thanh hiệu chỉnh:

Giáo trình Đồ họa hình động

Thanh công cụ chính ( Main) gồm các nút sau:

+ New: tạo Stage mới

+ Open: mở Stage đã có

+ Save: lưu hoạt hình

+ Print: in Stage + Cut: cắt vùng chọn + Copy paste: copy vùng chọn + Undo: trở về thao tác trước

+ Redo: quay trở lại thao tác vừa undo

+ Snap to objects: tắt mở chế độ bắt dính các đối tượng

+ Smooth: làm trơn các đường thẳng và hình dạng đơn giản

+ Straighten: làm thẳng các đường và hình dạng đơn giản

+ Rotate and Skew: xoay và kéo ngiêng đối tượng

+ Scale: co dãn đối tượng

+ Align: canh thẳng hàng

Thanh điều chỉnh hoạt hình ( Controller) gồm các nút sau:

+ Stop: dừng hoạt hình

+ Rewind: trở về Frame đầu tiên

+ Step Back One Frame [<]: trở về 1 Frame trước đó

+ Play: chạy thử hoạt hình

+ Step Forward One Frame [>]: đến Fraem kế tiếp

+ Go To End: di chuyển đấn Frame cuối cùng của đoạn hoạt hình

Thanh thanh hiệu chỉnh (Edit Bar) gồm các nút sau:

+ Scene: chọn cảnh

+ Symbol: chọn đối tượng

+ Hiệu chỉnh Stage

8 Hiện ẩn hộp công cụ, cửa sổ tiến trình:

chọn Window Tools, Timeline

9 Hiện ẩn các cửa sổ thành phần khác:

chọn Window tên cửa sổ thành phần

10 Trả về vị trí mặc định các cửa sổ thành phần:

chọn Window  Workspace Defaulf

11 Ghi lại cách bố trí các cửa sổ thành phần:

chọn Window Save Current

12 Đóng tất cả các cửa sổ thành phần:

chọn window  chọn lại tên cửa sổ đã mở

Giáo trình Đồ họa hình động

Chương II: HỘP CÔNG CỤ VÀ CÁC THAO TÁC CƠ BẢN

Mục tiêu:

Sau khi học xong bài học này, sinh viên có khả năng:

- Phân biệt các chức năng của công cụ vẽ đối tượng

- Sử dụng thành thạo các công cụ để vẽ đối tượng

- Thực hiện thành thạo các thao tác, chọn, sao chép, nhân bản, kết nối hình

- Lựa chọn áp dụng đúng thao tác cho từng loại đối tượng

- Sử dụng hiệu quả các chức năng trong các cửa sổ phụ

- Rèn luyện tính cẩn thận, tỉ mỉ, tính sáng tạo trong công việc

- Để kết thúc đường vẽ nhấp đúp chuột vào vị trí điểm cuối cùng

- Nhấn phím Shift để cố định góc vẽ 450 hoặc đường cong một góc 450

- Tại các điểm click sẽ xuất hiện các nút để điều chỉnh hình vẽ Click vào một nút cong để biến nó thành nút nhọn

- Double click vào nút để xoá nút

Kích cỡ nét vẽ Dạng nét vẽ

- Click vào cạnh của hình để thêm nút

Cách thiết lập ưu tiên cho công cụ Pen

- Chọn trên trình đơn Edit  Preferences, chọn Drawing

Bên dưới mục Pen Tool, bạn hãy thiết lập các tùy chọn sau đây:

- Chọn mục Show Pen Preview để xem các đoạn thẳng khi bạn vẽ Flash

hiển thị đoạn đoạn thẳng khi bạn di chuyển con trỏ xung quanh vùng làm việc, trước khi bạn nhấp chuột tạo ra điểm cuối của đoạn thẳng đó Nếu tuỳ chọn này không được chọn, Flash sẽ không hiển thị đoạn thẳng cho đến khi bạn tạo ra điểm cuối của đoạn thẳng đó

- Chọn mục Show Solid Points các điểm neo xuất hiện là các điểm đặc,

ngược lại là các điểm rỗng

- Chọn mục Show Precise Cursors con trỏ của công cụ Pen có hình dấu

thập

2 Line tool (N)

Vẽ đường thẳng

- Chọn công cụ Line

- Trên bảng Fill and Stroke: chọn các thuộc tính nét vẽ, màu nét vẽ,

kích thước và dạng nét vẽ cho đường thẳng cần vẽ

- Bấm giữ chuột trái kéo trong vùng làm việc

Giáo trình Đồ họa hình động

Chú ý:

- Nhấn phím Shift trong khi kéo để tạo nhiều đường thẳng có góc 450

hoặc 900

- Không thể thiết lập các thuộc tính tô màu cho công cụ line

3 Oval Tools (O):

Vẽ hình tròn (giữ Shift khi vẽ ) hoặc Ellipse

- Chọn công cụ Oval

- Trên bảng Fill and Stroke: chọn các thuột tính cho nét vẽ và màu tô

- Bấm giữ chuột trái rê trong vùng Stage

4 Rectangle Tool (R):

Vẽ hình vuông (giữ Shift khi vẽ ) hoặc hình chữ nhật

- Chọn công cụ Rectangle

- Trên bảng Fill and Stroke: chọn các thuột tính cho nét vẽ và màu tô

Nhập số trên Rectangle options: để định độ tròn các góc cho hình Hoặc sử dụng hai phím mũi tên trên bàn phím để chỉnh tròn góc trong khi đang vẽ

5 PolyStar Tool

Vẽ hình đa giác

- Chọn công cụ PolyStar

- Trên bảng Fill and Stroke: chọn các thuột tính cho nét vẽ và màu tô

- Trên cửa sổ Tool Settings chọn loại polyStart

6 Pencil Tool (Y)

Vẽ đường thẳng bằng tay

- Chọn công cụ Pencil

- Trên bảng Fill and Stroke: chọn các thuộc tính nét vẽ, màu nét vẽ,

kích thước và dạng nét vẽ cho đường thẳng cần vẽ

- Bấm giữ chuột trái kéo trong vùng Stage

Pencil Mode: các chế độ vẽ:

Giáo trình Đồ họa hình động

Vẽ các đoạn cong và trơn

Giữ nguyên nét vẽ

Chú ý: trong khi vẽ hãy nhấn phím Shift để giữ cho đường thẳng đứng và

đường nằm ngang cho thật ngay thẳng như mong muốn

Paint normal: vẽ bình thường

Paint Fills: vẽ trên các vùng tô màu nhưng không vẽ

trên các đường nét

Paint behind: vẽ dưới các hình

Paint selection: chỉ vẽ bên trong vùng tô màu đã được

chọn, nếu không có vùng chọn thì vẽ không tác dụng

Paint inside: chỉ vẽ trong vùng tô màu bắt đầu vẽ, nếu

điểm bắt đầu vẽ không nằm trên vùng tô màu thì không tác dụng

Lock fill: tắt/ mở chế độ tô cùng mảng màu (kiểu Gradient hay Bitmap) cho nhiều đối tượng cùng lúc

Brush size: chọn kích thước nét vẽ

Brush shape: chọn nét vẽ

Ảnh với chế độ Paint Normal, Paint Fills, Paint behind, Paint selection, Paint

inside

II Công cụ tạo văn bản

- Chọn công cụ

- Click vào khung thiết kế để nhập nội dung

- Trên bảng Fill and Stroke: hiệu chỉnh văn bản

- Khi đang chọn bất kỳ một công cụ bất kỳ giữ Ctrl để chuyển tạm thành

công cụ Selection Tool

Snap to objects: tắt mở chế độ bắt dính các đối tượng

Smooth: làm trơn các đường thẳng và hình dạng đơn giản

Straighten: làm thẳng các đường và hình dạng đơn giản

2 Subselect tool (A)

Chỉnh dạng theo các nút trên đường biên

- Chọn công cụ Subselect

- Nhấp chuột vào một đường thẳng hoặc đường viền ngoài

- Hiệu chỉnh các nút trên đường biên

3 Lasso Tool (L):

Tạo vùng chọn

- Magic Wand: chọn những vùng có màu tương

tự nhau trên ảnh bitmap đã được phân rã (Break Apart)

- Magic Wand Properties: xác lập các thuộc tính

cho Magic Wand (Threshold: xác lập giới hạn pixel màu kế cận khi Magic Wand chọn, Smoothing: xác lập độ mịn: Pixels: theo các pixel, Rough: biên thô, Smooth: biên trơn không bị răng cưa, Normal: Bình thường)

- Polygon Mode: tạo vùng chọn dạng đa giác

4 Free Transform Tool (Q)

Thay đổi kích thước (Scale), xoay và kéo nghiêng (Rotate and Skew), bóp méo (distort), biến dạng hoàn toàn (envelope) các đối tượng

- Chọn đối tượng

- Chọn công cụ Free Transform trên thanh công cụ Công cụ này cung cấp thêm 4 công cụ bổ sung:

+ Rotate and Skew: công cụ xoay và kéo nghiêng đối tượng

+ Scale: công cụ thay đổi kích thước cho đối tượng

+ Distort: công cụ bóp méo đối tượng

+ Envelope: công cụ làm biến dạng hoàn toàn đối tượng

 Công cụ xoay và kéo nghiêng đối tượng

Xoay đối tượng : chọn công cụ, trỏ chuột vào một trong các cạnh bấm giữ

chuột trái để xoay

Giáo trình Đồ họa hình động

Kéo nghiêng đối tượng : chọn công cụ, trỏ chuột vào một trong các cạnh

bấm giữ chuột trái để kéo nghiêng

 Công cụ thay đổi kích thước cho đối tượng

Thay đổi kích thước theo cả hai phương Thay đổi kích thước theo phương ngang

Công cụ bóp méo đối tượng (Distort)

Công cụ biến dạng hoàn toàn đối tượng (Envelope)

Lưu ý: muốn hiệu hỉnh tâm xoay ta thực hiện

- Chọn đối tượng

- Chọn công cụ Free Transform

- Bấm giữ chuột trái vào điểm tròn ngay tâm hình di chuyển đến tâm mới

Hình được xoay ở tâm ban đầu và tâm sau khi được thay đổi

IV Các công cụ tô màu

1 Ink Bottle Tool (S):

Tạo biên hay đổi màu đường biên

- Chọn công cụ

- Chọn màu

- Click lên đường biên

2 Paint Bucket Tool (K) :

Dùng tô màu các vùng trong đường biên

- Chọn công cụ

- Chọn màu tô và chọn cách tô nền

- Click vào đối tượng cần tô

Lock fill: tắt/ mở chế độ tô cùng mảng màu cho nhiều đối tượng cùng lúc

Gap size: chọn một cách tô nền cho hình có:

- Don’t close gap: đường biên không hở

- Close small gaps: đường biên hở nhỏ

- Close medium gaps: đường biêm hở trung bình

- Close large gaps: đường biên hở lớn

Chú ý: công cụ này chỉ tác dụng đối với các đối tượng màu tô (Fill Color) là

màu lan tỏa (Gradient) hoặc màu của ảnh (bitmap)

Các đối tượng tô màu được thay đổi độ lớn, hướng và di chuyển màu lan tỏa

4 EyeDropper tool (I):

Lấy mẫu màu của vùng tô hoặc đường biên

- Chọn công cụ

- Click vào vùng tô để lấy mẫu màu sẽ biến thành công cụ Paint Bucket

- Click vào đường biên để lấy mẫu màu sẽ biến thành công cụ Ink Bottle

5 Eraser tool (E):

Dùng xoá nét, vùng tô màu

- Faucet: xoá đường biên hoặc vùng tô màu được click

Eraser mode: chọn chế độ xóa:

- Erase Normal: Xoá nét và máu tô

- Erase Fills: Chỉ xoá màu tô

- Erase Lines: Chỉ xoá đường biên

- Erase Selected Fills: Chỉ xóa vùng tô màu đang chọn, không xoá nét

- Erase Inside: Chỉ xóa trong vùng tô màu bắt đầu xoá, không xóa nét

- Eraser shape: chọn nét xoá

V Công cụ chỉnh màu sắc

1 Stroke Color

Chọn màu nét Muốn thay đổi màu nét:

- Chọn nét của đối tượng

- Chọn màu nét ở Stroke color

2 Fill Color

Chọn màu nền

Muốn thay đổi màu nền:

- Chọn nền của đối tượng

- Chọn màu nền ở Fill color

Default: chọn màu mặt định (trắng đen)

No Color: không màu

Swap Color: hoán đổi màu nét, màu

nền

Enlarge: phóng to vùng làm việc

Reduce: thu nhỏ vùng làm việc

VII Các thao tác cơ bản:

1 Thao tác chọn

- Chọn thông thường: click đâu chọn đó

- Chọn tất cả đường biên: double click lên đường biên

- Chọn đường biên và vùng tô: double click lên vùng tô

- Chọn bằng đường bao: dùng công cụ chọn Arrow Tool hay Lasso Tool (hay giữ Ctrl khi con trỏ đang ở công cụ khác) vẽ đường bao khu vực chọn (vẽ tới đâu chọn tới đó đối với đối tượng ở mức khung làm việc)

- Chọn nhiều: giữ Shift trong khi click chọn

Hình có màu tô

và đường viền được chọn

2 Thao tác copy: tạo vùng chọn, chọn Edit  Copy (Ctrl +C)

3 Thao tác dán: thực hiện một trong các cách:

- Edit  Paste (Ctrl +V): dán bình thường

- Edit Paste in Place (Ctrl + Shift +V): dán tại chổ

4 Nhân bản: chọn đối tượng, chọn Edit Duplicate (Ctrl +D) hay giữ Alt (hoặc

Ctrl) và kéo đối tượng Khi con trỏ đang ở công cụ khác giữ Ctrl để chuyển thành Arrow Tool để chọn đới tượng sau đó giữ Ctrl +Alt và kéo đối tượng để copy

5 Xoá: chọn đối tượng, nhấn Delete

6 Di chuyển: chọn đối tượng

- Dùng chuột kéo đối tượng, giữ Shift để di chuyển đối tượng trên đường dọc, ngang, hoặc trục 450

- Giữ Shift + nhấn phím mũi tên (di chuyển 8 pixel) hoặc nhấn phím mũi tên (di chuyển 1 pixel (1 inch =80point; 1 point = 80 pixels)

7 Nhóm: chọn đối tượng cần nhóm

- Modify  Group (Ctrl +G) (đối tượng được nhóm sẽ chuyển sang mức che phủ), khi cần chỉnh sửa các nhóm không cần rã nhóm mà double click vào hình và sửa sau đó chọn tên cảnh (Scene 1) để ra khỏi chế độ

nhóm

Đối tượng được nhóm Double click vào đối tượng để chỉnh

sửa

Click Scenne 1 để ra khỏi chế độ nhóm

8 Rã nhóm: chọn, Modify  Ungroup (Ctrl +Shift +G)

9 Phân đoạn: chỉ tác dụng đối với hình ở mức khung làm việc

- Phân đoạn bằng hình: tạo các hình bên trong nhau, kéo chúng tách nhau

Tạo hình bên trong nhau Kéo các hình nhỏ ra tạo hình mới

Giáo trình đồ họa hình động Biên soạn: Mai Phương Uyên

- Phân đoạn bằng đường: vẽ các đường cắt qua hình (vẽ cắt qua đường biên) sẽ được các hình phân đoạn

Hình ban đầu Hình tách nhau bằng đường cắt

10 Kết nối các hình

Chỉ dùng cho hình trên cùng layer, cùng màu, không có đường biên và đang ở mức khung làm việc

- Kéo hình này tiếp xúc với hình kia chúng sẽ kết nối nhau

11 Tách văn bản, biểu tượng, ảnh bitmap

- Chọn Modify  Break Apart (Ctrl +B) sẽ chuyển văn bản, biểu tượng, ảnh bitmap về mức khung làm việc để tạo vùng chọn riêng và chỉnh sửa được trong Flash

Văn bản ban đầu Văn bản tách về mức khung làm việc

Văn bản sau khi tách để chỉnh sửa

VIII Thao tác trên đối tượng

1 Thay đổi hình dạng của đối tượng

- Chuyển đổi đường thẳng thành màu tô

- Chọn một hoặc nhiều đường thẳng

- Chọn Modify  Shape Convert Lines to Fills

2 Mở rộng hình dạng của đối tượng được tô màu

- Chọn một đối tượng đã được tô màu Lệnh này hoạt động tốt nhất trên các đối tượng được tô một màu và không có đường viền

- Chọn Modify  Shape Expand Fills:

- Distance: khoảng mở

- Direction: hướng mở

- Expand: mở rộng kích thước đối tượng

- Inset: thu hẹp kích thước đối tượng

3 Làm mềm đường biên của đối tượng (làm nhèo đường biên)

- Chọn đối tượng

- Vào Modify  Shape 

Soften Fills edges

Distance: khoảng cách giữa đường biên mềm và biên ngoài

Number of Step: số bước của biên mềm (thêm nhiều bước

sẽ làm cho hiệu ứng nhẵn hơn (1 50)

- Direction: hướng

Expand: ra ngoài

Inset: vào trong

Hình trước và sau khi làm mềm biên

4 Dùng trình đơn Modify  Transform…

Giáo trình đồ họa hình động Biên soạn: Mai Phương Uyên

Scale and Rotate:Xoay và thay đổi kích

thước đối tượng: chọn

Scale: nhập kích thước muốn thay đổi

Rotate: góc xoay

Rotate 900 CW: xoay theo chiều kim

đồng hồ

Rotate 900 CCW: xoay ngược chiều kim đồng hồ

Flip Vertical: lật theo trục hoành

Flip Horizontal: lật theo trục tung

Remove Transform: phục hồi lại các đối tượng đã bị thay đổi sang trạng thái ban đầu

IX Dùng các cửa sổ thành phần

Để mở cửa sổ thành phần ta chọn Window  chọn tên cửa sổ thành phần

1 Cửa sổ Info: hiển thị toạ độ và kích thước đối tượng

- W, H: kích thước đối tượng

- X, Y: tạo độ đối tượng

- R, G, B, A: màu đối tượng

- X, Y: toạ độ con trỏ

2 Cửa sổ Transform:

- Hiệu chỉnh kích thước

- Rotate: xoay

- Skew: kéo xiên đối tượng

- Nút Copy And Apply Transform:

tạo thêm đối tượng mới theo thay đổi vừa khai báo

- Khi nhập các thông số, nếu muốn

thấy kết quả thay đổi trên đối tượng hãy nhấn phím Enter

Hình ban đầu được thay đổi tâm Hình kết quả sử dụng xoay 30 0 và

kết hợp với nút Copy nd Apply Transform

3 Cửa sổ Color Mixer:

Tạo và hiệu chỉnh màu đồng nhất

Stroke color: màu nét

Fill color: màu tô

- Nhấp vào tam giac nhỏ màu đen nằm

ở góc hộp màu chọn màu viên và màu nét

- Hoặc nhấp vào tam giác màu đen để

xuất hiện thanh trượt và di chuyển con trượt để thay đổi thông số màu RGB

- Hoặc nhập số Hex hoặc nhập vào

một màu bất kỳ rồi nhấp vào tam giác màu đen bên phải thanh màu để thay đổi độ đậm nhạt của màu vừa chọn

Giáo trình đồ họa hình động Biên soạn: Mai Phương Uyên

Chọn màu tô tuyến tính

- Linear: tô tuyến tính theo lớp

- Radial: tô tuyến tính theo vòng

- Bitmap: dùng ảnh để tô nền

Thay đổi vùng màu cho kiểu tô tuyến tính:

- Thêm nút chuyển màu: click chuột dưới thanh

chuyển màu

- Để thay đổi màu cho một nút click chọn nút (cho

tam giác trên nút biến thành thành màu đen rồi click vào ô chọn màu)

- Để bỏ một nút chuyển màu kéo chúng ra khỏi thanh chuyển màu

Tô tuyến tính theo lớp Tô tuyến tính theo vòng

- Khi nhấp chọn dạng dạng tô là bitmap, hộp thoại Import to Library xuất hiện, chọn file hình muốn làm màu tô, nhấp Open Chọn công cụ vẽ và tạo các đối tượng với màu tô là mẫu Bitmap vừa chọn

4 Cửa sổ Color Swatches

- Duplicat Swatch: sao chép ô màu

- Load Default Colors: Thay thế

bảng màu hiện hành bằng bảng màu

- Vào menu Window Align (hoặc Ctrl +K)

- Hoặc Modify  Align…

Giáo trình đồ họa hình động Biên soạn: Mai Phương Uyên

- Trong bảng Align, chọn To Stage sẽ lấy cạnh khung thiết kế làm chuẩn

để sắp xếp và phân phối các đối tượng

Align: canh thẳng hàng

- Align left egde: thẳng trái (đối tượng gần trái làm chuẩn)

- Align horizontal center: thẳng giữa hàng dọc (trục giữa của đối tượng gần trái và đối tượng gần trái làm chuẩn)

- Align right: thẳng phải (đối tượng gần phải làm chuẩn)

- Align top: thẳng đỉnh (đối tượng gần trên làm chuẩn)

- Align vertical center: thẳng giữa hàng ngang (trục giữa của đối tượng gần trên và đối tượng gần dưới làm chuẩn)

- Align bottom: thẳng đáy (đối tượng gần dưới làm chuẩn)

Distribute: xếp đều

- Distribute top: theo cạnh trên

- Distribute vertical center: xếp theo trung tâm hàng dọc

- Distribute bottom: theo cạnh dưới

- Distribute left: xếp theo cạnh trái

- Distribute horizontal centerxếp theo trung tâm hàng ngang

- Distribute right: xếp theo cạnh phải

Match Size: dãn kích thước

- Match width: dãn bằng chiều rộng

- Match height: dãn bằng chiều cao

- Match width and height: dạn bằng chiều rộng và cao

Space: dàn trải theo không gian

- Space evenly vertically: không gian bằng nhau theo chiều dọc

- Space evenly horizontally: không gian bằng nhau theo chiều ngang

X Bài tập chương II: HỘP CÔNG CỤ VÀ CÁC THAO TÁC CƠ BẢN

Sử dụng các công cụ vẽ đơn giản thực hiện các mẫu vẽ theo sau:

Chú ý: Các bài tập vẽ hình học sinh lưu lại để phục vụ cho các bài hoạt hình về sau

1 Vẽ và trang trí các viên gạch bông

Hướng dẫn: vẽ ¼ hình sau đó copy và quay ¼ hình ta có được ½ hình tiếp tục copy và

quay ½ hình thì có được hình như mẫu trên

2 Vẽ các mặt của con xúc sắc

Hướng dẫn: vẽ 1 hình sau đó copy ra và tô màu cho các nút tất cả là màu xanh chi nút

nhất là màu đỏ

3 Vẽ các trạng thái của đè giao thông

Hướng dẫn: vẽ 1 hình sau đó copy ra và tô màu cho các đèn của ba trạng thái là đèn

Giáo trình đồ họa hình động Biên soạn: Mai Phương Uyên

4 Vẽ các đối tượng cơ bản và trang trí các hình tròn thành nhiều màu khác nhau như hình dưới (Chú ý: Mỗi hình tròn nhỏ nằm trong một lớp và chứa một màu, mỗi hình tròn có màu biến đổi theo từng trạng thái hình như dưới đây)

Hình 5

Hình 6

5 Thiết kế công cụ dàn nhạc như sau

Giáo trình đồ họa hình động Biên soạn: Mai Phương Uyên

6 Thiết kế mẫu chữ như sau

7 Thiết kế các nút điều khiển như sau

8 Thiết kế hình như sau

Chương III: THAO TÁC VỚI HÌNH ẢNH VÀ KHUNG HÌNH

Mục tiêu:

Sau khi học xong bài học này, sinh viên có khả năng:

- Phân biệt được các dạng hình ảnh nhập vào chương trình, các loại khung hình trên thanh tiến trình

- Thực hiện thành thạo các thao tác nhập và chỉnh sửa hình ảnh và tạo các khung hình trên thanh tiến trình

- Rèn luyện tính cẩn thận, tỉ mỉ, tính sáng tạo trong công việc

Nội dung chính:

I Ảnh tĩnh

- Flash có thể chèn vào các file ảnh bitmap (.bmp, jpg, gif, png) hoặc ảnh vector (.wmf)

- Nhập ảnh File  Import  Import to Stage hoặc Ctrl +R, nếu file ảnh

có tên kết thúc bằng số và các file được đánh số theo thứ tự trong cùng một thư mục, Flash sẽ hiện thông báo hỏi ta có nhập vào các file này không

Giáo trình đồ họa hình động Biên soạn: Mai Phương Uyên

Nếu chọn yes sẽ nhập toàn bộ các hình trong folder

Nếu chọn No chỉ nhập file đang được chọn

Nếu chọn Cancel hủy bỏ việc nhập file

1 Ảnh vector:

- Nhập ảnh vector (.wmf,…) thì ảnh được đưa vào khung làm việc

nhưng không đưa vào thư viện, ảnh vẫn giữ nguyên các nhóm ảnh (group) và sắp xếp theo tầng

- Phân rã ảnh: chọn ảnh, vào Modify  Break Apart thành mảnh vẽ

trong Flash để chỉnh sửa

đưa vào khung làm việc và vào thư viện

Nếu nền trong suốt thì vẫn giữ nguyên

tính chất này

a Thiết lập các thuộc tính cho ảnh bitmap

- Mở cửa sổ Library (Window  Library hoặc Ctrl +L), click phải chuột

lên tên ảnh và chọn Properties, xác lập các tính chất

Allow smoothing: làm phẳng các góc ảnh Bitmap với chế độ loại bỏ các vùng răng cưa trong đường viền của ảnh

Compression: chọn kiểu nén + Photo(JPEG) nén ảnh theo định dạng JPEG Nếu chọn chất lượng nén mặc định cho ảnh nhập vào Nếu không chọn lệnh Use Imported JPG Data cho phép khai báo chất lượng trong khung Quality, chọn Test kéo ảnh để xem thử và nếu chấp nhận chọn Updare và OK

+ Lossless (PNG/GIF) để nén ảnh với chế độ không làm mất dữ liệu trong ảnh

b Lấy ảnh từ thư viện: mở thư viện ảnh và kéo ảnh từ thư viện ra khung làm việc

c Tách biệt từng phần (Break Apart) trong ảnh Bitmap Chọn ảnh, vào vào Modify  Break Apart , lúc này ảnh chuyển sang mức khung làm việc, chỉnh sửa làm tương tự như hình vẽ trên mức khung làm việc