Ứng dụng của flash trong thiết kế mô hình dạy học
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.12 MB, 43 trang )
MỤC LỤC
Chương 1 .......................................................................................................... 2
1.1. Giới thiệu Macromedia Flash MX 2004 ................................................ 2
1.2. Vùng làm việc (Stage)............................................................................ 3
1.3. Sử dụng bảng tiến trình (Timeline) và khung hình (Frames) ................ 4
1.4. Sử dụng lớp (Layer) ............................................................................... 4
1.5. Chức năng của một số phím tắt thường dùng ........................................ 5
Chương 2 .......................................................................................................... 6
2.1. Hình ảnh vector và hình ảnh bitmap ...................................................... 6
2.2. Thanh công cụ (Tools) ........................................................................... 6
2.3. Bảng điều khiển màu.............................................................................. 7
2.4. Đưa vào các hình ảnh bitmap................................................................. 8
2.5. Sử dụng công cụ Text ............................................................................ 9
2.6. Sử dụng thư viện (Library)................................................................... 10
Chương 3 ........................................................................................................ 12
3.1 Biến hình chuyển động.......................................................................... 12
3.2 Biến hình hình dạng .............................................................................. 13
3.3 Hoạt hình theo từng khung hình............................................................ 15
3.4 Hoạt hình theo đường dẫn ..................................................................... 16
3.5 Tạo hoạt hình với mặt nạ....................................................................... 18
Chương 4 ........................................................................................................ 20
4.1 Tìm hiểu biểu tượng .............................................................................. 20
4.2 Tạo và chỉnh sửa biểu tượng ................................................................. 20
4.3 Tạo MovieClip ...................................................................................... 21
4.4 Tạo Button............................................................................................. 22
4.5 Tạo Graphic........................................................................................... 23
Chương 5 ........................................................................................................ 24
5.1 Đưa âm thanh vào trong Flash. ............................................................. 24
5.2 Sử dụng âm thanh.................................................................................. 24
5.3 Tùy biến âm thanh................................................................................. 26
Chương 6 ........................................................................................................ 28
6.1. Sử dụng bảng kiểm soát Actions – Frame ........................................... 28
6.2 Sử dụng bảng kiểm soát Behavior ........................................................ 29
6.3 Một số câu lệnh ActionScript................................................................ 31
Chương 7 ........................................................................................................ 38
7.1 Tối ưu nội dung phim trước khi xuất bản ............................................. 38
7.2 Xuất bản phim với các định dạng cụ thể............................................... 38
PHẦN PHỤ LỤC............................................................................................... 40
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
Chương 1
TỔNG QUAN VỀ
MACROMEDIA FLASH MX 2004
1.1. Giới thiệu Macromedia Flash MX 2004
Macromedia Flash MX 2004 là phần mềm được phát triển bởi công ty
Macromedia. Flash cho phép tạo ra những ứng dụng đồ họa mạnh mẽ một cách
nhanh chóng và dễ dàng.
File nguồn Flash có phần mở rộng là .fla, sau khi xuất bản nó sẽ có phần
mở rộng là .swf, file này sẽ được chạy bởi trình Flash Player – trình này được
cài mặc định cùng với Flash.
Chương này chúng ta sẽ làm quen với không gian làm việc của Flash.
Bảng tiến trình
Một số bảng kiểm soát
Vùng làm việc
Thanh công cụ
Bảng kiểm soát Properties
Hình 1-1
Đỗ Thị Thu Hà – Tin 3B
2
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
1.2. Vùng làm việc (Stage)
Vùng làm việc của Flash, còn được gọi là môi trường sáng tác, là một
khung hình chữ nhật mà chúng ta dễ dàng nhìn thấy khi khởi động Flash. Các
đối tượng chỉ được hiển thị trong chương trình khi nó nằm trong phạm vi hình
chữ nhật này.
Chúng ta có thể thay đổi một vài thông số của stage như size, màu nền, đơn
vị đo, tốc độ frame trên một giây,...trên bảng kiểm soát Properties. Nếu bảng này
chưa có trên màn hình hãy làm theo một trong 2 cách sau:
o Nhấn tổ hợp phím Ctrl+F3
o Vào Menu Window Æ Properties
o thước stage
Kích
Màu nền
Tốc độ Frame/giây
Hình 1-2
Khi click vào nút size sẽ xuất hiện bảng Document Properties:
Thiết lập màu
nền
Thiết lập tốc độ
Frame/s
Thiết lập lại
size của stage
Thiết lập lại giá
trị mặc định
Lấy các giá trị mới là
giá trị mặc định
Thiết lập đơn vị
đo độ dài
Hình 1-3
Đỗ Thị Thu Hà – Tin 3B
3
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
1.3. Sử dụng bảng tiến trình (Timeline) và khung hình (Frames)
Các lớp
Khung hình
Khung hình khóa
Hình 1-4
Bảng tiến trình được dùng để thiết lập và điều khiển các nội dung của tài
liệu theo thời gian thông qua các lớp (Layer) và các khung hình (Frames). Một
bảng tiến trình bao gồm một hoặc nhiều lớp, mỗi lớp có rất nhiều khung hình.
Một khung hình có thể là:
o Khung hình trống (màu trắng)
o Khung hình có chứa nội dung (không phải màu trắng)
o Khung hình khóa (có nút tròn nhỏ)
Các nội dung của tài liệu và cả mã ActionScript chỉ có thể được soạn thảo
trên một khung hình khóa.
Cách thiết lập khung hình khóa và khung hình khóa trống:
o Nhấn phím F6 hoặc và menu Insert Æ Timeline Æ Keyframe
o Nhấn phím F7 hoặc và menu Insert Æ Timeline ÆBlank Keyframe
Ngoài ra ta có thể chèn, xóa, sao chép các khung hình tùy ý và có thể
chuyển đổi một khung hình khóa thành khung hình thường và ngược lại.
Cách chuyển đổi khung hình khóa thành khung hình thường:
o Đặt con trỏ vào khung hình khóa cần chuyển đổi
o Nhấn tổ hợp phím Shift+F6 hoặc ModifyÆTimelineÆClear Keyframe
Cách chuyển đổi một khung hình thường thành khung hình khóa:
o Đặt con trỏ vào khung hình cần chuyển đổi
o Nhấn phím F6 hoặc Modify Æ Timeline Æ Convert to Keyframe
Chú ý: Nếu bảng tiến trình chưa được mở, ta có thể mở nó bằng 2 cách:
¾ Nhấn tổ hợp phím Ctrl+Alt+T
¾ Vào menu Window Æ Timeline
1.4. Sử dụng lớp (Layer)
Các lớp nằm trong bảng tiến trình và được đặt xếp chồng lên nhau. Chúng
ta có thể tạo ra nhiều lớp bằng các cách sau:
o Click vào nút Insert Layer trên bảng tiến trình
Đỗ Thị Thu Hà – Tin 3B
4
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
o Click phải vào một lớp và chọn Insert Layer
o Vào menu Insert Æ Timeline Æ Layer
Chúng ta cũng có thể đặt tên cho lớp theo ý đồ của mình bằng cách nhấp
đúp vào lớp muốn đổi tên sau đó nhập tên mới vào.
Trong các chương trình phức tạp, có nhiều đối tượng khác nhau cùng hiển
thị, ta nên đặt các đối tượng này vào các lớp khác nhau để dễ dàng trong việc
chỉnh sửa, vì số lượng lớp không làm ảnh hưởng đến dung lượng chương trình.
Có 2 loại lớp đặ biệt cần chú ý, đó là lớp đường dẫn và lớp mặt nạ. Chúng
ta sẽ tìm hiểu kỹ 2 loại lớp này trong Chương 3: Tạo hoạt hình.
1.5. Chức năng của một số phím tắt thường dùng
Tổ hợp phím
Chức năng
F1
Gọi Hefp
F5
Chèn thêm một khung hình vào bảng tiến trình
F6
Chèn khung hình khóa
F7
Chèn khung hình khóa trống
F9
Hiển thị bảng Actions – Frame (bảng viết mã ActionScript)
Ctrl + F3
Hiển thị bảng kiểm soát Properties
Ctrl + F2
Hiển thị bảng công cụ Tools
Ctrl + F7
Hiển thị bảng kiểm soát Components
Ctrl + F9
Hiển thị bảng kiểm soát Color Swatches
Ctrl + F8
Tạo Symbol
Ctrl + L
Hiển thị Library
Ctrl + K
Hiển thị bảng kiểm soát Align (canh lề)
Shift + F3
Hiển thị bảng Behaviors (nhúng ActionScript)
Shift + F9
Hiển thị bảng kiểm soát Color Mixer
Ctrl + ‘
Hiển thị lưới
Ctrl+Alt+Shift+R Hiển thị thước
Đỗ Thị Thu Hà – Tin 3B
5
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
Chương 2
THIẾT KẾ ĐỒ HỌA TRONG FLASH
Một hồ sơ Flash không nhất thiết phải có các đối tượng đồ họa, hoạt hình,
đôi khi chỉ là một khung hình. Tuy nhiên, tập tin swf không chứa đồ họa sẽ thiếu
đi tính hấp dẫn trực quan của nó. Các công cụ vẽ sẵn có và khả năng đưa vào
một số file media khác nhau sẽ cho ra kết quả hấp dẫn và hiệu quả nhất mà
chúng ta mong muốn.
Trong chương này chúng ta sẽ làm quen với các công cụ đồ họa của Flash.
2.1. Hình ảnh vector và hình ảnh bitmap
o Hình ảnh vector: là các hình ảnh được tạo nên bởi các đường thẳng và
đường cong được định nghĩa bởi các phương trình toán học. Hình ảnh
vector thường có kích thước rất nhỏ gọn.
o Hình ảnh bitmap: là các hình ảnh được tạo ra bởi rất nhiều điểm ảnh
trên một lưới tọa độ. Ví dụ: các file ảnh .jpg, .png là các hình ảnh
bitmap.
Khi co giãn các hình ảnh vector, các tính toán sẽ được thực hiện và các
vector sẽ được tái tạo lại, vì vậy chất lượng hình ảnh không hề bị thay đổi.
Ngược lại, khi một hình ảnh bitmap bị thay đổi kích thước (nhất là kéo rộng ra)
thì các điểm ảnh cũng bị thay đổi kích thước nên hình ảnh sẽ bị biến dạng và
giảm chất lượng.
Các hình vẽ mà ta tạo ra trong Flash là hình ảnh vector.
2.2. Thanh công cụ (Tools)
Có 4 phần chính trong thanh công cụ có là: Tools, View, Colors và Options
(xem hình 2-1). Ý nghĩa của từng công cụ được thể hiện trên biểu tượng của
công cụ đó hoặc bạn có thể xem lời giải thích (tooltips) khi di chuyển con trỏ lên
các công cụ. Một nút công cụ cũng có thể có một menu đính kèm. Các nút này
sẽ có một mũi tên màu đen nhỏ nằm kế bên biểu tượng. Nhấp và giữ con trỏ để
mở memu này ra sau đó chọn công cụ từ menu xuất hiện.
Thanh công cụ chứa các công cụ để chọn, tạo, thao tác đồ họa và để thay
đổi chế độ hiển thị của stage. Một số công cụ có thể có phần tùy chọn. Các tùy
chọn này sẽ xuất hiện trong phần Options khi công cụ được chọn.
Khi công cụ được chọn thì nội dung của bảng Properties cũng sẽ thay đổi
để phản ánh công cụ đang được sử dụng.
Phần lớn các công cụ làm việc bằng cách nhấp chuột và kéo trong stage.
Dưới đây là ý nghĩa và phím tắt để chọn của từng công cụ.
Đỗ Thị Thu Hà – Tin 3B
6
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
Selection - V
Subselection - A
Line - N
Lasso - L
Pen - P
Text - T
Oval - O
Pencil - Y
Free Transform - Q
Ink Bottle - S
Eyedropper - I
Hand - H
Rectangle - R
Brush - B
Fill Transform - F
Paint Bucket - K
Eraser - E
Zoom – M hoặc Z
Chọn màu nét vẽ
Chọn màu tô
Màu đen/trắng mặc định
Nút hoán đổi màu nét vẽ và màu tô
Nút không màu
Các tùy chọn bám vào công cụ cụ thể
Hình 2-1: Thanh công cụ
2.3. Bảng điều khiển màu
Bảng điều khiển màu Color Swatches: Chọn màu của nét vẽ hoặc màu tô.
Hình 2-2: Color Swatches
Đỗ Thị Thu Hà – Tin 3B
7
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
Bảng điều khiển màu Color Mixer: Chọn màu tô và màu cho nét vẽ bằng
công cụ Brush. Có thể thiết lập các dạng tô đặc biệt như Linear, Radial hoặc
mẫu tô là một hình ảnh bitmap.
Thiết lập tỉ lệ
màu RGB
Thiết lập độ
trong suốt
Hình 2-3: Color Mixer
a)
b)
c)
a) Kiểu tô Linear
b) Kiểu tô Radial
c) Mẫu tô là hình ảnh bitmap
Hình 2-4: Kiểu tô đặc biệt
2.4. Đưa vào các hình ảnh bitmap
Cách đưa:
& File Æ Import Æ Import to Library
& File Æ Import Æ Import to Stage
:Đưa ảnh bitmap vào thư viện
:Đưa ảnh bitmap vào Stage
Tối ưu các ảnh bitmap:
Đưa vào các hình ảnh bitmap thường làm cho dung lượng của file fla cũng
như swf tăng lên rất nhiều. Và như vậy đồng nghĩa với việc tốn dung lượng bộ
nhớ và thời gian tải file Flash sẽ lâu hơn, nhất là khi tải lên mạng.
Do đó, Flash cho phép chúng ta có thể nén các ảnh bitmap nhằm làm giảm
dung lượng của chương trình. Tuy nhiên, chất lượng của ảnh bitmap tỉ lệ nghịch
với hệ số nén, vì vậy không nên quá lạm dụng việc tối ưu ảnh bitmap nếu không
thực sự cần thiết.
Đỗ Thị Thu Hà – Tin 3B
8
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
Phương pháp tối ưu:
& Mở bảng điều khiển Library
& Click phải vào ảnh bitmap cần tối ưu và chọn Properties... Khi đó trên
màn hình xuất hiện hộp thoại Bitmap Properties như sau:
&
&
&
Hình 2-5: Tối ưu ảnh bitmap
Giá trị Quality mặc định là 50, giá trị này có thể thay đổi tùy ý, tuy
nhiên không nên nhỏ hơn 35, nếu không chất lượng ảnh sẽ rất xấu.
Có thể nhấn Test để xem kết quả trước khi lựa chọn.
Bây giờ hãy so sánh dung lượng chương trình trước và sau khi tối ưu
ảnh, ta sẽ thấy được kết quả của nó.
2.5. Sử dụng công cụ Text
Có một số dạng văn bản khác nhau mà chúng ta có thể sử dụng, đó là:
o Static Text: văn bản tĩnh. Tương tự như một hình ảnh đồ họa, giá
trị của văn bản không thể thay đổi.
o Dynamic Text: văn bản động. Có thể thay đổi giá trị của văn bản
bằng câu lệnh ActionScript.
o Input Text : văn bản nhập. Cho phép người dùng nhập văn bản
vào khi chương trình đang chạy. Việc ghi nhận giá trị nhập được
thực hiện bằng các câu lênh ActionScript.
Bảng Properties của Text:
Hộp chọn kiểu Text
Đặt tên cho Text
Hình 2-6
Đỗ Thị Thu Hà – Tin 3B
9
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
2.6. Sử dụng thư viện (Library)
Hình 2-7: Library
Library chứa các biểu tượng (symbol) và các đối tượng mà chúng ta tạo ra
và sử dụng trong dự án. Các mục trên thư viện có thể được thêm vào, xóa, đổi
tên, chỉnh sửa,...Các đối tượng trong Library có thể được đưa vào Stage bằng
cách kéo thả.
Có một điểm đặc biệt rất thú vị, đó là các mục có mặt trong Library nhưng
không được sử dụng trong dự án thì sẽ không làm ảnh hưởng đến dung lượng
của tập tin fla, và nhiều phiên bản được kéo ra Stage từ cùng một mục thì cũng
chỉ được lưu một lần duy nhất – nghĩa là chúng ta kéo thả một phiên bản hay
nhiều phiên bản của một mục từ Library ra Stage thì dung lượng tập tin fla
không hề thay đổi. Điều này cho phép người dùng làm gọn tập tin của mình một
cách đáng kể.
Vì vậy, nếu có một đối tượng nào đó cần được sử dụng nhiều lần trong dự
án, thay vì copy và dán lại trên Stage, tốt nhất chúng ta nên chuyển nó thành
biểu tượng và đưa vào Library để “dùng dần”.
Ta có một file fla rất thú vị, có nhiều đối tượng có thể sử dụng cho dự án
mới của mình, khi đó ta có thể mở file fla này như một thư viện của dự án mới
bằng các cách sau:
o Nhấn tổ hợp phím Ctrl+Shift+O
o Vào menu FileÆImportÆOpen External Library
Khi đó trên màn hình sẽ xuất hiện hộp thoại sau:
Đỗ Thị Thu Hà – Tin 3B
10
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
Hình 2-8
Hãy chọn file fla cần mở như thư viện rồi click open. Các mục trong
Library này hoàn toàn có thể được sử dụng bằng cách kéo thả thông thường.
Đỗ Thị Thu Hà – Tin 3B
11
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
Chương 3
TẠO HOẠT HÌNH
Trong 2 chương trước chúng ta chỉ mới làm quen với Flash trên phương
diện lý thuyết. Điểm mạnh của Flash chính là hoạt hình, trong chương này
chúng ta sẽ tìm hiểu về cách tạo các hoạt hình trong Flash. Chương này chúng ta
sẽ vừa làm quen vừa thực hành ngay, vì vậy đòi hỏi trên máy phải được cài
Flash rồi.
3.1 Biến hình chuyển động
Biến hình chuyển động là dạng biến hình thường được dùng nhất.
Chúng ta có thể sử dụng biến hình chuyển động để thực hiện các việc sau:
o Thay đổi vị trí của đối tượng
o Thay đổi kích thước đối tượng
o Xô nghiêng đối tượng
o Thay đổi màu sắc
o Thay đổi độ trong suốt (thông số alpha)
Biến hình chuyển động chỉ có thể áp dụng với các dạng đối tượng xác định,
bao gồm:
o Các đối tượng được gom nhóm
o Các phiên bản biểu tượng
o Các hình ảnh bitmap
Bây giờ chúng ta sẽ tạo một hoạt hình đơn giản với biến hình chuyển động.
Dự án 1: Tạo hoạt hình trái bóng nảy với biến hình hình dạng
(Có thể tham khảo file du_an_1.fla trên đĩa CD kèm theo)
Các bước thực hiện:
1. Mở một phim Flash mới.
2. Chọn công cụ Oval (Nhấn phím O).
3. Chọn màu tô và màu vẽ cần sử dụng.
4. Vẽ một hình tròn (giữ Shift để có một hình tròn hoàn hảo).
5. Chọn công cụ Selection (Nhấn phím V).
6. Click đôi vào hình tròn sao cho cả phần tô và phần nét vẽ đều được
chọn sau đó nhấn Ctrl+G để gom nhóm.
7. Di chuyển quả bóng đến vị trí cao nhất trên Stage mà ta muốn.
8. Nhấp vào khung hình 12 và nhấn F6 để thiết lập khung hình khóa.
9. Chọn tất cả các khung hình trung gian từ khung hình 1 đến khung hình 12.
10. Click phải (hoặc vào menu InsertÆTimeline) rồi chọn Create Motion
Tween. Bây giờ trên bảng tiến trình sẽ xuất hiện mũi tên từ khung hình
1 đến khung hình 12 (như hình 3-1).
Đỗ Thị Thu Hà – Tin 3B
12
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
Hình 3-1
11. Click vào khung hình 12 để chọn nó.
12. Di chuyển quả bóng đến vị trí thấp nhất mà ta muốn.
13. Lưu dự án lại
14. Nhấn Ctrl+Enter để chạy thử
Như vậy, ta đã tạo ra được một hoạt hình đơn giản. Để có được hiệu quả
cao hơn, ta có thể lặp lại từ bước 7 để tạo hoạt hình cho quả bóng nảy lên nảy
xuống, vị trí nảy lên thấp dần và sau đó dừng hẳn lại. Và chu kì sau thì thời gian
ngắn hơn chu kì trước nên khoảng cách giữa 2 khung hình khóa không nhất thiết
là 12.
Hình 3-2: Quá trình biến hình chuyển động
3.2 Biến hình hình dạng
Quá trình tạo một biến hình hình dạng cũng tương tự như biến hình chuyển
động, tuy nhiên có một số điểm chú ý sau:
o Phép biến hình hình dạng làm thay đổi hìng dạng của đối tượng ,vì vậy,
đối tượng càng đơn giản càng tốt. Hình quá nhiều chi tiết sẽ rất rối.
o Biến hình hình dạng chỉ áp dụng với các hình vẽ không gom nhóm
(ngược lại với biến hình chuyển động).
o Muốn áp dụng biến hình hình dạng với các ảnh bimap hoặc các khối
văn bản, ta phải phân tách chúng ra trước khi thực hiện biến hình. Cách
phân tách: Chọn đối tượng rồi nhấn Ctrl +B. Với văn bản thì nhấn
Ctrl+B hai lần.
Đỗ Thị Thu Hà – Tin 3B
13
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
Bây giờ chúng ta sẽ tạo một hoạt hình đơn giản bằng biến hình hình dạng.
Dự án 2:Hoạt hình biến đổi: hình vuông Æ hình tròn Æ ngôi sao.
(Có thể tham khảo file du_an_2.fla trên đĩa CD kèm theo)
Từ bước 1 Æ 3 giống Dự án 1
4. Vẽ một hình vuông đặt ở giữa Stage.
5. Thiết lập một khóa trống ở khung hình 24 (nhấn F7).
6. Vẽ một hình tròn ở khung hình 24, vị trí đúng vào vị trí của hình vuông
khi trước.
7. Chọn các khung hình trung gian từ khung hình 1 đến khung hình 24. Mở
bảng kiểm soát Properties, trong hộp chọn Tween hãy chọn Shape.
8. Thiết lập một khóa trống ở khung hình 48.
9. Vẽ một ngôi sao ở khung hình 48, đúng vào vị trí của 2 hình trước. Bây
giờ ta không cần chọn Shape trong bảng Properties vì Flash tự động làm
việc đó cho ta rồi.
Hình ngôi sao có thể được vẽ bằng cách sau: Vẽ một hình ngũ giác đều
bằng công cụ Rectangle (chọn Poly Star trong menu đính kèm). Nối các
đỉnh lại với nhau bằng công cụ Line, hãy đảm bảo các đường nối dính
liền với nhau. Chọn công cụ Selection sau đó click vào các phần ngoài
ngôi sao và xóa đi (nhấn delete)
Hình 3-3
10. Lưu dự án.
11. Nhấn Ctrl +Enter để chạy thử.
Hình 3-4: Quá trình biến hình hình dạng
Ta có thể làm cho các hình vừa biến đổi hình dạng vừa di chuyển bằng
cách thay đổi vị trí của các hình đi.
Đỗ Thị Thu Hà – Tin 3B
14
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
Thật ra một hoạt hình biến một hình tròn thành một ngôi sao phải qua rất
nhiều hình trung gian, nhưng chúng ta chỉ việc tạo ra hình đầu và hình cuối,
công đoạn trung gian Flash đã làm tất cả cho chúng ta rồi.
3.3 Hoạt hình theo từng khung hình
Đây là dạng hoạt hình tốn nhiều thời gian nhất vì ta phải tạo ra từng khung
hình một cách thủ công. Tuy nhiên dạng hoạt hình theo từng khung hình sẽ cho
ta nhiều kiểm soát hơn để tạo ra các hiệu ứng hấp dẫn hơn.
Hoạt hình theo từng khung hình rất thích hợp cho một chuỗi các hoạt hình
phức tạp, khi mà các hình ảnh đòi hỏi phải khác nhau cho mỗi khung hình,
chẳng hạn: hoạt hình làm bánh xe quay hay họat hình tạo các chữ tự viết,...
Dự án 3: Hoạt hình bánh xe quay
(Tham khảo file du_an_3.fla trên đĩa CD)
* Tạo bánh xe:
1. Vẽ một hình tròn. Cho hình tròn này nằm ở chính giữa stage bằng cách:
hiển thị bảng kiểm soát Align (Ctrl+K)
Thiết lập đối tượng
nằm giữa Stage
Hình 3-4
2. Vẽ 1 đường thẳng đứng có độ dài lớn hơn đường kính hình tròn trên.
Giữ Shift để có đường thẳng hoàn hảo. Sau đó sao chép thành 17 đường
nữa như thế. Chú ý không để các đường thẳng nằm chồng chéo lên nhau
hoặc chồng chéo lên hình tròn.
3. Canh một đường thẳng cho nằm giữa stage. Các đường thẳng còn lại lần
lượt quay đi các góc từ 10 oÆ 170o sau đó mới canh giữa. Chú ý quay
một đường thẳng xong liền canh giữa ngay.
Cách quay 1 đối tượng:
Mở bảng kiểm soát Transform (Ctrl+T)
Giá trị góc quay
Hình 3-5
Đỗ Thị Thu Hà – Tin 3B
15
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
4. Vẽ một hình tròn khác có bán kính nhỏ hơn hình tròn lúc đầu sau đó
canh giữa hình tròn này.
5. Xóa các phần không cần thiết, ta sẽ có được một bánh xe. Chọn toàn bộ
bánh xe và gom nhóm lại
Hình 3-6
* Tạo hoạt hình bánh xe quay
1. Tạo các khung hình khóa liền kề nhau. Ở mỗi khung hình khóa quay
bánh xe một góc là bội của 10 cho đến khi nào góc quay bằng 180o thì
dừng lại (góc quay càng nhỏ bánh xe quay càng nhanh).
2. Lưu và chạy thử chương trình.
3.4 Hoạt hình theo đường dẫn
Ở chương 1 ta có nhắc tới lớp đường dẫn. Đây là một trong hai loại lớp đặc
biệt mà Flash cung cấp cho người dùng nhằm làm phong phú các hiệu ứng đồ
họa.
Khi ta tạo ra một biến hình chuyển động, đối tượng sẽ di chuyển theo một
đường thẳng. Điều này đôi khi không tự nhiên, không trực quan vì trong thực tế
có nhiều đối tượng di chuyển theo đường cong. Ví dụ như trong dự án 1, thật ra
trong thực tế trái bóng đâu có di chuyển theo đường thẳng chéo như thế, mà di
chuyển theo các đường cong. Vì vậy, nếu ta dùng đường dẫn, cho trái bóng đi
theo đường cong thì trông sẽ đẹp mắt hơn.
* Tạo đường dẫn chuyển động
Đường dẫn chuyển động là một đường được vẽ trên lớp dẫn. Khi một lớp
được chọn làm lớp dẫn, ta có thể gắn đường chuyển động của các đối tượng trên
lớp được dẫn với đường đó. Khi đó, các đối tượng trên lớp được dẫn sẽ di
chuyển theo đường dẫn thay vì theo đường thẳng. Các đối tượng được vẽ trên
lớp dẫn không xuất hiện trong chương trình khi chạy.
* Tạo lớp dẫn
Nhấp vào lớp trên của lớp mà ta muốn tạo như một lớp được dẫn
Nhấp vào nút Add Motion Guide trên bảng tiến trình (nút thứ 2) hoặc vào
menu Insert Æ Timline Æ Motion Guide. Khi đó lớp được dẫn sẽ nằm lui vào
so với lớp dẫn một chút.
Đỗ Thị Thu Hà – Tin 3B
16
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
Lớp dẫn
Lớp được dẫn
Hình 3-7
Lớp dẫn có thể được sử dụng chung cho nhiều lớp khác nhau. Khi mới tạo
ra, chỉ có lớp nằm ngay dưới lớp dẫn mới là lớp được dẫn. Muốn các lớp khác
cũng là lớp được dẫn, hãy kéo lớp đó vào giữa lớp dẫn và lớp được dẫn.
* Gắn đối tượng với đường dẫn
Tuy đã có lớp dẫn và đường dẫn, nhưng muốn đối tượng chuyển động theo
đường dẫn thì ta phải gắn đối tượng đó vào đường dẫn. Nghĩa là đảm bảo tại các
khung hình khóa, tâm của đối tượng phải nằm trên đường dẫn.
Bây giờ ta sẽ thực hành một ví dụ đơn giản để nắm rõ hơn về đường dẫn.
Dự án 4: Hoạt hình xe ô tô chạy trên đường đèo
(Tham khảo file du_an_4.fla trên đĩa CD)
1. Vẽ ô tô và đưa nó ra khỏi Stage
2. Vẽ đường dẫn là một đường cong
3. Tạo ra một lớp mới dùng để chứa đường đi và các hình ảnh khác (nếu có).
Lớp này không nhất thiết phải là lớp được dẫn, tuy nhiên nó phải nằm
dưới lớp chứa ô tô để ô tô không bị che mất.
4. Thiết lập khung hình khóa ở khung hình 72 cho cả 3 lớp: đường dẫn, lớp
chứa ô tô và lớp chứa ngoại cảnh.
5. Tạo biến hình chuyển động cho lớp chứa ô tô
6. Đảm bảo tại các khung hình khóa tâm của ô tô luôn gắn với đường dẫn.
7. Lưu và chạy thử dự án.
Hình 3-8: Tâm ô tô luôn gắn với đường dẫn
Đỗ Thị Thu Hà – Tin 3B
17
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
3.5 Tạo hoạt hình với mặt nạ
Về bản chất, mặt nạ giống như một cửa sổ phía trên một trong số các lớp
của phim. Nghĩa là chúng ta chỉ có thể nhìn thấy các đối tượng nằm trong phạm
vi của mặt nạ.
Cũng giống như lớp đường dẫn, mặt nạ không bao giờ có mặt trong phim
và mặt nạ chỉ ảnh hưởng đến những lớp nằm dưới nó.
Tạo lớp mặt nạ: Ta có thể bổ sung một lớp mặt nạ bằng cách: chọn lớp
muốn dùng làm mặt nạ sau đó click phải và chon Mask.
Chú ý: Khi một lớp mặt nạ vừa được thiết lập thì bản thân nó và lớp được
che mặt nạ sẽ bị khóa lại. Do đó ta phải click vào biểu tượng nút khóa ở trên
bảng tiến trình rồi mới soạn thảo tiếp được.
Chúng ta sẽ làm quen với lớp mặt nạ bằng dự án 5 sau đây.
Dự án 5a: Sử dụng văn bản làm mặt nạ.
(Tham khảo du_an_5a.fla trên đĩa CD kèm theo)
1. Đưa một ảnh bimap vào stage bằng cách: nhấn Ctrl+R hoặc
FileÆImport Æ Import to Stage.
2. Chèn thêm một lớp mới vào trước lớp chứa hình ảnh vừa đưa vào và
thiết lập nó thành lớp mặt nạ.
3. Bỏ khóa. Vẽ một hộp văn bản trên lớp mặt nạ và nhập vào dòng chữ ta
muốn. Chọn kiểu chữ đậm và phông chữ to nhất có thể cho dòng chữ
này.
4. Nhấn Ctrl +Enter để chạy thử.
Chúng ta cũng có thể làm cho hoạt hình sinh động hơn bằng cách cho các
đối tượng làm mặt nạ hoặc các đối tượng được “đeo mặt nạ” biến hình hình
dạng.
Dự án 5b: Tạo băng văn bản cuộn.
(Tham khảo du_an_5b.fla trên đĩa CD)
1. Đặt tên lớp là Van ban, vẽ một hộp văn bản với dòng chữ nào đó. Sau
đó đưa khối văn bản đó về phía phải sao cho nó nằm ngoài stage hoàn
toàn.
2. Chèn một lớp khác, đặt tên là Hop để chứa hộp văn bản. Hộp văn bản có
thể là một hình chữ nhật. Lớp này phải nằm dưới lớp chứa văn bản nếu
không văn bản sẽ bị che mất. Chú ý canh sao cho văn bản chỉ xuất hiện
trong phạm vi của hộp này.
3. Chèn một lớp mới nằm trên lớp chứa văn bản, đặt tên là Mask và thiết
lập thành lớp mặt nạ.
4. Vẽ một hình chữ nhật trên lớp mặt nạ (đủ dài và rộng để bao trọn khối
văn bản trên).
5. Chèn một khung hình khóa vào cả 3 lớp (khối văn bản càng dài thì
khung hình khóa mới càng lớn để tốc độ cuộn văn bản vừa phải).
Đỗ Thị Thu Hà – Tin 3B
18
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
6. Thiết lập biến hình hình dạng trên lớp chứa văn bản. Vị trí sau cùng của
hộp văn bản cũng nằm ngoài stage nhưng là về phía bên trái.
7. Lưu và chạy thử chương trình.
Chú ý: Ta cũng có thể để khối văn bản đứng yên và cho mặt nạ chạy trong
trường hợp khối văn bản chứa đủ trong stage. Khi đó 2 hiệu ứng là tương đương
nhau.
Đỗ Thị Thu Hà – Tin 3B
19
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
Chương 4
TẠO CÁC BIỂU TƯỢNG
Biểu tượng (Symbol) thực chất là các đối tượng mà chúng ta tạo ra để sử
dụng trong các phim Flash của mình. Các biểu tượng có thể là tĩnh, động, tương
tác hay là một ứng dụng con độc lập. Như đã giới thiệu trong mục 2.6, việc sử
dụng biểu tượng và thư viện đem lại rất nhiều lợi ích.
Trong chương này chúng ta sẽ tìm hiểu về các loại biểu tượng, cách tạo,
chỉnh sửa và sử dụng biểu tượng.
4.1 Tìm hiểu biểu tượng
Biểu tượng thực chất là các đối tượng, tuy nhiên nó có một số điểm khác
biệt quan trọng sau đây:
o Các biểu tượng có thể được sử dụng lại.
o Chỉ có một phiên bản duy nhất của biểu tượng được chứa trong tập tin
xuất bản. Nhờ đó mà kích thước của tập tin xuất bản được thu gọn lại.
o Các thay đổi trên một phiên bản của biểu tượng cũng làm thay đổi
tương tự trên tất cả các phiên bản còn lại.
o Các biểu tượng được lưu trong thư viện có thể được chia xẻ với các
phim Flash khác (như đã giới thiệu trong mục 2.6)
Biểu tượng trong Flash gồm có 3 loại sau:
o MovieClip (Đoạn phim)
o Button (Nút nhấn)
o Graphic (Đồ họa)
4.2 Tạo và chỉnh sửa biểu tượng
Có 2 cách để tạo một biểu tượng mới:
1. Ta có thể tạo biểu tượng từ một đối tượng đã có sẵn trên stage bằng
cách chọn đối tượng đó và nhấn F8 hoặc Modify Æ Convert to
Symbol.
2. Tạo một biểu tượng hoàn toàn mới trên vùng soạn thảo biểu tượng.
Hãy nhấn Ctrl+F8 hoặc Insert New Symbol để mở vùng soạn thảo
biểu tượng. Khi đó trên màn hình sẽ xuất hiện hộp thoại như trong
hình 4-1. Sau khi thiết lập một số lựa chọn, click OK để vào vùng soạn
thảo biểu tượng.
Khi muốn thoát khỏi chế độ soạn thảo biểu tượng, nhấn vào mục Scene
phía trên bảng tiến trình.
Đỗ Thị Thu Hà – Tin 3B
20
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
Đặt tên cho
biểu tượng
Chọn loại
biểu tượng
Định danh
trong liên kết
(nếu cần)
Thiết lập
các liên kết
(nếu cần)
Hình 4-1: Hộp thoại tạo symbol mới
4.3 Tạo MovieClip
Khi tạo một MovieClip (đoạn phim), nghĩa là ta đã tạo ra một mẩu hoạt
hình độc lập mà có thể được sử dụng trong phim chính của mình để thực hiện
những việc rất khó thực hiện bằng cách khác.
Ví dụ, ta có thể tạo ra các bánh xe quay (như trong du_an_3) để gắn cho
các ô tô (trong du_an_4) nhằm tạo ra một chiếc ô tô đang chạy thực sự.
Các bước để tạo một biểu tượng đoạn phim:
1. Nhấn Ctrl+F8 hoặc chọn Insert Æ New Symbol.
2. Chọn nút MovieClip trong hộp tùy chọn.
3. Nhập tên biểu tượng.
4. Nhấp OK để vào vùng soạn thảo.
5. Tạo các đối tượng hoạt hình như mong muốn.
Việc tạo ra các MovieClip về bản chất giống hệt như tạo hoạt hình trong
Stage chính vậy. Điểm khác biệt chủ yếu là MovieClip có thể được đưa vào như
một phần hoạt hình riêng biệt. Theo cách này ta có thể tạo các hoạt hình rất phức
tạp mà không cần sử dụng đến dạng hoạt hình theo từng khung hình một.
Trong MovieClip có thể chứa các các đối tượng đồ họa và các biểu tượng
kể cả một MovieClip khác.
Đây là vùng soạn thảo của đoạn phim:
Đỗ Thị Thu Hà – Tin 3B
21
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
Tâm của vùng soạn thảo
Hình 4-2
Nếu không cần thiết thay đổi, ta nên đặt các đối tượng vào chính giữa của
vùng soạn thảo. Điều này đặc biệt cần thiết trong trường hợp ta muốn bổ sung
các biểu tượng đoạn phim vào phim chính bằng câu lệnh ActionScript.
4.4 Tạo Button
Button (nút nhấn) là một trong những dạng biểu tượng thường được dùng
nhất. Nó cho phép người dùng có thể tương tác với các phim mà chúng ta tạo ra.
Nút nhấn là một dạng biểu tượng đặc biệt, vùng soản thảo của nó có nhiều điểm
khác biệt so với các biểu tượng khác, đặc biệt là bảng tiến trình.
Hình 4-3: Bảng tiến trình của vùng soạn thảo nút nhấn
Đỗ Thị Thu Hà – Tin 3B
22
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
Bảng tiến trình này có 4 frame đặc biệt.
Frame Up
: Thể hiện của nút nhấn trong điều kiện bình thường.
Frame Over : Thể hiện của nút nhấn khi di chuyển chuột trên nút nhấn.
Frame Down : Thể hiện của nút nhấn khi nhấn chuột vào nút.
Frame Hit
: Hiểu đơn giản là thể hiện vùng tác động được của nút nhấn
Chúng ta sẽ tìm hiểu quá trình soạn thảo nút nhấn bằng việc tạo thử một nút
nhấn.
1. Mở vùng soạn thảo nút nhấn.
2. Vẽ một hình chữ nhật với màu tô màu đỏ (có thể chọn kiểu tô đặc biệt
như Linear hoặc Radial) trong khung hình Up. Canh hình chữ nhật này
nằm chính giữa tâm của vùng soạn thảo
3. Bổ sung một khung hình khóa vào khung hình Over
4. Sửa màu tô của hình chữ nhật thành màu xanh, dịch chuyển nó lên trên
và sang trái một chút.
5. Bổ sung một khung hình khóa trống vào khung hình Down. Copy hình
trong khung hình Up và dán lại vào khung hình Down (nhấn
Ctrl+Shift+V để dán hình vào đúng vị trí cũ của nó)
6. Bổ sung một khung hình khóa vào khung hình Hit.
7. Trở về Stage chính.
8. Kéo biểu tượng nút nhấn ra stage và chạy thử.
Trong Button, ta có thể đưa vào các đối tượng đồ họa, MovieClip, Graphic
nhưng không thể đưa vào các Button khác.
4.5 Tạo Graphic
Graphic (đồ họa) là dạng biểu tượng đơn giản nhất trong các loại biểu
tượng. Việc tạo các biểu tượng đồ họa nói chung rất dễ dàng.Các biểu tượng đồ
họa được tạo ra với mục đích được sử dụng tiện lợi cho phim. Ví dụ, muốn tạo
một rừng cây, ta nên tạo ra một biểu tượng đồ họa là một cây, sau đó sử dụng
chúng lại nhiều lần với các kích thước khác nhau.
Vùng soạn thảo của biểu tượng đồ họa không có gì khác so với vùng soạn
thảo của biểu tượng đoạn phim.
Đỗ Thị Thu Hà – Tin 3B
23
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
Chương 5
BỔ SUNG ÂM THANH
Âm thanh là một bổ sung quan trọng, tạo nên sự hấp dẫn của một phim
Flash. Bổ sung âm thanh, chương trình của chúng ta sẽ thu hút được người dùng
hơn và cho phép chúng ta thể hiện khả năng sáng tạo của mình theo nhiều cách
khác nhau. Tuy nhiên, nếu ta lạm dụng quá mức thì có thể sẽ gây phản cảm cho
người dùng. Nhất là trong các mô hình dạy học, nếu không cần thiết, không nên
đưa âm thanh vào nhằm tránh làm phân tán sự chú ý của người học.
5.1 Đưa âm thanh vào trong Flash.
Việc đưa âm thanh vào trong Flash cũng tương đối giống việc đưa các hình
ảnh bimap vào trong Flash. Nó được thực hiện theo các bước sau:
1. Chọn FileÆInportÆImport to Library hoặc nhấn Ctrl+R để mở hộp
thoại như sau:
Hình 5-1
2. Chọn định dạng tập tin file âm thanh muốn đưa vào bằng hộp danh sách
Files of type. Nếu không chắc chắn về định dạng của file, ta nên chọn
tùy chọn All Formats.
3. Chọn file muốn đưa vào.
4. Click Open để hoàn tất việc đưa file âm thanh vào.
5.2 Sử dụng âm thanh
Đỗ Thị Thu Hà – Tin 3B
24
ỨNG DỤNG CỦA FLASH TRONG THIẾT KẾ MÔ HÌNH DẠY HỌC
Có nhiều dạng tập tin âm thanh có thể được đưa vào, như file MP3, AIFF
và WAV.
* Đưa âm thanh vào trong các khung hình:
Nếu muốn âm thanh bắt đầu phát lại tại một thời điểm cụ thể nào đó, ta hãy
đưa nó vào các khung hình trong bảng tiến trình.
Tốt nhất ta nên tạo một lớp riêng để chứa âm thanh để dễ kiểm soát và
chỉnh sửa.
Các bước thực hiện:
1. Đưa file âm thanh vào Flash.
2. Tạo một lớp mới để chứa âm thanh.
3. Mở thư viện.
4. Với lớp âm thanh đang được chọn, kéo âm thanh từ thư viện vào trong
stage, Flash sẽ đưa âm thanh vào lớp âm thanh.
Tuy nhiên, nếu thời gian phát của phim ngắn hơn thời gian phát của âm
thanh thì âm thanh phát ra sẽ bị nhiễu.
Chúng ta có thể khắc phục điều này bằng cách đồng bộ âm thanh như sau:
1. Chọn lớp chứa âm thanh.
2. Mở bảng kiểm soát Properties, có dạnh như sau:
Hiệu ứng tăng giảm
Tùy chọn đồng bộ
Hinh 5-2
3. Các tùy chọn đồng bộ được thiết lập bằng hộp danh sách Sync:
o Event (Các âm thanh theo sự kiện): là các âm thanh được phát lại khi có
một sự kiện nào đó xảy ra, thông dụng nhất là sự kiện nút nhấn.
o Start: Bắt đầu phát lại âm thanh.
o Stop: Ngừng việc phát âm thanh. Chúng ta nên dùng Stop trước khi
Start để tránh nhiễu âm thanh.
o Stream (Các âm thanh tuôn dòng): Các âm thanh tuôn dòng đồng bộ với
bảng tiến trình để cả 2 làm việc với nhau. Nếu hoạt hình ngừng lại, bất
kỳ âm thanh tuôn dòng nào gắn với bảng tiến trình cũng sẽ ngừng lại.
Điều này có nghĩa là chiều dài thời gian của âm thanh sẽ được kiểm
soát bởi bảng tiến trình.
* Đưa âm thanh vào các nút nhấn:
Đỗ Thị Thu Hà – Tin 3B
25
