Bài giảng thiết kế đồ họa

Mục tiêu bài giảng • Kỹ năng: Hướng dẫn sinh viên thiết kế các hiệu ứng, hoạt hình cho các trang web bằng công cụ Marcomedia Flash.. Trường Đại học An Giang 3 - Adove Flash là một phần

TRƯỜNG ĐẠI HỌC AN GIANG

1

KHOA KỸ THUẬT-CÔNG NGHỆ-MÔI TRƯỜNG

Tên GV: Huỳnh Thanh Việt

Tổ Bộ môn Tin Học

Mục tiêu bài giảng

• Kỹ năng:

Hướng dẫn sinh viên thiết kế các hiệu ứng, hoạt hình cho các trang web bằng công cụ Marcomedia Flash Lập trình cơ bản bằng ngôn ngữ Action Script Hướng dẫn chạy và debug lỗi chương trình Lập trình các ứng dụng

• Kiến thức:

Giới thiệu các chức năng thiết kế sẵn có của công cụ Adove Flash CS6 Cung cấp kiến thức lập trình với các đối tượng đồ họa Trình bày những tính năng cơ sở của ngôn ngữ lập trình Action Script

Trường Đại học An Giang 3

- Adove 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 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

- 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 2005 tương đối cũ Với phiên bản CS5, Adove

đã 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

Nội dung Bài giảng

Chương I: GIỚI THIỆU VỀ FLASH

Chương II: CÁC CÔNG CỤ VẼ CƠ BẢN

Chương III: CÁC BIỂU TƯỢNG TRONG FLASH

Chương IV: TẠO HOẠT CẢNH

Chương V: LẬP TRÌNH VỚI ACTIONSCRIPT

Chương VI: CÁC HIỆU CHỈNH NÂNG CAO

Chương VII: THƯ VIỆN PAPERVISION3D

Trường Đại học An Giang 5

1/ Sơ lược về đồ họa Vecter và lịch sử ra đời của Flash:

- Đồ họa điểm: …

- Đồ họa Fractal: …

- Đồ họa Vecter: …

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

2/ So sánh Flash với Silverlight và JavaFx:

- Flash … Adove

- Silverlight … Microsoft

- JavaFx … Sun

3/ Hướng dẫn cài đặt Adove Flash CS6:

4/ Giới thiệu về Adove Flash CS6:

- Khởi động

- Giao diện:

 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 cạnh thanh công cụ  Vùng sáng tác ở trung tâm

Trường Đại học An Giang 7

 Thanh trình đơn  Thuộc tính và thư viện  Thanh Công cụ

 Trung tâm

 TimeLine và Layer

- Tạo mới dự án:

+ ActionScript 3.0

+ Adove Air

+ Air for Android

+ Air for iOS

Trường Đại học An Giang 9

- Vùng thanh công cụ Tools:

- Vùng thuộc tính Properties:

- Vùng soạn thảo ActionScript:

- Các vùng chức năng khác:

1/ Các công cụ Pencil, Brush, Spray Brush, Erase:

Trường Đại học An Giang 11

4/ Công cụ chọn Selection và Lasso:

Trường Đại học An Giang 13

7/ Các công cụ làm việc với đường Bezier:

a/ SubSelection:

b/ Pen:

c/ Add Anchor Point:

d/ Convert Anchor Point:

8/ Làm việc với đối tượng:

1/ Biểu tượng Graphic:

- Biểu tượng Graphic là một hình ảnh tĩnh có thể tái tạo ra chuyển động Điểm ảnh hay vecter đều có thể chuyển đổi thành Graphic

- Để tạo Graphic:

+ Chọn đối tượng

+ F8 hoặc Convert to Symbol (ví dụ minh họa)

Trường Đại học An Giang 15

- Thuộc tính của biểu tượng Graphic:

2/ Biểu tượng Button:

- Biểu tượng Button dùng để bổ sung một tương tác với Movie đáp trả các sự kiện kích chuột, ấn phím, kéo các thanh kéo và các hành động khác (Up, Down, Over, Hit) Button có thể cài đặt và điều khiển bằng ActionScript

- Button : Simple Button và Button Lớp Simple Button là lớp Button do người dùng thiết kế và sử dụng Convert to Symbol Lớp Button còn lại nằm trong thư viện fl.Controls

Trường Đại học An Giang 17

- Để tạo Button :

+ Chọn đối tượng

+ F8 hoặc Convert to Symbol (ví dụ minh họa)

Trường Đại học An Giang 19

3/ Biểu tượng MovieClip:

- Là một biểu tượng hoạt hình của Flash Khác với Graphic và Button, MovieClip có riêng một TimeLine với vô số Frame Một MovieClip có thể có một hoặc nhiều Graphic, Buttton hoặc thậm chí là MovieClip, bạn có thể điều khiển nó bằng ActionScrip…

Trường Đại học An Giang 21

4/ Làm việc với Library:

- Là quản lý các đối tượng được Import và Convert …

1/ Tìm hiểu về TimeLine:

- Là vùng tương tác để tạo ra chuyển động trong Movie của Flash Để tạo ra chuyển động, TimeLine thay thế từng Frame một theo thời gian

Quản lý

các lớp

đối tượng

Chứa nhiều Frame

Vùng thanh công cụ

Trường Đại học An Giang 23

- F5: Sao chép một Frame cho các Frame tiếp theo

- F6: Tạo sự thay đổi Frame

• Tạo chuyển động: Frame by Frame (từ FLASH) (Hướng dẫn trong tài liệu

hình 73: Kĩ thuật Frame by Frame)

2/ Classic Tween:

- Là một kĩ thuật tạo chuyển động từ CS3 trở về trước

Từ CS4 Adove đã đưa một kĩ thuật mới là Motion Tween

• Tạo chuyển động: Classic Tween (quả bóng

chuyền) (Hướng dẫn trong tài liệu

hình 74: Kĩ thuật Classic Tween)

Trường Đại học An Giang 25

3/ Shape Tween:

- Là một kĩ thuật tạo chuyển động như biến hình …

• Tạo chuyển động: Shape Tween (đường thẳng …

đường cong) (Hướng dẫn trong tài liệu

hình 75: Kĩ thuật Shape Tween)

hình 77: Kĩ thuật Motion Tween)

Trường Đại học An Giang 27

Motion Editor: (Window chọn Motion Editor)

Motion Presets: (Window chọn Motion Presets)

Trường Đại học An Giang 29

Chữ chạy 3D

5/ Công cụ Bone và Bind

Công cụ Bone: có thể tạo ra các chuyển động dựa trên các khớp nối

- Trường hợp các khớp nối liên tục

- Trường hợp các khớp nối không liên tục

Thực hiện 2 ví dụ trong tài liệu…

Trường Đại học An Giang 31

Công cụ Bine: có thể tạo ra các chuyển động dựa trên các khớp nối Nhưng phải kết hợp với Bone

Công cụ Deco: Là công cụ trang trí nghệ thuật Có các hiệu ứng: Vine Fill (hiệu ứng dạng cây khô), Grid Fill (hiệu ứng dạng lưới), Symmetry Brush (hiệu ứng tính chất đối xứng), 3D Brush (phối màu từ nhiều đối tượng), Building Brush (tạo tòa nhà), Decorated Brush (tạo đường viền theo mẫu), Fire Animation (tạo ngọn lửa), Flame Brush (phun màu theo dạng ngọn lửa), Flower Brush (tạo các cành hoa), Lightning Brush (tạo tia sáng), Particle System (tạo chùm hạt được phóng ra từ một nguồn phát), 6/ Công cụ Deco

Trường Đại học An Giang 33

Trường Đại học An Giang 35

Công cụ 3d Translation: Là công cụ tạo chuyển động 3D cho đối tượng (Motion tween) Tìm hiểu ví dụ trong tài liệu để thực hành

7/ Công cụ 3D Translation và 3D Rolation

Công cụ 3d Rolation: Là công cụ xoay chuyển 3D cho đối tượng (Motion tween) Tìm hiểu ví dụ trong tài liệu để thực hành

MỤC TIÊU BÀI GIẢNG

Trường Đại học An Giang 37

1/ Các kiểu dữ liệu:

a/ Kiểu số nguyên:

- int: 4 byte, vùng giá trị từ −231 đến 231−1

(−2.147.483.648 đến 2147.483.647)

- uint: 4 byte, vùng giá trị từ 0 đế𝑛 231 − 1

 Lưu ý: chữ cái đầu viết thường (i nt)

b/ Kiểu số thực:

- Number: 32 bit

 Lưu ý: chữ cái đầu viết hoa (N umber)

c/ Kiểu Boolean:

- Boolean: Có hai giá tri là true và flase

 Lưu ý: chữ cái đầu viết hoa (B oolean)

1/ Các kiểu dữ liệu:

d/ Kiểu xâu String:

- String: Xâu kí tự được đánh dấu từ 0, phần từ cuối có chỉ số là xâu.lengh-1

 Lưu ý: chữ cái đầu viết hoa (S tring)

e/ Kiểu Array:

- Array hoàn toàn tương tự kiểu String

 Lưu ý: chữ cái đầu viết hoa (A rray)

f/ Kiểu đối tượng Object:

Trường Đại học An Giang 39

Trường Đại học An Giang 41

const b : String =“abc”;

 Lưu ý: giá trị của Biến có thể thay đổi – giá trị của

3/ Toán tử và biểu thức:

a/ Toán tử gán:

Gán Ý nghĩa

a = b + 2; Giá trị của a bằng giá trị của b cộng thêm 2

a = a + 1; Tăng giá trị của a lên 1

a = b = c = 5; Gán đồng thời nhiều giá trị Nó tương ứng

với các lệnh sau:

c = 5;

b = c;

Trường Đại học An Giang 43

b/ Toán tử thực hiện phép toán số học:

Toán tử Ý nghĩa

+ Phép cộng

- Phép trừ

* Phép nhân

/ Phép chia (chia nguyên đối với số nguyên)

% Chia lấy dư (chỉ với số nguyên)

c/ Toán tử logic:

Toán tử Phép toán a b Kết quả

Phủ định ! Một ngôi !a true - flase

flase - true

Và && a && b

true true true true flase flase flase true flase flase flase flase

Hoặc  a  b

true true true true flase true

Trường Đại học An Giang 45

Trường Đại học An Giang 47

f/ Toán tử tăng và giảm:

> = Lớn hơn hoặc bằng Nếu a lớn hơn

hoặc bằng b Nếu a bé hơn b Nếu a bé hơn hoặc

Trường Đại học An Giang 49

h/ Toán tử điều kiện:

i/ Toán tử phân tách: kí hiệu là dấu phẩy

j/ Toán tử chuyển đổi kiểu dữ liệu:

(kiểu dữ liệu) biến hoặc

(kiểu dữ liệu) (biến) hoặc

Trường Đại học An Giang 51

k/ Thứ tự ưu tiên của toán tử:

++ (tiền tố) ~ !sizeof new delete

Phải sang trái

* &

+ - (dấu dương âm)

k/ Thứ tự ưu tiên của toán tử:

Mức

ưu tiên Toán tử

Độ ưu tiên cùng

loại

Trường Đại học An Giang 53

4/ Kiểu dữ liệu mảng Array:

var mang1 : Array = new Array (2,4,6) ;

var mang2 : Array = [1,3,5,6] ;

VD: Truy cập vào các phẩn tử của mảng

var mang1 : Array = new Array (2,4,6) ;

var mang2 : Array = [1,3,5,6] ;

Trường Đại học An Giang 55

VD: Bổ sung (push) và loại bỏ (pop) phần tử của mảng

var mang : Array = new Array () ;

mang Push (1); // Giá trị hiện thời của mảng là 1

mang Push (5); // Giá trị hiện thời của mảng là 1 và 5

mang Pop (); // Giá trị hiện thời của mảng là 1

5/ Các cấu trúc lệnh điều khiển:

Trường Đại học An Giang 57

// biểu thức điều kiện sai

trace ( a+ ”không là số dương chẵn”);

}

VD: Giải phương trình bậc hai

Trường Đại học An Giang 59