bÀi 3 sử dụng symbol, bảng library và các công cụ nâng cao

BÀI 3SỬ DỤNG SYMBOL, BẢNG LIBRARY VÀ CÁC CÔNG CỤ

NÂNG CAO

NHẮC LẠI BÀI TRƯỚC

Giới thiệu về môi trường vẽ trong Adobe Flash CS4Làm việc với những công cụ vẽ hình trong FlashCS4: công cụ Line, công cụ Pen, công cụ TextTổ chức các lớp (layer) hình vẽCách sử dụng màu sắc trong FlashSử dụng symbol (biểu tượng) và Library

Giới thiệu về môi trường vẽ trong Adobe Flash CS4Làm việc với những công cụ vẽ hình trong FlashCS4: công cụ Line, công cụ Pen, công cụ TextTổ chức các lớp (layer) hình vẽCách sử dụng màu sắc trong FlashSử dụng symbol (biểu tượng) và Library

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 2

MỤC TIÊU BÀI HỌC

Sử dụng symbol (biểu tượng) và LibraryLàm việc với những công cụ nâng cao trong FlashCS4:

Spray BrushMaskCông cụ DecoCông cụ IK

Sử dụng symbol (biểu tượng) và LibraryLàm việc với những công cụ nâng cao trong FlashCS4:

Spray BrushMaskCông cụ DecoCông cụ IK

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 3

SYMBOL VÀ BẢNG LIBRARY TRONG FLASH CS4

SYMBOL

Mỗi file Flash chứa một thư viện riêng, lưu trữnhững symbol hay những thư viện: hình ảnh, âmthanh, video …Nội dung trong thư viện được hiển thị, quản lý trongLibraryBảng Libray: là công cụ tổ chức mạnh mẽ, xem, sắpxếp, chỉnh sửa và cung cấp thông tin symbol

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 5

Mỗi file Flash chứa một thư viện riêng, lưu trữnhững symbol hay những thư viện: hình ảnh, âmthanh, video …Nội dung trong thư viện được hiển thị, quản lý trongLibraryBảng Libray: là công cụ tổ chức mạnh mẽ, xem, sắpxếp, chỉnh sửa và cung cấp thông tin symbol

SYMBOL

Có khả năng xuất symbolđể sử dụng cho actionscript

Chia sẻ thư viện với nhữngfile .fla khác

Window > LibraryCtrl + L

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 6

Có khả năng xuất symbolđể sử dụng cho actionscript

Chia sẻ thư viện với nhữngfile .fla khác

Window > LibraryCtrl + L

SYMBOL

2 cách tạo symbol:Từ đối tượng có sẵn trên stageTạo symbol trống

Từ đối tượng có sẵn trên Stage:Sử dụng công cụ selection lựa chọn toàn bộ đốitượngChọn Modify > Convert to Symbol hoặc sử dụngphím tắt F8Chọn kiểu symbol là Graphic

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 7

2 cách tạo symbol:Từ đối tượng có sẵn trên stageTạo symbol trống

Từ đối tượng có sẵn trên Stage:Sử dụng công cụ selection lựa chọn toàn bộ đốitượngChọn Modify > Convert to Symbol hoặc sử dụngphím tắt F8Chọn kiểu symbol là Graphic

SYMBOL

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 8

Tên symbol

Kiểu symbol

Điểm tham chiếu, có tác dụng khixoay hình trên Stage

SYMBOL

Khi lựa chọn symbol, chú ý trên bảng properties

Thông tin về kiểu symbol

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 9

Vùng điều chỉnh vị trí, kíchthước symbol

Vùng điều chỉnh hiệu ứng,màu sắc, lặp

SYMBOL

Chú ý sự thay đổi trên bảng Library

Vùng xem thử symbol

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 10

Vùng quản lý symbol

SYMBOL

Điểm tham chiếu:Được xác định trong khi chuyển một đối tượng thànhsymbolVới đối tượng đối xứng điểm tham chiếu thường đượcxác định ở giữaVới đối tượng bất đối xứng điểm tham chiếu thườngđược xác định ở trên cùng bên tráiThay đổi được điểm đối xứng bằng cách di chuyểnartwork xung quanh con trỏ hình dấu thập trên Stagetrong chế độ Edit của symbol

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 11

Điểm tham chiếu:Được xác định trong khi chuyển một đối tượng thànhsymbolVới đối tượng đối xứng điểm tham chiếu thường đượcxác định ở giữaVới đối tượng bất đối xứng điểm tham chiếu thườngđược xác định ở trên cùng bên tráiThay đổi được điểm đối xứng bằng cách di chuyểnartwork xung quanh con trỏ hình dấu thập trên Stagetrong chế độ Edit của symbol

TẠO SYMBOL TRỐNG

Chọn toàn bộ đối tượng (ví dụ: đôi dép) với công cụSelectionEdit > Cut

Insert > New Symbol để mở hộp thoại Create NewSymbol, thiếp lập như hình

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 12

Chọn toàn bộ đối tượng (ví dụ: đôi dép) với công cụSelectionEdit > Cut

Insert > New Symbol để mở hộp thoại Create NewSymbol, thiếp lập như hình

TẠO SYMBOL TRỐNG

Chọn Edit > Paste in Center để dán đối tượng (đôidép) và Stage

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 13

Chọn Edit > Paste in Center để dán đối tượng (đôidép) và Stage

TẠO SYMBOL TRỐNG

Thoát khỏi chế độ Edit

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 14

Thoát khỏi chế độ Edit

SỬ DỤNG SYMBOL INSTANCE

Kéo symbol instance từ bảng Library ra Stage

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 15

CHỈNH SỬA SYMBOL

2 cách chỉnh sửa symbol:Từ symbol gốc trong bảng LibraryTừ bất kì symbol instance nào trên Stage

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 16

CHỈNH SỬA SYMBOL

Từ symbol gốc trong bảng Library:Nhấn đúp vào symbol trong Library để chuyển sangchế độ Edit

Nhấn đúp vào symbol ngay trongbảng Library, sau đó chỉnh sửa

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 17

Nhấn đúp vào symbol ngay trongbảng Library, sau đó chỉnh sửa

CHỈNH SỬA SYMBOL

Symbol sẽ xuất hiện trên Stage, trong chế độ Edit

Hoàn toàn chỉnh sửa được symbol: kích thước, màusắc, …

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 18

Symbol sẽ xuất hiện trên Stage, trong chế độ Edit

Hoàn toàn chỉnh sửa được symbol: kích thước, màusắc, …

CHỈNH SỬA SYMBOL

Từ bất kỳ symbol instance nào trên StageNhấn đúp vào symbol instance trên StageThay đổi kích thước (width, height) của symbol trênbảng PropertiesChú ý sau khi thay đổi toàn bộ instance khác củasymbol cũng thay đổi theo

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 19

Từ bất kỳ symbol instance nào trên StageNhấn đúp vào symbol instance trên StageThay đổi kích thước (width, height) của symbol trênbảng PropertiesChú ý sau khi thay đổi toàn bộ instance khác củasymbol cũng thay đổi theo

BẢNG LIBRARY

Tùy chọn của bảng Library

Bảng Library cung cấp một số cách để phân loại gọn gàng và tìm kiếm cácphần tử

A. Vùng chọn Library: di chuyển qua các thư việnkhác

A. Cửa sổ xem trước: hiển thị nội dung symbolB. Xóa symbolC. Các thuộc tính của symbolD. Tạo thư mục mới chứa symbolE. Tạo symbol mớiF. MenuG. Bảng New Library: mở một bảng Library képH. Pin current library: giữ cho thư viện hiện tạiđược mở ngay khi chuyển sang file khác

Bảng Library cung cấp một số cách để phân loại gọn gàng và tìm kiếm cácphần tử

A. Vùng chọn Library: di chuyển qua các thư việnkhác

A. Cửa sổ xem trước: hiển thị nội dung symbolB. Xóa symbolC. Các thuộc tính của symbolD. Tạo thư mục mới chứa symbolE. Tạo symbol mớiF. MenuG. Bảng New Library: mở một bảng Library képH. Pin current library: giữ cho thư viện hiện tạiđược mở ngay khi chuyển sang file khác

Slide 2 - Làm quen với công cụ vẽ và sử dụng Symbol, bảng Library 20

BẢNG LIBRARY

Di chuyển symbol trong bảng Library:Nhấn giữ chuột và di chuyển trực tiếp symbol vào vịtrí khác hoặc thư mục symbol khácSử dụng lệnh Move to

Slide 2 - Làm quen với công cụ vẽ và sử dụng Symbol, bảng Library 21

BẢNG LIBRARY

Hộp thoại Move to xuất hiện

Di chuyển symbol tớimột thư mục mới

Slide 2 - Làm quen với công cụ vẽ và sử dụng Symbol, bảng Library 22

Di chuyển symbol tớimột thư mục đã cótrong bảng Library

CÔNG CỤ NÂNG CAO

SPRAY BRUSH

Công cụ Spray brush: đổ symbol lên bên mặt thiếtkếSử dụng file fl0501.flaChọn công cụ Spray brush ( ) trên bảng ToolsTrên bảng Properties nhấn nút Edit để lựa chọnsymbol sẽ phun

Công cụ Spray brush: đổ symbol lên bên mặt thiếtkếSử dụng file fl0501.flaChọn công cụ Spray brush ( ) trên bảng ToolsTrên bảng Properties nhấn nút Edit để lựa chọnsymbol sẽ phun

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 24

SPRAY BRUSH

Thực hiện thiết lập như hìnhScale width: 50%Scale height: 50%Width: 200pxHeight: 200px

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 25

% độ phủ của symbol

SPRAY BRUSH

Nhấn và thả chuột vào chính giữa Stage symbolsẽ được phun với chiều rộng, chiều cao vừa đặt

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 26

MASK (MẶT NẠ)

Thay đổi tên Layer 1 starsKéo layer background xuống dưới layer stars

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 27

MASK (MẶT NẠ)

Nhấn chuột phải (window) hoặc Ctrl + nhấn chuột(MacOS) vào layer maskChọn mask từ menu ngữ cảnh

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 28

Kết quả

CÔNG CỤ DECO

Có tác dụng giúp phân bố symbol có tổ chức hơnSử dụng công cụ Rectangle vẽ hình chữ nhật trênStageChọn công cụ Deco ( ) từ bảng ToolsTrong vùng Drawing Effect của bảng Properties chọnGrid Fill

Có tác dụng giúp phân bố symbol có tổ chức hơnSử dụng công cụ Rectangle vẽ hình chữ nhật trênStageChọn công cụ Deco ( ) từ bảng ToolsTrong vùng Drawing Effect của bảng Properties chọnGrid Fill

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 29

CÔNG CỤ DECO

Nhấn nút Edit, chọn circPattern từ hộp thoại SwapSymbol

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 30

CÔNG CỤ DECO

Tiếp tục thiết lập thông số như hình• Horizontal: 2px• Verical: 2px• Pattern scale: 60%

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 31

CÔNG CỤ DECO

Nhấn vào hình chữ nhật đã vẽ ở bước 1 mẫu hoavăn (pattern) dạng khung lưới được tạo

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 32

CÔNG CỤ DECO

Sử dụng công cụ selection để chọn hình chữ nhật vànhấn Delete để xóa đi

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 33

CÔNG CỤ DECO

Sử dụng một symbol Movie Clip cùng với các layermask và layer background để đơn giản hóa quátrình làm việcNhấn đúp vào movie clip Segment3 trong bảngLibrary để chuyển sang chế độ Edit symbolChọn layer contentChọn công cụ DecoChọn Symetric Brush trong vùng Drawing Effecttrong bảng Properties OKChọn Rotate Around Point từ menu AdvancedOptions thả xuống

Sử dụng một symbol Movie Clip cùng với các layermask và layer background để đơn giản hóa quátrình làm việcNhấn đúp vào movie clip Segment3 trong bảngLibrary để chuyển sang chế độ Edit symbolChọn layer contentChọn công cụ DecoChọn Symetric Brush trong vùng Drawing Effecttrong bảng Properties OKChọn Rotate Around Point từ menu AdvancedOptions thả xuống

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 34

CÔNG CỤ DECO

Đưa giao điểm của hai đường đồ thị về chính giữaStage để đảm bảo rằng công cụ Deco sẽ vẽ ở chínhgiữa Stage

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 35

CÔNG CỤ DECO

Nhấn và kéo chuột hướng ra phía ngoài so với vùngchính giữa của Stage tới khi xuất hiện 8 đường tròn

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 36

CÔNG CỤ DECO

Chuyển sang công cụ Selection để chọn hình vẽ vừatạoChọn Modify > Convert to Symbol để chuyển hìnhvẽ thành dạng symbol:

Type: graphicName: halo

Nhấn delete để xóa symbol vừa tạo trên StageChọn công cụ DecoChọn Symmetry Brush từ menu Drawing Effect xổxuốngNhấn nút Edit để chọn symbol halo

Chuyển sang công cụ Selection để chọn hình vẽ vừatạoChọn Modify > Convert to Symbol để chuyển hìnhvẽ thành dạng symbol:

Type: graphicName: halo

Nhấn delete để xóa symbol vừa tạo trên StageChọn công cụ DecoChọn Symmetry Brush từ menu Drawing Effect xổxuốngNhấn nút Edit để chọn symbol halo

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 37

CÔNG CỤ DECO

Chọn Grid Translation trong vùng Advanced OptionsKhi các đường đồ thị xuất hiện trên Stage, sử dụnggiao điểm để kéo những đường này về vùng chínhgiữa StageĐặt con trỏ chuột vào giao điểm của hai đường đồthị sau đó nhấn và kéo chuột từ tới khi tạo ra 4 thểhiện của symbol halo

Chọn Grid Translation trong vùng Advanced OptionsKhi các đường đồ thị xuất hiện trên Stage, sử dụnggiao điểm để kéo những đường này về vùng chínhgiữa StageĐặt con trỏ chuột vào giao điểm của hai đường đồthị sau đó nhấn và kéo chuột từ tới khi tạo ra 4 thểhiện của symbol halo

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 38

CÔNG CỤ DECO

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 39

CÔNG CỤ DECO

Nhấn và kéo từng điểm điều khiển trên các trục đồthị để mở rộng khung lưới chứa symbol tới khi xuấthiện 16 symbol với 4 dòng và 4 cột. Thay đổi góccủa trục X như hình dưới đây

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 40

CÔNG CỤ DECO

Sử dụng công cụ Free Transform để thay đổi symbol

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 41

CÔNG CỤ IK

Inverse Kinematics (IK) được sử dụng để tạo ra cácchuyển động chân thực dưới dạng hình vẽ khớp nối(hoạt hình, nhân vật 3D)

Chọn công cụ Bone ( ) từ bảng ToolsSử dụng chuột kéo như hình vẽ từ đầu đến cuối hìnhchú tằm

Inverse Kinematics (IK) được sử dụng để tạo ra cácchuyển động chân thực dưới dạng hình vẽ khớp nối(hoạt hình, nhân vật 3D)

Chọn công cụ Bone ( ) từ bảng ToolsSử dụng chuột kéo như hình vẽ từ đầu đến cuối hìnhchú tằm

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 42

CÔNG CỤ IK

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 43

CÔNG CỤ IK

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 44

Sử dụng công cụ Selection để kéo các đoạn thân

TỔNG KẾT

Chú ý khi sử dụng symbol trong Flash CS4:2 cách chỉnh sửa symbol: Từ symbol gốc trong bảngLibrary, Từ bất kì symbol instance nào trên StageQuản lý symbol trên bảng Library

Sử dụng công cụ Deco sẽ tạo ra những hình vẽ vớisymbol được phân bố rõ ràng hơnCông cụ IK tạo ra những hình vẽ dạng khớp nối(dạng 3D)

Chú ý khi sử dụng symbol trong Flash CS4:2 cách chỉnh sửa symbol: Từ symbol gốc trong bảngLibrary, Từ bất kì symbol instance nào trên StageQuản lý symbol trên bảng Library

Sử dụng công cụ Deco sẽ tạo ra những hình vẽ vớisymbol được phân bố rõ ràng hơnCông cụ IK tạo ra những hình vẽ dạng khớp nối(dạng 3D)

Slide 3 - Sử dụng Symbol, bảng Library và các công cụ nâng cao 45