Bài giảng Tin học cơ sở: Bài 2 - ĐH Bách Khoa

BÀI 2: TẠO HOẠT ẢNH TRONG FLASH

KHOA CÔNG NGHỆ THÔNG TIN
TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

Bài giảng tin học cơ sở


Nội dung
1. Giới thiệu về hoạt ảnh
2. Timeline (đường thời gian/bảng tiến trình)
3. Lớp (Layer)
4. Khung hình (Frame)
5. Biến đổi chuyển động
6. Biến đổi hình dạng

Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

2


Nội dung
1. Giới thiệu về hoạt ảnh
2. Timeline (đường thời gian/bảng tiến trình)
3. Lớp (Layer)
4. Khung hình (Frame)
5. Biến đổi chuyển động
6. Biến đổi hình dạng

Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

3


1. Giới thiệu về hoạt ảnh
 Là quá trình các
đối
tượng xuất hiện,
di
chuyển theo một chuyển
động
nhịp nhàng
và đều đặn
 Thực ra là chuỗi các ảnh
tĩnh trong đó mỗi hình ảnh
(khung hình - frame) chỉ thay
đổi một chút so với hình ảnh
trước đó, mỗi hình ảnh chỉ
được thể hiện trong một
khoảng thời gian ngắn

Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

4


1. Giới thiệu về hoạt ảnh (2)
 Khung hình (Frame)
 Biểu diễn một lần thể hiện của phim Flash ở mỗi thời
điểm cụ thể trong suốt quá trình phát lại
 Sau khi dịch và chạy, chương trình được thực hiện từ

khung hình đầu đến khung hình cuối
 Tốc độ khung hình
 Số lượng các hình ảnh riêng biệt (khung hình) xuất
hiện trong một giây.
 Càng cao thì càng có nhiều khung hình trong một
đơn vị thời gian phát lại  tăng kích thước tệp tin
 Flash mặc định và thường dùng là 12 fps
Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

5


1. Giới thiệu về hoạt ảnh (3)
 Flash đơn giản hóa hoạt ảnh
 Chỉ cần tạo ra hình ảnh bắt đầu và hình ảnh kết thúc
 Flash tự tạo mọi thứ nằm giữa hai hình ảnh này để
tạo ra hoạt ảnh  Biến đổi (Transformation)
 Flash có 2 loại biến đổi
 Biến đổi chuyển động (Motion Transformation)
 Biến đổi hình dạng (Shape Transformation)

Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

6


1. Giới thiệu về hoạt ảnh (4)
 Biến đổi chuyển động
 Thay đổi vị trí, kích thước, màu sắc
 Xoay, xô nghiêng đối tượng

Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

7


1. Giới thiệu về hoạt ảnh (5)
 Biến đổi hình dạng
 Thay đổi hình dạng của đối tượng. Ví dụ chuyển từ
hình trịn thành hình vng
 Có thể thay đổi màu sắc, vị trí của đối tượng

Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

8


Nội dung
1. Giới thiệu về hoạt ảnh
2. Timeline (đường thời gian/bảng tiến trình)
3. Lớp (Layer)
4. Khung hình (Frame)
5. Biến đổi chuyển động
6. Biến đổi hình dạng

Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

9

2. Timeline (đường thời gian/bảng tiến trình)
 Là nơi các hoạt ảnh diễn ra
Khung hình đang được chọn
Tên lớp

Khung hình

Menu
của
timeline

Số khung hình

Thời gian phát lại
Tên thư mục

Tốc độ khung hình
Số khung hình hiện tại

Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

10


2. Timeline (2)
 Chứa các chế độ thể hiện trên vùng thiết kế

Sửa đổi nhiều khung nhìn
Căn giữa khung nhìn

Chế độ thể hiện Onion Skin

Chế độ thể hiện đường nét Onion Skin

Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

11


2. Timeline (3)
 Center Frame
 Căn giữa timeline sao cho khung nhìn được chọn ở chính giữa (?)
 Onion Skin
 Cho phép xem nhiều khung nhìn
một lúc
 Hiển thị các khung hình trước và
sau khung hình hiện tại dưới dạng
bóng mờ
 Onion Skin Outlines
 Giống Onion Frame nhưng chỉ theo
dạng đường nét/khung (outline)
 Edit Multiple Frames
 Cho phép sửa nhiều khung nhìn
trong Onion Skin
Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

12


2. Timeline (4)

 Chứa các nút để quản lý layer (lớp), frame
(khung hình), folder (thư mục)

Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

13


Nội dung
1. Giới thiệu về hoạt ảnh
2. Timeline (đường thời gian/bảng tiến trình)
3. Lớp (Layer)
4. Khung hình (Frame)
5. Biến đổi chuyển động
6. Biến đổi hình dạng

Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

14


3. Layer (lớp)
 Layer (lớp)
 Chứa các đối tượng
 Độc lập với nhau
 Có thể có nhiều lớp

Layer
được chọn

• Nên đặt tên lớp theo tính gợi nhớ nào đó hoặc theo ý nghĩa
của các đối tượng thuộc về lớp

 Chọn 1 layer:
 Các đối tượng của layer được chọn theo trong vùng
thiết kế
 Timeline tương ứng của layer (dùng để điều khiển và
kiểm sốt các đối tượng thuộc lớp đó) cũng hiển thị
bên cạnh
Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

15


3.1. Các thao tác với lớp
 Tạo mới layer
, xóa
 Khóa layer:
 Nhấn vào cột
bên cạnh layer muốn khóa
 Khơng tác động được các đối tượng trong lớp bị khóa
 Ẩn layer:
 Nhấn vào cột
bên cạnh layer muốn ẩn (sau khi ẩn thì bên
cạnh layer là
)
 Ẩn/hiện lớp trong giai đoạn thiết kế để dễ quan sát và thao tác
với các lớp khác chứ khơng có tác dụng khi chạy

Các layer

Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

16


3.2. Tổ chức lớp
 Một chương trình có thể gồm rất nhiều lớp
Khó quản lý
Dùng thư mục để tổ chức và quản lý lớp
Gom các lớp có đặc điểm chung (về chức
năng,…) vào thành một thư mục
 Có thể tạo mới

hoặc xóa

thư mục

Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

17


Nội dung
1. Giới thiệu về hoạt ảnh
2. Timeline (đường thời gian/bảng tiến trình)
3. Lớp (Layer)
4. Khung hình (Frame)
5. Biến đổi chuyển động
6. Biến đổi hình dạng

Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

18


4. Frame (khung hình)
 Biểu diễn một lần thể hiện của phim
Flash ở mỗi thời điểm cụ thể trong
suốt quá trình phát lại
 Tùy theo chức năng mà Frame có
hình dạng, màu sắc và tên gọi khác
nhau

Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

19


4.1. Phân loại khung hình
 KeyFrame
 Biểu thị sự thay đổi trên lớp đó
 Chọn menu Insert  Timeline  KeyFrame hoặc F6
 Blank KeyFrame
 Là một KeyFrame trắng, chưa có gì
 Chọn menu Insert  Timeline  Blank KeyFrame
hoặc F7
 Frame
 Có thể chứa dữ liệu nhưng khơng có sự thay đổi so
với khung hình trước

 Frame ln ln phải đi sau KeyFrame
 Chọn menu Insert  Timeline  Frame hoặc F5
Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

20


4.1. Phân loại khung hình (2)
 Flash đặt một chữ cái a trong KeyFrame có chứa
các câu lệnh ActionScript
 KeyFrame ln có một chấm trịn trong nó.
 Là rỗng nếu đây là một Blank KeyFrame
 Được tô nếu chứa một số nội dung nào đó
 Khung nhìn 1 ln là KeyFrame  Nếu thêm các
đối tượng vào các khung hình phía sau mà trước
đó khơng tạo ra KeyFrame cho chúng thì Flash sẽ
đặt các đối tượng này vào khung hình 1

Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

21


4.2. Các thao tác với khung hình
 Tạo mới một Frame (F5) hoặc tạo mới một
KeyFrame (F6) đều tạo ra một khung hình mới có
nội dung kế thừa từ frame phía trước nhưng:
 Frame: Khi thêm vào nó thì frame phía trước cũng có
 KeyFrame: Khi thêm vào nó thì frame phía trước khơng có

 Xóa bỏ các khung hình được chọn ra khỏi bảng
tiến trình:
 Nhấn chuột phải  Remove Frames
 Shift + F5

 Chuyển đổi KeyFrame thành Frame
 Nhấn chuột phải  Clear KeyFrame
 Shift + F6
Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

22


Nội dung
1. Giới thiệu về hoạt ảnh
2. Timeline (đường thời gian/bảng tiến trình)
3. Lớp (Layer)
4. Khung hình (Frame)
5. Biến đổi chuyển động
6. Biến đổi hình dạng

Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

23


5. Biến đổi chuyển động
 Chỉ được áp dụng với các dạng đối tượng
 Các đối tượng được gom nhóm
 Thể hiện của biểu tượng (Symbol Instance)

(học sau)

Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

24


5.1. Biến đổi chuyển động thẳng
 Bước 1: Vẽ/chèn đối tượng cho biến đổi
 Bước 2: Gom nhóm các đối tượng cần biến
đổi (nếu cần)
 Bước 3: Chuẩn bị Timeline cho biến đổi
 Bước 4: Áp dụng biến đổi chuyển động

Bài giảng Tin học cơ sở - Khoa Công nghệ thông tin - Trường Đại học Bách Khoa Hà Nội

25