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

Tài liệu được viết chi tiết, hướng dẫn từng bước cách biên soạn một bài giảng hoặc một giáo trình điện tử bằng flash với đầy đủ các kỹ năng vẽ hình, biên tập hình ảnh, xử lý các hiệu ứng, âm thanh, mô phỏng chuyển động, chèn flash vào powerpoint,... giúp cho giảng viên, sinh viên trong báo cáo, xây dựng các đề tài nghiên cứu, biên soạn sách điện tử,... đặc biệt hữu dụng cho ngành kỹ thuật.

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:

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

- 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

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

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ụ

- 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

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

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)

1 800 x 600 Độ phân giải các màn hình máy

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)

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

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ế

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

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 đó

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

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

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

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

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 00 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 một số âm (ví dụ - 200) 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 00 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 00

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

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:

+ 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

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”

- 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

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