Script và ỹ thuật hoạt hình (Cao đẳng Công nghiệp Huế) - Nguồn: Internet

Để kiểm tra một bộ phim hoàn chỉnh, bạn chọn Control > Test Movie (hoặc tổ hợp Ctrl+Enter). Bạn cũng lưu ý rằng, n ếu bạn xây dựng một thước phim chứa nhiều đối tượng đồ họa và[r]

Trang 1

Khoa Công nghệ Thông Tin Trường Cao đẳng Công nghiệp Huế

GIÁO TRÌNH

SCRIPT VÀ KĨ THUẬT HOẠT HÌNH

(Lưu hành nội bộ)

Huế, tháng 06/2011

Trang 2

Blank Page

Trang 3

- 3 -

PHỤ LỤC

LỜI NÓI ĐẦU 7

CHƯƠNG 1 GIỚI THIỆU VỀ FLASH 7

1.1 Sơ lược về đồ họa vector và lịch sử ra đời của Flash 9

1.2 So sánh Flash với Silverlight và JavaFx 12

1.3 Cài đặt Adobe Flash CS5 13

1.4 Giới thiệu về Adobe Flash CS5 16

1.4.1 Các chế độ tùy biến giao diện 17

1.4.2 Tạo mới dự án cho desktop và mobile 18

1.4.3 Layer, Frame, Scene và Movie 20

1.4.4 Vùng thanh công cụ Tools 22

1.4.5 Vùng thuộc tính Properties 22

1.4.6 Vùng soạn thảo ActionScript 23

1.4.7 Các vùng chức năng khác 24

Tổng kết chương 1 30

CHƯƠNG 2 CÁC CÔNG CỤ VẼ CƠ BẢN 32

2.1 Các công cụ Pencil, Brush và Erase 32

2.2 Công cụ vẽ hình cơ bản 34

2.3 Công cụ Text 41

2.4 Công cụ chọn Selection và Lasso 43

2.5 Các công cụ đổ màu Paint Bucket, Ink Bottle và bắt màu EyeDropper 44 2.6 Công cụ Free Transform và Gradient Transform 46

2.7 Các công cụ làm việc với đường Bezier 48

2.8 Làm việc với các đối tượng 51

CHƯƠNG 3 CÁC BIỂU TƯỢNG TRONG FLASH 55

3.1 Biểu tượng Graphic 55

3.2 Biểu tượng Button 56

3.3 Biểu tượng MovieClip 58

3.4 Làm việc với Library 59

Trang 4

CHƯƠNG 4 TẠO HOẠT CẢNH 62

4.1 Tìm hiểu về TimeLine 62

4.2 Classic Tween 68

4.3 Shape Tween 69

4.4 Motion Tween 71

4.5 Công cụ Bone và Bind 76

4.6 Công cụ Deco 79

4.7 Công cụ 3D Translation và 3D Rotation 89

CHƯƠNG 5 LẬP TRÌNH VỚI ACTIONSCRIPT 94

5.1 Các kiểu dữ liệu 95

5.2 Biến và Hằng 96

5.3 Toán tử và Biểu thức 97

5.4 Các cấu trúc lệnh điều khiển 103

5.4.1 Câu lệnh if 103

5.4.2 Câu lệnh switch 104

5.4.3 Các câu lệnh lặp for, while và do…while 105

5.4.4 Các lệnh continue, break và return 107

5.5 Hàm 108

5.6 Lớp và Đối tượng 110

5.6.1 Xây dựng lớp 110

5.6.2 Làm việc với đối tượng 113

5.6.3 Sự kiện chuột 116

5.6.4 Sự kiện bàn phím 116

5.7 Đưa một đối tượng vào ActionScript 117

5.8 Làm việc với XML 119

5.9 Vùng chức năng Code Snippets 120

CHƯƠNG 6 CÁC HIỆU CHỈNH NÂNG CAO 145

6.1 Xử lý âm thanh, hình ảnh và video 145

Trang 5

- 5 -

6.2 Tạo kĩ xảo điện ảnh với Flash 148

6.3 Tạo thước phim Flash tựa 3D 153

6.4 Ghép nối nhiều hoạt cảnh 159

6.5 Kĩ thuật mặt nạ mask 159

6.6 Tạo các nút nhấn điều khiển 165

6.7 Xuất bản một Movie 167

6.8 Xuất bản một tập tin Flash trong suốt trên trình duyệt 170

CHƯƠNG 7 THƯ VIỆN PAPERVISION3D 176

7.1 Giới thiệu về PaperVision3D và Adobe Flex Builder 176

7.2 Cấu hình và cài đặt PaperVision3D cho Adobe Flex Buider 179

7.3 Chương trình Hello, PaperVision3D ! 182

7.4 Các đối tượng trong PaperVision3D 186

7.4.1 Các đối tượng hình thể 186

7.4.2 Đối tượng Material - Phối màu cho hình thể 193

7.4.3 Đối tượng Lights - Hiệu ứng ánh sáng 196

7.4.4 Đối tượng Shader - Hiệu ứng đổ bóng 197

7.4.5 Đối tượng ShadedMaterial 197

7.4.6 Đối tượng CompositeMaterial 197

7.4.7 Đối tượng MaterialsList 197

7.5 Import một mô hình 3D 198

BÀI TẬP THỰC HÀNH 202

BÀI THỰC HÀNH SỐ 1 202

TÀI LIỆU THAM KHẢO 209

Trang 6

Blank Page

Trang 7

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 vấn đề 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, chúng tôi đã cố gắng hoàn thiện nó, nhưng không

thể tránh khỏi sai sót Chúng tôi 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 để giáo trình ngày càng hoàn thiện hơn Mọi thư từ đóng góp xin gửi về các địa chỉ email sau dnhthanh@hueic.edu.vn hoặc myhoangthanh@yahoo.com

Huế, tháng 06/2011

A

Trang 8

Blank Page

Trang 9

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, chúng ta 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.1 – Đồ họa điểm

Đồ 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

Trang 10

Hình 1.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) Định dạng Flash mà chúng

ta sẽ làm quen ở đây cũng thuộc vào đồ họa vector Flash thường được sử dụng

để tạo ra các hiệu ứng động Xét ở một phạm trù nào đó, nó có nhiều điểm tương đồng với kĩ thuật tạo video (kĩ thuật 24 hình/giây) Nhưng nó có ưu điểm là phim được tạo bởi Flash không bị vỡ hạt khi phóng to (trừ trường hợp phim có

chứa các đối tượng đồ họa điểm) Và đặc biệt, kích thước phim tạo bởi Flash rất nhỏ gọn so với các định dạng phim khác

Trang 11

- 11 -

Hình 1.3 – Đồ họa vector

Lịch sử ra đời của Flash

Flash là một kĩ thuật tạo các hiệu ứng động, các thước phim hoạt hình… Flash được giới thiệu đầu tiên bởi công ty MacroMedia vào năm 1999 Đến năm 2005, công ty này đã được Adobe mua lại với giá 3.4 tỉ đôla Từ khi ra đời cho đến này, Flash đã có rất nhiều bước phát triển đáng chú ý Nhiều tính năng mới đã liên tục được cập nhập trong các phiên bản của nó, kể từ các phiên bản Macromedia Flash cho đến Adobe Flash hiện nay

Với phiên bản Adobe Flash CS4, công ty Adobe đã bổ sung vào cho Flash những tính năng mạnh mẽ: hỗ trợ nhiều định dạng import dữ liệu; bổ sung các công cụ tạo hoạt hình mạnh mẽ như Bone, Bind, 3D Translation, 3D Rotation,… Phiên bản mới nhất của Flash là CS5 (cho đến năm 2010) Hiện nay, Adobe cũng đã tạo ra một ấn bản mã nguồn mở cho Flash đó là công nghệ Flex Một trong những công nghệ ra đời sớm nhất hỗ trợ tạo giao diện web – RIA Flex là một công nghệ hứa hẹn đem lại nhiều lợi nhuận cho Adobe (nhờ vào trình phát triển Adobe Flex Buider) Nó là một đối thủ lớn của công nghệ Silverlight của Microsoft và JavaFx của Sun (nay được mua lại bởi Oracle)

Trang 12

1.2 So sánh Flash v ới Silverlight và JavaFx

Ngày nay, xu thế thương mại điện tử hóa đang ngày càng len lỏi vào các ngóc ngách xã hội Các website là nơi cung cấp thông tin, trao đổi và tư vấn Do đó, giao diện website đẹp mắt, thiết kế thuận tiện là một lợi thế Chính vì lẽ đó, rất nhiều nhà phát triển chú ý đến điều này Các hãng phần mềm lớn như Microsoft, Adobe, Sun,… phát triển các công nghệ hỗ trợ để chiếm lĩnh thị trường phần

mềm hỗ trợ công nghệ trên Tính về tuổi đời phát triển của các công nghệ hỗ trợ RIA, Adobe tỏ ra là người tiên phong

Flash/Flex của Adobe, Silverlight của Microsoft và JavaFx của Sun là những công nghệ đáng chú ý nhất Mỗi trong số chúng đều có ưu điểm của nó Một ưu điểm chung của chúng là đồ họa rất đẹp và chuyển động rất mềm mại

Flash/Flex có tuổi đời khá cao, với lượng người dùng đông đảo, hầu hết các nhà phát triển đã quá quen thuộc với Flash Flash cũng hỗ trợ lập trình hướng đối tượng Nó cũng tương thích với hầu hết các ngôn ngữ lập trình web hiện nay Flash hỗ trợ hầu hết trên các hệ điều hành: Windows, Linux, MacOS và rất nhiều mẫu Mobile của nhiều hãng khác nhau Để phát triển một ứng dụng Flash, các nhà phát triển có thể sử dụng trình biên tập Adobe Flash Trình biên tập này hoạt động tốt trên đa số hệ điều hành: Windows và MacOS Một yêu cầu để trình khách có thể chạy được Flash là cần cài đặt một Plugin Flash nhỏ gọn (không quá 2 Mb) hoặc hỗ trợ một phiên bản Flash Lite (cho các dòng điện thoại)

Silverlight mặc dầu ra đời sau Flash, nhưng với sự hậu thuẩn của một tập đoàn

lớn như Microsoft, nó cũng đang dần có một vị thế đáng kể Ngoài ra, Silverlight được phát triển trên nền NET, các lập trình viên có thể sử dụng VB.NET hoặc C# - một ngôn ngữ lập trình mạnh mẽ - để phát triển Nhược điểm của nó là chỉ tương thích trên Windows, MacOS và các mẫu điện thoại Windows Mobile Để phát triển ứng dụng trên Silverlight, các nhà phát triển chỉ

có thể sử dụng Visual Studio vốn chỉ dành cho hệ điều hành Windows Trình khách muốn chạy được Silverlight cần cài đặt Plugin Silverlight (khoảng 5 Mb)

JavaFx ra đời sau cùng, nhưng nó có nhiều ưu điểm: mã nguồn mở, hỗ trợ nhiều hệ điều hành – Windows, Linux, MacOS và hứa hẹn hoạt động tốt trên nhiều mẫu Mobile, trình khách không cần cài đặt Plugin hỗ trợ Để soạn thảo JavaFx, người dùng có thể sử dụng Eclipse hoặc NetBean Cả hai trình biên dịch này đều hoạt động tốt trên Windows, Linux và MacOS Nhưng một điều đáng

tiếc là JavaFx lại ra đời quá muộn màng

Với tuổi đời cao, lượng người dùng có kinh nghiệm lớn, các lập trình viên và các nhà phát triển đã quá quen thuộc với Flash Flash vẫn đang và sẽ phát triển trong một khoảng thời gian dài nữa Flash có ba định hướng trọng tâm: phát triển RIA cho web, tạo các chương trình ứng dụng thông qua Adobe Air cho desktop và Flash Lite cho các dòng di động cũng như tạo các thước phim trình

Trang 13

1.3 Cài đặt Adobe Flash CS5

Yêu cầu cấu hình cài đặt: hệ điều hành Windows XP Pack 3 hoặc cao hơn

(MacOS X hoặc cao hơn), 1Gb Ram hoặc cao hơn, Pentium IV hoặc cao hơn

Mặc dầu mục đích chính của chúng ta là sử dụng chương trình Adobe Flash Professional CS5, tuy nhiên các bạn có thể sử dụng thêm một số chương trình đính kèm như: Photoshop dùng để hiệu chỉnh ảnh, Dreamweaver thiết kế giao diện web đồng thời chèn các phim Flash vào, soạn thảo ActionScript chuyên nghiệp hơn với Flash Buider 4, hiệu chỉnh âm thanh, video… Chính vì lý do này, tôi đề nghị các bạn nên chọn bộ trọn gói Adobe Master CS5

Chúng ta có thể tải trực tiếp từ Adobe, và có 30 ngày để dùng thử Sau khi tải

về, hãy tiến hành giải nén tập tin, khi đó ta sẽ thu được một thư mục chính Nếu ta sử dụng một đĩa cài đặt DVD, thì hãy đưa đĩa DVD vào ổ đĩa DVD trên máy tính Chúng ta có thể sử dụng chế độ AutoRun của nó, hoặc mở đĩa DVD này ra

Trong cả hai trường hợp nêu trên, thư mục chính sẽ có 4 thư mục con và một tệp Set-up.exe Cấu trúc thư mục có dạng như sau:

Hình 1.4 – Cấu trúc thư mục bên trong đĩa DVD cài đặt Flash CS5

Hãy nhấp đôi chuột vào tập tin Set-up.exe, khi đó, sẽ có cửa sổ sau đây hiện ra

Trang 14

Hình 1.5 – Màn hình chào đón khi cài đặt Adobe Master CS5

Hãy đọc qua các điều khoản sử dụng phần mềm, nếu đồng ý thì các bạn chỉ việc nhấp Accept Ngược lại, hãy chọn Quit để hủy bỏ việc cài đặt

Sau khi nhấp vào Accept, cửa sổ sau đây sẽ xuất hiện Trong cửa sổ này, chúng

ta có thể điền serial vào – tương ứng với Provide a serial number (nếu đã có một

số serial), ngược lại, hãy chọn Install this product as a trial (nếu các bạn muốn

sử dụng thử 30 ngày) Nếu muốn chọn ngôn ngữ hiển thị, hãy chọn Select Language Sau đó, hãy nhấp Next

Hình 1.6 – Cửa sổ Serial Number

Trang 15

- 15 -

Adobe Master không hỗ trợ tiếng việt Nó chỉ hỗ trợ một vài ngôn ngữ như tiếng anh, tiếng nhật… Nếu số serial điền vào đúng, thì sẽ xuất hiện một dấu tích mầu xanh Ngược lại, nếu số serial sai, dấu nhân màu đỏ sẽ xuất hiện Nếu số serial đúng, ta có thể nhấp Next để tiếp tục quá trình cài đặt Nếu không có số serial, hãy chọn chế độ dùng thử Khi cài đặt ở chế độ dùng thử, Adobe sẽ thường xuyên đưa ra thông báo để nhắc nhở về số ngày dùng thử còn lại và nó sẽ tự động chấm dứt khả năng dùng thử sau 30 ngày Ta cũng có thể sử dụng chế độ cài đặt này nếu đã có số serial Và số serial sẽ được bổ sung sau

Sau khi nhấp next, cửa sổ Adobe ID sẽ hiện ra Sau đó là cửa sổ Install Options Trong cửa sổ này, cho phép ta chọn lựa các thông số cài đặt

Hình 1.7 – Cửa sổ Install Options Trong cửa sổ này, chúng ta có thể chọn lựa các phần mềm cần cài đặt bằng cách đánh dấu tích vào các phần mềm tương ứng Nếu muốn học Flash CS5, hãy

chọn – Flash Professional Ngoài ra, tôi khuyến nghị hãy chọn thêm các phần mềm sau: Photoshop (xử lý đồ họa điểm), Flash Buider (thiết kế RIA cho web, lập trình ActionScript…), SoundBooth (xử lý âm thanh) Ngoài ra, nếu quan tâm đến các lĩnh vực đồ họa khác, ta có thể cài đặt thêm các phần mềm như Illustrator là phần mềm chuyên xử lí đồ họa vector, Fireworks cũng là phần

mềm chuyên xử lí đồ họa điểm, Adobe Premier chuyên xử lý phim, After Effect chuyên tạo kĩ xảo điện ảnh

Ở mục Location bên dưới, hãy chọn vị trí cần cài đặt Theo mặc định, nó sẽ cài đặt vào thư mục C:\Program Files\Adobe Chúng ta cũng cần lưu ý dung lượng

ổ đĩa dành cho việc cài đặt Hãy luôn đảm bảo rằng dung lượng để cài đặt – Total install phải luôn nhỏ hơn dung lượng ổ đĩa còn trống – Available

Trang 16

Sau đó, hãy nhấp vào nút Install và chờ đợi cho quá trình cài đặt hoàn tất Để kết thúc quá trình cài đặt, hãy nhấp vào nút Finish để đóng cửa sổ cài đặt lại

1.4 Gi ới thiệu về Adobe Flash CS5

Kh ởi động Adobe Flash Professional CS5: để khởi động Adobe Flash

Professional CS5, ta có thể bấm chọn biểu tượng của nó trên màn hình Desktop,

hoặc tiến hành các bước sau:

- Vào Start > All Programs

- Chọn Adobe Master Collection CS5

- Chọn Adobe Flash Professional

Hình 1.8 – Khởi động Adobe Flash Professional CS5 Khi đó, màn hình Splash – màn hình chào đón của Adobe Flash Professional CS5 sau đây sẽ hiện ra

Hình 1.9 – Mành hình chào đón của Adobe Flash Professional CS5

Sau khi quá trình khởi động hoàn tất, ta sẽ thấy giao diện sau đây

Trang 17

- 17 -

Hình 1.10 – Cửa sổ ban đầu của Flash Professional CS5 Phiên bản Adobe Flash CS5 xuất xưởng năm 2010 So với các phiên bản trước

đó, CS5 có nhiều thay đổi về cả giao diện chương trình lẫn các tính năng của nó

Về giao diện: phiên bản CS5 dành cho Windows đã tuyệt giao với giao diện

Window, sử dụng một giao diện độc lập với hệ điều hành

Về tính năng: bổ sung thêm nhiều công cụ mới làm cho công việc sáng tác trở

nên đơn giản hơn như các công cụ Bone, Bind, 3D Translation, 3D Rotation

1.4.1 Các chế độ tùy biến giao diện

Trong giao diện tổng thể Essential của Flash CS5, có thể chia làm 5 vùng chính:

- Vùng hệ thống menu phía trên cùng

- Vùng thanh công cụ ở bên phải

- Vùng thuộc tính và thư viện bên cạnh thanh công cụ

- Vùng sáng tác ở trung tâm

- Vùng TimeLine và Layer ở phía bên dưới

Trang 18

Hình 1.11 – Giao diện Adobe Flash CS5

Flash CS5 cho phép chúng ta làm việc theo chế độ Tab Trên vùng thanh menu,

ở góc bên phải mục Essentials cho phép ta chuyển đổi qua lại giữa các cách bố

trí giao diện Có 6 chế độ bố trí giao diện: Animator, Classic, Debug, Designer, Developer và Essentials Tùy vào cảm quan, hãy chọn lấy một cách bố trí giao

diện nào mà mình cho là phù hợp và tiện lợi nhất Riêng tôi, tôi chọn chế độ Essentials

Để phóng to hay thu nhỏ khung sáng tác, ta chỉ cần sử dụng phím tắt là Ctrl+=

để phóng to và Ctrl+- để thu nhỏ Hoặc có thể chọn chế độ hiển thị % ở bên

dưới thanh menu

1.4.2 T ạo mới dự án cho desktop và mobile

Để tạo mới một dự án, bạn kích chuột vào File, chọn New (phím tắt là Ctrl+N)

Hộp thoại bên dưới sẽ hiện ra Ở đây, chúng ta quan tâm đến một vài kiểu dự án:

- Flash File (ActionScript 3.0, ActionScript 2.0): tạo dự án Flash với ActionScript 3.0 hoặc 2.0 Bạn cũng lưu ý rằng, trong giáo trình này, chúng ta đang thảo luận về ActionScript 3.0 Phiên bản này là phiên bản mới nhất của ActionScript cho đến thời điểm này

- Flash File (Adobe Air 2): tạo dự án Flash cho Desktop chạy trên Adobe Air Adobe Air là một dự án mới của Adobe nhằm tạo ra môi trường cho các nhà phát triển những ứng dụng dựa vào công nghệ Flash có thể chạy độc lập trên các

hệ điều hành Nó có nhiều điểm tương đồng với công nghệ Java của Sun hay

Trang 19

hỗ trợ trên các dòng điện thoại Bạn chỉ cần tìm kiếm loại điện thoại mà bạn cần

tạo dựng dự án, sau đó bấm vào Create

Hình 1.13 – Adobe Device Central

Trang 20

- Ngoài ra, nếu bạn muốn tạo các Action độc lập, bạn có thể tạo riêng chúng

bằng cách chọn ActionScript File Việc tạo các ActionScript độc lập và sử dụng chúng trong các dự án Flash sẽ được thảo luận kĩ hơn khi chúng ta làm quen với

lập trình với ActionScript ở chương 5

Ghi chú: B ạn cũng cần lưu ý đến một vài định dạng trong các dự án của Flash Định dạng Flash sẽ có phần mở rộng là fla Định dạng ActionScript File có định dạng là as Định dạng tập tin cuối cùng của flash là swf

1.4.3 Layer, Frame, Scene và Movie

Trong kĩ thuật tạo các thước phim, kĩ thuật được sử dụng phổ biến để tạo chuyển động trong các đoạn phim là kĩ thuật 24 hình/ giây Trong kĩ thuật này, các hình ảnh có nhiều điểm tương đồng sẽ được ghép nối lại một cách liên tiếp Các đối tượng cần tạo chuyển động sẽ có chút thay đổi trên mỗi khung hình Khi các khung hình thay thế cho nhau ở tốc độ mà mắt người không nhận ra sự thay đổi này, chúng ta sẽ cảm thấy đối tượng chuyển động Kĩ thuật tạo hoạt hình trong Flash cũng hoàn toàn tương tự Trước khi tìm hiểu kĩ về các cách thức tạo chuyển động trong Flash, chúng ta cùng nhau tìm hiểu qua các khái niệm: Lớp –

Layer, Khung hình – Frame, Cảnh quay – Scence, Thước phim – Movie

- Layer: là các lớp được dùng trong việc sáng tác Mỗi một khung hình có thể chứa nhiều layer khác nhau Mỗi một đối tượng thường được xây dựng trên mỗi layer Kĩ thuật layer được sử dụng

rộng rãi trong đồ họa máy tính, bao gồm cả đồ

họa điểm như: photoshop, corel photopaint hay

đồ họa vector như: illustrator, coreldraw

Nhóm bi ểu tượng biểu tượng xóa và tạo layer –

: biểu tượng thứ nhất từ trái sang là tạo

m ới layer, biểu tượng thứ hai là tạo mới một thư

m ục để chứa layer và biểu tượng cuối cùng là xóa layer ho ặc thư mục chứa layer

Nhóm bi ểu tượng hiệu chỉnh layer – : biểu tượng thứ nhất từ trái sang là cho phép ẩn hay hiện layer đó, biểu tượng thứ hai là khóa không cho phép

ch ỉnh sửa đối tượng trên layer và biểu tượng cuối cùng là cho phép đối tượng trên layer hi ển thị đường viền và màu nền hay chỉ đường viền

- Frame: là khung hình dùng trong kĩ thuật tạo chuyển động Vật thể chuyển động được là nhờ vào kĩ thuật thay thế các khung hình Như tôi đã trình bày ở trên, mắt người chỉ có thể lưu được không quá 24 hình ảnh trong một giây, nếu

tốc độ chuyển đổi các khung hình lớn, mắt chúng ta không thể nhận thấy được

sự thay đổi này mà cảm giác như là hình ảnh đang chuyển động Với Flash, số khung hình không nhất thiết phải lớn như trong kĩ thuật tạo video, nó giảm đi Hình 1.14 – Tạo mới Layer

Trang 21

- 21 -

một cách đáng kể nhờ vào công nghệ được sử dụng trong Flash Điều này cũng giúp làm giảm kích thước của tập tin Flash

- Scene: được hiểu như là các cảnh quay trong Flash Một cảnh quay là tập hợp

của các khung hình kế tiếp nhau để tạo ra chuyển động Để chèn thêm scene, ta

vào Insert, chọn Insert Scene Nhờ vào các cảnh quay này, chúng ta có thể tạo

các thước phim dài, mà không phải quản lý các lớp một cách quá phức tạp khi

số lượng đối tượng trên cảnh quay đó trở nên quá lớn Một cảnh quay trong Flash cũng giống một cảnh quay trong phim truyền hình vậy Khi cần tạo một thước phim hoàn chỉnh, chúng ta sẽ ghép nối nhiều cảnh quay lại với nhau Bạn cũng lưu

ý rằng, các cảnh quay sẽ được ghép tự động theo thứ tự được sắp xếp Do đó, nếu muốn thay đổi thứ tự cảnh quay, bạn chỉ việc thay

đổi thứ tự sắp xếp của nó Để làm xuất hiện cửa sổ quản lý các cảnh quay, bạn vào Windows > Other Panels > Scene (hoặc phím tắt Shift+F2)

Trong cửa sổ này, bạn chỉ cần sắp xếp lại thứ tự trình bày của các Scence bằng thao tác kéo thả đơn giản Thứ tự các cảnh quay sẽ diễn ra theo thứ tự từ trên xuống dưới Khi xây dựng các cảnh quay độc lập, bạn có thể kiểm tra từng cảnh quay này bằng cách vào Control > Test Scene (hoặc tổ hợp phím Ctrl+Alt+Enter)

- Movie: là một thước phim hoàn chỉnh Một movie có thể chứa một hoặc nhiều

cảnh quay Để chuyển đổi qua lại giữa các cảnh quay trong một movie, ta bấm vào biểu tượng và chọn tên của scene Để kiểm tra một bộ phim hoàn chỉnh, bạn chọn Control > Test Movie (hoặc tổ hợp Ctrl+Enter) Bạn cũng lưu ý rằng,

nếu bạn xây dựng một thước phim chứa nhiều đối tượng đồ họa và có nhiều

cảnh quay, thì việc kiểm tra sự hoạt động của từng cảnh quay là điều cần thiết

Bạn chỉ nên kiểm tra sự hoạt động của toàn bộ phim khi các cảnh quay đã hoạt động tốt Sở dĩ như vậy là vì, quá trình biên dịch một bộ phim hoàn chỉnh bao giờ cũng chậm hơn, chiếm nhiều tài nguyên bộ nhớ hơn so với biên dịch từng cảnh quay riêng lẻ Điều này đặc biệt hữu ích với những máy có cấu hình không quá cao

Ghi chú: B ạn cũng cần lưu ý rằng, Flash cũng hỗ trợ chế độ kiểm tra trực tiếp trong khung sáng tác Để thực hiện chức năng này, bạn có thể chọn một trong hai ch ế độ: chế độ kiểm tra bằng tay, chế độ kiểm tra tự động Đối với chế độ

ki ểm tra bằng tay, bạn sử dụng thanh đánh dấu Frame hiện tại, sau đó kéo trượt

nó trên thanh TimeLine V ới chế độ kiểm tra tự động, bạn chỉ cần nhấn phím Enter Nếu phim của bạn nằm trên TimeLine quá dài và bạn đang thực hiện

Hình 1.15 – Cửa sổ quản lý cảnh quay

Trang 22

ch ức năng kiểm tra tự động, bạn muốn dừng chế độ này ngay lập tức ! Khi đó,

b ạn hãy nhấn phím Enter thêm lần nữa Chế độ kiểm tra tự động sẽ dừng ngay

l ập tức

1.4.4 Vùng thanh công cụ Tools

Vùng thanh công cụ chứa các công cụ để tạo hình, hiệu chỉnh và tạo các hiệu ứng cho các đối tượng Bạn có thể thu gọn thay công cụ bằng cách bấm vào biểu tượng thu nhỏ bên phải trên cùng, thứ hai từ phải sang Hoặc tắt nó đi, bằng cách bấm vào biểu tượng còn lại

Mỗi một đối tượng đều có các thuộc tính riêng như màu viền, loại viền, màu

nền… Vùng quản lý các thuộc tính này được bố trí trong vùng thuộc tính Properties Để hiển thị các thuộc tính của

một đối tượng, bạn chỉ việc nhấp chọn đối tượng đó Khi đó, trong bảng thuộc tính Properties này sẽ hiển thị các thông

số liên quan đến các thuộc tính của đối tượng Để thay đổi các thông số thuộc tính của đối tượng đó, bạn chỉ việc thay đổi các thông số trong bảng thuộc tính Properties này

Biểu tượng nhỏ ở góc trên bên phải cho phép thu nhỏ hoặc đóng lại vùng thuộc tính Properties Tương tự, chúng ta cũng

có thể làm xuất hiện hoặc đóng vùng thuộc tính này lại bằng cách vào Windows, chọn Properties

Thu ộc tính của vùng soạn thảo:

Publish: gồm Player (cho phép phim trình chiếu có thể hoạt động tốt trên phiên bản Flash Player nào), Script (phiên bản ActionScript mà đoạn phim đang sử

Hình 1.17 – Vùng thu ộc tính Properties

Trang 23

- 23 -

dụng), Class (bạn chỉ việc nhập tên Lớp thể hiện vào, lập tức Flash sẽ khởi tạo cho bạn một cú pháp khai báo của lớp nội tại – mặc định là lớp thừa kế từ MovieClip), Profile (quản lý các thông tin liên quan đến việc xuất bản dự án Flash), AIR Settings (các cấu hình thiết lập cho dự án Flash chạy trên Adobe Air)

Properties: chứa FPS (tốc độ chơi – đo bằng số frame trên mỗi giây Frames Per Second), Size (kích thước của khung trình chiếu – đo bằng pixel), Stage (quản lý màu nền của khung soạn thảo)

1.4.6 Vùng so ạn thảo ActionScript

Trong khung soạn thảo ActionScript, phần soạn thảo nằm ở trung tâm của cửa

sổ này Vùng phía bên trái chứa các lớp thư viện và cây phả hệ Phía trên khung soạn thảo là hệ thống các công cụ hỗ trợ soạn thảo ActionScript

Hình 1.18 – Khung soạn thảo ActionScript (1) – Bổ sung thêm các thành phần vào ActionScript

Trang 24

(7) – Tạo các điểm thoát khi debug chương trình

của các đối tượng theo thứ tự

các biểu tượng từ trái sang phải

là canh trái, canh giữa theo chiều

ngang, canh phải, canh trên,

canh giữa theo chiều dọc và

canh dưới Nếu đánh dấu kiểm

vào tùy chọn Align to Stage thì

nó sẽ canh chỉnh theo khung

soạn thảo, ngược lại, nó sẽ can

chỉnh theo vị trí tương đối của các

đối tượng

- Nhóm Distribute: canh chỉnh theo trục tương đối của các đối tượng Theo

thứ tự các biểu tượng từ trái sang phải là: canh chỉnh theo trục ở phía mép trên, theo trục đối xứng ngang, theo trục ở phía mép dưới, theo trục ở phía mép trái, theo trục đối xứng dọc và theo trục ở phía mép phải

- Nhóm Match Size: hiệu chỉnh cùng kích thước của đối tượng theo chiều

ngang, chiều dọc, hoặc theo cả chiều ngang và chiều dọc Nếu chọn tùy

chọn Align to Stage, nó sẽ canh chỉnh kích thước đối tượng theo khung soạn thảo

- Nhóm Space: hiệu chỉnh khoảng cách giữa các đối tượng theo chiều dọc

và ngang

o Vùng Transform (Ctrl+T): hiệu chỉnh góc cạnh cho đối tượng Việc hiệu chỉnh góc cạnh này bao gồm:

- Nhóm đầu tiên: kéo giãn chiều dài và chiều rộng (tính theo tỉ lệ %), nếu

bạn nhấp chọn tùy chọn cuối cùng trong nhóm này (biểu tượng mắc xích

bị phân đôi), thì độ kéo giãn của đối tượng theo chiều ngang và chiều dọc

sẽ diễn ra đồng thời, ngược lại việc hiểu chỉnh kích thước theo chiều dài

và chiều rộng là độc lập

Hình 1.19 – Vùng canh chỉnh vị trí và kích thước Align

Trang 25

- 25 -

- Nhóm thứ hai: Rotate (hiệu chỉnh góc

quay), Skew (hiệu chỉnh góc dịch

chuyển xiêng – hay độ kéo trượt theo

hai phía)

- Nhóm thứ 3: liên quan đến tọa độ 3D

và điểm trọng tâm 3D Chức năng

này chỉ hoạt động đối với biểu tượng

MovieClip Chúng tôi sẽ trình bày kĩ

hơn về biểu tượng này trong chương

3

o Vùng History (Ctrl+F10): quản lý lịch

sử các thao tác của bạn khi sáng tác

Bạn chỉ việc chọn thời điểm được chỉ định trong vùng History này để phục hồi các thao tác được đánh dấu tại thời điểm đó

o Vùng Color: quản lý màu sắc Bạn có thể

hiệu chỉnh trực tiếp màu sắc cho đối tượng (chọn đối tượng, sau đó bấm vào bảng màu) hoặc có thể

kết hợp với công cụ đổ màu mà ta sẽ tìm hiểu trong chương tiếp theo

Hình 1.22 – Bảng màu chuẩn Trong bảng màu chuẩn này, ta có thể chọn mẫu màu RGB thông dụng, mẫu màu HSL – bằng cách bấm chuột vào biểu tượng quả cầu phía trên bên phải Hoặc chọn không màu bằng cách bấm vào biểu tượng hình vuông gạch chéo Bạn cũng có thể chọn chế độ Transparent bằng cách điều chỉnh thông số Alpha

Bảng màu chuẩn còn cung cấp cho chúng ta một số mẫu màu Gradient có sẵn

Hình 1.20 – Vùng Transform

Hình 1.21 – Vùng History

Trang 26

Nếu nhu cầu sử dụng màu trong bảng màu chuẩn không đáp ứng đủ, bạn có thể

sử dụng bảng màu nâng cao (tổ hợp phím Alt+Shift+F9)

Trong bảng màu nâng cao này, nếu bạn muốn hiệu chỉnh màu cho viền thì bấm chọn stroke, nếu muốn hiệu chỉnh cho màu nền thì chọn fill Trong hộp thoại thả xuống, có các chế độ màu sau đây:

+ None: không chọn màu

+ Solid Color: chọn màu đơn (hay màu đặc) Bạn có thể chọn mẫu màu theo chế

độ RGB hoặc HSL Có thể hiệu chỉnh thuộc tính Alpha của nó Nói chung, chế

độ Solid hoàn toàn giống với bảng màu chuẩn ở trên

+ Linear Gradient: pha trộn màu theo dạng cầu vồng với các cầu vồng phân bố theo đường thẳng

Hình 1.23 – Chế độ màu Solid Color Hình 1.24 – Chế độ màu Linear Gradient Khác với solid, chế độ Linear Gradient cho ta các hiệu chỉnh màu sắc hấp dẫn hơn với dạng thức cầu vồng Bạn có thể hiệu chỉnh thuộc tính Flow là một dải màu biến thiên theo thang màu bên dưới (Extend color) hoặc chế độ màu phản

xạ (Reflect) hoặc chế độ màu lặp (Repeat) Nếu bạn muốn thay đổi màu trong thang Gradient, bạn chỉ việc bấm chọn nút đánh dấu ở mỗi màu trong thang màu

ở bên dưới, sau đó chọn lại màu mới (hoặc kích đối chuột vào nút này, rồi chọn lại màu mới) Nếu bạn muốn bổ sung thêm một màu trong thang màu Gradient,

bạn chỉ việc bấm chọn vào một vị trí bất kì trên thang màu bên dưới Ngược lại,

nếu bạn muốn loại bỏ một màu ra khỏi thang màu Gradient, bạn chỉ việc kéo thả

nó ra khỏi thang màu này Bạn thấy đấy, việc sử dụng màu Gradient rất đơn giản

Trang 27

- 27 -

+ Radial Gradient: hoàn toàn tương tự Linear Gradient, chỉ có duy nhất một sự khác biệt là Radial Gradient tạo màu cầu vồng theo dạng xoáy tròn khác với Linear Gradient theo dạng đường thẳng

+ Fill Bitmap: với chức năng này, bạn có thể đổ màu cho đối tượng bằng các bức ảnh Đây là một cách tạo hiệu ứng màu khá thú vị, rất hữu dụng trong nhiều

tình huống

o Vùng Common Library (Buttons, Classes

và Sounds): quản lý các dạng button, các lớp thư viện và âm thanh

o Vùng Component (Ctrl+F7): quản lý các thành phần GUI trong Flash Bạn có thể sử dụng các đối tượng này để tạo một giao diện web, một trình ứng dụng

o Vùng Library (Ctrl+L): quản lý các đối tượng được import và convert Chúng ta sẽ đi vào chi tiết về vùng này trong các chương sau

o Vùng Motion Presets: vùng cung cấp các

chế độ tạo hoạt hình có sẵn của Flash Bạn chỉ

việc chọn đối tượng, sau đó chọn hiệu ứng và nhấp Apply Lập tức bạn sẽ có một hiệu ứng hoạt hình như mong đợi

o Vùng Code Snippets: tương tự như Motion Presets, đây là vùng tạo ActionScript có sẵn của Flash

Ta chỉ việc chọn đối tượng, sau đó nhấp vào chức năng tương ứng, lập tức

một đoạn mã ActionScript sẽ

được phát sinh tương ứng với

đối tượng được chọn theo chức

năng mà bạn đã chọn

Chức năng này cũng rất hữu ích

cho những người dùng phổ

thông, muốn tạo các

ActionScript để điều khiển đối

tượng nhưng lại ngại tìm hiểu

về ngôn ngữ lập trình này bởi

nhiều lý do khách quan lẫn chủ

quan Tuy nhiên, bạn cũng cần

lưu ý rằng, chức năng này chỉ

cung cấp một vài tính năng chứ

không phải là tất cả, bởi vậy,

nếu bạn muốn tạo một thước

Hình 1.25 – Vùng Motion Presets

Hình 1.26 – Vùng Code Snippets

Trang 28

phim chuyên nghiệp, bạn cần có sự hiểu biết tương đối đầy đủ về ngôn ngữ

lập trình ActionScript mạnh mẽ này được tích hợp trong Flash

Chúng ta sẽ tìm hiểu về vùng chức năng này sau khi tìm hiểu về ngôn ngữ lập trình ActionScript Trong vùng chức năng Code Snippets có các nhóm hiệu ứng Action sau đây:

- Actions: tạo sẵn các hiệu ứng liên quan đến các hành động của đối tượng

- Timeline Navigation: điều khiển quá trình chơi phim Nó cũng tương tự như thanh PlayBack khi điều khiển một thước phim Trong giáo trình này, chúng ta sẽ thảo luận việc tạo một thanh PlayBack bằng ActionScript mà không cần sử dụng chức năng Code Snippets Chi tiết chúng ta sẽ tìm hiểu trong chương 6 Sau khi tìm hiểu về cách tạo thanh PlayBack không cần dùng đến chức năng Code Snippets, tôi đề nghị bạn hãy sử dụng chức năng này để tạo thanh PlayBack

- Animation: tạo các hiệu ứng động cho các đối tượng MovieClip

- Audio and Video: các chức năng của thanh PlayBack để điều khiển video

và audio khi các đối tượng này được sử dụng trong Flash

- Load and Unload: tạo một màn hình Splash khi phim được tải Tải và hủy

tải các bức ảnh, đoạn phim,… trong phim Flash được tạo

- Event Handlers: quản lý việc thực thi các Event Event là các sự kiện tương ứng với một hành động nào đó của đối tượng Nó có thể là hành động khi phim được tải (On_Enter), hành động tương ứng với sự kiện của chuột, của bàn phím Các Event sẽ được quản lý bởi các lớp tương ứng Các lớp này cung cấp các chức năng để lắng nghe các Event diễn ra trên

mỗi đối tượng Khi có một Event nào đó xảy ra, tương ứng với các hàm được triệu gọi, nó sẽ thực thi các chức năng tương ứng

Chi tiết về các nhóm chức năng này, ta sẽ

tìm hiểu thêm trong chương ActionScript

o Vùng String: cho phép bạn tùy chọn

ngôn ngữ cho thước phim của mình

Nếu bạn muốn phim của bạn hiển thị

đúng ngôn ngữ trên các máy tính khác

nhau, bạn hãy hiệu chỉnh trong vùng

String này

o Thay đổi phím tắt trong Adobe Flash:

vào Insert > KeyBoard Shortcuts

Nếu muốn thay đổi phím tắt tương ứng với

một chức năng nào đó, bạn hãy chọn chức

năng tương ứng trên vùng Commands, sau

đó ở mục ShortCuts, bạn bổ sung tổ

hợp phím tắt Nếu muốn loại bỏ một Hình 1.27 – Hộp thoại quản lý phím tắt

Trang 29

những máy tính không cho phép bạn lưu lại những thiết lập phím tắt

Trang 30

TỔNG KẾT CHƯƠNG 1

Trong chương này, chúng ta đã làm quen với một số khái niệm cơ bản về đồ

họa, cái khái niệm về Flash Chúng ta cũng tìm hiểu về một số vùng chức năng

của Flash Các vùng chức năng này được bố trí trong menu Windows

Chúng tôi hi vọng, sau khi kết thúc chương này, bạn không còn ngỡ ngàng trước giao diện của Flash Bạn sẽ tùy biến giao diện cho phù hợp với chính bạn

Một điều giúp bạn trở nên chuyên nghiệp hơn là bạn nên nhớ các phím tắt khi thao tác Nếu các phím tắt được bố trí không thuận tiện, bạn có thể thay đổi nó

nhờ vào Keyboard Shortcuts

Trang 31

- 31 -

Blank Page

Trang 32

CHƯƠNG 2 CÁC CÔNG CỤ VẼ CƠ BẢN

2.1 Các công cụ Pencil, Brush và Erase

Công c ụ Pencil

Hình 28 – Công cụ Pencil Đối với công cụ Pencil, bạn có thể dùng để vẽ các đối tượng bằng tay Các thuộc tính tương ứng với công cụ Pencil mà bạn có thể hiệu chỉnh là:

- Stroke color: màu sắc của nét vẽ

- Stroke: kích thước của nét vẽ

- Style: dạng thức của nét vẽ - đường liền nét, đứt nét…

Công cụ Brush

Cũng tương tự công cụ Pencil, Brush cũng được dùng để vẽ Chỉ có một khác

biệt là nét vẽ của Brush không bao gồm viền chỉ có màu nền, còn Pencil thì ngược lại chỉ có màu viền không có màu nền Các thuộc tính của Brush bao

gồm:

- Fill color: chọn màu cho nét vẽ brush

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

Trang 33

- 33 -

Hình 29 – Công cụ Brush

Công cụ Spray Brush

Khi bạn bấm vào biểu tượng tam giác nhỏ ở trên biểu tượng Brush, thì sẽ xuất

hiện biểu tượng của Spray Brush

Đây là công cụ phun màu tuyệt vời của Flash Bạn có thể định nghĩa mẫu màu

để phun, các chế độ phun màu: góc nghiêng, độ rộng, độ cao, chế độ xoay các biểu tượng theo góc ngẫu nhiên,…

Để tự định nghĩa một mẫu màu tô, bạn phải tạo một biểu tượng – hoặc là Graphic, Button hoặc MovieClip Chúng ta sẽ thảo luận chi tiết về chúng trong chương 3 Ở đây, để minh họa cho một mẫu tô màu, chúng ta sẽ sử dụng biểu tượng MovieClip mà không thảo luận thêm về nó

Để tạo một kiểu phun màu như trong hình minh họa, bạn phải làm theo các bước sau đây:

Bước 1: Định nghĩa một mẫu màu Bạn hãy vẽ một hình đại diện Ví dụ trong

trường hợp của tôi, tôi sử dụng hình ngôi sao 10 cánh có chiều dài của các cánh xen kẻ nhau – tức là cánh dài, cánh ngắn liên tiếp nhau

Bước 2: Hiệu chỉnh kích thước của nó sao cho phù hợp Kích chuột phải vào nó,

chọn Convert to Symbol > MovieClips và nhấp Ok

Bước 3: Bấm chọn công cụ Spray Brush Trong bảng Properties, chọn mục

Symbol, chọn nút Edit, và chọn biểu tượng mà ta vừa tạo Sau đó, bạn hãy hiệu chỉnh các thuộc tính trên bảng Properties này như: độ kéo rộng của biểu tượng khi phun (scale width), độ kéo dài của biểu tượng khi phun (scale height), độ rộng của đường phun (width), độ cao của đường phun (height), góc phun (Brush

Trang 34

angle) Các chế độ tạo mẫu ngẫu nhiên: độ kéo giãn của biểu tượng (random scaling), góc xoay của biểu tượng (rotate symbol), góc phun (random rotation)

Hình 2.30 – Công cụ Spray Brush

Trang 35

- Stroke color: chọn màu cho đường thẳng

- Stroke: kích thước của nét vẽ

- Style: dạng thức của nét vẽ

Công cụ Rectangle

Là công cụ sử dụng để vẽ hình chữ nhật và các dạng biến thể của nó Dạng biến thể này có thể là hình chữ nhật có góc tròn Hình vuông hay hình bình hành cũng là các trường hợp riêng khi sử dụng công cụ này Khi muốn vẽ hình có tỉ lệ chiều ngang và chiều dọc bằng nhau (hình vuông chẳng hạn), ta nhấn phím Shift

Khi bấm vào biểu tượng công cụ Rectangle, trong bảng thuộc tính Properties của

nó, ta chú ý đến các thuộc tính sau đây:

- Stroke color: chọn màu viền cho nét vẽ

- Fill color: chọn màu nền cho nét vẽ

- Stroke: kích thước của nét vẽ

Hình 32 – Công cụ Rectangle

- Style: dạng thức của nét vẽ

- Scale: độ kéo dãn của hình được vẽ Nó có thể là None, Normal, Horizontal

hoặc Vertical – tương ứng với không kéo giãn, kéo giãn bình thường, kéo giãn theo chiều ngang và theo chiều dọc

Trang 36

- Hinting: giúp bảo vệ nét vẽ ở đường cong khỏi bị mờ

- Cap: thiết lập dạng thức cho đường kết thúc

- Join: xác định cách mà hai phân đoạn của đối tượng nối với nhau

- Mitter: điều khiển độ sắc nét của Mitter, khi Cap được chọn là Mitter

- Rectangle Option: cho phép hiệu chỉnh góc tròn cho hình chữ nhật Nếu bạn

chọn Lock Corner Radius Controls to one Control – giúp bạn cho phép chỉnh

góc tròn của hình chữ nhật theo dạng 4 góc đồng thời hay riêng lẻ - tức là khi

bạn hiệu chỉnh độ cong của một góc, các góc khác cũng sẽ sao chép số liệu của góc hiệu chỉnh này Các số liệu 4 góc ở phía trên tương ứng với độ cong của các góc Bạn có thể nhập số liệu vào các ô được cung cấp sẵn, hoặc sử dụng thanh trượt ở phía bên dưới để hiệu chỉnh độ cong các góc cho hình chữ nhật cong này

- Reset: đưa về các số liệu tùy chỉnh mặc định cho các góc tròn

Công cụ Oval

Vẽ các hình Oval Khi bấm chọn vào biểu tượng tam giác nhỏ ở phía dưới biểu tượng Rectangle, sẽ xuất hiện biểu tượng Oval này Khi sử dụng công cụ Oval,

ta chú ý đến điểm sau đây: nếu muốn tỉ lệ chiều ngang và chiều dọc luôn cân

bằng nhau khi vẽ (ví dụ khi vẽ hình tròn) thì ta giữ phím Shift và vẽ, ngược lại tỉ

lệ đó sẽ không cân bằng giữa chiều dọc và chiều ngang (ví dụ khi vẽ hình Eclipse)

Hình 33 – Công cụ Oval Trong bảng thuộc tính Properties, ta có các tùy chọn sau đây:

ọn màu cho nét vẽ

Trang 37

- 37 -

- Fill color: chọn màu nền cho hình thể

- Stroke: chọn kích thước của nét vẽ

- Scale: độ kéo dãn của hình được vẽ Nó có thể là None, Normal, Horizontal

hoặc Vertical

- Hinting: giúp bảo vệ nét vẽ ở đường cong khỏi bị mờ

- Cap: thiết lập dạng thức cho đường kết thúc

- Join: xác định cách mà hai phân đoạn của đối tượng nối với nhau

- Mitter: điều khiển độ sắc nét của Mitter, khi Cap được chọn là Mitter

- Oval Option: góc mở Start Angle và góc đóng End Angle giúp tạo hình Oval

nhờ vào sự giới hạn của hai góc này Góc mở Start Angle quay theo chiều kim đồng hồ, lấy vị trí gốc là vị trí góc 900

, số đo của góc chính là số đo góc của

phần bị khuyết Góc đóng End Angle quay theo chiều ngược kim đồng hồ, số đo góc phần bị khuyết là góc bù 2 của góc này (tức 360-góc đóng)

Ví dụ, khi thiết lập góc mở Start Angle là 600, ta thu được hình như sau

Hình 34 – Hình tạo bởi góc mở Trong hình này, góc khuyết có số đo là 600 Góc khuyết sẽ được lấy từ vị trí 900

và quay theo chiều kim đồng hồ Nếu ta thiết lập góc đóng End Angle là 600

, ta

sẽ thu được hình như sau

Hình 35 – Hình tạo bởi góc đóng Trong hình này, góc khuyết có số đo là 3600

-600=3000, hay phần hình thể chiếm

600 Góc khuyết sẽ được lấy từ vị trí 900 và quay theo chiều ngược kim đồng hồ

Trang 38

Tương tự như trên, ta có thể kết hợp hình thể có số đo góc đóng 600

và góc mở

1200 Ta sẽ thu được hình thể bên dưới Phần hình thể được vẽ ra là sự kết hợp của cả hai hình tạo bởi góc đóng và góc mở như trên

Hình 36 – Hình tạo bởi góc đóng và góc mở

- Inner Radius: độ lớn bán kính của đường tròn bên trong Đây là cách thức để

tạo hình vành khăn Hình vành khăn là hình được tạo bởi hai đường tròn đồng tâm, những phần chồng khít nhau sẽ bị loại bỏ

- Close Path: có tác dụng đối với hình thể tạo bởi góc đóng và góc mở Nó sẽ tự động làm cho các đường kết nối trở nên liền mạch

Hình 2.10 – Hình tạo bởi góc mở 600 và kết hợp với tùy chọn Close Path Hình bên trái không kích hoạt Close Path Hình bên phải kích hoạt Close Path Như ta thấy, với tùy chọn Close Path, hình thể sẽ được khép kính và thuộc tính Fill Color mới có tác dụng

Công cụ Rectangle Primitive

Khi bấm vào biểu tượng hình tam giác nhỏ ở trên công cụ Rectangle, ta sẽ thấy

xuất hiện công cụ Rectangle Primitive Tương tự công cụ Rectangle, nhưng với công cụ này, ta có thể hiệu chỉnh góc tròn của nó sau khi nó được tạo ra Đây là

một ưu điểm của công cụ này

Nếu muốn thay đổi góc tròn, ta chỉ cần dịch chuyển các nút nhấn nhờ vào công

cụ Selection sang trái hoặc phải (đối với nút nhấn nằm ngang) hoặc lên xuống (đối với nút nhấn nằm dọc) Chi tiết về công cụ Selection ta sẽ thảo luận trong các phần tiếp theo Công cụ Selection này có biểu tượng hình con trỏ chuột, màu đen, nằm phía trên cùng của thanh công cụ Các tùy chỉnh thuộc tính trong bảng thuộc tính Properties hoàn toàn tương tự với công cụ Rectangle

Góc đóng

Góc mở

Trang 39

- 39 -

Bạn cũng cần lưu ý rằng, công cụ Rectangle Primitive dựa trên cơ sở của Rectangle Điều này bạn có thể nhận thấy được khi phát họa hình bằng công cụ này: có một hình chữ nhật góc cạnh bao quanh hình thể của chúng ta

Hình 2.11 – Công cụ Rectangle Primitive

Công cụ Oval Primitive

Hoàn toàn tương tự công cụ Oval Bạn có thể hiệu chỉnh các thuộc tính góc mở, góc đóng, bán kính của hình vành khăn Và cũng tương tự công cụ Rectangle Primitive, ta có thể hiệu chỉnh các thuộc tính của hình đã vẽ nhờ vào các nút

nhấn nhấn Nút nhấn trung tâm dùng để điều chỉnh kích thước bán kính vành khăn Nút nhấn biên ngoài dùng để điều chỉnh góc đóng, góc mở

Việc hiệu chỉnh các góc đóng, góc mở, bán kính vành khăn cũng nhờ vào công

cụ Selection mà chúng ta sẽ làm quen trong mục tiếp theo

Bạn cũng cần lưu ý, cũng giống công cụ Oval, để tạo dựng các hình thể sao cho chiều ngang và chiều dọc (như hình tròn) bằng nhau nhờ vào Oval Primitive, ta cũng nhấn và giữ Shift khi vẽ hình

Với công cụ này, ta có thể tạo ra các hình dạng phức tạp mà không cần hiệu chỉnh các thông số ban đầu như công cụ cùng loại Oval Chỉ cần hiệu chỉnh các nút điều khiển trên các khối hình cơ sở là ta đã nhận được những hình biến thể độc đáo Hình cơ sở của nó cũng là hình chữ nhật (hình Oval có biên ngoài nội

tiếp hình chữ nhật này)

Trang 40

Hình 2.12 – Công cụ Oval Primitive

Công cụ PolyStar

Dùng để vẽ đa giác và hình sao Khi bấm chọn công cụ này, ta chú ý các tùy chọn trong bảng thuộc tính Propeties

- Fill color: chọn màu nền cho vật thể

- Stroke color: chọn màu viền cho nét vẽ

Định dạng
Số trang	209
Dung lượng	8,76 MB