1. Trang chủ
  2. » Giáo Dục - Đào Tạo

Giáo trình mô đun Thiết kế hoạt hình (Nghề Công nghệ thông tin Trình độ trung cấp)

122 30 1

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 122
Dung lượng 15,86 MB

Cấu trúc

  • LỜI GIỚI THIỆU

  • MỤC LỤC

  • BÀI MỞ ĐẦU: KHỞI ĐẦU VỚI ADOBE FLASH

    • 1. Giới thiệu giao diện Adobe Flash

    • 2. Các thao tác cơ bản trên file: Tạo mới, lưu, đóng, mở

    • Câu hỏi ôn tập, bài tập

  • BÀI 1: SỬ DỤNG CÁC CÔNG CỤ VẼ

    • 1. Công cụ vẽ: Pencil, Brush, Eraser, AirBrush, Line

      • 1.1. Công cụ Pencil:

      • 1.2. Công cụ Brush

      • 1.3. Công cụ Erase

    • 2. Rectangle, Oval, PolyStar, Text

      • 2.1. Công cụ Rectangle

      • 2.2. Sử dụng công cụ Oval ( )

      • 2.3. Sử dụng công cụ PolyStar ()

      • 2.4. Sử dụng công cụ Text (T)

    • Câu hỏi ôn tập, bài tập

  • BÀI 2: SỬ DỤNG CÁC CÔNG CỤ CHỌN VÀ TÔ MÀU

    • 1. Công cụ Pen, Selection Tool, Subselection, Free Transform

      • 1.1. Pen Tool (): dùng tạo các nét thẳng hoặc cong.

      • 1.2. Selection Tool (): Di chuyển phần đối tượng được chọn

      • 1.3. Subselection Tool (): Làm biến dạng đối tượng

      • 1.4. Free Transform Tool (): Di chuyển đối tượng được chọn

    • 2. Công cụ tô màu Paint Bucket, Eyedropper

      • 2.1. Bucket Tool (): dùng tô màu các hình được tạo ra từ đường viền (màu bên trong hình).

      • 2.2. Eyedropper ():

    • 3. Công cụ Gradient Transform ()

    • Câu hỏi ôn tập, bài tập

  • BÀI 3: CÁC BIỂU TƯỢNG SYMBOL

    • 1. Biểu tượng Graphic, Button, MovieClip

    • 2. Làm việc với thư viện Library

    • 3. Làm việc với Common Library

    • Câu hỏi ôn tập, bài tập

  • BÀI 4: THAO TÁC VỚI TIMELINE

    • 1. Giới thiệu TimeLine

    • 2. Vai trò trong xử lý hoạt hình

    • 3. Xử lý hoạt hình cho đối tượng

    • Câu hỏi ôn tâp, bài tập

  • BÀI 5: TẠO HOẠT HÌNH BẰNG FRAME BY FRAME VÀ CLASSIC TWEEN

    • 1. Hoạt hình Frame by Frame

    • 2. Hoạt hình Classic Tween

    • Câu hỏi ôn tập, bài tập

  • BÀI 6: TẠO HOẠT HÌNH THEO ĐƯỜNG DẪN

    • 1. Giới thiệu hoạt hình theo đường dẫn

    • 2. Thao tác hoạt hình theo đường dẫn

    • Câu hỏi ôn tập, bài tập

  • BÀI 7: TẠO HOẠT HÌNH VỚI MOTION TWEEN

    • 1. Mô tả cơ chế

    • 2. Hoạt hình Motion Tween

    • 3. Tạo chuyển động nhờ vào Motion Presets

    • Câu hỏi ôn tập, bài tập

  • BÀI 8: TẠO HOẠT HÌNH VỚI SHAPE TWEEN

    • 1. Mô tả cơ chế

    • 2. Các bước sử dụng Shape Tween.

    • 3. Sử dụng Shape hint

    • Câu hỏi ôn tập, bài tập

  • BÀI 9: SỬ DỤNG SỬ DỤNG MẶT NẠ (MASK)

    • 1. Mặt nạ (mask)

    • 2. Sử dụng mặt nạ động

    • 3. Sử dụng mặt nạ biến hình

    • 4. Tạo SlideShow ảnh

    • Câu hỏi ôn tập, bài tập

  • BÀI 10: CÁC CÔNG CỤ TẠO HOẠT HÌNH: BONE, DECO, BIND, 3D

    • 1. Bone Tool 

    • 2. Công cụ Bind Tool

    • 3. Công cụ 3D

    • Câu hỏi ôn tập, bài tập

  • BÀI 11: ĐIỀU KHIỂN CHUỘT VÀ BÀN PHÍM BẰNG CÁC SỰ KIỆN

    • 1. Sự kiện Chuột

    • 2. Sự kiện Bàn phím

    • 3. Đưa một đối tượng vào ActionScript

    • Câu hỏi ôn tập, bài tập

  • BÀI 12: TẠO CÁC BANNER QUẢNG CÁO

    • 1. Giới thiệu banner quảng cáo

    • 2. Tạo các banner quảng cáo bằng biến đổi hình dạng, mặt nạ

    • 3. Tạo banner quảng cáo bằng các biến đổi chuyển động

    • Câu hỏi ôn tập, bài tập

  • BÀI 13: VẼ GIAO DIỆN CÁC TRANG WEB

    • 1. Mô tả giao diện

    • 2. Chuẩn bị công cụ vẽ

    • 3. Thiết kế và vẽ

    • Câu hỏi ôn tập, bài tập

  • BÀI 14: TẠO CÁC MOVIE CLIP VÀ CÁC NÚT BẤM

    • 1. Tạo các movie clip đặt lên trang

    • 2. Tạo các nút bấm liên kết

    • Câu hỏi ôn tập, bài tập

  • BÀI 15: TẠO ÂM THANH, XỬ LÝ ÂM THANH

    • 1. Xử lý âm thanh

    • 2. Xử lý âm thanh

    • Câu hỏi ôn tập, bài tập

  • BÀI 16: CHUYỂN FILE PHIM THÀNH VIDEO FLASH

    • 1. Chọn file phim

    • 2. Chuyển file phim thành flash

    • Câu hỏi ôn tập, bài tập

  • BÀI 17: PUBLISH RA SHOCKWAVE FLASH VÀ HTML

    • 1. Chọn banner

    • 2. Chọn vị trí phù hợp trên trang

    • 3. Publish để xuất bản tập tin

    • Câu hỏi ôn tập, bài tập

  • TÀI LIỆU THAM KHẢO

Nội dung

Giới thiệu giao diện Adobe Flash

Khi khởi động lần đầu tiên, Flash CS6 có giao diện như sau:

Hình 1.1 Cửa sổ khởi động Flash

Khi khởi động Flash CS6 lần đầu, vùng làm việc mặc định hiển thị với chữ ESSENTIALS trong khoanh tròn màu đỏ Người dùng có thể lựa chọn giữa nhiều vùng làm việc khác nhau, tùy thuộc vào thói quen và sở thích cá nhân, chẳng hạn như những ai đã từng sử dụng Flash có thể chọn vùng làm việc CLASSIC.

Khi bấm vào chữ ESSENTIALS đề cập ở trên, Flash sẽ xổ xuống một menu cho bạn chọn lựa vùng làm việc như sau:

Để dễ dàng làm quen với Flash và thiết lập vùng làm việc, bạn sẽ thực hành với vùng làm việc mặc định.

Các thao tác cơ bản trên file: Tạo mới, lưu, đóng, mở

Dùng chuột bấm vào nút Flash File (ActionScript 3.0):

Flash sẽ tạo ra một file mới có tên là Untitled-1:

Hình 1.4 Tạo tên file flash

(Xem thêm phần Flash document và Flash movie ở phần kế tiếp)

Tất cả các bài thực hành được lưu vào một folder chính để tiện cho việc quản lý.

Create a new folder named FLASH CS4 ONLINE and save the file as 001_frame_by_frame.fla in this newly created folder before proceeding with further practice.

Hình 1.5 Chọn lưu tập tin Ở hộp thoại mới mở ra, bấm nút Create New folder:

Hình 1.6 Chọn khu vực lưu

Một folder mới được tạo ra với tên mặc định là New Folder.

Hình 1.7 Chọn thư mục lưu Đổi tên lại thành FLASH CS4 ONLINE.

Hình 1.8 Chọn lưu đúng tên

Di chuyển vào bên trong folder này và đặt tên file là 001_frame_by_frame.fla,xong bấm vào nút Save để lưu lại.

Hình 1.9 Lưu đúng định dạng file

Nội dung cần thể hiện trong các tiểu mục/tiểu tiêu đề gồm:

- Làm quen với một số khái niệm cơ bản về đồ họa, cái khái niệm về Flash

- Tìm hiểu về một số vùng chức năng của Flash Các vùng chức năng này được bố trí trong menu Windows.

- Tùy biến giao diện cho phù hợp với chính bạn.

Câu hỏi ôn tập, bài tập

1.1 Trình bày sự khác nhau giữa đồ họa điểm và đồ họa flash.

1.2 Nêu khái niệm về Layer, Frame, Scene và Movie.

1.3 Nêu tác dụng các vùng chức năng cơ bản của flash CS6.

1.4 Mở tập tin mới và lưu vào thư mục BaiTapFlash với tên “BaiTapFlash.fla”

SỬ DỤNG CÁC CÔNG CỤ VẼ

Công cụ vẽ: Pencil, Brush, Eraser, AirBrush, Line

Công cụ Pencil cho phép người dùng vẽ các đối tượng một cách tự nhiên bằng tay Bạn có thể điều chỉnh các thuộc tính liên quan đến công cụ này để tạo ra những tác phẩm nghệ thuật độc đáo.

- Stroke color: màu sắc của nét vẽ.

- Stroke: kích thước của nét vẽ.

- Style: dạng thức của nét vẽ - đường liền nét, đứt nét…

Công cụ Brush tương tự như Pencil trong việc vẽ, nhưng có sự khác biệt ở nét vẽ: Brush không có viền mà chỉ có màu nền, trong khi Pencil chỉ có màu viền mà không có màu nền Các thuộc tính của Brush rất đa dạng.

- Fill color: chọn màu cho nét vẽ brush.

- Smoothing: độ mềm dẻo cho nét vẽ.

Công cụ dùng để tẩy xóa các nét vẽ.

Rectangle, Oval, PolyStar, Text

Sử dụng công cụ Rectangle vẽ hình chữ nhât, hình vuông (bấm giữ phímShift) trên cửa sổ làm việc.

Khi bấm vào biểu tượng công cụ Rectangle, trong bảng thuộc tính Properties của nó, ta chú ý đến các thuộc tính sau đây:

- Stroke color: chọn màu viền cho nét vẽ.

- Fill color: chọn màu nền cho nét vẽ.

- Stroke: kích thước của nét vẽ.

- Style: dạng thức của nét vẽ.

Scale là độ kéo dãn của hình vẽ, có thể được phân loại thành bốn loại: None (không kéo giãn), Normal (kéo giãn bình thường), Horizontal (kéo giãn theo chiều ngang) và Vertical (kéo giãn theo chiều dọc).

- Hinting: giúp bảo vệ nét vẽ ở đường cong khỏi bị mờ.

- Cap: thiết lập dạng thức cho đường kết thúc.

- Join: xác định cách mà hai phân đoạn của đối tượng nối với nhau.

- Mitter: điều khiển độ sắc nét của Mitter, khi Cap được chọn là Mitter.

Tùy chọn Hình Chữ Nhật cho phép điều chỉnh góc tròn cho hình chữ nhật Bằng cách chọn "Khóa Điều Khiển Độ Cong Góc", bạn có thể chỉnh sửa đồng thời hoặc riêng lẻ các góc của hình chữ nhật Khi thay đổi độ cong của một góc, các góc còn lại sẽ tự động sao chép thông số của góc đó Các thông số độ cong cho bốn góc được hiển thị ở phía trên, và bạn có thể nhập số liệu trực tiếp vào ô hoặc sử dụng thanh trượt bên dưới để điều chỉnh độ cong cho hình chữ nhật.

- Reset: đưa về các số liệu tùy chỉnh mặc định cho các góc tròn.

2.2 Sử dụng công cụ Oval ( )

Hình 1.4 Công cụ vẽ hình tròn

Sử dụng công cụ Oval ( ) vẽ hình elip trên cửa sổ làm việc,

Giữ phím Shift + di chuột để vẽ hình tròn.

Trong bảng thuộc tính Properties, ta có các tùy chọn sau đây:

- Stroke color: chọn màu cho nét vẽ.

- Fill color: chọn màu nền cho hình thể.

- Stroke: chọn kích thước của nét vẽ.

- Scale: độ kéo dãn của hình được vẽ Nó có thể là None, Normal, Horizontal hoặc Vertical.

- Hinting: giúp bảo vệ nét vẽ ở đường cong khỏi bị mờ.

- Cap: thiết lập dạng thức cho đường kết thúc.

- Join: xác định cách mà hai phân đoạn của đối tượng nối với nhau.

- Mitter: điều khiển độ sắc nét của Mitter, khi Cap được chọn là Mitter.

Tùy chọn Oval cho phép tạo hình oval thông qua hai góc: góc mở Start Angle và góc đóng End Angle Góc mở Start Angle quay theo chiều kim đồng hồ, với vị trí gốc tại góc 90 độ, trong khi góc đóng End Angle quay ngược chiều kim đồng hồ Độ lớn của phần bị khuyết được xác định bởi góc đóng, được tính bằng 360 độ trừ đi giá trị của góc đóng.

Ví dụ, khi thiết lập góc mở Start Angle là 600, ta thu được hình như sau:

Hình 1.6 Hình tạo bởi góc mở

Trong hình, góc khuyết được đo là 60 độ, được lấy từ vị trí 90 độ và quay theo chiều kim đồng hồ Khi thiết lập góc đóng (End Angle) là 60 độ, hình ảnh thu được sẽ như sau:

Hình 1.7 Hình tạo bởi góc đóng

Góc khuyết trong hình có số đo 3600-600000, tương ứng với phần hình thể chiếm 600 Để xác định góc khuyết, chúng ta sẽ bắt đầu từ vị trí 900 và thực hiện quay theo chiều ngược kim đồng hồ.

Tương tự như trên, ta có thể kết hợp hình thể có số đo góc đóng 600 và góc mở

Chúng ta sẽ nhận được hình thể dưới đây, được tạo thành từ sự kết hợp của hai hình ảnh: một hình từ góc đóng và một hình từ góc mở, như đã mô tả ở trên.

Hình 1.8 Hình tạo bởi góc đóng và góc mở

Bán kính trong là kích thước của đường tròn bên trong, đóng vai trò quan trọng trong việc tạo hình vành khăn Vành khăn được hình thành từ hai đường tròn đồng tâm, trong đó phần chồng khít giữa chúng sẽ bị loại bỏ.

Close Path có tác dụng quan trọng đối với hình thể được tạo ra từ góc đóng và góc mở, giúp tự động làm cho các đường kết nối trở nên liền mạch và mượt mà hơn.

Hình 1.9 Hình tạo bởi góc mở 600 và kết hợp với tùy chọn Close Path

Hình bên trái không sử dụng tùy chọn Close Path, trong khi hình bên phải có kích hoạt tính năng này Khi Close Path được kích hoạt, hình thể sẽ được khép kín, và lúc này thuộc tính Fill Color sẽ có hiệu lực.

2.3 Sử dụng công cụ PolyStar ( )

Dùng để vẽ đa giác và hình sao Khi bấm chọn công cụ này, ta chú ý các tùy chọn trong bảng thuộc tính Propeties.

- Fill color: chọn màu nền cho vật thể.

- Stroke color: chọn màu viền cho nét vẽ.

- Stroke: chọn kích thước cho nét vẽ.

- Style: chọn dạng thức cho nét vẽ.

- Cap: thiết lập dạng thức cho đường kết thúc.

- Join: xác định cách mà hai phân đoạn của đối tượng nối với nhau.

- Hinting: giúp bảo vệ nét vẽ ở đường cong khỏi bị mờ.

- Mitter: điều khiển độ sắc nét của Mitter, khi Cap được chọn là Mitter.

- Tool Setting: thiết lập các tùy chọn nâng cao Khi bấm vào nút Option, sẽ hiện ra hộp thoại sau

+ Style: lựa chọn hình dạng của đa giác là đa giác lồi hay hình sao.

+ Number of Sides: số lượng các cạnh đa giác (hay số lượng cánh hình sao).

Kích thước điểm sao (SPS) là tỷ lệ giữa khoảng cách từ tâm hình sao đến đỉnh lõm và khoảng cách từ tâm đến đỉnh lồi của hình sao Tỷ lệ này dao động trong khoảng từ 0 đến 1 Khi tỷ lệ SPS càng lớn (gần 1), hình sao sẽ có hình dạng mập hơn, ngược lại, tỷ lệ SPS nhỏ hơn sẽ khiến hình sao trông gầy hơn.

Hình 1.12 Hình sao mập (tỉ lệ SPS = 0.9) và hình sao gầy (tỉ lệ SPS = 0.1)

2.4 Sử dụng công cụ Text (T)

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ó 3 định dạng kiểu văn bản:

Hình 1.13 Công cụ văn bản

Câu hỏi ôn tập, bài tập

1.1 Vẽ hình tròn, hình vuông, hình ngôi sao, hình quạt có màu stroke và fill khác nhau.

1.2 Sử dụng công cụ để tách Stroke và Fill của các đối tượng trên.

SỬ DỤNG CÁC CÔNG CỤ CHỌN VÀ TÔ MÀU

Công cụ Pen, Selection Tool, subselection, Free Transform

1.1 Pen Tool ( ): dùng tạo các nét thẳng hoặc cong.

Công cụ này dùng để vẽ các đường đa giác bằng cách tạo các điểm điều khiển, sau đó, tự động nối các điểm này lại với nhau.

Các thông số liên quan đến công cụ này hoàn toàn tương tự với công cụ Line.

Khi sử dụng công cụ Pen, để tạo hình dạng đường thẳng, bạn chỉ cần nhấp vào điểm đầu và điểm cuối Đối với đường cong, bạn cần kéo chuột liên tục để điều chỉnh các điểm điều khiển của đường cong.

Công cụ Add Anchor Point và Delete Anchor Point :

Công cụ Add Anchor Point cho phép bạn thêm điểm điều khiển vào đường Bezier, trong khi công cụ Delete Anchor Point giúp xóa các điểm điều khiển không cần thiết Để thêm điểm điều khiển, chỉ cần chọn công cụ Add Anchor Point và nhấn vào vị trí mong muốn trên đường biên Ngược lại, để xóa điểm điều khiển, chọn công cụ Delete Anchor Point và nhấn vào điểm cần xóa.

Bổ sung và xóa bỏ các điểm điều khiển là rất quan trọng trong việc tạo ra các đường uốn Để tối ưu hóa quá trình hiệu chỉnh cho các đường uốn đặc thù, cần xác định số lượng điểm điều khiển phù hợp Chẳng hạn, để tạo ra đường Parabol, chỉ cần ba điểm điều khiển, trong khi đường đồ thị của hàm số đa thức bậc ba cần bốn điểm điều khiển.

Các điểm điều khiển là các điểm nằm trên đường biên Những điểm không nằm trên đường biên là các điểm thuộc đường điều khiển.

Hình 2.2 Hình các điểm điều khiển

Công cụ Convert Anchor Point :

Công cụ Convert Anchor được sử dụng để chuyển đổi các điểm điều khiển góc cạnh thành điểm điều khiển uốn cong, đồng thời còn có khả năng hiệu chỉnh góc uốn thông qua các đường điều khiển Chức năng này tương tự như việc hiệu chỉnh góc cạnh của công cụ SubSelection, nhưng điểm khác biệt nằm ở cách thức hoạt động của nó.

Công cụ điều chỉnh đường điều khiển cho phép hiệu chỉnh độc lập hai đường bên trái và bên phải tại một điểm điều khiển, trong khi công cụ SubSelection cho phép điều chỉnh đồng thời cả hai đường này, tạo ra điểm uốn đối xứng Để chuyển đổi điểm điều khiển góc cạnh thành điểm uốn cong, người dùng chỉ cần chọn công cụ và nhấp vào điểm cần chuyển đổi Để điều chỉnh góc xoay cho các đường điều khiển, chỉ cần xoay các đường này theo ý muốn.

Hình 2.3 Công cụ Convert Anchor Point

1.2 Selection Tool ( ): Di chuyển phần đối tượng được chọn

Với công cụ này, bạn có thể dễ dàng chọn đối tượng hoặc một phần của nó bằng cách nhấp đúp chuột hoặc bôi đen Ngoài ra, bạn còn có khả năng kéo giãn và uốn cong các biên của hình thể khi con trỏ chuột ở vị trí biên, hiển thị biểu tượng Selection với đường cong màu đen.

1.3 Subselection Tool ( ): Làm biến dạng đối tượng

Nhấp vào biểu tượng SubSelection và chọn đối tượng để hiển thị các đường Bezier tạo thành vật thể Các điểm điều khiển đường Bezier, được đánh dấu bằng chấm tròn, cho phép bạn điều chỉnh vị trí của chúng Điểm điều khiển được chia thành hai nhóm: điểm góc cạnh và điểm uốn cong, với các hình vuông, chữ nhật từ điểm góc cạnh và đường tròn, ellipse từ điểm uốn cong.

1.4 Free Transform Tool ( ): Di chuyển đối tượng được chọn

Công cụ Free Transform cho phép người dùng tinh chỉnh góc cạnh và xoay đối tượng một cách linh hoạt Khi chọn biểu tượng này và đối tượng cần chỉnh sửa, người dùng có thể thay đổi vị trí các phần của đối tượng bằng cách di chuyển chuột dọc theo các cạnh Để phóng to hoặc thu nhỏ đối tượng, chỉ cần kéo các nút ở viền ngoài; kéo ra ngoài để tăng kích thước và kéo vào trong để giảm kích thước Để xoay đối tượng, người dùng chỉ cần nhấn vào các nút ở góc và thực hiện xoay theo ý muốn.

Khi làm việc với các đối tượng bằng công cụ này bạn cần lưu ý đến một chức năng xoay đối tượng.

Hình 2.7 Thay đổi tâm xoay của đối tượng

Công cụ tô màu Paint Bucket, Eye dropper

2.1 Bucket Tool ( ): dùng tô màu các hình được tạo ra từ đường viền (màu bên trong hình). Đây là công cụ dùng để đổ màu nền cho vật thể Khi kích vào biểu tượng này trên thanh công cụ, trên bảng thuộc tính Properties sẽ hiện ra các thông số liên quan đến công cụ này:

Công cụ đổ màu nền trong Adobe Flash cho phép bạn tạo hiệu ứng màu sắc phức tạp, nhưng cần lưu ý rằng khung viền bao quanh đối tượng phải kín để công cụ hoạt động hiệu quả Nếu có khoảng hở, màu sẽ không được đổ đúng cách, khác với các trình biên tập khác Công cụ này hỗ trợ nhiều chế độ màu như RGB, HSL, Alpha và cả màu cầu vồng Để tùy chỉnh dải màu cầu vồng, bạn cần sử dụng bảng màu đầy đủ (Windows>Color) kết hợp với công cụ Paint Bucket Hộp thoại màu này cho phép bạn áp dụng các kiểu pattern, bitmap và dải màu cầu vồng tùy chọn cho đối tượng.

Hình 2.8 Công cụ Paint Bucket

Công cụ này cho phép người dùng lấy mẫu tô và kiểu đường nét từ một đối tượng để áp dụng cho đối tượng khác, chỉ cần chọn mẫu và quét vào đối tượng mong muốn Đồng thời, nó cũng giúp lấy thông số màu tại một vị trí cụ thể trên bức ảnh; người dùng chỉ cần chọn biểu tượng và kích vào vị trí cần lấy thông số, lúc đó màu nền mặc định sẽ tự động chuyển thành màu của vị trí vừa chọn.

Công cụ Gradient Transform ( )

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

Câu hỏi ôn tập, bài tập

2.1 Sử dụng các công cụ Free Transform, Gradient Transform để hòa trộn màu sắc theo các hướng khác nhau.

2.2 Sử dụng các công cụ tô vẽ cơ bản, vẽ hình các nhân vật sau

2.3 Sử dụng các công cụ tô vẽ, vẽ các phong cảnh sau:

Hãy sử dụng các công cụ vẽ để tạo các nội dung sau đây trên cùng một Stage:

1 Tạo Layer 1 và đổi tên thành BauTroi Chọn biểu tượng bảng màu ChọnStroke color = None, Fill Color = Linear Gradient Chọn chế độ đổ màu ExtendsColor Trong kiểu đổ màu cầu vồng này, bạn chỉ chọn hai màu: màu đen (mã màu là #000000) đến màu đen trắng (mã màu #999999), trong đó màu đen ở phía trên, màu đen trắng ở phía dưới Sử dụng công cụ Rectangle, tạo một hình chữ nhật ở trên Layer này Sử dụng bảng hiệu chỉnh Align để can chỉnh kích thước và vị trí cho hình chữ nhật này trùng khớp với kích thước Stage.

2 Tạo Layer 2 và đổi tên thành MatTrang Chọn biểu tượng Oval với thuộc tính Stroke Color = None, Fill Color là màu Radial Gradient (màu một có mã màu là

Sử dụng mã màu #FFFF00 cho màu vàng và #FFFFFF cho màu trắng, hãy áp dụng công cụ Gradient Transform để điều chỉnh kích thước vòng màu bên trong lớn hơn Đặt mặt trăng vào vị trí phù hợp trên bức tranh để tạo ra sự hài hòa và thu hút.

3 Sử dụng công cụ PolyStar để tạo một ngôi sao màu vàng nhạt, kích thước là 20x20 Convert ngôi sao này sang biểu tượng Graphics và đặt tên là Sao Chọn công cụ Spray Brush, chọn biểu tượng cho nó là Sao ở trên Hiệu chỉnh các thông số như sau:

Chọn cả ba tùy chọn Random Scaling, Rotate Symbol và Random Rotation.

Hiệu chỉnh kích thước của Brush là width=height00px, Brush Angel là 90 CW.

Tạo mới Layer đặt tên là Sao Hãy quét nhanh công cụ Spray Brush này lên Layer này để tạo các ngôi sao nhỏ trên bầu trời.

4 Tạo mới một Layer và đặt tên là KhungCua Sử dụng công cụ Rectangle Primitive để tạo một hình chữ nhật có kích thước width 0, height0, chọn Fill color là None, Stroke color là màu đen, loại đường viền style là stippled, kích thước của đường viền là 5px Sử dụng công cụ Deco để đổ màu nghệ thuật (cành hoa nho) cho khung cửa sổ này.

5 Tạo mới Layer đặt tên là NgoiNha Hãy sử dụng các công cụ cần thiết để vẽ nên ngôi nhà mơ ước của bạn Lưu ý: hãy sử dụng màu sắc thật hài hòa trong đêm tối.

6 Tạo mới Layer đặt tên là DamMay Hãy sử dụng công cụ Pen để tạo nên các đám mây có viền cong Tô màu cho nó bằng màu xanh nhạt (mã màu

#66CCCC) và hãy loại bỏ viền của nó.

7 Tạo mới Layer đặt tên là ConNguoi Hãy sử dụng các công cụ cần thiết để phát họa chân dung của một cô gái đang đi dưới ánh trăng.

8 Tạo mới Layer đặt tên là DenLong Hãy phát họa cây đền lồng và đặt nó vào tay cô gái.

9 Tạo mới Layer đặt tên là CayCoi Hãy phát họa hình một rặng tre hoặc một cây cổ thụ Chọn màu sắc hợp lý.

10.Tạo mới Layer đặt tên là TieuDe Sử dụng công cụ Text để soạn thảo trênLayer này nội dung “Ánh Trăng Trên Quê Hương”.

CÁC BIỂU TƯỢNG SYMBOL

Biểu tượng Graphic, Button, MovieClip

Biểu tượng Graphic là hình ảnh tĩnh có khả năng tái sử dụng để tạo chuyển động, bao gồm ảnh điểm, vector và văn bản Mỗi Graphic chỉ có một Frame trên thanh TimeLine Để tạo một Graphic, bạn cần thực hiện các thao tác cụ thể.

- Chọn đối tượng cần chuyển đổi sang biểu tượng Graphic.

- Nhấn phím F8 (hoặc kích chuột phải, chọn Convert to Symbol) Trong hộp thoại Convert to Symbol, có các tùy chọn sau:

Hình 3.1 Chuyển đổi sang biểu tượng Graphic

+ Name: tên của biểu tượng sẽ được tạo.

+Type: loại biểu tượng cần tạo Ở đây, chúng ta chọn là Graphic.

Tiếp đến, bạn nhấp Ok Một biểu tượng Graphic sẽ được tạo và đưa vào thư viện.

Các thuộc tính của biểu tượng Graphic:

- Thanh tùy chọn thả xuống: cho phép chuyển đổi qua lại giữa các loại biểu tượng.

- Instance of: khi kích chuột vào tùy chọn swap, bạn có thể thay đổi biểu tượng của đối tượng thể hiện được chọn.

Vị trí và kích thước cho phép người dùng điều chỉnh tọa độ của đối tượng thông qua các giá trị x và y, cùng với kích thước chiều rộng (w) và chiều cao (h) Tùy chọn "Khóa giá trị chiều rộng và chiều cao" cho phép thay đổi kích thước đồng thời hoặc riêng lẻ cho cả hai chiều.

- Color effect: với tùy chọn Style, bạn có thể hiểu chỉnh các thuộc tính Brightness, Tint, Advanced và Alpha cho đối tượng.

- Looping: tùy chọn liên quan đến số lần lặp lại hành động của biểu tượngGraphic Nó có thể là Loop, Play Once và Single Frame.

Hình 3.2 Bảng thuộc tính của biểu tượng Graphic

Biểu tượng Button được sử dụng để tăng cường tương tác trong movie, cho phép phản hồi các sự kiện như nhấp chuột, nhấn phím, kéo thanh trượt và các hành động khác Mỗi Button bao gồm bốn trạng thái tương tác: Up, Down, Over và Hit Để tạo một Button, bạn cần thực hiện các thao tác sau:

- Chọn đối tượng cần chuyển đổi sang Button

- Nhấp phím F8 hoặc kích chuột phải, chọn Convert to Symbol Khi đó, sẽ xuất hiện hộp thoại sau:

Hình 3.3 Chuyển đổi sang biểu tượng Button

Trong mục Type, chọn Button và nhấp Ok.

Để tạo hiệu ứng cho Button, chúng ta sẽ tập trung vào việc thao tác hiệu ứng mà không bàn luận về TimeLine hay cách tạo hiệu ứng động Những chi tiết liên quan sẽ được khám phá trong chương tiếp theo.

Mỗi biểu tượng Button bao gồm 4 Frame trên TimeLine: Frame Up thể hiện hiệu ứng khi chuột được thả ra, Frame Down cho hiệu ứng khi chuột nhấn xuống, Frame Over cho hiệu ứng khi chuột di chuyển qua đối tượng, và Frame Hit tạo vùng tương tác ảo cho Button Vùng tương tác này không hiển thị trên movie nhưng cho phép thao tác giống như trên chính Button Bài viết sẽ hướng dẫn cách tạo hiệu ứng cho Button.

(1) Kích đôi chuột vào Button vừa tạo.

(2) Nhấp chọn Frame Up, nhấn phím F6 và thay đổi thuộc tính cho Button này. Hoàn toàn tương tự cho Frame Down và Frame Over.

Để tạo vùng tương tác ảo, bạn cần sử dụng công cụ vẽ trong Frame Hit Hãy chọn Frame Hit, nhấn F6 và tiến hành vẽ một hình thể trong vùng này.

(4) Quay trở lại Scene, nhấp Ctrl+Enter để kiểm tra.

Các thuộc tính của biểu tượng Button:

- Instance Name: tên hiển thị của biểu tượng Được dùng khi làm việc với ActionScript

- Thanh tùy chọn thả xuống: cho phép chuyển đổi qua lại giữa các loại biểu tượng

- Instance of: chọn swap để thay đổi biểu tượng cho đối tượng hiển thị

- Position and Size: thay đổi vị trí và kích thước cho đối tượng

- Color effect: chọn hiệu ứng màu sắc cho đối tượng, bao gồm:Brightness, Tint, Advanced và Alpha

- Display: với thuộc tính Blending, cho phép ta chọn các chế độ pha trộn màu sắc cho Button

- Tracking: với Options, bạn có thể chọn Track as Button hoặc Track as MenuItem

- Filter: hoàn toàn tương tự với Filter khi làm việc với công cụ Text

Hình 3.4 Bảng thuộc tính của biểu tượng Button

Tạo biểu tượng Button nhanh chóng: bạn có thể sử dụng một trong các chức năng sau đây để tạo một biểu tượng Button hết sức nhanh chóng:

+ Sử dụng các Button được tạo sẵn: vào Windows > Common Libraries >

+ Sử dụng Commands: bạn hãy tạo một khối hình thể, nhấp chọn nó Sau đó vào Commands > Make Button.

MovieClip là một mẫu hoạt hình Flash tái sử dụng, khác với Graphic và Button, nó có TimeLine riêng với nhiều Frame Một MovieClip có thể chứa nhiều biểu tượng Graphic, Button hoặc MovieClip khác Giống như Button, bạn có thể đặt tên hiển thị cho MovieClip để điều khiển nó bằng ActionScript.

Tạo hiệu ứng cho Movieclip: chúng ta sẽ tìm hiểu về cách tạo hoạt hình cho một MovieClip trong chương tiếp theo.

Các thuộc tính của biểu tượng MovieClip:

- Instance Name: tên hiển thị của biểu tượng Được dùng khi làm việc với ActionScript.

- Thanh tùy chọn thả xuống: cho phép chuyển đổi qua lại giữa các loại biểu tượng.

- Instance of: chọn swap để thay đổi biểu tượng cho đối tượng hiển thị.

- Position and Size: thay đổi vị trí và kích thước cho đối tượng.

- 3D Position and View: hiểu chỉnh vị trí trong không gian và khung nhìn 3D.

- Perspective Angle: hiệu chỉnh góc phối cảnh theo độ xa gần.

- Vanishing Point: hiệu chỉnh tọa độ của điểm triệt tiêu.

- Color effect: chọn hiệu ứng màu sắc cho đối tượng, bao gồm:Brightness, Tint,Advanced và Alpha.

Hình 3.5 Bảng thuộc tính của biểu tượng MovieClip

- Display: với thuộc tính Blending, cho phép ta chọn các chế độ pha trộn màu sắc cho Button.

- Tracking: với Options, bạn có thể chọn Track as Button hoặc Track as MenuItem.

- Filter: hoàn toàn tương tự với Filter khi làm việc với công cụ Text.

Làm việc với thư viện Library

Để hiển thị cửa sổ Library, thực hiện một trong những bước sau đây:

- Chọn trong trình đơn Window > Library.

Hoặc nhấp chuột vào nút Library trong thanh Launcher tại góc phải bên dưới của cửa sổ giao diện.

- Cách dùng mục Item trong đoạn phim hiện hành : Kéo mục Item trong cửa sổ Library vào vùng Stage Mục Item đó được thêm vào trong Layer hiện hành.

Hình 3.6 Chọn thư mục hiện hành trong thư viện

Mở thư viện từ trong một file Flash.

Chọn trình đơn File > Open as Library.

Để mở file Flash, bạn cần chọn file từ thư viện và nhấp vào nút Open File sẽ được hiển thị trong đoạn phim hiện tại, với tên file xuất hiện ở phía trên cùng cửa sổ Library Để sử dụng các mục trong cửa sổ Library cho đoạn phim hiện tại, chỉ cần kéo và thả mục đã chọn vào cửa sổ của đoạn phim.

Hình 3.7 Khu vực quản lý thư viện Library

Làm việc với Common Library

Tất cả những loại thư viện này được hiển thị trong trình đơn phụ Window > Common Libraries.

Hình 3.8 Các lựa chọn của Common Library

- Cách tạo ra một thư viện tạm thời trong chương trình Flash:

+ Tạo một file Flash với một thư viện chứa các biểu tượng muốn đặt chúng vào thư viện tạm thời.

+ Đặt file Flash vào trong thư mục Libraries trong thư mục chương trình Flash trong đĩa cứng

- Cách dùng một mục từ thư viện chung trong đoạn phim:

+ Chọn trong trình đơn Window > Common Libraries và chọn một thư viện có trong trình đơn phụ.

Câu hỏi ôn tập, bài tập 3.1 Biểu tượng Graphic là gì? Trình bày cách tạo, các thuộc tính của biểu tượng Graphic

Tạo các biểu tượng graphic hình tròn, vuông và lưu vào thư viện Library, sao chép từ thư viện để có thêm 3 biểu tượng cho mỗi đối tượng.

3.2 Biểu tượng MovieClip là gì? Trình bày cách tạo, các thuộc tính của biểu tượng MovieClip

Tạo các biểu tượng MovieClip hình tròn và vuông để lưu vào thư viện Library, đồng thời trình bày tác dụng của biểu tượng Button và hướng dẫn cách tạo hiệu ứng cho biểu tượng này.

Tạo các biểu tượng Button hình tròn, vuông và lưu vào thư viện Library

3.4 Thư viện(library) dùng để làm gì? Cách đưa một đối tượng vào library

THAO TÁC VỚI TIMELINE

Giới thiệu timeline

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.

Trong TimeLine, có ba phần chính dễ dàng nhận diện: Phần quản lý Layer nằm ở bên trái, Phần quản lý Frame ở phía trên bên phải, và Phần quản lý Công cụ ở phía dưới bên phải.

Layer là công cụ quản lý các lớp đối tượng, với mỗi đối tượng trên Layer sở hữu một thanh TimeLine riêng Trong ví dụ minh họa, đối tượng trên Layer 1 nằm ở TimeLine phía dưới, trong khi đối tượng trên Layer 2 nằm ở TimeLine phía trên.

Thanh TimeLine bao gồm nhiều Frame, trong đó khi tạo chuyển động, các Frame sẽ thay thế lẫn nhau Frame mới sẽ thay thế Frame cũ, và người dùng có thể xem lại hành động bằng cách kéo Frame hiện tại (được đánh dấu màu đỏ) sang trái hoặc phải trên TimeLine.

- Vùng thanh công cụ - gồm các công cụ sau đây:

+ Center Frame: xác định Frame trung tâm.

+ Onion Skin: cho phép hiển thị toàn bộ hình ảnh của đối tượng trên vùng

Frame được chọn Sự hiển thị này bao gồm toàn bộ đối tượng.

Onion Skin Outlines cho phép người dùng hiển thị toàn bộ hình ảnh của đối tượng trong vùng Frame đã chọn, với đặc điểm là chỉ hiển thị viền của đối tượng.

Chức năng Edit Multiple Frames cho phép hiển thị đối tượng gốc trên toàn bộ khung hiển thị, kết hợp với hai tính năng Onion Skin Nhờ đó, người dùng có thể dễ dàng chỉnh sửa đối tượng một cách hiệu quả.

Các thông số quan trọng trong việc điều khiển Frame bao gồm: Current Frame, đại diện cho vị trí của Frame hiện tại; Frame rate, thể hiện tốc độ chuyển động tính bằng số Frame trên giây; và Elapsed Time, cho biết thời gian thực thi toàn bộ Frame trên thanh TimeLine.

Hình 4.4 Onion Skin và Onion Skin Outlines kết hợp với Edit Multiple Frames

Vai trò trong xử lý hoạt hình

Một số chức năng khi làm việc với TimeLine:

Khi làm việc với TimeLine, ta thường xuyên sử dụng đến hai phím tắt sau đây:

Phím F5 được sử dụng để chèn Frame vào thanh TimeLine, tương đương với chức năng Insert Frame Khi vùng TimeLine đã được thiết lập Tween, việc chèn thêm Frame sẽ tự động giãn vùng Tween, và các Frame mới này sẽ kế thừa các thuộc tính Tween đã có.

Phím F6 trong Flash cho phép người dùng chèn KeyFrame vào thanh TimeLine, tương ứng với chức năng Insert KeyFrame KeyFrame được chèn sẽ là frame cuối cùng, giúp tạo điểm chốt cho các hành động trong movie Khi kết hợp với Tween, KeyFrame này sẽ mang lại chuyển động mềm mại cho phim hoạt hình.

Để hiểu rõ hơn về hai phím tắt, chúng ta có thể tham khảo ví dụ dưới đây Trong ví dụ này, chúng ta sẽ tạo một hình chữ nhật với nền trắng và viền đen Tại Frame thứ 5, bạn nhấp vào Frame này và nhấn phím F5 Tiếp theo, hãy thay đổi độ lớn của viền (thuộc tính Stroke = 5) Sau khi thực hiện, hãy kiểm tra độ lớn của viền trên mọi Frame; bạn sẽ nhận thấy rằng viền của tất cả hình chữ nhật trên mọi Frame đều đã thay đổi thành 5.

Khi thay thế phím F5 bằng phím F6 trong ví dụ trên, thuộc tính Stroke chỉ thay đổi ở KeyFrame cuối cùng mà bạn đã điều chỉnh, trong khi các Frame khác vẫn giữ nguyên thuộc tính này.

Để sao chép một Frame cho các Frame tiếp theo, bạn chỉ cần sử dụng phím F5 Ngược lại, để thực hiện một sự thay đổi, hãy sử dụng phím F6.

Hình 4.5 Khởi tạo một hình thể trên KeyFrame đầu tiên.

Hình 4.6 Chèn các Frame bằng phím F5

Hình 4.7 Chèn KeyFrame bằng phím F6

Để sao chép hoặc cắt dán một nhóm Frame, trước tiên bạn cần bôi đen nhóm Frame đó Sau đó, hãy nhấp chuột phải và chọn tùy chọn "Sao chép Frame" hoặc "Cắt Frame" để thực hiện hành động mong muốn.

Để dán nhóm Frame đã sao chép, hãy chọn vị trí trên TimeLine nơi bạn muốn dán Sau đó, nhấn chuột phải và chọn "Dán Frame".

Hình 4.9 Chép một nhóm Frame đã được sao chép hoặc cắt dán

Chức năng Clear Frames giúp xóa các đối tượng trên Layer của Frame đã chọn, tạo ra hai KeyFrame ở vị trí bắt đầu và kết thúc của nhóm Frame được đánh dấu Vị trí đầu tiên sẽ được chèn một Blank KeyFrame, không chứa đối tượng nào, và KeyFrame tương ứng với vị trí kết thúc Clear KeyFrame tương tự như Clear Frames nhưng chỉ áp dụng cho một KeyFrame cụ thể Trong khi đó, Remove Frames sẽ xóa hoàn toàn các Frame cùng với các đối tượng bên trong chúng.

Convert to KeyFrames và Convert to Blank KeyFrames: chuyển đổi một Frame thành KeyFrame hoặc Blank KeyFrame.

Insert Blank KeyFrame: chèn một Blank KeyFrame.

Reverse Frames cho phép bạn đảo ngược thứ tự của một nhóm Frame dễ dàng Để thực hiện, chỉ cần bôi đen nhóm Frame, nhấp chuột phải và chọn Reverse Frame Tính năng này giúp bạn tạo ra những chuyển động đối xứng thú vị.

Xử lý hoạt hình cho đối tượng

Khi soạn thảo 1 file Flash, Playhead là 1 vạch đỏ cắt ngang qua Timeline(xem hình dưới) Nó cho biết ta hiện đang thao tác ở frame số bao nhiêu trên

Sau khi file Flash được xuất ra thành một đoạn phim hoàn chỉnh và chạy trên Flash Player, không còn vạch đỏ nào hiển thị Tuy nhiên, khái niệm Playhead vẫn được sử dụng như một con trỏ để chỉ ra frame hiện tại đang được trình chiếu, ví dụ như frame 8 trong hình minh họa.

Stage là khu vực để vẽ hoặc đặt hình ảnh, với màu nền mặc định là trắng và hình dạng chữ nhật Tất cả nội dung nằm ngoài phạm vi của stage sẽ không hiển thị khi đoạn phim được trình chiếu Kích thước của stage cũng tương ứng với kích thước màn hình của đoạn phim mà bạn tạo ra.

Hình 4.10 Điểm dùng của Frame

Câu hỏi ôn tâp, bài tập

1) Tạo trò chơi hứng bóng.

Gợi ý sử dụng chọn đối tượng và chuyển thành Graphic sau đó dùng F6 để copy các KeyFrame.

TẠO HOẠT HÌNH BẰNG FRAME BY FRAME VÀ CLASSIC TWEEN

Hoạt hình Frame by frame

Frame by Frame trong Flash là kỹ thuật tạo hiệu ứng chuyển động cơ bản, trong đó các đối tượng di chuyển từng khung hình một Tất cả các khung hình này kết hợp lại để tạo thành một chuyển động liên tục, được gọi là Frame by Frame.

Thiết kế chuyển động gồm:

Sử dụng công cụ Oval Tool để vẽ hình eclips và để vẽ được hình tròn thì bạn cần nhấn phím “Shift” trên bàn phím

Một đối tượng hình tròn với kích thước width:150, height: 150

Màu sắc Background là màu đỏ

Hình 4.1 Sử dụng công cụ Oval Tool để vẽ hình elips

Sau khi bạn thiết kế xong bây giờ đến lúc chúng ta tạo nên chuyển động

Tại Panel TimeLine sẽ nhận thấy các Frame có biểu tượng là một dấu chấm tròn đen.

Bây giờ tiếp theo hấn phím F6 từ bàn phím để được 1 Frame tiếp theo

Hình 5.2 Tạo Frame chuyển động cho hình elip

Để đạt tổng số điểm 21, bạn cần nhấn phím F6 thêm 19 lần Để làm cho đối tượng chuyển động, bạn phải di chuyển vị trí của hình tròn màu đỏ sang bên phải tại mỗi vị trí Frame (điểm tròn đen).

Hình 5.3 Tạo điểm đầu và điểm cuối. Điển hình ở vị trí thứ 4 sẽ dịch chuyển sang bên phải sao cho không trùng với điểm trước nó.

Và tương tự như vậy so với các frame còn lại cứ dịch chuyển vị trí tương ứng từng Frame

Và cuối cùng là ta nhận được kết quả như mong đợi bằng cách bạn sử dụng tổ hợp phím Ctrl + Enter trên bàn phím

Hoạt hình Classic Tween

Classic Tween là một kỹ thuật tạo chuyển động trong Flash, được sử dụng từ phiên bản CS3 trở về trước, khi đó được gọi là Motion Tween Từ phiên bản Flash CS4, Adobe đã đổi tên kỹ thuật này thành Classic Tween nhưng vẫn duy trì tính năng Để sử dụng Classic Tween, người dùng cần thao tác với hai KeyFrame: KeyFrame khởi đầu và KeyFrame kết thúc.

Nguyên tắc tạo hoạt hình trong KeyFrame bắt đầu bằng việc tạo các đối tượng như Graphic Symbol, Movie Clip Symbol và Button Symbol Tiếp theo, tại một vị trí khác trên timeline, cần tạo một Keyframe kết thúc với các thay đổi về kích thước, vị trí, xoay và áp dụng các hiệu ứng Style, Filter Cuối cùng, thực hiện Classic Tweening để hoàn thiện hoạt hình.

Sử dụng Classic Tween để tạo hiệu ứng động:

Bước 1: Chọn frame đầu tiên (ví dụ Frame 1) trên tiến trình, rồi tạo các hình (Graphic Symbol, Movie Clip Symbol, Buttom Symbol) trên Stage Đây là Keyframe đầu tiên.

Để thêm một khung hình khóa mới, chọn Frame cuối (ví dụ Frame 45) trên tiến trình, nhấp chuột phải và chọn lệnh Insert KeyFrame Khung hình khóa mới sẽ có nội dung giống như khung hình khóa trước đó Tiến hành hiệu chỉnh lại nội dung hoạt hình bằng cách thay đổi kích thước, vị trí và xoay khung hình theo ý muốn.

Bước 3: Chọn lại Frame đầu tiên (ví dụ Frame 1) Rồi click phải trong TimeLine, chọn lệnh Create Classic Tween.

Hình 5.5 Tạo hoạt hình cho hình ảnh

Bước 4: Ở Panel Properties mục Tweening có các tùy chọn:

Ease: chỉnh tốc độ bắt đầu, hoặc nhấp Edit Easing để hiện hộp thoại Ease In / Ease Out

Rotate: cho phép xoay.(None, Auto, CW, CCW)

Snap: bắt dính theo đườmg dẫn.

Orient to Path: hướng theo đường dẫn

Scale: cho phép co dãn kích thước khi chuyển động.

Hình 5.6 Thiết lập thuộc tính

Bước 5: Ctrl + Enter để xem kết quả.

Câu hỏi ôn tập, bài tập

5.1 Tạo một hoạt hình ảo giác các hình tròn đồng tâm.5.2 Tạo một hoạt cảnh hoạt hình bằng Classic Tween

TẠO HOẠT HÌNH THEO ĐƯỜNG DẪN

Giới thiệu hoạt hình theo đường dẫn

Classic Tween cho phép tạo chuyển động theo một đường dẫn duy nhất, trong khi hoạt hình theo đường dẫn cho phép đối tượng di chuyển theo những đường phức tạp hơn Điều này cho phép mô phỏng các chuyển động tự nhiên như chim bay hay lá rụng.

Tạo thêm một layer mới đặt tên là path, rồi vẽ đường path bằng Pencil Tool

Click phải vào tên Layer path > chọn lệnh Guide (layer Guide sẽ không hiển thị các phần tử trên layer này khi xem hoạt hình).

Kéo rê layer kế bên dưới vào bên trong layer Path.

Chỉnh tâm của đối tượng hoạt hình ở cả hai frame khóa đầu tiên và frame khóa cuối cùng vào hai đầu mút của đường dẫn.

Thao tác hoạt hình theo đường dẫn

Bước 1: Chọn đối tượng và thao tác tạo Keyframe đầu và cuối

Bước 2: Tạo thêm một Layer mới đặt tên là path.

Click phải vào tên Layer path > chọn lệnh Guide (Layer Guide sẽ không hiển thị các phần tử trên Layer này khi xem hoạt hình).

Kéo rê Layer kế bên dưới vào bên trong Layer path rồi vẽ đường Path bằng Pencil Tool.

Chỉnh tâm của đối tượng hoạt hình ở cả hai Frame khóa đầu tiên và Frame khóa cuối cùng vào hai đầu mút của đường dẫn.

Hình 6.1 Tạo đường dẫn cho đối tượng

To ensure that an object moves along a path while changing its orientation during the movement, navigate to the Properties Panel and select the "Orient to Path" option under the Tweening section.

Hình 6.2 Thiết lập thuộc tính đối tượng

Câu hỏi ôn tập, bài tập

6.1 Tạo hoạt hình quả bóng nhảy theo hình zich zac

6.2 Tạo hoạt hình cho đàn chim bay.

6.3 Vẽ cảnh mùa thu lá rơi

Gợi ý: Có thể dùng thư viện hình ảnh internet đưa vào Library.

TẠO HOẠT HÌNH VỚI MOTION TWEEN

Mô tả cơ chế

Motion Tween là một kỹ thuật tạo chuyển động đơn giản hơn so với Classic Tween, không cần tạo KeyFrame Một điểm nổi bật của Motion Tween trong phiên bản Flash CS6 là khả năng hỗ trợ hiệu ứng 3D, bao gồm hai loại hiệu ứng: Translation và Rotation.

Hình 7.1 Kĩ thuật Motion Tween

When comparing Frame by Frame and Classic Tween techniques, it's important to note that Motion Tween can optimize the size of Flash files during publication Motion Tween allows for adjustments in movement paths, coordinates, rotation angles, filters, and blending options, utilizing the Selection tool and properties within the Motion Editor.

Hoạt hình Motion Tween

Kỹ thuật Motion Tween, tương tự như Classic Tween, cho phép tạo chuyển động mà không cần phải tạo KeyFrame trước Một trong những ưu điểm nổi bật của Motion Tween từ phiên bản Flash CS4 là khả năng hỗ trợ hiệu ứng 3D, bao gồm hai loại hiệu ứng 3D là Transformation và Rotation.

When comparing Frame by Frame and Classic Tween techniques, Motion Tween offers the advantage of optimizing the file size of Flash during publication Additionally, Motion Tween allows for precise adjustments to the motion path, coordinates, rotation angles, filters, and blending options, utilizing the Selection tool and properties available in the Motion Editor panel.

Sử dụng Motion Tween để tạo hiệu ứng động

Bước 1: Chọn frame đầu tiên (ví dụ frame 1) trên tiến trình, rồi tạo các hình (graphic symbol, movie clip symbol, button symbol) trên stage

Bước 2: Chọn frame đầu tiên (ví dụ frame 1) và nhấp chuột phải trong timeline, sau đó chọn lệnh Create Motion Tween Flash sẽ tự động tạo một khoảng Frame mặc định cho chuyển động, thường là 1 giây hoạt hình Nếu số lượng Frame này không đủ, bạn có thể điều chỉnh bằng cách di chuyển con trỏ chuột đến vị trí frame cuối cùng Khi con trỏ có dạng < > , hãy nhấp chuột và kéo sang trái hoặc phải để thay đổi số lượng Frame.

Bước 3: Chọn khung cuối và di chuyển hình đã vẽ đến vị trí mới Khi thực hiện, một đường mô tả chuyển động của đối tượng sẽ xuất hiện trên sân khấu Sử dụng công cụ Selection để điều chỉnh hình dạng của đường chuyển động.

Bước 4: Ctrl + Enter để xem kết quả.

Hình 7.2 Tạo hoạt hình bằng Motion Tween

Tạo chuyển động nhờ vào Motion Presets

Flash CS6 offers a variety of pre-made motion effects available in the Motion Presets feature To access this functionality, navigate to Windows > Motion Presets.

Vùng chức năng Motion Presets cung cấp nhiều hiệu ứng làm sẵn, cho phép bạn thao tác trực tiếp trên các đối tượng mà không cần chuyển đổi sang biểu tượng Bạn cũng có thể áp dụng các hiệu ứng này cho các biểu tượng như Graphic, Button hay MovieClip Dưới đây là một số hiệu ứng hoạt hình minh họa cho vùng chức năng này.

Hiệu ứng quả bóng chuyển động cho phép bạn tạo một khối cầu 3D giống như hình vẽ Để áp dụng hiệu ứng này, hãy chọn đối tượng và vào khung Motion Presets để lựa chọn hiệu ứng chuyển động phù hợp.

Hình 7.3 Chức năng Motion Presets: chọn hiệu ứng bounce-in-3D

Câu hỏi ôn tập, bài tập

7.1 Tạo hoạt hình Classic Tween cho cảnh xe hơi chạy qua dãy núi.

7.2 Hãy sử dụng kĩ thuật Tween kết hợp với các công cụ tạo hiệu ứng 3D để tạo dựng các hiệu ứng sau: a) Hiệu ứng quả bóng di chuyển trong không gian. b) Chữ chạy 3D.

7.3 Sử dụng các công cụ tô vẽ vẽ hình con lắc đơn sau đó tạo hiệu ứng mô phỏng chuyển động của con lắc đơn như hình sau

TẠO HOẠT HÌNH VỚI SHAPE TWEEN

Các bước sử dụng Shape Tween

Chúng ta sẽ thực hiện hiệu ứng chuyển đổi đường thẳng thành đường cong, vì các Tween khác không hỗ trợ hiệu ứng này Đây là một ví dụ điển hình về việc sử dụng Shape Tween.

Hình 8.1 Kĩ thuật Shape Tween Bước 1 Dùng công cụ Line vẽ một đường thẳng trên khung sáng tác.

Bước 2: Sử dụng công cụ Shape Tween, bạn có thể tạo Tween trước hoặc sau khi chèn KeyFrame Để minh họa, chúng ta sẽ tạo Tween trước Đầu tiên, hãy chọn đối tượng bằng công cụ Selection, sau đó nhấp chuột phải và chọn Create Shape Tween.

Để tạo điểm uốn trong thiết kế, bạn cần bấm chọn Frame 30 trên TimeLine và nhấn phím F6 để chèn KeyFrame kết thúc Tiếp theo, sử dụng công cụ Add Anchor Point để thêm điểm điều khiển tại vị trí giữa đường thẳng Sau đó, chọn công cụ Convert Anchor Point để tạo điểm uốn Cuối cùng, bấm chọn điểm vừa tạo và uốn đường thẳng thành đường cong như mong muốn.

Bước 3 Nhấn tổ hợp Ctrl+Enter để kiểm tra sản phẩm.

Bạn lưu ý rằng, trong hình minh họa trên, tôi đã sử dụng chức năng Onion Skin.

Sử dụng Shape hint

Khi sử dụng Shape Tween, sự biến hình sẽ được tạo ra tự động theo thuật toán đã được định sẵn Để kiểm soát quá trình biến hình này, Flash cung cấp công cụ Shape Hint cho người dùng.

Shape Hint là công cụ hỗ trợ trong quá trình sử dụng Shape Tween Để áp dụng chức năng này, bạn cần tạo một Shape Tween cho đối tượng và truy cập vào menu Modify > Shape > Add Shape Hint (hoặc sử dụng phím tắt Ctrl+Shift+H) Shape Hint sẽ xuất hiện theo cặp, với một điểm ở Frame đầu tiên và một điểm ở Frame cuối cùng trên TimeLine của Tween, được đánh số từ a, b, c Hãy tham khảo hai hình vẽ dưới đây để hiểu rõ hơn.

Hình 8.2 Các cặp Shape Hint ở Frame đầu (trái) và Frame cuối (phải)

Câu hỏi ôn tập, bài tập

8.1 Tạo hoạt hình Shape Tween các kiểu biến đổi dòng chữ SINH VIÊN CĐ

KỸ THUẬT CÔNG NGHỆ BR-VT

8.2 Tạo hoạt hình biến đổi từ các hình dạng khác nhau: hình vuông…hình tròn. 8.3 Tạo một đoạn văn bản với nội dung “SAO VÀNG” và một ngôi sao 5 cánh màu vàng Tạo hiệu ứng biến đổi chữ “SAO VÀNG” thành ngôi sao.

Hãy sử dụng bức ảnh chứa các đối tượng được vẽ ở trên để thực thi bài thực hành số 2.

1 Hãy chuyển đổi MatTrang trong Layer 2 thành biểu tượng MovieClip và đặt tên cho nó là MatTrang Hãy sử dụng Classic Tween để tạo hiệu ứng động cho mặt trăng Mặt trăng có hai hiệu ứng động là: đổ bóng mờ và di chuyển Để tạo hiệu ứng bóng mờ, hãy sử dụng thuộc tính Filter=Blur của MovieClip Các thao tác này chỉ được sử dụng Classic Tween.

2 Hãy xóa bỏ các ngôi sao trên bầu trời ở trên Trong thư viện, hãy chọn lại biểu tượng Graphic là Sao mà bạn đã tạo Bạn hãy chuyển đổi nó thành MovieClip.

Sử dụng Motion Tween để tạo hiệu ứng thay đổi độ trong suốt của MovieClip từ 80% đến 100% Tiếp theo, chọn công cụ Spray Brush và biểu tượng MovieClip Sao Điều chỉnh các thông số tương tự như trong bài thực hành số 1 và quét lên Layer Sao.

3 Hãy sử dụng công cụ Bone để tạo chuyển động cho đôi chân cô gái Các phần còn lại không cần tạo chuyển động Bạn kết hợp với Motion Tween để tạo sự di chuyển (thay đổi vị trí trong bức ảnh) cho cô gái.

4 Sử dụng Motion Tween để tạo chuyển động cho các đám mây Các đám mây chuyển động theo dạng thức 3D (kết hợp công cụ 3D Rotation và 3D Translation).

5 Hãy tạo mới một Layer đặt tên là BienHinh Trên Layer này, bạn hãy tạo một ngũ giác Sử dụng Shape Tween để tạo hiệu ứng biến hình cho hình thể này thành hình ngôi sao năm cánh Hãy đặt nó vào một vị trí thích hợp.

SỬ DỤNG SỬ DỤNG MẶT NẠ (MASK)

Mặt nạ (mask)

Mặt nạ là một kỹ thuật cho phép tạo ra khung trình chiếu với hình dạng phức tạp, giúp giới hạn các hoạt động chỉ diễn ra bên trong vùng mặt nạ đó.

Để tạo một mặt nạ trong thiết kế, trước tiên bạn cần tạo một khung trình chiếu bằng cách vẽ một hình thể trên một Layer gọi là Layer Mask Sau đó, tạo thêm một Layer thứ hai cho hoạt cảnh Đặt Layer Mask lên trên Layer hoạt cảnh, nhấp chuột phải vào Layer Mask và chọn Mask Nếu bạn cần tạo nhiều Layer hoạt cảnh từ một Layer Mask, chỉ cần kéo và thả Layer đó vào trong Layer Mask trong khung Layer.

Sử dụng mặt nạ động

Sử dụng hai lớp: Layer Art và Layer Mask.

Sử dụng Motion Tween hoặc Classic Tween để tạo hiệu ứng dịch chuyển cho lớp mặt nạ dọc theo đường nghệ thuật Sau đó, nhấp chuột phải vào lớp Mask và chọn Mask để kích hoạt Lớp mặt nạ chuyển động này sẽ tạo ra hiệu ứng xuất hiện từng phần cho đối tượng hình nghệ thuật.

Sử dụng mặt nạ biến hình

Trong kỹ thuật này, bạn sẽ tạo một mặt nạ biến hình bằng cách sử dụng Shape Tween, khác với ví dụ trước đó sử dụng Motion Tween (hoặc Classic Tween).

Hình 9.3 Mặt nạ biến hình

Mặt nạ động và mặt nạ biến hình mang đến những hiệu ứng thú vị cho việc trình chiếu album ảnh Sử dụng hai loại mặt nạ này giúp tạo ra các hiệu ứng độc đáo, làm cho trải nghiệm xem ảnh trở nên hấp dẫn hơn.

Mặt nạ có thể di chuyển được (draggable mask) là một công cụ hữu ích trong thiết kế đồ họa Để tạo mặt nạ này, bạn cần một đối tượng như biểu tượng movieclip hoặc button, với movieclip thường được ưa chuộng hơn Bắt đầu, hãy tạo hai Layer: Layer 1 để chứa ảnh nền (background) và Layer 2 để vẽ một hình ngũ giác làm mặt nạ (mask).

To create a draggable mask effect, you need to utilize ActionScript In this process, we will leverage Code Snippets Begin by selecting the pentagon shape and then click on the Code Snippets icon to proceed.

Để sử dụng tính năng Drag and Drop, bạn hãy chọn nhóm Actions và nhấp đôi chuột vào biểu tượng tương ứng Sau đó, nhấn Ctrl+Enter để kiểm tra Lúc này, bạn có thể di chuyển đối tượng hình ngũ giác một cách dễ dàng.

Để tạo một mặt nạ có thể kéo (draggable mask), bước tiếp theo là sử dụng kỹ thuật Mask Bạn cần chọn Layer Mask, nhấp chuột phải và chọn Mask, kết quả sẽ hiển thị như hình dưới đây.

Hình 9.6 Tạo một draggable mask – Bước 3

Để kiểm tra hiệu ứng mask trong movie, bạn hãy nhấn tổ hợp phím Ctrl+Enter Khi đó, bạn sẽ thấy hiệu ứng mask đã hoạt động, nhưng đối tượng được dùng làm mặt nạ không thể di chuyển Nguyên nhân là do thuộc tính buttonMode của movieclip được tự động thiết lập là false khi sử dụng hiệu ứng mask Để khắc phục, bạn cần nhấn phím F9 để trở về khung soạn thảo ActionScript và thêm dòng lệnh: movieClip_1.buttonMode = true;

Có thể tham khảo toàn bộ mã lệnh của chương trình như bên dưới. movieClip_1.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag); function fl_ClickToDrag(event:MouseEvent):void{ movieClip_1.startDrag();

} stage.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop); function fl_ReleaseToDrop(event:MouseEvent):void{ movieClip_1.stopDrag();

Tạo SlideShow ảnh

Để tạo SlideShow ảnh, bạn cần nhập một số bức ảnh vào thư viện, trong ví dụ này sử dụng 3 bức ảnh Tạo 6 Layer, trong đó 3 Layer chứa ảnh và 3 Layer dùng để tạo mặt nạ, mỗi mặt nạ sẽ được đặt ngay trên bức ảnh tương ứng Bạn có thể tham khảo hình minh họa bên dưới để hiểu rõ hơn.

Hình 9.7 Tạo Slide ảnh – Bước 1

Hiệu ứng cho mặt nạ Mask 1 Hãy tạo một hình chữ nhật có kích thước nhỏ, nằm ở góc trên bên phải của khung trình chiếu.

Hình 9.8 Tạo Slide ảnh – Bước 2

Chọn đối tượng hình vuông, nhấp chuột phải và chọn "Create Motion Tween" Sau đó, điều chỉnh độ rộng của Tween để đảm bảo vị trí kết thúc nằm ở Frame.

15 Sau đó, hiệu chỉnh kích thước của hình vuông sao cho nó chiếm toàn khung trình chiếu Tại Frame thứ 19 của Layer Pic1, nhấn phím F5 (hoặc F6) để sao chép toàn bộ ảnh trên Frame thứ nhất lên các Frame 2 đến 19 Chọn Layer Mask

1 này, kích chuột phải và chọn Mask.

Hiệu ứng cho mặt nạ Mask 2 tương tự như Mask 1 Tại Frame 20 của Layer Mask 2, hãy nhấn phím F6 và sử dụng công cụ PolyStar để tạo ra một dãy các ngôi sao.

Hình 9.9 Tạo Slide ảnh – Bước 3

Để tạo hiệu ứng chuyển động cho các đối tượng ngôi sao, hãy nhấn chuột phải và chọn "Create Motion Tween" Sau đó, điều chỉnh độ rộng của Tween sao cho vị trí kết thúc của nó nằm chính xác ở Frame.

35 của Layer Mask 2 Tại Frame 39 của Layer Pic2, nhấn phím F5 hoặc F6 để sao chép Frame 20 lên các Frame từ 21 đến 39 Kích chuột phải lên Layer Mask

Để tạo hiệu ứng cắt lát cho mặt nạ Mask 3, bạn cần tạo các hình chữ nhật không viền, với độ rộng 1 pixel trên Layer Mask 3 Sao chép và sắp xếp các hình này gần nhau để chúng bao phủ toàn bộ khung trình chiếu Sử dụng mặt nạ biến hình bằng cách chọn Layer Mask 3, nhấn chuột phải và chọn Shape Tween Tại Frame 55, nhấn F6 để tạo KeyFrame và chọn tất cả các hình chữ nhật Giữ phím Ctrl và sao chép các hình này, sắp xếp chúng sát nhau cho đến khi chúng chồng khít và che khuất khung trình chiếu Cuối cùng, tại Frame 60 của Layer Pic3, nhấn F5 hoặc F6, chọn Layer Mask 3 và kích chuột phải để chọn Mask.

Hình 9.10 Tạo Slide ảnh – Bước 4 Bạn hãy quan sát lại cách bố trí các Frame trên TimeLine theo hình bên dưới.

Để kiểm tra kết quả cuối cùng của việc tạo slide ảnh, bạn chỉ cần nhấn tổ hợp phím Ctrl+Enter Hy vọng rằng bạn sẽ hài lòng với các hiệu ứng đã tạo Bên cạnh đó, bạn có thể tự tạo ra các hiệu ứng riêng bằng cách sử dụng hai loại mặt nạ đã đề cập.

Câu hỏi ôn tập, bài tập

9.1 Tạo mặt nạ Mask cho dòng chữ KHOA CÔNG NGHỆ THÔNG TIN

9.2 Tạo mặt nạ Mask bóng vệt sáng lướt qua sản phẩm xe ô tô

9.3 Tạo một SlideShow anh giới thiệu về các nghề khoa CNTT

CÁC CÔNG CỤ TẠO HOẠT HÌNH: BONE, DECO, BIND, 3D

Bone Tool

Công cụ Bone trong Adobe Flash CS4 cho phép người dùng tạo ra các chuyển động linh hoạt dựa trên các khớp nối, như khớp xương tay chân, khớp nối của cần cẩu, hoặc hình dạng động vật như rồng và rắn Đây là một công cụ hữu ích và dễ sử dụng, giúp nâng cao khả năng sáng tạo trong việc thiết kế chuyển động Khi sử dụng công cụ này, cần lưu ý phân biệt các trường hợp khác nhau để đạt được hiệu quả tốt nhất.

Khi cần tạo khớp nối cho các đối tượng liên tục như hình rắn trườn hoặc rồng lượn, chúng ta sẽ sử dụng công cụ này một cách trực tiếp để đảm bảo hiệu quả và tính chính xác trong quá trình thiết kế.

Trong trường hợp cần tạo đối tượng không liên tục với các khớp nối như khớp xương hoặc khớp nối cần cẩu, chúng ta sẽ sử dụng công cụ này sau khi chuyển đổi các phần của đối tượng thành các biểu tượng tương ứng.

Tiếp theo, ta sẽ minh họa cho việc sử dụng công cụ Bone trong hai trường hợp này.

Công cụ Bone trong trường hợp 1:

- Bước 1 Bạn hãy sử dụng công cụ Pencil hoặc Brush để tạo hình một chú rắn.

- Bước 2 Bấm chọn công cụ Bone, sau đó vẽ các đường khớp nối như trong hình minh họa.

Bước 3: Sử dụng công cụ Selection để kiểm tra các mối nối Để tạo hiệu ứng động, hãy chọn một Frame (ví dụ Frame 20) và nhấn phím F6 Công cụ Bone sẽ tự động tạo ra chuyển động khi bạn điều chỉnh độ cong của đối tượng tại Frame này thông qua các khớp nối, mà không cần sử dụng kỹ thuật Tween.

- Bước 4 nhấp tổ hợp Ctrl+Enter để kiểm tra kết quả.

Chuyển động mềm mại của chú rắn là nguồn cảm hứng để bạn tạo ra trò chơi “Rắn tìm mồi” bằng ActionScript Để nắm vững kỹ thuật lập trình game trong Flash, bạn nên tìm hiểu các giáo trình chuyên sâu Trong bài viết này, chúng tôi sẽ tập trung vào kỹ thuật tạo hoạt hình, điều khiển đối tượng - một chức năng cơ bản trong lập trình game, và một số hiệu ứng thường dùng trong kỹ xảo truyền hình và điện ảnh.

Hình 10.1 – Công cụ Bone trường hợp 1 Công cụ Bone trong trường hợp 2:

- Bước 1 Bạn hãy tạo ba khối hình chữ nhật (tượng trưng cho các phần của cần cẩu) và sau đó convert chúng thành các đối tượng Graphic.

- Bước 2 Bấm chọn công cụ Bone, sau đó vẽ các đường khớp nối như trong hình minh họa.

- Bước 3 Hãy sử dụng công cụ Selection để kiểm tra các mối nối Chọn Frame

20, nhấn phím F6, sau đó thay đổi hình dạng của cần cẩu bằng cách điều chỉnh các mối nối.

- Bước 4 Nhấn tổ hợp Ctrl+Enter để kiểm tra.

Nếu bạn gặp khó khăn trong việc điều khiển các bộ phận của cần cẩu, hãy tìm hiểu về các thuộc tính của các đoạn nối trong công cụ Bone để cải thiện kỹ năng của mình.

Bảng thuộc tính của các đoạn nối bởi công cụ Bone

Khi bạn nhấp chuột vào một đoạn thẳng nối các mối nối, trong bảng thuộc tính Properties sẽ hiện ra các thông số trong hình dưới.

- Location: Position X và Y (tọa độ của thanh nối), Length (độ dài của thanh nối), Angle (góc nghiêng của thanh nối), Speech (tốc độ xoay của thanh nối).

- Joint Rotation: cho phép hoặc không cho phép thanh nối có thể xoay – tương ứng với Enable được chọn hay không được chọn.

- Rotation Constrain: cho phép mối nối gốc của thanh nối dịch chuyển trong vùng từ Min đến Max.

- Joint x Translation và Joint y Translation: cho phép thanh nối dịch chuyển theo chiều x hay chiều y.

Hình 10.3 – Bảng thuộc tính của mối nối tạo bởi công cụ Bone

Spring là một chức năng mới trong IK Bone, có hai thuộc tính chính: Strength và Damping Strength đại diện cho số lượng của Spring, ảnh hưởng đến phản ứng của khung sườn với chuyển động vật lý, tỷ lệ thuận giữa giá trị Strength và chuyển động tổng thể Damping xác định độ tắt dần của chuyển động, được đo bằng khoảng thời gian giữa chuyển động ban đầu và thời gian trở về vị trí dừng của IK Bone Tính năng này được bổ sung trong phiên bản Flash CS6 của Adobe.

Công cụ Bind Tool

Công cụ này cần được sử dụng kết hợp với công cụ Bone Khi áp dụng công cụ Bone trong trường hợp 1, bạn có thể kết hợp với công cụ Bind để ép buộc các thanh nối phụ thuộc lẫn nhau Khi sử dụng công cụ Bind và nhấn vào một thanh nối, sẽ xuất hiện bốn điểm điều khiển cho thanh nối đó, như được minh họa trong hình bên dưới với các nút được đánh dấu vàng.

Các điểm điều khiển tương ứng với viền của đối tượng được điều khiển bởi thanh nối Để liên kết các mối nối, sử dụng công cụ Bind để chọn các nút điều khiển và kéo thả chúng vào vị trí thanh nối mà các điểm này phụ thuộc.

Công cụ 3D

Flash không hỗ trợ các đối tượng đồ họa 3D và thiếu công cụ để tạo và phối màu 3D Nó chỉ cho phép tạo sự dịch chuyển và quay 3D Để tạo đối tượng động 3D, Autodesk Maya là lựa chọn tốt nhất Nếu bạn yêu thích Flash, có thể sử dụng Plugin FreeSpin3D, mặc dù giá của nó không hề rẻ Để trải nghiệm đồ họa 3D miễn phí trong Flash, bạn có thể sử dụng ActionScript, nhưng cần có kiến thức toán học vững chắc để thực hiện.

Trong giáo trình này, chúng ta sẽ không thảo luận chi tiết về đồ họa 3D trong Flash.

Dù không có công cụ chuyên dụng cho thiết kế 3D, chúng ta vẫn có thể tạo ra thước phim với cảm giác 3D nhờ vào kỹ thuật phối màu Gradient và kỹ thuật Layer Trong ví dụ này, tôi sẽ hướng dẫn cách xây dựng đoạn phim đánh golf, trong đó người đánh golf sẽ đánh vào quả bóng, khiến quả bóng lăn và rơi vào lỗ golf trên sân cỏ.

Bước 1 Tạo mới một Layer có tên là Glass Bạn hãy phối màu Linear Gradient, và chọn chế độ màu như hình bên dưới.

Hình 1 – Trò chơi golf: sân golf trên lớp glass.

Bước 2 Tạo lỗ golf trên sân golf Tạo một Layer mới tên là hole Trên Layer này, bạn hãy tạo một hình Eclipse như sau.

Hình 2 – Trò chơi golf: Các bước tạo lỗ golf

Sau khi tạo lỗ golf, bạn cần thêm một thanh dọc làm cờ cắm và đặt lỗ golf vào vị trí phù hợp trên khung trình diễn Lưu ý rằng khung trình diễn nên rộng hơn theo chiều ngang, tỉ lệ 8:3 theo chuẩn HD (ví dụ: 850px chiều ngang và 400px chiều dọc) sẽ là lựa chọn tốt nhất.

Hình 3– Trò chơi golf: Hoàn tất lớp Hole

Bước 3: Tạo quả bóng golf bằng cách sử dụng công cụ vẽ hình Eclipse để tạo một hình tròn (nhấn giữ Shift và kéo chuột) Sau đó, điều chỉnh thuộc tính màu Gradient theo hướng dẫn Quả bóng golf sẽ được đặt trên Layer ball.

Hình 4– Trò chơi golf: Tạo quả bóng chơi golf

Bước 4 Tạo thanh chơi golf Thanh chơi golf này sẽ đánh vào quả bóng để tạo hiệu ứng đánh golf Thanh chơi golf được đặt trên Layer line.

Hình 5– Trò chơi golf: Tạo thanh đánh golf

Lưu ý : bạn cần đặt Layer thanh đánh bóng vào sau Layer quả bóng chơi golf.

Sử dụng kỹ thuật Motion Tween, bạn sẽ tạo hiệu ứng cây gậy golf đánh vào quả bóng golf Trong ví dụ dưới đây, tôi kết hợp công cụ 3D Rotation để tăng cường hiệu ứng hình ảnh.

Hình 6– Trò chơi golf: Tạo cảnh đánh bóng

Khi áp dụng Motion Tween, hãy điều chỉnh vị trí kết thúc tại Frame thứ 5 Tiếp theo, chọn Layer thứ 5 bằng cách bôi đen và nhấn phím Ctrl, sau đó sử dụng phím F5 để sao chép Frame 1 vào các Frame còn lại trong khung TimeLine.

Để tạo hiệu ứng quả bóng lăn, bạn cần tạo một KeyFrame mới tại Frame thứ 5 trên Layer ball bằng cách nhấn phím F6 Tiếp theo, sử dụng Motion Tween để thiết lập chuyển động cho quả bóng di chuyển về phía lỗ đánh golf.

Trong trò chơi golf, chuyển động của quả bóng được chia thành hai giai đoạn rõ ràng Giai đoạn đầu tiên diễn ra từ vị trí ban đầu đến lỗ golf, kéo dài từ Frame 5 đến Frame 60 Giai đoạn thứ hai là khi quả bóng di chuyển từ bề mặt lỗ golf xuống dưới lỗ, diễn ra từ Frame 60 đến Frame 65.

Bước 6: Quan sát quá trình quả bóng di chuyển từ bề mặt xuống đáy lỗ golf, ta thấy quả bóng sẽ biến mất Để thực hiện hiệu ứng này, hãy sử dụng kỹ thuật Layer Sử dụng công cụ Lasso để chọn một phần trên Layer Glass như trong hình minh họa bên dưới.

Hình 8– Trò chơi golf: Kĩ thuật Layer

Lưu ý: Bạn nên sử dụng thuộc tính Lock cho các Layer còn lại (trừ Layer glass và Layer hole).

Sau khi đã chọn vùng chọn, hãy sử dụng chức năng "Distribute to Layers" để tạo ra một số Layer mới Tiếp theo, nhóm các Layer này lại thành một Folder mới và đặt tên là "LayerTech" Cuối cùng, kéo Folder này lên trên tất cả các Layer còn lại để hoàn tất.

Để hoàn thiện thước phim trong trò chơi golf, bạn cần thêm hiệu ứng đổ bóng, giúp tạo cảm giác chân thực hơn Dưới đây là dự án hoàn chỉnh với các bước thực hiện.

Hình 10– Trò chơi golf: Dự án hoàn chỉnh

Dự án golf này hứa hẹn mang đến cho bạn trải nghiệm 3D sống động, sử dụng các kỹ thuật đơn giản từ Flash để tạo hiệu ứng hấp dẫn.

Shadow, hiệu ứng Gradient và kĩ thuật Frame, và kết quả thu được là một thước phim tựa 3D.

Để tạo hiệu ứng 3D giống như trái đất quay, bạn cần một bức ảnh trái đất phác họa trên mặt phẳng Sử dụng công cụ Fill Color với kiểu Bitmap và kỹ thuật Shape Tween để kết hợp Sau đó, áp dụng công cụ Gradient Transform để tạo sự dịch chuyển hình ảnh trong một khối hình tròn.

Câu hỏi ôn tập, bài tập 10.1 Tạo hoạt hình cầu thủ bóng đá sút bóng vào khung thành.

Gợi ý: Sử dụng công cụ Bond và 3D tương tự ví dụ đánh golf

10.2 Hãy sử dụng các công cụ tạo hoạt hình (Tween, Bone, Bind, 3D,…) để tạo một VideoClips Lưu ý trong bài này, sinh viên cần kết hợp với một bài hát Nội dung phim và nội dung bài hát phải tương đối phù hợp Bài hát dài không dưới 1 phút.

ĐIỀU KHIỂN CHUỘT VÀ BÀN PHÍM BẰNG CÁC SỰ KIỆN

TẠO CÁC BANNER QUẢNG CÁO

VẼ GIAO DIỆN CÁC TRANG WEB

TẠO CÁC MOVIE CLIP VÀ CÁC NÚT BẤM

TẠO ÂM THANH, XỬ LÝ ÂM THANH

CHUYỂN FILE PHIM THÀNH VIDEO FLASH

PUBLISH RA SHOCKWAVE FLASH VÀ HTML

Ngày đăng: 31/12/2021, 22:44

HÌNH ẢNH LIÊN QUAN

Hình 1.6. Chọn khu vực lưu - Giáo trình mô đun Thiết kế hoạt hình (Nghề Công nghệ thông tin  Trình độ trung cấp)
Hình 1.6. Chọn khu vực lưu (Trang 15)
Hình 1.7. Chọn thư mục lưu - Giáo trình mô đun Thiết kế hoạt hình (Nghề Công nghệ thông tin  Trình độ trung cấp)
Hình 1.7. Chọn thư mục lưu (Trang 15)
Hình 1.9. Lưu đúng định dạng file - Giáo trình mô đun Thiết kế hoạt hình (Nghề Công nghệ thông tin  Trình độ trung cấp)
Hình 1.9. Lưu đúng định dạng file (Trang 16)
Hình 1.1. Công cụ Pencil - Giáo trình mô đun Thiết kế hoạt hình (Nghề Công nghệ thông tin  Trình độ trung cấp)
Hình 1.1. Công cụ Pencil (Trang 17)
Hình 1.2. Công cụ Smoothing - Giáo trình mô đun Thiết kế hoạt hình (Nghề Công nghệ thông tin  Trình độ trung cấp)
Hình 1.2. Công cụ Smoothing (Trang 18)
Hình 1.3. Công cụ Rectangle - Giáo trình mô đun Thiết kế hoạt hình (Nghề Công nghệ thông tin  Trình độ trung cấp)
Hình 1.3. Công cụ Rectangle (Trang 19)
Hình 1.4. Công cụ vẽ hình tròn - Giáo trình mô đun Thiết kế hoạt hình (Nghề Công nghệ thông tin  Trình độ trung cấp)
Hình 1.4. Công cụ vẽ hình tròn (Trang 20)
Hình 4.5. Khởi tạo một hình thể trên KeyFrame đầu tiên. - Giáo trình mô đun Thiết kế hoạt hình (Nghề Công nghệ thông tin  Trình độ trung cấp)
Hình 4.5. Khởi tạo một hình thể trên KeyFrame đầu tiên (Trang 47)
Hình 4.6. Chèn các Frame bằng phím F5 - Giáo trình mô đun Thiết kế hoạt hình (Nghề Công nghệ thông tin  Trình độ trung cấp)
Hình 4.6. Chèn các Frame bằng phím F5 (Trang 47)
Hình 4.8. Sao chép hoặc Cắt dán nhóm Frame - Giáo trình mô đun Thiết kế hoạt hình (Nghề Công nghệ thông tin  Trình độ trung cấp)
Hình 4.8. Sao chép hoặc Cắt dán nhóm Frame (Trang 48)
Hình 4.9. Chép một nhóm Frame đã được sao chép hoặc cắt dán - Giáo trình mô đun Thiết kế hoạt hình (Nghề Công nghệ thông tin  Trình độ trung cấp)
Hình 4.9. Chép một nhóm Frame đã được sao chép hoặc cắt dán (Trang 49)
Hình 4.10. Điểm dùng của Frame - Giáo trình mô đun Thiết kế hoạt hình (Nghề Công nghệ thông tin  Trình độ trung cấp)
Hình 4.10. Điểm dùng của Frame (Trang 50)
Hình 4.1. Sử dụng công cụ Oval Tool để vẽ hình elips - Giáo trình mô đun Thiết kế hoạt hình (Nghề Công nghệ thông tin  Trình độ trung cấp)
Hình 4.1. Sử dụng công cụ Oval Tool để vẽ hình elips (Trang 52)
Hình 5.3. Tạo điểm đầu và điểm cuối. - Giáo trình mô đun Thiết kế hoạt hình (Nghề Công nghệ thông tin  Trình độ trung cấp)
Hình 5.3. Tạo điểm đầu và điểm cuối (Trang 53)

TỪ KHÓA LIÊN QUAN

TRÍCH ĐOẠN

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

w