Bài giảng Lập trình web bài 2: Làm quen với công cụ vẽ và sử dụng Symbol bảng Library

BÀI 2 LÀM QUEN VỚI CÔNG CỤ VẼ VÀ SỬ DỤNG SYMBOL, BẢNG LIBRARY

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

Bước đầu làm quen với chương trình Adobe Flash Bước đầu làm quen với chương trình Adobe Flash CS4 CS4 Khởi tạo và lưu file trong Flash CS4 Khởi tạo và lưu file trong Flash CS4 Tùy biến không gian làm việc Tùy biến không gian làm việc Làm quen với các bảng, công cụ, định dạng file Làm quen với các bảng, công cụ, định dạng file trong Flash CS4 trong Flash CS4 Chuyển động (animation) trong Flash Chuyển động (animation) trong Flash Giới thiệu những tính năng mới trong Flash CS4 Giới thiệu những tính năng mới trong Flash CS4 3D trong Flash CS4 3D trong Flash CS4

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

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

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

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

MÔI TRƯỜNG VẼ TRONG FLASH CS4

Adobe Flash CS4 Professional cung cấp nhiều công Adobe Flash CS4 Professional cung cấp nhiều công cụ mạnh mẽ và các tính năng hữu ích giúp tạo ra cụ mạnh mẽ và các tính năng hữu ích giúp tạo ra những hình vẽ và dòng những hình vẽ và dòng Bất cứ hình vẽ nào được tạo ra trong Flash đều có Bất cứ hình vẽ nào được tạo ra trong Flash đều có thể tạo ra những chuyển động trên Timeline thể tạo ra những chuyển động trên Timeline 2 mô hình vẽ: 2 mô hình vẽ:

Merge Drawing (chế độ vẽ Merge) Merge Drawing (chế độ vẽ Merge) Object Drawing (chế độ vẽ vật thể) Object Drawing (chế độ vẽ vật thể)

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

MERGE DRAWING (CHẾ ĐỘ VẼ MERGE)

Là chế độ vẽ mặc định trong Flash CS4 Là chế độ vẽ mặc định trong Flash CS4 Trong chế độ vẽ này: Trong chế độ vẽ này:

Các hình vẽ dễ dàng được phân tách thành các phần Các hình vẽ dễ dàng được phân tách thành các phần nhỏ nhỏ Khi 2 hình vẽ chồng lên nhau, chúng sẽ tự động kết Khi 2 hình vẽ chồng lên nhau, chúng sẽ tự động kết hợp để tạo ra những hình vẽ phức tạp hợp để tạo ra những hình vẽ phức tạp

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

MERGE DRAWING (CHẾ ĐỘ VẼ MERGE)

Sử dụng công cụ Oval ( ) vẽ hình trên cửa sổ làm Sử dụng công cụ Oval ( ) vẽ hình trên cửa sổ làm việc việc Shift + di chuột để vẽ hình tròn Shift + di chuột để vẽ hình tròn

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

MERGE DRAWING (CHẾ ĐỘ VẼ MERGE)

Lựa chọn công cụ Selection ( ), lựa chọn 1 vùng trên hình vẽ và di chuyển vùng chọn ra vị trí khác

Hình vẽ dễ dàng được phân tách

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

MERGE DRAWING (CHẾ ĐỘ VẼ MERGE)

Sử dụng công cụ Oval vẽ thêm 1 hình tròn chồng Sử dụng công cụ Oval vẽ thêm 1 hình tròn chồng lên hình tròn trước lên hình tròn trước Nhấn đúp lên hình tròn vừa vẽ, di chuyển sang vị trí Nhấn đúp lên hình tròn vừa vẽ, di chuyển sang vị trí khác khác

Kết hợp của các hình được vẽ chồng nhau

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

OBJECT DRAWING (CHẾ ĐỘ VẼ VẬT THỂ)

Kiểm soát các đối tượng chặt chẽ hơn khi được vẽ Kiểm soát các đối tượng chặt chẽ hơn khi được vẽ Nhóm đường viền và vật thể lại với nhau giống như Nhóm đường viền và vật thể lại với nhau giống như trong Illustrator CS4 trong Illustrator CS4 Cung cấp khả năng ngăn xếp và sắp xếp hình vẽ với Cung cấp khả năng ngăn xếp và sắp xếp hình vẽ với chỉ một layer duy nhất chỉ một layer duy nhất

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

OBJECT DRAWING (CHẾ ĐỘ VẼ VẬT THỂ)

Nhấn chuột trên công cụ Oval để lựa chọn công cụ Nhấn chuột trên công cụ Oval để lựa chọn công cụ Polystar ( ) đang ẩn Polystar ( ) đang ẩn Nhấn chọn nút Object Drawing ( ) phía dưới bảng Nhấn chọn nút Object Drawing ( ) phía dưới bảng Tools Tools Sau đó vẽ hình chồng lên hình ban đầu đã vẽ Sau đó vẽ hình chồng lên hình ban đầu đã vẽ Di chuyển hình vừa được tạo để thấy sự khác biệt Di chuyển hình vừa được tạo để thấy sự khác biệt giữa 2 chế độ vẽ giữa 2 chế độ vẽ

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

OBJECT DRAWING (CHẾ ĐỘ VẼ VẬT THỂ)

Nhấn đúp chuột vào hình vừa vẽ để chỉnh sửa trong chế độ Object drawing

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

CÔNG CỤ VẼ HÌNH TRONG FLASH CS4

CÔNG CỤ LINE

Vẽ hình trong chế độ Object Drawing và làm việc với file fl0302.fla. Lựa chọn công cụ Line ( ) trên bảng Tools Tiến hành vẽ như sau

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

CÔNG CỤ LINE

Chuyển sang công cụ Selection Chuyển sang công cụ Selection Nhấn đúp vào đường vẽ vừa tạo để chỉnh sửa trong Nhấn đúp vào đường vẽ vừa tạo để chỉnh sửa trong chế độ Object Drawing chế độ Object Drawing Uốn cong đường thẳng khi có thêm Uốn cong đường thẳng khi có thêm

biểu tượng vòng cung ở công cụ biểu tượng vòng cung ở công cụ selection selection

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

CÔNG CỤ PEN

Lợi thế: Lợi thế:

Cho phép vẽ theo dạng point-to-point (chọn điểm) Cho phép vẽ theo dạng point-to-point (chọn điểm) Thêm/ bớt điểm trong khi vẽ Thêm/ bớt điểm trong khi vẽ Điều khiển được đường cong, chính giữa Điều khiển được đường cong, chính giữa

Sử dụng giống như công cụ Pen trong các chương Sử dụng giống như công cụ Pen trong các chương trình đồ họa khác (photoshop, illustrator) trình đồ họa khác (photoshop, illustrator)

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

CÔNG CỤ PEN

Thêm điểm neo: Thêm điểm neo:

Sử dụng công cụ Subselection ( ) để chọn đường biên Sử dụng công cụ Subselection ( ) để chọn đường biên của vật thể màu vàng  điều này sẽ làm hiển thị của vật thể màu vàng  điều này sẽ làm hiển thị những điểm neo đã tạo khi vẽ những điểm neo đã tạo khi vẽ

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

CÔNG CỤ PEN

Thêm điểm neo:

Nhấn chọn công cụ Add Anchor Point ( ) đang ẩn Nhấn chọn thêm điểm neo trên đường path

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

CÔNG CỤ PEN

Thêm điểm neo:

Chuyển sang công cụ subselection để điều chỉnh vị trí của điểm neo

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

COMBINE OBJECTS

Sử dụng để tạo ra những hình vẽ dạng phức tạp Modify > Combine Objects

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

COMBINE OBJECTS

Nhấn chọn toàn bộ hình con cá Nhấn chọn toàn bộ hình con cá Sau đó chọn Modify > Combine Objects > Union  Sau đó chọn Modify > Combine Objects > Union  chuyển đổi hình vẽ thành dạng đối tượng trong chế chuyển đổi hình vẽ thành dạng đối tượng trong chế độ vẽ đối tượng (object drawing) độ vẽ đối tượng (object drawing) Tiếp tục lựa chọn công cụ Polystar, kích hoạt chế độ Tiếp tục lựa chọn công cụ Polystar, kích hoạt chế độ vẽ đối tượng vẽ đối tượng

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

COMBINE OBJECTS

Nhấn nút Options trên bảng Property, đặt thông số như hình vẽ

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

COMBINE OBJECTS

Lựa chọn Edit > Select All để chọn toàn bộ vật thể Modify > Combine Objects > Punch. Tạo được hình ảnh như sau:

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

COMBINE OBJECTS

Combine Object

Từ trái quá phải: hình vẽ ban đầu, Intersect, Punch, Crop. Union: chuyển shape (hình vẽ) thành dạng đối tượng trong chế độ Object Drawing Intersect: giữ lại vùng giao của 2 hình chồng nhau Punch: dập shape (hình vẽ) phía trên ra khỏi shape (hình vẽ) phía dưới Crop: cắt shape (hình vẽ) phía dưới sao cho phù hợp với shape phía trên

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

CÔNG CỤ PRIMITIVE (SMART SHAPE)

Tạo ra những hình phức tạp (hình chữ nhật uốn vát Tạo ra những hình phức tạp (hình chữ nhật uốn vát góc, oval bán kính kép, …) từ những shape cơ bản góc, oval bán kính kép, …) từ những shape cơ bản Được giới thiệu từ phiên bản Flash CS3 Được giới thiệu từ phiên bản Flash CS3 Bao gồm các công cụ: Bao gồm các công cụ:

Oval Primitive Oval Primitive Rectangle Primitive Rectangle Primitive

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

CÔNG CỤ PRIMITIVE (SMART SHAPE)

Oval Primitive ( ) trên bảng Tools Oval Primitive ( ) trên bảng Tools Thiết lập trên bảng Tools: Thiết lập trên bảng Tools:

Màu tô: #000000 (màu đen) Màu tô: #000000 (màu đen) Màu đường viền: None Màu đường viền: None

Chọn View > Snapping > Snap to Objects Chọn View > Snapping > Snap to Objects Vẽ hình tròn cho con ngươi của mắt cá Vẽ hình tròn cho con ngươi của mắt cá Trên bảng Property, đặt những thuộc tính: Trên bảng Property, đặt những thuộc tính:

Start Angle Start Angle End Angle End Angle Inner Radius Inner Radius

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

CÔNG CỤ PRIMITIVE (SMART SHAPE)

Hình vẽ thay đổi sau khi thay đổi thông số

Thay đổi thông số trong phần Oval Options

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

CÔNG CỤ PRIMITIVE (SMART SHAPE)

Oval Primative

- Xuất hiện những điểm điều khiển rời rạc (giống như điểm neo) phía bên phải - Có thể nhấn và kéo các điểm này để thay đổi góc của hình vẽ (shape)

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

CÔNG CỤ PRIMITIVE (SMART SHAPE)

Công cụ Rectangle Primitive ( ) Công cụ Rectangle Primitive ( ) Thiết lập màu trên bảng Tools: Thiết lập màu trên bảng Tools: Màu tô: #FFFFFF (màu trắng) Màu tô: #FFFFFF (màu trắng) Màu đường viền: #000000 (màu đen) Màu đường viền: #000000 (màu đen)

Vẽ hình trên stage Vẽ hình trên stage Trong bảng Property, thay đổi thông số tùy chọn Trong bảng Property, thay đổi thông số tùy chọn trong vùng Rectangle Options trong vùng Rectangle Options

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

CÔNG CỤ PRIMITIVE (SMART SHAPE)

Thay đổi thông số Thay đổi thông số trong phần Rectangle trong phần Rectangle Options và chú ý sự Options và chú ý sự thay đổi trên hình vẽ thay đổi trên hình vẽ

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

CÔNG CỤ PRIMITIVE (SMART SHAPE)

Chỉnh sửa lại hình vẽ: Chỉnh sửa lại hình vẽ:

Chuyển sang công cụ Selection Chuyển sang công cụ Selection Modify > Break Apart để phân tách hình vẽ thành Modify > Break Apart để phân tách hình vẽ thành dạng artwork dạng artwork Chọn công cụ Subselection nhấn lên hình vẽ để hiển Chọn công cụ Subselection nhấn lên hình vẽ để hiển thị điểm neo thị điểm neo Chọn công cụ Add Anchor Point để thêm điểm neo Chọn công cụ Add Anchor Point để thêm điểm neo Dùng công cụ Subselection Dùng công cụ Subselection

điều chỉnh hình vẽ như sau điều chỉnh hình vẽ như sau

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

CÔNG CỤ TEXT

Chức năng chính: viết chữ trong flash Chức năng chính: viết chữ trong flash Kết hợp cùng bảng Properties để Kết hợp cùng bảng Properties để điều chỉnh (font, màu sắc, kích thước điều chỉnh (font, màu sắc, kích thước vị trí, …) vị trí, …)

Công cụ Text (T) Công cụ Text (T) 3 định dạng kiểu văn bản 3 định dạng kiểu văn bản

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

CÔNG CỤ TEXT

Thêm Filters cho đoạn chữ Cửa sổ vùng FILTERS phía dưới cùng của bảng Property Nhấn nút Add Filter ( )

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

MÀU SẮC

Flash cung cấp nhiều tùy chọn để tạo, lưu và làm Flash cung cấp nhiều tùy chọn để tạo, lưu và làm việc với màu sắc, gradient việc với màu sắc, gradient Việc chọn, áp dụng màu rất dễ dàng với các bảng Việc chọn, áp dụng màu rất dễ dàng với các bảng liên quan: liên quan: Color Color Swatches Swatches

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

MÀU GRADIENT

Flash hỗ trợ 2 loại kiểu màu gradient: Flash hỗ trợ 2 loại kiểu màu gradient:

Linear: hòa trộn màu theo cách đồng dạng theo một Linear: hòa trộn màu theo cách đồng dạng theo một đường thẳng đi theo một hướng hoặc một góc xác đường thẳng đi theo một hướng hoặc một góc xác định định Radial: hòa trộn màu theo cách thức tỏa tròn, theo 2 Radial: hòa trộn màu theo cách thức tỏa tròn, theo 2 hướng: hướng tâm và hướng ra ngoài hướng: hướng tâm và hướng ra ngoài

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

MÀU GRADIENT

Lựa chọn kiểu gradient trong hộp thoại Type trên bảng Color

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

MÀU GRADIENT

Chú ý phía dưới bảng Color có xuất hiện thanh trượt màu sắc Điều chỉnh ngay trên thanh trượt

- Lựa chọn màu sắc - Thêm điểm màu - Điều chỉnh sắc độ gradient

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

TÙY BIẾN MÀU SẮC

Chọn công cụ Selection và nhấn một lần lên hình Chọn công cụ Selection và nhấn một lần lên hình con cá  màu tô và màu đường viền sẽ được hiển con cá  màu tô và màu đường viền sẽ được hiển thị trên bảng Color thị trên bảng Color Nhấn vào nút Stroke ( ) Nhấn vào nút Stroke ( ) Trong trường R, G, B nhập các giá trị 250, 100, 16 Trong trường R, G, B nhập các giá trị 250, 100, 16 Mở bảng Color và nhấn vào menu phía trên bên Mở bảng Color và nhấn vào menu phía trên bên phải bảng, chọn Add Swatch phải bảng, chọn Add Swatch

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

TÙY BIẾN MÀU SẮC

Window > Swatches Nhấn nút menu phía trên bên phải của bảng Chọn Save Colors

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

TỔ CHỨC LAYER

Cấu trúc layer: giúp kiểm soát được Stage Cấu trúc layer: giúp kiểm soát được Stage Có thể sắp xếp linh hoạt các đối tượng Drawing Có thể sắp xếp linh hoạt các đối tượng Drawing Objects hay nhóm các hình vẽ trên một layer duy Objects hay nhóm các hình vẽ trên một layer duy nhất nhất Mỗi hình vẽ được đặt vào layer phải là đối tượng Mỗi hình vẽ được đặt vào layer phải là đối tượng Drawing Objects Drawing Objects Nếu chưa  Modify > Combine Objects > Union Nếu chưa  Modify > Combine Objects > Union Chọn toàn bộ đối tượng: Edit > Select All Chọn toàn bộ đối tượng: Edit > Select All Nhấn chuột phải và chọn Distribute to Layer Nhấn chuột phải và chọn Distribute to Layer

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

TỔ CHỨC LAYER

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

TỔ CHỨC LAYER

Nhấn đúp lên tên layer để đổi tên Nhấn đúp lên tên layer để đổi tên

Xóa layer

Tạo thư mục layer

Tạo layer mới

Chọn nút Delete Layer ( ) trên thanh Timeline để Chọn nút Delete Layer ( ) trên thanh Timeline để xóa layer xóa layer

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

TỔ CHỨC LAYER

Di chuyển layer: giữ và kéo Di chuyển layer: giữ và kéo

Khóa layer Khóa layer

Ẩn/ hiện layer

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

TỔ CHỨC LAYER

Tạo thư mục layer: Tạo thư mục layer:

Nhấn nút New Layer Folder ( ) Nhấn nút New Layer Folder ( ) Kéo các layer bên ngoài vào trong thư mục vừa tạo Kéo các layer bên ngoài vào trong thư mục vừa tạo

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

SYMBOL

Khi tạo hình vẽ trên Stage, nếu muốn sử dụng lại Khi tạo hình vẽ trên Stage, nếu muốn sử dụng lại các hình vẽ đó trong các đoạn phim khác  cách các hình vẽ đó trong các đoạn phim khác  cách tốt nhất nên sử dụng symbol tốt nhất nên sử dụng symbol Flash sử dụng 3 kiểu symbol: Flash sử dụng 3 kiểu symbol:

Graphic Graphic Button Button Movie clip Movie clip

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

SYMBOL

Các kiểu symbol - Graphic: là kiểu symbol cơ bản nhất, chứa hình vẽ, chữ, các artwork, bitmap - Button: sử dụng để điều khiển, chứa nhiều trạng thái đáp ứng các tương tác của người dùng (nhấn, cuộn chuột) - Movie clip: được gọi là super-symbol, chứa được nhiều đối tượng: symbol, hoạt hình, âm thanh, video

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

TỔNG KẾT

2 chế độ vẽ trong Flash CS4: 2 chế độ vẽ trong Flash CS4:

Merge Drawing: khi vẽ hình chồng nhau sẽ bị ảnh Merge Drawing: khi vẽ hình chồng nhau sẽ bị ảnh hưởng hưởng Object Drawing: có thể chỉnh sửa để tạo ra những Object Drawing: có thể chỉnh sửa để tạo ra những hình dạng phức tạp hơn hình dạng phức tạp hơn