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

TRƯỜNG ĐẠI HỌC AN GIANG
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
Email:


1


Mục tiêu bài giả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.
• 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
đồ họa, video, hoạt hình và truy xuất dữ liệu từ XML
Trường Đại học An Giang

2


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

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

3


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
BÀI TẬP THỰC HÀNH

TÀI LIỆU THAM KHẢO
Trường Đại học An Giang

4

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

Lịch sử ra đời của Flash: ….
Đồ họa điểm: …..
Đồ họa Fractal: …..
Đồ họa Vecter: ….

2/. So sánh Flash với Silverlight và JavaFx:
- Flash ….. Adove
- Silverlight ….. Microsoft
- JavaFx …. Sun
Trường Đại học An Giang

5


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.
 Vùng TimeLine và Layer ở phía bên dưới.
Trường Đại học An Giang

6

 Thanh trình đơn

 Thuộc tính và thư viện

 Thanh Công cụ

 Trung tâm

 TimeLine và Layer

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

7


- Tạo mới dự án:
+ ActionScript 3.0
+ Adove Air
+ Air for Android
+ Air for iOS
+ Flash Lite 4
- Layer; Frame; Scene và Movie:
+ Layer:
+ Frame:
+ Scene:
+ Movie:
Trường Đại học An Giang

8

-

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:

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

9


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

d/. Erase:
2/. Cơng cụ vẽ hình cơ bản:
a/. Line:
b/. Rectangle, Rectangle Primitive:
c/. Oval, Oval Primitive:
d/. PolyStar:
Trường Đại học An Giang

10

3/. Công cụ Text:
a/. Text Tool:

b/. Character:
c/. Show Border around Text:
d/. SubScript và SuperScript:
e/. Format:
f/. Spacing và Margin:
g/. Behavior:
h/. Orientation:
i/. Options:
j/. Filter:
Trường Đại học An Giang

11


4/. Công cụ chọn Selection và Lasso:
a/. Selection:
b/. Lasso:
5/. Công cụ đổ màu Paint Bucket, Ink Bottle và bắt
màu EyeDropper:
a/. Paint Bucket:
b/. Ink Bottle:
c/. EyeDropper:
6/. Công cụ Free Transform và Gradient Transform:
a/. Free Transform:
b/. Gradient Transform:
Trường Đại học An Giang

12


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:

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

13


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

14


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

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

15


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

16


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

17

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

18


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

19


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

20


4/. Làm việc với Library:
- Là quản lý các đối tượng được Import và Convert …

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

21

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
Frame

nhiều

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

Vùng
thanh
công cụ

22


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

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

23


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

24


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)

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

25