BÀI 3: MẶT NẠ, BIỂU TƯỢNG VÀ ÂM THANH

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. Tạo mặt nạ (mask)
2. Sử dụng các biểu tượng (symbol)
3. Tạo âm thanh (sound)

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


1.1. Giới thiệu về mặt nạ (mask)
 Tạo ra một cửa sổ phía trên một 
trong số các lớp trong phim
 Sử dụng mặt nạ để:
 Tạo ra một băng văn bản cuộn
 Hiệu ứng cửa sổ/ống nhòm
(nhìn giống như qua một cửa
sổ/ống nhòm)
 Hiệu ứng luồng sáng tìm kiếm

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.1. Giới thiệu về mặt nạ (1)
 Một số chú ý
 Có lớp mặt nạ - một trong 2 lớp đặc biệt để
chứa mặt nạ
 Mỗi lớp mặt nạ chỉ ảnh hướng đến những lớp
nằm ngay dưới nó
 Chỉ có vùng tô của mặt nạ được dùng để tạo
mặt nạ. Tất cả các đường nét khác đều bị bỏ
qua
 Không thể sử dụng chuyển động theo quỹ
đạo để di chuyển mặt 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.2. Tạo mặt nạ
 Cách kỹ thuật
 Tạo mặt nạ đồ họa
 Sử dụng văn bản làm mặt nạ
 Tạo văn bản cuộ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

5


1.2.1. Tạo mặt nạ đồ họa

 Các bước
 Vẽ/chèn đối tượng muốn xuất hiện trong phim
 Tạo chuyển động thẳng cho đối tượng
 Nhấn nút Insert Layer để thêm 1 lớp mới phía trên lớp hiện tại
 Nhấn phải chuột vào lớp mới, chọn Mask để lớp này trở thành
lớp mặt nạ
 Bỏ khóa lớp mặt nạ bằng cách nhấn vào biểu tượng khóa bên
cạnh lớp
 Vẽ một mặt nạ bằng cách sử dụng các công cụ vẽ. Đối tượng
này phải được tô (ví dụ: tròn, vuông,…)
 Nhấn chuột vào cột khóa của lớp mặt nạ để xem hiệu ứng mặt
nạ (chỉ xem được khi lớp mặt nạ bị khóa)

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.2.1. Tạo mặt nạ đồ họa (2)
 Ví dụ
 Nhấn Ctrl+R để chèn ảnh tháp Eiffel vào vùng thiết kế
 Dùng công cụ Free Transform để chỉnh kích thước của ảnh như
mong muốn
 Tạo chuyển động thằng cho đối tượng
• Kéo hình sang bên phải
• Chọn frame thứ 60, nhấn F6, kéo hình sang trái
• Chọn frame thứ 30, nhấn phải chuột chọn Create Motion Tween

 Nhấn vào biểu tượng Insert Layer, đặt tên là Mat na.
 Nhấn chuột phải vào lớp Mat na, chọn Mask

 Nhấn vào biểu tượng khóa ở lớp Mat na.

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.2.1. Tạo mặt nạ đồ họa (3)
 Ví dụ (tiếp)
 Vẽ một hình đa giác đều bằng công cụ Polystar trong
lớp Mat na.

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


1.2.1. Tạo mặt nạ đồ họa (4)
 Nhấn chuột vào biểu tượng khóa của lớp Mat na để 
khóa lớp Mat na lại
 Nhấn Ctrl+Enter để chạy thử

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


1.2.2. Sử dụng văn bản làm mặt nạ
 Tương tự như mặt nạ đồ họa, chỉ khác là thay vì vẽ một 
hình có tô làm mặt, ta dùng văn bản làm mặt nạ

 Ví dụ:
 Tạo ra một mặt
nạ với văn bản:
“Trường
ĐHBK Hà Nội”
Cỡ chữ 70, font
Vernada, màu trắ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

10


1.2.2. Sử dụng văn bản làm mặt nạ (2)
 Ctrl+B 2 lần để tách văn bản thành các phần riêng biệt
 Ctrl+Enter để xem kết quả

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


1.2.3. Tạo văn bản cuộn
 Văn bản sẽ trôi qua một hộp, thường là hiển thị một vài từ tại một 
thời điểm
 Văn bản cuộn ngang
 Mặt nạ đủ cao sao cho văn bản được thấy hoàn toán, kể cả chữ
in hoa
 Mặt nạ đủ rộng để người xem có thể đọc được hết khi văn bản
trôi qua

 Hãy đảm bảo rằng văn bản của bạn chỉ trên 1 dòng
 Tốc độ đủ chậm để đọc, tránh các hiệu ứng văn bản màu mè
 Văn bản cuộn dọc
 Mặt nạ phải rộng bằng toàn bộ văn bản
 Đủ cao để hiển thị được một dòng văn bản
 Tốc độ đủ chậm để đọc vì họ phải đọc hết dòng văn bả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

12


1.2.3. Tạo văn bản cuộn (2)
 Ví dụ
 Soạn một đoạn văn bản dài trên một dòng, chỉnh sửa
font chữ, kích thước cho hợp lý (35), kéo đầu đoạn
văn bản về đầu vùng thiết kế
“Trường Đại học Bách khoa Hà Nội là trường đại học đa ngành về
kỹ thuật. Trường luôn là một trong những trường đại học kỹ
thuật hàng đầu của nền giáo dục Việt Nam với bề dày lịch sử.”

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


1.2.3. Tạo văn bản cuộn (3)
 Ví dụ (tiếp)
 Nếu cần 15s để đọc thì nhấn vào khung hình thứ
180, nhấn F6 để tạo KeyFrame kết thúc
 Nhấn và giữ Shift kéo văn bản sang trái cho tới khi

phần cuối của văn bản thấy trong vùng thiết kế
 Chọn frame thứ 90, nhấn chuột phải chọn Create
Motion Tween để tạo 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

14


1.2.3. Tạo văn bản cuộn (3)
 Ví dụ (tiếp)
 Thêm lớp mặt nạ đặt tên là Matna
 Tại frame 1 của lớp Matna, vẽ một hộp chữ nhật sao cho phủ
lên văn bản

 Tại frame 180 của lớp Matna, nhấn F6 thêm một KeyFrame
 Nhấn chuột phải vào lớp Matna, chọn Mask
 Ctrl+Enter để xem kết quả

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


Nội dung
1. Tạo mặt nạ (mask)
2. Sử dụng các biểu tượng (symbol)
3. Tạo âm thanh (sound)

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


2. Biểu tượng (Symbol)
 Là các đối tượng để thiết kế phim Flash
 Có thể sử dụng lại  Sử dụng các thể hiện (instance) 
của biểu tượng bao nhiêu lần tùy thích
 Chỉ có một biểu tượng duy nhất trong một tệp Flash
 Các thay đổi tới một thể hiện của biểu tượng sẽ ảnh 
hưởng tới tất cả các thể hiện khác
 Có thể lưu trong thư viện để chia sẻ với các phim khá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


2.1. Các thao tác cơ bản với biểu tượng
 Tạo biểu tượng
 Sửa biểu tượng
 Tạo thể hiện (instance) cho biểu tượng vào 
vùng thiết kế

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


2.1.1. Tạo biểu tượng

 Tạo biểu tượng mới
 Chọn menu Insert  New Symbol hoặc Ctrl+F8
 Chọn Type ( kiểu biểu tượng) trong hộp thoại Create New Symbol
 Đặt tên cho biểu tượng và nhấn OK
 Thiết kế nội dung cho biểu tượng
 Tạo biểu tượng từ đối tượng đã có
 Có thể chọn 1 hoặc nhiều đối tượng trong vùng thiết kế (các hình,
nét vẽ bằng công cụ hoặc các hình ảnh nhập vào)
 Chọn menu Insert  Convert to Symbol
 Nhập tên và Type cho biểu tượng
và nhấn OK

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


2.1.1. Tạo thể hiện cho biểu tượng
 Chọn một Layer trong Timeline, 
nếu không chọn KeyFrame, thể 
hiện sẽ được thêm vào 
KeyFrame đầu tiên bên trái 
frame hiện tại
 Chọn Window  Library hoặc 

Kéo ra

Common Library  
Button/Classes/Interactions để 
mở thư viện

 Kéo một Symbol cần tạo từ thư 
viện vào
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


2.1.3. Sửa biểu tượng
 Để sửa biểu tượng đã tạo
 Nhấn chọn nút Edit Symbols
bên góc trái và chọn nút cần sửa
 Sửa nội dung biểu tượng
 Để sửa biểu tượng từ thể hiện của 
biểu tượng trong vùng thiết kế
 Nhấn chuột phải vào thể hiện của
biểu tượng
 Chọn Edit in place hoặc chọn Edit
In New Window

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


2.2. Các loại biểu tượng
 Có 3 loại biểu tượng

 Button (nút nhấn): Cung cấp tương tác có sẵn
với người dùng
 Movie clip (đoạn phim): Đoạn phim độc lập

với tệp Flash thiết kế
 Graphic (đồ họa): Biểu tượng tự vẽ bằng các
công 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

22


2.2.1. Nút bấm (Button)
 Có 4 khung hình trong timeline
 Up: Biểu thị dạng nút khi nó ở trạng thái nổi
lên (chưa bị nhấn)
 Over: Biểu thị dạng nút khi chuột di chuyển
lên phía trên nút nhưng chưa nhấn
 Down: Biểu thị dạng nút khi nhấn phím chuột
trong khi con trỏ chuột đang ở trên nút
 Hit: Biểu thị vùng kích hoạt các sự kiện của
chuột, mặc định là di chuột vào nút (over)
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


Tạo nút bấm
 Chọn menu InsertNew Symbol hoặc nhấn Ctrl+F8
 Chọn Type là Button
 Nhập tên cho biểu tượng
 Sử dụng các công cụ vẽ để tạo ra hình ảnh cho khung 
nhìn Up
 Chú ý chưa nhập văn bản cho nút

 Chọn công cụ Selection để chọn toàn bộ hình ảnh nút 
nhấn
 Trong Align Panel, sử dụng các nút To Stage, Align 
Horizontal Center, Align Vertical để hình ảnh xuất hiện ở 
giữa

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


Tạo nút bấm (2)
 Chọn khung hình Over, nhấn F6 thêm một KeyFrame
 Sử dụng công cụ tô màu để chọn màu khác cho màu tô
 Chọn khung hình Down, nhấn F6. Nếu muốn tạo ra một 
dạng nút khác, nhấn F7
 Chọn màu mới hoặc vẽ hình ảnh muốn sử dụng cho 
khung hình Down

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