Trước khi thiết kế học liệu với Flash, bạn cần viết ra giấy nội dung trên từng frame (tương tự side trong powerpoint), những yêu cầu thao tác của người học trên frame như di chuyển ảnh,[r]
(1)Thiết kế giảng với Flash
Thiết kế giảng/ học liệu với Flash có ưu điểm chèn vào web dễ dàng, người học tương tác với học trực quan
Trước thiết kế học liệu với Flash, bạn cần viết giấy nội dung frame (tương tự side powerpoint), yêu cầu thao tác người học frame di chuyển ảnh, chữ, nhập vào ô chữ… Trong này, bạn cần tạo tối thiểu layer: layer hình nền, layer nội dung layer button để chèn nút điều khiển movie, layer Actions tự động tạo bạn sử dụng trình tạo mã tự động Code Snippets
Nguyên tắc thiết kế: keyframe nội dung frame, phần có u cầu animation viết code phải chuyển đối tượng (convert symbol – F8) loại: movie clip, button, graphic
Các button điều khiển movie nằm layer riêng chèn keyframe đầu tiên, frame sau cần nhấn F5 tạo frame
Download Hình ảnh cho tập
Các bước thực sau:
A.Giai đoạn thiết kế giao diện frame:
Bước 1: Tạo file kích thước 800 x 600 Tạo layer hình (khơng cần tạo layer Actions) Bước 2: Tạo nút
-Chọn Windows > Component > Chọn User Interface, chọn Button vào kéo vào stage, đặt góc trên bên phải movie.
Trong Properties, đặt Label lầnn lượt cho nút là: Home, Trước, Kế tiếp
(2)Bước Tạo nội dung keyframe
Keyframe 1:
-Dùng công cụ Text nhập tên bài, tên giáo viên, …
Keyframe
-Nhấn F6 để tạo Keyframe (nếu có sử dụng lại nội dung keyframe trước) nhấn F7 để tạo keyframe trống
-Dùng công cụ Text nhập câu hỏi, câu trả lời, chèn ảnh vào stage (Để chèn ảnh vào stage, vào File > Import > Import to stage)
Keyframe
-Keyframe có thêm khung hình chữ nhật dùng để kéo ảnh vào khung thích hợp
-Dùng cơng cụ Rectangle để vẽ, chọn hình chữ nhật, nhấn F8 chuyển thành movie clip
-Nhấn Alt để chép thêm khung
(3)Keyframe
(4)Keyframe 7:
-Dùng cơng cụ Rectangle để vẽ hình chữ nhật, chọn hình chữ nhật, nhấn F8 chuyển thành movie clip
Keyframe 8:
B.Viết code cho nút điều khiển movie
Nút Home: chọn nút Home, chọn Code Snippets, chọn lệnh Timeline Navigation > Click to Go to Frame and Stop
(5)Nút Kế tiếp: chọn nút Kế tiếp chọn Code Snippets, chọn lệnh Timeline Navigation> Click to Go to Next Frame and Stop
Nút Trước: chọn nút Trước chọn Code Snippets, chọn lệnh Timeline Navigation > Click to Go to Previous Frame and Stop
Chọn Frame 1, layer Action: chọn Code Snippets, chọn lệnh Timeline Navigation > Stop at this Frame. Nhấn Ctrl + Enter chạy thử movie, nhấn nút để điều khiển
C.Viết code điều khiển nội dung Frame Keyframe 1:
Trên frame này, bạn thêm nút “Xem” để nhấn vào nút Xem hiển thị nội dung trả lời Bạn làm sau:
(6)-Chọn tất phần text, hình ảnh phần nội dung trả lời, nhấn F8 chuyển thành movie clip, đặt tên symbol là: mc_traloi1 Trong Properties, đặt tên Instance name mc_traloi1
-Chọn nút Xem, chọn Code Snippets, chọn Action > Click to Hide Object
Sửa lại code sau:
Keyframe 2:
Trên frame này, bạn cho học sinh di chuyển ảnh đặt vào thích hợp
(7)-Trong Properties, đặt tên instance name người sau: mc_cha, mc_ong, mc_me, mc_ba, mc_em, mc_minh
-Để di chuyển movie clip ảnh người, chọn người, chọn Code Snippets, chọn Action > Drag and Drop
Keyframe 5: Ý nghĩa giống với Keyframe 1, click vào nút Xem lên câu trả lời Do với câu hỏi, bạn cần tạo thêm button Xem
Keyframe 7: Học sinh di chuyển câu trả lời vào khung
-Chọn câu trả lời đầu tiên, nhấn F8, chuyển thành movie clip, đặt tên mc_traloi11, Properties, đặt tên instance name mc_traloi11
-Chọn câu trả lời thứ 2, 3, nhấn F8, chuyển thành movie clip, đặt tên mc_traloi12, mc_traloi13, Properties, đặt tên instance name mc_traloi12, mc_traloi13
-Để viết code di chuyển cho câu trả lời, bạn chọn câu trả lời, chọn Code Snippets, chọn Action > Drag and Drop
-Tạo thêm nút Kiểm tra để xác nhận học sinh làm hay sai Đặt tên Instance name bt_kiemtra -Dùng công cụ Text nhập chữ “Đúng” “Sai” Nhấn F8 lên chữ chuyển thành movie clip, đặt tên symbol mc_dung, mc_sai Trong Properties đặt tên mc_dung, mc_sai
-Viết code cho nút Kiểm tra: chọn nút Kiểm tra, chọn Code Snippet, chọn Action > Click to Hide Object
(8)(Nhập thêm dòng 3, dòng đến dòng 19) Keyframe 8: Tương tự keyframe 7.
Layer Hình nền: Chèn ảnh vào (File > Import> Import to Stage), đặt kích thước 800 x 600, tọa độ X, Y
Download Hình ảnh cho tập