Hướng dẫn biên soạn giáo trình điện tử bằng flash

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:
2


Hình 2.

Click Next để tiếp tục. Xuất hiện màn hình như hình 3.
- Chọn mục I accept the terms in the license agreement sau đó click Next.

Hình 3.
- Giao diện như hình 4 xuất hiện. Tiếp tục đánh dấu tick vào mục Create
Shortcut on Desktop sau đó click Next.

3


Hình 4.
- Giao diện như hình 5 xuất hiện, giữ nguyên theo mặc định cài đặt trình
Macromedia Flash Player, click Next.

Hình 5.
- Giao diện như hình 6 xuất hiện, click vào nút Install để cài đặt

Hình 6.
4

- Quá trình cài đặt tiến hành. Khi kết thúc sẽ xuất hiện giao diện như hình
7. Click vào nút Finish để kết thúc.

Hình 7.
Sau khi đã cài đặt xong cần đăng ký mã key cho phần mềm bằng cách
click vào biểu tượng phần mềm Macromedia flash 8.0 trên màn hình Desktop.
Giao diện như hình 8 sẽ xuất hiện:

Hình 8.
- Để chọn mặc định mục “I have a serial number and want to activate”

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.
6


Hì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ý

được bố trí dưới dạng các Tab, có thể kéo di chuyển để thành bảng thuộc tính
độc lập, hoặc có thể phóng to – thu nhỏ để tiện làm việc với nhóm công cụ.
Giao diện chương trình gồm các phần:
- Thanh Menu chương trình;
- Thanh công cụ;
- Vùng điều khiển chính (Timeline);
- Vùng thiết kế (Stage);
- Vùng các công cụ hỗ trợ thiết kế (màu sắc – Color; canh chỉnh – Align
& Intro & Transform; thư viện – Library);
- Vùng quản lý thuộc tính (Properties) và viết mã lệnh (Action Scrip).
Muốn làm chủ flash, nhất thiết phải sử dụng thành thạo các công cụ thiết
kế và xử lý đồ họa của phần mềm. Ở đây tôi chỉ giới thiệu sơ lược những đặc
điểm cơ bản của các công cụ vẽ và hỗ trợ thiết kế và hướng dẫn một số thủ thuật
để sử dụng phần mềm một cách hiệu quả. Phần còn lại các đồng chí có thể tham
khảo các bài hướng dẫn sử dụng phần mềm flash 8.0 trên mạng hay các tài liệu
khác.
7

1.3. Giới thiệu sơ lược các công cụ thiết kế cơ bản
1.3.1. Bảng quản lý thuộc tính (Properties)
Bảng quản lý thuộc tính gồm các phần cơ bản như minh họa trên hình 13.

Hình 13. Bảng quản lý thuộc tính thiết kế
1.3.1.1. Thay đổi thuộc tính vùng thiết kế:
Nhấn vào nút Size: 550x400 pixels để mở giao diện cửa sổ thay đổi kích
thước vùng thiết kế (hình 14).

Hình 14. Thay đổi thuộc tính thiết kế
Khi sử dụng bảng thuộc tính cần chú ý một số điểm sau:
1- Kích thước khung thiết kế (Size = Width x Height): Được chọn phù

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

(frame) thể hiện số frames được chạy qua trong khoảng thời gian là 1 giây.
Chúng ta nên chọn giá trị từ 12 frames/giây (fps) đến 24 frames/giây là hợp lý
(chúng ta cần liên tưởng đến tốc độ của các máy quay phim là 24 hình/giây).
Nếu đặt thấp quá thì hoạt hình sẽ bị giật còn nếu đặt tốc độ quá cao mắt chúng ta
khó quan sát. Nói chung, tốc độ chuyển động của khung hình liên quan đến độ
mịn và độ trung thực của các chuyển động được mô phỏng.
1.3.1.2. Lựa chọn định dạng file kết xuất :
Kết xuất file dữ liệu (xuất bản file) là việc làm cần thiết và là công việc
được tiến hành cuối cùng sau khi đã hoàn thành nội dung thiết kế để mang sang
chạy trên các máy tính khác.
Để kết xuất file, chúng ta chọn vào nút Settings tại mục Publish như trên
hình 13. Lúc này giao diện như hình 15 sẽ xuất hiện. Các đồng chí theo dõi
hướng dẫn thực hành như hình 15.
Một số lưu ý khi xuất bản file thiết kế:
1- Các định dạng của file (Formats) đối với việc xây dựng bài giảng điện
tử hoặc phần mềm mô phỏng chúng ta nên chọn các định dạng sau:
- Định dạng file flash (Shower flash - *.swf)
- Định dạng file HTML (*.html);
- Định dạng file Windows projector (*.exe).

9


Hình 15. Giao diện kết xuất file thiết kế
Nếu chọn định dạng *.swf thì có ưu điểm là dung lượng của file kết xuất
sẽ rất thấp, đỡ tốn dung lượng máy tính. Tuy nhiên với định dạng file này, khi
đem sang các máy tính khác thì trên máy đó phải cài đặt phần mềm Flash
player để chạy file thiết kế có định dạng *.swf.
Nếu chọn định dạng *.html thì khi đó chúng ta xuất file lên trang Web.
Nó chỉ hữu dụng khi chúng ta cần đưa bài giảng lên Web. Nếu muốn chạy trên

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ư

điều khiển mọi hoạt động của các đối tượng trong một file flash.

Hình 17. Giao diện vùng điều khiển chính (bảng tiến trình)
Các đồng chí có thể hiểu, Timeline giống như một cuộn phim gồm nhiều
khung hình (frame) liên hợp lại. Timeline quản lý theo các layer và mỗi layer
cũng có nhiều khung hình ghép lại với nhau. Trên mỗi frame của các layer cho
phép chứa các đối tượng độc lập với các frame của các layer khác. Việc sắp xếp
các đối tượng ở các frame của các layer theo thứ tự, layer nào ở trên thì đối
tượng nằm ở layer đó sẽ nằm phía trên so với các layer nằm phía dưới nó. Đối
tượng nằm phía trên sẽ che lấp đối tượng nằm phía bên dưới. Vì vậy việc thiết
kế tránh sao cho không có đối tượng nào nằm chồng lên nhau.
Với một tài liệu xây dựng có chứa nhiều đối tượng hoặc một đối tượng có
tính phức tạp cao (ví dụ như vẽ hình nhân vật, ta có thể vẽ thành nhiều phần
khác nhau sau đó ghép lại) thì tốt nhất ta nên vẽ mỗi đối tượng hoặc mỗi phần
của đối tượng trên một layer khác nhau để tiện quản lý và chỉnh sửa.
12

Khi cần chỉnh sửa đối tượng nằm ở một layer nào đó, để tránh trường hợp
chỉnh sửa hay xóa nhầm đối tượng nằm ở các layer khác thì tốt nhất ta nên sử
dụng công cụ khóa layer hoặc ẩn layer đối với các layer này. Các layer được
khóa hoặc ẩn thì đối tượng nằm trên đó sẽ không bị ảnh hưởng gì khi chúng ta
sử dụng các công cụ chọn hay chỉnh sửa đối tượng.
Trên mỗi layer đều có một ô màu tượng trưng khác nhau theo mặc định.
Ô màu này có tác dụng để người dùng có thể phân biệt được các đối tượng nằm
trong vùng thiết kế thuộc về layer nào. Khi click vào ô màu của một layer thì đối
tượng thuộc layer đó sẽ có màu đường viền giống màu đặc trưng của ô màu
layer tương ứng. Các đồng chí chú ý là màu đường viền của đối tượng trên vùng
thiết kế bị thay đổi sau khi click vào nút ô màu của layer chỉ có tác dụng cho
chúng ta nhận biết đối tượng đó thuộc về layer ta vừa click chuột chứ nó không
làm thay đổi màu thực sự của đối tượng. Để đối tượng trở về trạng thái ban đầu,

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ỏ

bớt đối tượng trên Frame này. Để thêm mới một frame vào chuỗi frame, ta bấm
F5 (hoặc vào Insert/Timeline/Frame).
+ Chuỗi Frame có chứa đối tượng: Gồm nhiều frame chứa cùng một
hoặc một nhóm đối tượng, với các frame đứ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.
Khi thêm một frame mới (bằng phím F5 hoặc vào
Insert/Timeline/Frame) thì ta sẽ tạo ra một chuỗi frame (có thể là chuỗi frame
trống hoặc chuỗi frame có chứa đối tượng). Chuỗi frame có đặc điểm là các
frame phía sau sẽ kế thừa frame phía trước. Khi một frame trong chuỗi thay đổi
nội dung thì các frame khác cũng thay đổi theo. Hay nói một cách khác, trong
một chuỗi chỉ chứa duy nhất một nội dung.
2- KeyFrame (F6):
Cũng tương tự như frame, keyframe có thể chỉ có một frame hoặc có thể
là một chuỗi frame (có hoặc không chứa đối tượng) nhưng độc lập với các frame
hoặc chuỗi frame khác trong cùng một layer. Nội dung trong các frame hoặc
chuỗi frame khác không ảnh hưởng gì đến keyframe được tạo. Ngăn cách giữa
các keyframe là một đường kẻ dọc màu đen trên Timeline nằm ở mỗi layer.
Để tạo mới một keyframe, ta dùng phím tắt F6 hoặc vào
Insert/Timeline/Keyframe.
3- Blank KeyFrame (F7):
Là một frame hay một chuỗi frame trống không chứa đối tượng nhưng
đứng độc lập với các keyframe khác trong cùng một layer. Có thể hiểu Blank
keyframe chính là Keyframe trống.
Để tạo mới một Blank Keyframe, ta dùng phím tắt F7 hoặc vào
Insert/Timeline/Blank Keyframe.
- Chuỗi frame chứa chuyển động (Motion Tween) và chuỗi frame
chứa chuyển động biến hình (Shape Tween) là một chuỗi frame chứa đối
14

tượng có một mũi tên chạy từ frame đầu đến frame cuối của chuỗi. Màu nền

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;

- Solid: Kiểu màu đơn sắc hay kiểu chỉ có 1 màu cho toàn bộ vùng tô của
đối tượng;
- Linear: Kiểu màu chuyển sắc theo đường thẳng. Tức là kiểu màu gồm 2
mã màu trở lên được dải liên tục theo đường thẳng;
- Radial: Kiểu màu chuyển sắc theo đường tròn. Tức là kiểu màu được tô
theo từng dải tròn liên tục, dùng cho 2 màu trở lên;
- Bitmap: Là kiểu màu lấy màu theo hình ảnh được nhập vào từ bên
ngoài.

Hình 20. Các kiểu tô màu đặc trưng (minh họa cho vùng nền Fill color)
1.3.4.2. Color Swatches
Bảng màu Color Swatches gồm có bảng màu đơn sắc và bảng màu
chuyển sắc. Chúng ta có thể tạo thêm các dạng màu đặc trưng sau đó lưu vào
16

trong thư viện của phần mềm để tiện cho việc sử dụng trong thiết kế tiếp theo
bằng lệnh add colors từ nút lệnh trên bảng màu.

Hình 21. Bảng màu Color Swatches
1.3.5. Bảng Align & Info & Transform
Bảng Align & Info & Transform dùng để canh chỉnh, xác định vị trí, hiệu
chỉnh góc hoặc độ méo của đối tượng nằm trên vùng thiết kế (Stage).
Bảng Align & Info & Transform gồm có 3 panel chính là Align, Info và
Transform.
1.3.5.1. Panel Align:
- Panel Align giúp chúng ta canh chỉnh vị trí của các đối tượng chứa trong
vùng thiết kế. Để canh chỉnh được các đối tượng nằm trên vùng thiết kế cần phải
kích hoạt nút To stage. Nếu không chọn nút này thì phần mềm không hiểu chúng
ta cần canh chỉnh đối tượng theo tọa độ chuẩn nào, vì thế lệnh canh chỉnh sẽ
không được thực hiện.

17


Hì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

chiều kim đồng hồ
+ Nếu nhập vào một số dương thì đối tượng sẽ quay một góc theo chiều
kim đồng hồ.
- Cho phép làm méo đối tượng theo trục đứng và trục ngang một góc tùy
ý do người thiết kế nhập vào ô của lệnh Skew. 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.
+ Nếu nhập vào ô thứ nhất thì đối tượng sẽ được làm méo theo chiều
ngang. Số dương thể hiện đối tượng bị kéo lệch về bên phải và ngược lại, số âm
thể hiện đối tượng bị kéo lệch về bên trái.
+ Nếu nhập vào ô thứ hai thì đối tượng sẽ được làm méo theo chiều dọc.
Số dương thể hiện đối tượng bị kéo lệch xuống dưới còn số âm thể hiện đối
tượng bị kéo lệch lên phía trên so với góc chuẩn 0
0
.
Bên cạnh đó panel còn cho phép tạo ra bản sao có kích thước thay đổi mà
không làm biến đổi đối tượng gốc hay hồi phục lại đối tượng gốc sau khi bị
chỉnh sửa.
Thay đổi tỷ lệ co giãn đối tượng theo
chiều rộng (W) và chiều cao (H)
Chọn chế độ thay đổi tỷ lệ đồng thời
cả With và Height hoặc chỉ một chiều
Xoay đối tượng theo góc đặt
Làm méo đối tượng theo góc đặt
Khôi phục lại đối tượng gốc sau
khi chỉnh sửa
Nhân bản đối tượng được
chọn trên vùng thiết kế

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

thiết kế theo từng đối tượng symbol (movie, button hay graphic) cho phù hợp.

Hình 26. Trang “Giao dien” của giáo trình điện tử mẫu

Hình 27. Trang “Chuong 1” của giáo trình điện tử mẫu
21


Hình 28. Trang “Chuong 2” của giáo trình điện tử mẫu
2.1. Thiết lập các tham số thiết kế
Mở phần mềm flash và thiết lập các thuộc tính file thiết kế như sau (xem
hướng dẫn sử dụng trong mục 1):
- Đặt kích thước vùng thiết kế: Width x Height = 950 x 650 (pixels)
- Đặt màu nền vùng thiết kế: Mặc định theo màu trắng
- Đặt tốc độ chuyển động của khung hình: Theo mặc định 12 (frame/sec)
- Đặt tên và lưu file thiết kế: Vào mục File  Save (Ctrl + S): Lưu file
thiết kế theo tên tùy ý (Ví dụ: HD TK bai giang).
2.2. Sử dụng các công cụ để thiết kế giáo trình điện tử theo mẫu
Sau khi đã thiết lập xong các tham số thiết kế, chúng ta cần làm một số
nội dung theo trình tự sau:
2.2.1 Tạo các Scene chứa nội dung
Ban đầu khi mở mới một tài liệu flash, theo mặc định chỉ có một scene có
tên mặc định là scene 1. Để thêm mới các scene khác, trên thanh Menu các đồng
chí vào mục Windown  Other Panels  Scene hoặc nhấn tổ hợp phím tắt
Shift + F2, giao diện bảng Scene xuất hiện như hình 29.
- Bước 1: Double Click chuột vào tên Scene 1 để sửa tên mặc định này
thành “Giao dien”.
- Bước 2: Click vào nút Add Scene (nút hình dấu +) để thêm mới Scene 2
và cũng tương tự ta sửa tên mặc định này thành “Chuong 1”.
22

- 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:

- Import to Stage (Ctrl + R): Chèn ảnh vào vùng thiết kế. Lựa chọn này
cho phép chèn một ảnh từ ngoài vào ngay vùng thiết kế. Ảnh gốc được lưu trong
thư viện Library.
- Import to Library: Chèn ảnh vào thư viện chứa. Để lấy ảnh này chèn vào
vùng thiết kế ta cần mở bảng Library sau đó kéo ảnh thả vào vùng thiết kế. Như
vậy lựa chọn này phải mất thêm một bước so với lựa chọn đầu tiên.
- Import video: Chèn video từ bên ngoài vào vùng thiết kế.

Hình 31. Thao tác chèn hình ảnh vào vùng thiết kế
Bước 2: Điều chỉnh kích thước file ảnh cho vừa với kích thước của vùng
thiết kế (hình 32).
- Chọn hình ảnh trong vùng thiết kế bằng công cụ Selection Tool (phím
tắt V). Công cụ này được thiết lập mặc định được chọn khi ta chưa sử dụng các
công cụ khác để làm việc.
- Mở bảng thuộc tính Properties và điều chỉnh kích thước ảnh là 950 x
650 pixels (hình 32a).
- Canh chỉnh hình ảnh nằm vào chính giữa vùng thiết kế bằng các công cụ
trên panel Align như hình 32b.
24


a) b)
Hình 32. Điều chỉnh kích thước và canh chỉnh vị trí hình nền
Bước 3: Khóa layer “Hinh nen” lại để tránh thao tác nhầm
2.2.2.2. Kỹ thuật chèn và xử lý văn bản text
Bước 1: Tạo thêm mới một layer và đổi tên thành “Van ban text”. Layer
này phải nằm phía bên trên layer “Hinh nen” nếu không sẽ bị che lấp không nhìn
thấy.
Bước 2: Chọn công cụ Text Tool (phím tắt T) sau đó mở bảng thuộc tính
Properties thiết lập các tham số: Cỡ chữ 20; chọn chữ màu vàng; kiểu chữ đậm;

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

Hình 34. Tạo hiệu ứng cho Text
Một số lưu ý khi sử dụng công cụ Text Tool:
- Cách thức nhập text trong flash cũng giống như trong Word.
- Có thể gõ trực tiếp đoạn văn bản trong flash hoặc có thể nhập đoạn văn
bản có sẵn bằng cách Copy đoạn văn bản đó, sau đó Paste vào khung nhập văn
bản của công cụ Text Tool của flash. Các đồng chí hết sức chú ý đến thao tác
này và nó rất quan trọng khi xây dựng bài giảng điện tử đã có sẵn nội dung từ
file Word.
- Chúng ta chỉ có thể gõ tiếng Việt có dấu khi máy tính có cài đặt phần
mềm UniKey hoặc VietKey từ phiên bản 2007 trở lên. Tôi đã thử với phiên bản
VietKey 2003, flash không thể gõ được văn bản có dấu trực tiếp vào vùng thiết
kế (tất nhiên nếu copy từ word và paste vào vùng thiết kế thì vẫn được).
- Trong flash không hỗ trợ các công cụ Symbol như ở Word hoặc gõ công
thức dưới dạng phân số. Đối với các Khoa chuyên ngành, việc sử dụng các ký
hiệu Symbol, công thức sẽ gặp khó khăn. Để khắc phục việc này, chúng ta chỉ
có cách copy từ word sau đó paste vào vùng thiết kế. Kiểu ký hiệu Symbol được
chèn vào thì cần bôi đen và chọn kiểu Font là Symbol thì mới hiển thị được. Đối