3- Mã lệnh AS viết trên movie clip:
2.2.3 Thiết kế nội dung trang “Chuong 1”
Mục tiêu xây dựng nội dung của trang này gồm:
- Sử dụng công cụ vẽ, công cụ màu chuyển sắc Gradient để xây dựng giao diện nền;
- Sử dụng các frame để hiển thị nội dung bài giảng
- Sử dụng và viết mã lệnh cho các nút ấn để chuyển cảnh và chuyển đổi giữa các frame.
Để thiết kế nội dung cho Scene “Chuong 1” chúng ta cần click vào nút
Edit Scene trên vùng Timeline sau đó chọn mục “Chuong 1”. Giao diện thiết kế
của trang này hiển thị.
2.2.3.1 Thiết kế giao diện nền cho trang “Chuong 1”
Bước 1: Đổi tên layer 1 thành “Giao dien nen”, click chọn frame 1 của layer này.
Bước 2: Chọn công cụ vẽ Rectangle Tool (R) với chế độ không có góc bo. Tiếp tục chọn chế độ vẽ hình theo đối tượng nguyên thể (Object Drawing – phím tắt J), bỏ chọn đường viền của hình, màu nền tô có màu xanh; click chuột vào một điểm bất kỳ trên vùng thiết kế để kéo chuột vẽ hình chữ nhật. Điều chỉnh hình đó có kích thước bằng với kích thước vùng thiết kế. Chọn chế độ canh giữa đối tượng trên vùng thiết kế (như hướng dẫn trong mục 2.2.2).
Hình 45. Sử dụng các công cụ vẽ hình chữ nhật để tạo giao diện nền Bước 3: Chuyển hình chữ nhật trên vùng thiết kế từ đối tượng vẽ theo hình nguyên thể (Object Drawing) sang kiểu vẽ theo ảnh véctơ (Snap to
Objects) bằng cách chọn vào hình chữ nhật sau đó vào mục Modify Break Apart (phím tắt B) trên thanh công cụ. Khi đó ta có thể chọn, chỉnh sửa từng
phần đối với hình này.
Chú ý: Thao tác trên nhằm mục đích hướng dẫn các đồng chí sử dụng các công cụ để chuyển đối tượng từ dạng Object Drawing sang dạng Snap to Objects. Đồng chí nào đã thành thạo thì có thể bỏ qua bước 2 và ngay trong bước 1, ta chọn chế độ vẽ đối tượng dạng ảnh véctơ bằng nút Snap to Objects
thay vì chọn nút Object Drawing. Tuy nhiên thực tế khi vẽ các đối tượng ta rất thường phải làm thao tác chuyển đổi kiểu vẽ các đối tượng để tiện sử dụng và chỉnh sửa.
Bước 4: Dùng công cụ Selection Tool (V) kéo chọn một phần phía trên hình chữ nhật sau đó chọn mục Fill Color để đổi màu vùng này sang màu chuyển sắc kiểu Linear.
Tiếp tục mở bảng Color, ở thẻ Color Mixer để chọn dải màu chuyển sắc tùy ý người thiết kế.
Chúng ta có thể sử dụng tiếp công cụ Gradient Transform Tool (F) để chỉnh màu vùng đang chọn. Các đồng chí chú ý là công cụ Gradient Transform
Tool chỉ có thể có hiệu lực khi hình được chọn có màu chuyển sắc (tức không phải là màu đơn sắc kiểu Solid).
Hình 46. Tạo màu chuyển sắc kiểu Linear có sử dụng kèm thêm công cụ Gradient Transform Tool
Bước 5: Tạo thêm một layer mới, đặt tên là “Khung van ban”. Tạo khu vực chứa văn bản tĩnh (Static Text) bằng công cụ Rectangle Tool (R); chế độ vẽ có góc bo bằng 15; đường viền có màu vàng, cỡ nét bằng 3; vùng nền tô của hình có màu trắng. Chọn frame 1 của layer “Khung van ban” sau đó click và kéo chuột trên màn hình để có hình chữ nhật thích hợp như trong trang thiết kế mẫu. Xong việc, khóa layer này lại.
Đến đây hình nền giao diện cho trang “Chuong 1” đã hoàn tất. Khóa layer “Giao dien”.
2.2.3.2 Sử dụng các nút ấn chuyển cảnh của trang “Chuong 1”
Tiếp tục công việc trên theo các bước sau:
Bước 1: Tạo mới một layer, đặt tên là “Nut” để chứa toàn bộ các nút ấn chuyển cảnh (gồm 10 nút chọn bài giảng từ bài 1.1 đến bài 1.10; 01 nút “Trở về” trang “Giao dien”; 02 nút ấn chuyển sang các frame khác).
Bước 2: Tạo 10 nút ấn bài giảng (từ bài 1.1 đến bài 1.10) như đã hướng dẫn ở phần trên.
Bước 3: Lấy trong thư viện của phần mềm các nút ấn theo mẫu cho 03 nút ấn “Trở về”, nút sang frame mới (NextFrame) và nút trở về frame trước (PrevFrame) như minh họa. Các nút ấn theo mẫu đều có chữ mặc định trên nút là “Enter” nếu nút đó chứa text ghi chú. Để sửa chữ này thành chữ “Trở về” đồng chí hãy double click vào nút để chuyển sang chế độ chỉnh sửa nút. Chọn vào frame có chứa đoạn text trên và dùng công cụ Text Tool để sửa như bình thường. Xong việc thoát khỏi chế độ chỉnh sửa nút và trở về giao diện của vùng thiết kế chính.
2.2.3.3 Chèn và xử lý văn bản trên các frame của trang “Chuong 1”
Tiếp tục công việc trên theo các bước sau:
Bước 1: Tạo thêm một layer mới, đặt tên là “Van ban nen” để chèn các đoạn văn bản cho phần giao diện nền vào vùng thiết kế theo mẫu (kỹ năng chèn text đã được giới thiệu như phần trên).
Bước 2: Tạo thêm một layer mới, đặt tên là “Noi dung BG” để chèn các đoạn văn bản tĩnh của phần nội dung bài giảng. Ở đây tôi minh họa trong chương 1 của bài giảng có 10 tiết giảng (từ bài 1.1 đến bài 1.10). Mỗi bài nằm ở một frame riêng. Như vậy ở trang “Chuong 1” chúng ta dùng tổng cộng có 11 frame. Frame thứ nhất trình bày nội dung giới thiệu sơ lược về chương 1, 10 frame còn lại viết nội dung của 10 tiết giảng. Nội dung viết trong các frame này là khác nhau nên ta sẽ tạo ra 11 KeyFrame bằng phím F6 hoặc vào mục Modify
Timeline Convert to Keyframes (F6).
Chọn từng frame của layer “Noi dung BG” trên vùng Timeline và gõ, chèn đoạn văn bản cần thiết vào vùng thiết kế ở từng frame tương ứng (hình 47). Nội dung này tôi đã hướng dẫn như phần trên.
Hình 47. Chèn các frame trên layer “Noi dung BG” để chèn nội dung Bước 3: Đến đây chúng ta thấy có một vấn đề là, ở các layer “Giao dien nen”, “Khung van ban”, “Nut”, “Van ban nen” mới chỉ có một frame. Như vậy nếu như chúng ta chuyển sang frame 2 của vùng Timeline thì các layer có số frame thiết kế ít hơn sẽ không xuất hiện nữa. Vì vậy chúng ta cần bổ sung ở các layer này sao cho số frame của chúng bằng 11. Đồng thời vì trên mỗi layer đó đều chứa một nội dung cố định nên chúng ta chỉ cần dùng một chuỗi frame để biểu diễn bằng cách nhấn chọn frame 11 trên mỗi layer và bấm phím F5 để chèn một chuỗi frame. Cuối cùng chúng ta có được hình 48.
Cuối cùng chúng ta có được giao diện như hình 49.
Hình 49. Giao diện xuất hiên tại frame 10 của Scene “Chuong 1”
2.2.3.4 Viết mã lệnh chuyển cảnh cho các nút ấn
1- Căn cứ vào mục tiêu thiết kế, ta muốn khi ấn nút “Bài 1.1” thì ở scene “Chuong 1” sẽ chuyển sang frame 2 và tương tự với các nút khác theo quy ước sau:
- Ấn nút “Bài 1.X” thì chuyển sang Frame (X+1), trong đó X = 1,2,…10 - Chọn nút “Bài 1.X” sau đó mở bảng action bằng phím F9. Viết mã trên các nút theo luật sau ():
on(release){
gotoAndStop(X+1); //điền vào giá trị frame tương ứng bằng (X+1)
}
Ví dụ với các nút “Bài 1.1” hình 50a và nút “Bài 1.2” hình 50b.
a) b)
Hình 50. Mã lệnh trên các nút chọn bài Các nút khác viết tương tự.
2- Viết mã lệnh cho 02 nút ấn chuyển frame như sau:
- Nút trở về frame trước đứng liền kề với frame hiện tại hình 51a. - Nút sang frame kế tiếp đứng sau liền kề với frame hiện tại hình 51b.
a) b)
Hình 51. Mã lệnh trên các nút chuyển frame
Tuy nhiên vì ta chỉ sử dụng có 11 frame nên khi đứng tại frame 11 nếu nút chuyển sang trang mới NextFrame có chứa lệnh thì khi đó trên màn hình sẽ xuất hiện không chứa nội dung nào cả (chỉ có màu nền tương ứng). Để khắc phục vấn đề này, tại frame 11 của layer “Nut” chúng ta điền vào đây một KeyFrame và click vào nút ấn NextFrame, mở bảng action và xóa đoạn mã lệnh trên đó để vô hiệu hóa nút ấn này tại frame 11.
Cũng tương tự như vậy, khi đứng tại frame 1 nếu nút ấn PrevFrame có mã lệnh thì khi đã trở về frame 1 mà click nút này thì tự khắc đầu đọc sẽ chuyển về Scene đứng trước liền kề (tức Scene “Giao dien”). Vì vậy, tại frame 1 của layer “Nut”, chúng ta cũng làm tương tự, chèn 1 KeyFrame tại đây, click chọn nút PrevFrame, mở bảng action, xóa dòng mã lệnh của nút này tại đây (hình 52).
3- Mã lệnh cho nút ấn “Trở về” để chuyển từ giao diện trang “Chuong 1” sang trang “Giao dien” như hình 53.
Hình 53. Viết mã lệnh cho nút ấn “Trở về”