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 CS4 Khởi tạo và lưu file trong Flash CS4 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 trong Flash CS4 Chuyển động (animation) trong Flash Giới thiệu những tính năng mới 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 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 Tổ chức các lớp (layer) hình vẽ Cách sử dụng màu sắc trong Flash 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 MÔI TRƯỜNG VẼ TRONG FLASH CS4 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 những hình vẽ và dòng 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 2 mô hình vẽ: Merge Drawing (chế độ vẽ Merge) 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 Trong chế độ vẽ này: Các hình vẽ dễ dàng được phân tách thành các phần nhỏ 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 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 việc 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 Slide 2 - Làm quen với công cụ vẽ và sử dụng Symbol, bảng Library 8 Hình vẽ dễ dàng được phân tách MERGE DRAWING (CHẾ ĐỘ VẼ MERGE) 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 Nhấn đúp lên hình tròn vừa vẽ, di chuyển sang vị trí khác Slide 2 - Làm quen với công cụ vẽ và sử dụng Symbol, bảng Library 9 Kết hợp của các hình được vẽ chồng nhau OBJECT DRAWING (CHẾ ĐỘ VẼ VẬT THỂ) 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ư trong Illustrator CS4 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 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ụ Polystar ( ) đang ẩn Nhấn chọn nút Object Drawing ( ) phía dưới bảng Tools 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 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 Nhấn đúp vào đường vẽ vừa tạo để chỉnh sửa trong chế độ Object Drawing Uốn cong đường thẳng khi có thêm biểu tượng vòng cung ở công cụ 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ế: Cho phép vẽ theo dạng point-to-point (chọn điểm) Thêm/ bớt điểm trong khi vẽ Đ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 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: 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ị 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á Sau đó chọn Modify > Combine Objects > Union  chuyển đổi hình vẽ thành dạng đối tượng trong chế độ vẽ đối tượng (object drawing) Tiếp tục lựa chọn công cụ Polystar, kích hoạt chế độ 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 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 Bao gồm các công cụ: Oval 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 Thiết lập trên bảng Tools: Màu tô: #000000 (màu đen) Màu đường viền: None Chọn View > Snapping > Snap to Objects 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: Start Angle End Angle 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) Slide 2 - Làm quen với công cụ vẽ và sử dụng Symbol, bảng Library 27 Thay đổi thông số trong phần Oval Options Hình vẽ thay đổi sau khi thay đổi thông số 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 ( ) Thiết lập màu trên bảng Tools: Màu tô: #FFFFFF (màu trắng) Màu đường viền: #000000 (màu đen) Vẽ hình trên stage Trong bảng Property, thay đổi thông số tùy chọn 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ố trong phần Rectangle Options và chú ý sự 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ẽ: Chuyển sang công cụ Selection Modify > Break Apart để phân tách hình vẽ thành dạng artwork Chọn công cụ Subselection nhấn lên hình vẽ để hiển thị điểm neo Chọn công cụ Add Anchor Point để thêm điểm neo Dùng công cụ Subselection đ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 CÔNG CỤ TEXT Chức năng chính: viết chữ trong flash Kết hợp cùng bảng Properties để điều chỉnh (font, màu sắc, kích thước vị trí, …) Công cụ Text (T) 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 MÀU SẮC 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 chọn, áp dụng màu rất dễ dàng với các bảng liên quan: Color 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: 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 định 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 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 Slide 2 - Làm quen với công cụ vẽ và sử dụng Symbol, bảng Library 39 - Lựa chọn màu sắc - Thêm điểm màu - Điều chỉnh sắc độ gradient 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 con cá  màu tô và màu đường viền sẽ được hiển thị trên bảng Color Nhấn vào nút Stroke ( ) 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 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 TỔ CHỨC LAYER 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 Objects hay nhóm các hình vẽ trên một layer duy nhất Mỗi hình vẽ được đặt vào layer phải là đối tượng Drawing Objects Nếu chưa  Modify > Combine Objects > Union Chọn toàn bộ đối tượng: Edit > Select All 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 Chọn nút Delete Layer ( ) trên thanh Timeline để xóa layer Slide 2 - Làm quen với công cụ vẽ và sử dụng Symbol, bảng Library 45 Tạo layer mới Tạo thư mục layer Xóa layer TỔ CHỨC LAYER Di chuyển layer: giữ và kéo Khóa layer Slide 2 - Làm quen với công cụ vẽ và sử dụng Symbol, bảng Library 46 Ẩn/ hiện layer TỔ CHỨC LAYER Tạo thư mục layer: 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 Slide 2 - Làm quen với công cụ vẽ và sử dụng Symbol, bảng Library 47 SYMBOL SYMBOL 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 tốt nhất nên sử dụng symbol Flash sử dụng 3 kiểu symbol: Graphic Button 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: Merge Drawing: khi vẽ hình chồng nhau sẽ bị ảnh hưởng Object Drawing: có thể chỉnh sửa để tạo ra những hình dạng phức tạp hơn Các công cụ Primitive nên chú ý chỉnh sửa thông số trong bảng Property, hoặc chỉnh sửa trực tiếp bằng tay trên vật thể 3 kiểu symbol trong Flash CS4: Graphic Button Movie clip Slide 2 - Làm quen với công cụ vẽ và sử dụng Symbol, bảng Library 51