1

HƯỚNG DẪN BIÊN SOẠN GIÁO TRÌNH ĐIỆN TỬ
VỚI MACROMEDIA FLASH
1. TỔNG QUAN VỀ PHẦN MỀM MACROMEDIA FLASH
Macromedia flash (gọi tắt là flash) là một phần mềm lập trình đồ họa cho
phép tạo ứng dụng Web hay các ứng dụng đồ họa 2D trong nhiều lĩnh vực khác
nhau. Khi đã làm việc quen với phần mềm này, chúng ta có thể khẳng định flash
là một công cụ tuyệt vời cho phép làm tất cả mọi công việc từ đơn giản đến
phức tạp trong việc xây dựng bài giảng điện tử nói chung và mô phỏng các trang
thiết bị kỹ thuật, các quá trình công nghệ nói riêng.
Ưu điểm của phần mềm là làm việc với định dạng ảnh đồ họa véctơ nên
file thiết kế có dung lượng rất nhỏ. Flash có khả năng import rất nhiều định dạng
ảnh (JPEG, Bitmap, gif,…), các movie clip hay các đoạn video khác để làm tài
nguyên cho việc chỉnh sửa và thiết kế.
Các phiên bản của phần mềm flash hiện nay có gồm flash MX2004, flash
8.0, flash 9.0, flash CS4 và flash CS5. Tuy nhiên để ứng dụng cho việc biên
soạn giáo trình điện tử và mô phỏng trên máy tính chúng ta nên dùng bản flash
8.0 vì nó có giao diện dễ sử dụng, dung lượng phần mềm thấp.
1.1. Hướng dẫn cài đặt và kích hoạt phần mềm flash 8.0
Phần mềm Macromedia flash 8.0 các đồng chí có thể download từ mạng
Internet, gồm có trình cài đặt (setup) và trình kích hoạt mã (key) (hình 1).
- Để cài đặt double lick vào trình Flash8-en.exe, xuất hiện giao diện như
hình 1.

Hình 1. Giao diện ban đầu khi cài đặt
- Giao diện tự động xuất hiện như 2:
2Hình 2.

sau đó nhấn nút Continue để tiếp tục vào giao diện đăng ký mã như hình 9.

Hình 9. Đăng ký mã kích hoạt
5

Các đồng chí cần điền đủ 21 ký tự mã key để kích hoạt phần mềm. Mã
key này có được bằng cách chạy file keygen.exe lấy từ bộ cài đặt đã download
từ mạng về máy tính. Chọn vào mục flash 8 và copy mã từ mục Serial sau đó
paste vào khung kích hoạt mã. Nhấn nút Continue để tiếp tục, xuất hiện giao
diện như hình 10.

Hình 10.
Trong mục này chúng ta không cần đăng ký nên nhấn nút Remind Me
Later để kết thúc.
1.2. Giới thiệu giao diện của phần mềm flash 8.0
Khi click vào biểu tượng phần mềm flash 8.0 trên màn hình Desktop hay
có thể vào Programs  flash 8.0 sẽ xuất hiện giao diện (hình 11). Hình 11. Giao diện ban đầu của phần mềm flash 8.0
- Tạo mới một trang thiết kế: Vào mục File  New hoặc chọn tại mục
Create New  Flash Document (hình 11).
- Mở file thiết kế có sẵn: Vào mục File  Open hoặc chọn tại mục Open
a Recent Item  Open…
Giao diện thiết kế của chương trình xuất hiệnh như trên hình 12.
6Hình 12. Giao diện thiết kế của phần mềm flash 8.0
Trên màn hình giao diện chương trình, các nhóm công cụ thiết kế và xử lý

hợp với độ phân giải từng màn hình được tích hợp. Kích thước Size thể hiện
chiều rộng và chiều cao của cửa sổ giao diện file thiết kế sau khi kết xuất. Phần
nội dung khi thiết kế cần phải được bố trí nằm bên trong vùng kích thước đã
chọn, vì nếu nằm bên ngoài có thể sẽ không được thể hiện sau khi kết xuất file.
8

2- Đơn vị đo thường để nguyên theo mặc định là pixel (pixel là đơn vị đo
độ phân giải của màn hình máy tính). Độ phân giải màn hình máy tính thường
có các định dạng sau:
STT

Kích thước size (pixels)
(Width x Height)
Ghi chú
1 800 x 600
Độ phân giải các màn hình máy
tính PC - 14 inch cũ
2 1024 x 768
Độ phân giải chuẩn của hầu hết các
màn hình máy tính
3 1280 x 768
4 1366 x 768
Độ phân giải các màn hình đặc
trưng khác
Chúng ta nên chọn size = 1024 x 768 pixels. Khi chạy chương trình với
kích thước này, file thiết kế sẽ điền đầy màn hình máy tính. Nếu cần giao diện
file thiết kế nhỏ hơn thì ta chọn lại kích thước cho phù hợp.
3- Tốc độ khung hình (frame rate): Là tốc độ đọc dữ liệu trên các khung
hình khi chạy file ứng dụng. Sau khi load xong dữ liệu của file ứng dụng, đầu
đọc sẽ chạy từ frame 1 đến frame cuối cùng được thiết kế. Tốc độ khung hình

các máy tính lẻ thì định dạng này không nên sử dụng.
Định dạng file tự chạy *.exe dùng cho hệ điều hành Windows là lựa chọn
tốt nhất. Vì khi đó file thiết kế sau khi kết xuất có thể mang sang bất kỳ một máy
tính nào khác để chạy mà không cần bất kỳ một trình hỗ trợ đọc file nào. Tuy
nhiên dung lượng của file sau kết xuất có dung lượng khoảng bằng 10 lần dung
lượng của file tương ứng nếu dùng kiểu định dạng *.swf.
Các đồng chí nên chọn định dạng *.exe cho công việc thiết kế của mình.
10

1.3.2. Thanh công cụ vẽ
Thanh công cụ chứa toàn bộ các công cụ vẽ và hiệu chỉnh đối tượng.
Nhìn chung nếu ai đã sử dụng qua Photoshop, Illustrator, Firework thì chúng ta
thấy các công cụ vẽ ở đây cũng tương tự vậy. Chúng ta cần tìm hiểu và thực
hành nhiều để thành thạo các công cụ vẽ và hiệu chỉnh đối tượng. Ở đây tôi chỉ
giới thiệu chức năng của các công cụ vẽ (hình 16).

Hình 16. Thanh công cụ
Thanh công cụ chứa các phần cơ bản sau:
- Tools : nhóm công cụ chính dùng để thiết kế.
- View : công cụ hỗ trợ việc quan sát.
- Colors : công cụ tạo màu cho đối tượng vẽ trong Tools.
- Options : bổ sung và mở rộng để hỗ trợ cho các công cụ trong Tools.
Mỗi công cụ khác nhau sẽ có Options khác nhau.
Hầu hết các công cụ đều có thể sử dụng phím tắt đi kèm, tạo thuận lợi cho
quá trình thiết kế.
11

1.3.3. Vùng điều khiển chính (bảng tiến trình)
Vùng điều khiển chính Timeline có vai trò rất quan trọng trong việc tạo ra
một sản phẩm Flash. Có thể xem nó như đầu não trong việc xây dựng cũng như

ta click lại vào nút ô màu. Để tránh nhầm lẫn khi thao tác chưa thuần thục, tốt
nhất các đồng chí không nên sử dụng chức năng này.
Để dễ quản lý các layer, đặc biệt là khi thiết kế vùng Timeline chứa nhiều
layer, chúng ta có thể tạo folder để chứa các layer. Để sắp xếp layer nào thuộc
về folder, chúng ta chọn vào layer và kéo thả vào folder cần thiết.
Việc đặt tên cho các layer và folder là cần thiết để dễ phân biệt khi thiết
kế (ví dụ đặt tên layer 1 – Giao diện; layer 2 – Text; layer 3 – Hình ảnh,….). Để
thay đổi tên theo mặc định, ta double click vào tên layer hoặc folder sau đó nhập
từ bàn phím vào một tên tùy thích. Tên này có thể gõ tiếng Việt có dấu.
Để thay đổi thứ tự xuất hiện của các layer, folder cần chọn và kéo layer
hoặc folder đó đến vị trí cần thiết.
Ngoài ra, khi làm việc với bảng tiến trình chúng ta cần chú ý một số khái
niệm sau:
- Dải Timeline rỗng: Là dải Timeline chưa chứa bất kỳ Frame nào được
tạo. Chúng ta không thể thiết kế bất kỳ đối tượng nào nếu không tạo ra các
Frame.
1- Frame (F5):
Frame có thể có các dạng sau:
+ Frame trống: Là frame được tạo ra nhưng chưa có đối tượng nào được
thiết kế trên đó. Frame trống có màu trắng, có chấm tròn trắng ở đáy. Để đặt đối
tượng vào frame của một layer, chúng ta cần chọn frame trên layer đó sau đó
13

chọn công cụ vẽ hoặc viết để điền đối tượng. Muốn thêm mới một frame để tạo
chuỗi frame, ta bấm F5 (hoặc vào Insert/Timeline/Frame).
+ Chuỗi frame trống: Gồm nhiều frame trống đứng liền kề nhau. Kết
thúc chuỗi là một Frame có hình chữ nhật màu trắng ở đáy. Để thêm mới một
frame vào chuỗi frame, ta bấm F5 (hoặc vào Insert/Timeline/Frame).
+ Frame có chứa đối tượng: Một frame đã chứa đối tượng sẽ có màu
sẫm, có chấm tròn đen ở đáy. Chúng ta có thể click vào và thiết kế thêm hay bỏ

vùng Timeline của Motion Tween có dạng màu xám còn màu nền vùng
Timeline của Shape Tween có dạng màu xanh lá cây. Khi tạo hoạt hình với các
chuyển động nêu trên, các đồng chí chú ý là chuyển động sẽ càng mịn và nhịp
nhàng khi số lượng frame trong chuỗi frame càng nhiều. Có thể chạy thử và căn
cứ vào mức độ trung thực của chuyển động để điều chỉnh cho hợp lý.
- Frame chứa mã lệnh là frame có chữ a ở đỉnh, có thể là một frame
trống hay frame chứa đối tượng. Mã lệnh nằm trên frame nào thì chỉ có tác dụng
trên frame đó.
1.3.4. Bảng màu (Panel Color)
Bảng màu gồm có 2 panel Color Swatches và Color Mixer.
1.3.4.1. Color Mixer
Bảng màu dùng để pha màu, sử dụng hệ màu RGB. Chúng ta có thể tạo ra
một mã màu tùy ý bằng cách hiệu chỉnh 3 thông số RGB hay sử dụng bảng pha
màu rồi chọn màu bằng mũi tên tam giác đen, hoặc có thể nhập kí hiệu mã màu
ở khung mã màu.
Bảng thể hiện màu được chọn cho chúng ta biết màu tô cũng như độ trong
suốt của màu được chọn. Khi ta thay đổi 2 tính chất này thì ta sẽ thấy bảng thể
hiện màu sẽ có giao diện khác nhau.

Hình 18. Bảng Color Mixer
15

Chúng ta chú ý khi vẽ, một đối tượng gồm có 2 vùng màu đó là:
- Stroke color: Màu của đường viền bao quanh đối tượng
- Fill color: Màu của vùng nền tô bên trong của đối tượng

Hình 19. Màu của một đối tượng vẽ
Để thay đổi kiểu màu, ta sử dụng chức năng Type. Khi mở chức năng này
ta sẽ thấy có 4 tùy chọn là:
- None: Không tô màu;

17Hình 22. Panel Align
1.3.5.2. Panel Info
Panel Info cung cấp các thông tin của đối tượng như độ dài (W), độ cao
(H), vị trí đối tượng, hệ màu được sử dụng (hệ RGB), độ mờ (hay độ trong suốt -
alpha). Theo mặc định, hệ tọa độ OXY thì tọa độ gốc sẽ được tính là đỉnh bên
góc trái phía trên của vùng thiết kế.

Hình 23. Panel Info
1.3.5.3. Panel Transform
Công cụ Panel Transform cũng có chức năng tương tự như sử dụng công
cụ Free transform Tool. Tuy nhiên trong trường hợp cần thay đổi đối tượng theo
một tỷ lệ hoặc góc độ chính xác, chúng ta cần sử dụng công cụ Panel Transform.
Panel Transform cần lưu ý một số điểm sau:
- Cho phép ta thay đổi kích thước của đối tượng theo tỉ lệ phần trăm (tính
theo kích thước thực ban đầu). Để thay đổi đồng thời tỷ lệ chiều rộng và chiều
cao, chúng ta cần đánh dấu stick vào ô Constrain.
- Cho phép xoay đối tượng quanh tâm của nó một góc tùy ý do người
thiết kế nhập vào theo ô của lệnh Rotate. Góc 0
0
là góc theo mặc định khi đối
tượng được vẽ ban đầu, chưa sử dụng công cụ thay đổi kích thước hay xoay đối
tượng.
18

+ Nếu nhập một số âm (ví dụ - 20
0
) thì đối tượng sẽ quay một góc ngược


Hình 24. Panel Transform
1.3.5. Bảng thư viện chứa đối tượng symbol (Library)
Library là thư viện chứa các đối tượng symbol được thiết kế. Thư viện
này rất có ích trong quá trình thiết kế của chúng ta.
Các đối tượng symbol gồm: MovieClip, Button, Graphic
19

Chú ý trong quá trình sử dụng thư viện Library, các đồng chí không được
phép xóa các đối tượng chứa trong đây. Vì khi đó toàn bộ nội dung liên quan
đến nó nằm trên vùng thiết kế sẽ bị mất. Khi đó chúng ta lại phải thiết kế lại từ
đầu.

Hình 25. Panel Library
2. HƯỚNG DẪN THIẾT KẾ GIÁO TRÌNH ĐIỆN TỬ BẰNG FLASH
Trong phần này tôi đi vào hướng dẫn cụ thể các bước thiết kế một giáo
trình điện tử theo giao diện xây dựng sẵn như trên hình 26, hình 27 và hình 28.
Đây là những nội dung rất quan trọng và không thể thiếu khi xây dựng một giáo
trình điện tử bằng flash. Để làm được nội dung theo trang mẫu này, các đồng chí
cần sử dụng thành thạo các công cụ thiết kế của phần mềm flash.
Mục tiêu xây dựng theo giao diện mẫu gồm:
- Thiết kế một giáo trình điện tử gồm 01 trang giao diện và 02 chương nội
dung bài giảng. Mỗi phần được chứa trong một Scene riêng đặt tên như sau:
20

+ Trang giao diện: Chứa trong Scene 1 đặt tên là: Giao dien
+ Trang nội dung chương 1: Chứa trong Scene 2 đặt tên là: Chuong 1
+ Trang nội dung chương 2: Chứa trong Scene 3 đặt tên là: Chuong 2
- Mỗi chương sẽ chứa nhiều bài giảng (tiết giảng) nên cần sử dụng nhiều
frame để chứa nội dung. Các phần nội dung trong các chương có thể sẽ được


- Bước 2: Thực hiện tương tự bước 2 với Scene 2 có tên “Chuong 2”.
Thứ tự xuất hiện: Đầu tiên là trang Giao dien  Chuong 1  Chuong 2.
- Bước 4: Đóng cửa sổ giao diện Scene.

Hình 29. Thêm mới các Scene thiết kế
- Bước 5: Trở lại màn hình thiết kế trên vùng Timeline, click nút Edit
Scene chọn mục “Giao dien” để trở về màn hình thiết kế của trang giao diện
(hình 30).

Hình 30. Chọn màn hình hiển thị là trang “Giao dien”
2.2.2 Thiết kế trang “Giao dien”
Mục tiêu thiết kế: Tạo trang giao diện của giáo trình điện tử, giới thiệu
nội dung chính của tài liệu; chọn nội dung nghiên cứu cần thiết; thoát khỏi giao
diện. Cụ thể gồm:
- Chèn hình ảnh ngoài vào làm nền
- Tạo các nút ấn chuyển trang (chuyển từ trang “Giao diện” sang trang
“Chuong 1”, “Chuong 2”).
- Chèn các đoạn Text giới thiệu nội dung
- Viết các mã lệnh điều khiển chương trình
2.2.2.1. Kỹ thuật chèn và xử lý ảnh
Bước 1: Chèn hình ảnh từ bên ngoài vào vùng thiết kế để làm nền.
- Đổi tên layer 1 thành “Hinh nen” sau đó chọn frame 1 tại layer này. Khi
đó frame 1 sẽ có màu đen biểu thị đã được chọn.
- Chèn vào vùng thiết kế một hình nền bằng cách vào mục File  Import
 Chọn mục Import to Stage để chèn một ảnh bất kỳ vào vùng thiết kế (hình
31) để làm nền giao diện.
23

Khi Import chúng ta chú ý có 03 lựa chọn sau:

in hoa, canh trái; phông chữ Times New Roman; định dạng thường (Normal) –
tức không phải kiểu mũ ví dụ như I
2
hay kiểu I
2
; chọn chế độ Anti – alias
readability (chế độ khử răng cưa, có tính năng làm mịn và rõ chữ hơn khi thay
đổi tỷ lệ xem. Đây cũng là chế độ theo mặc định được chọn); chọn loại text
(Text type) dạng Static text.

Hình 33. Thiết lập tham số của Text
Chúng ta chú ý, với công cụ Text, có 3 kiểu text khác nhau:
- Static text: Tức là kiểu văn bản tĩnh, được nhập vào lúc thiết kế và
không cho phép thay đổi nội dung khi kết xuất;
- Dynamic text: Là kiểu văn bản động, cho phép thay đổi nội dung trong
khung văn bản được tạo bằng mã lệnh (ví dụ tạo khung text để chứa nội dung
giới thiệu các đối tượng nhân vật khi chuột di chuyển vào nó,…);
- Input text: Là kiểu văn bản đầu vào, cho phép người dùng nhập đoạn
văn bản vào khung văn bản sau khi kết xuất (ví dụ như để tạo các ô nhập mật
khẩu, nhập tên khi đăng nhập vào phần mềm,…).
25

Bước 3: Click chuột chọn frame 1 của layer “Van ban text” sau đó click
chuột vào khu vực cần đặt text trên vùng thiết kế. Nhập đoạn text tiêu đề có tên
“GIÁO TRÌNH ĐIỆN TỬ”. Nhấp chuột ra ngoài khung nhập text sau đó chọn
công cụ Selection Tool (V) để thoát khỏi chế độ nhập text.
Bước 4: Tạo hiệu ứng cho text thêm sinh động, bằng cách click chọn
khung text vừa nhập  mở bảng thuộc tính Properties, chọn thẻ Filters, click
vào nút dấu cộng (+) chọn một hoặc một vài hiệu ứng bất kỳ. Ở đây tôi chọn
hiệu ứng Glow và hiệu ứng Gradient Bevel để có kiểu text như hình