(NB) Căn cứ vào chương trình đào tạo nghề Thiết kế trang web, giáo trình giúp cung cấp cho người học những kiến thức cơ bản về kỹ thuật thiết kế Flash cũng như kỹ năng lập trình thiết kế flash bằng ngôn ngữ Action Script và Java Script. Cấu trúc chung của giáo trình này bao gồm 9 đơn vị bài học, phần 1 giáo trình sau đây sẽ gồm các bài học về: Làm quen với AS, sử dụng Action panel, viêt code trong Flash, điều khiển luồng movie, menu và button động. Mời các bạn cùng tham khảo.
TRƢỜNG CAO ĐẲNG NGHỀ ĐÀ LẠT ỦY BAN NHÂN DÂN TỈNH LÂM ĐỒNG TRƢỜNG CAO ĐẲNG NGHỀ ĐÀ LẠT GIÁO TRÌNH THIẾT KẾ ĐA PHƢƠNG TIỆN (FLASH) TRÌNH ĐỘ: CAO ĐẲNG GIÁO TRÌNH MƠN HỌC/ MƠ ĐUN: THIẾT KẾ ĐA PHƢƠNG TIỆN (FLASH) NGÀNH/ NGHỀ: THIẾT KẾ TRANG WEB TRÌNH ĐỘ: CAO ĐẲNG Ban hành kèm theo Quyết định số: 1157/QĐ-CĐNĐL ngày 11 tháng 12 năm 2019 Hiệu trưởng Trường Cao đẳng Nghề Đà Lạt (LƢU HÀNH NỘI BỘ) Đà Lạt, 2019 Lâm Đồng, năm 2019 TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng ngun trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm Giáo trình lưu hành nội Trường Cao đẳng Nghề Đà Lạt Trang LỜI GIỚI THIỆU Vài nét xuất xứ giáo trình: Giáo trình viết theo Thông tư số 03/2017/TT-BLĐTBXH ngày 01 tháng 03 năm 2017 Bộ Lao động – Thương binh Xã hội việc Quy định quy trình xây dựng, thẩm định ban hành chương trình; tổ chức biên soạn, lựa chọn, thẩm định giáo trình đào tạo trình độ trung cấp, trình độ cao đẳng Quá trình biên soạn: Giáo trình biên soạn có tham gia tích cực giáo viên có kinh nghiệm, với ý kiến đóng góp quý báu chuyên gia lĩnh vực công nghệ thông tin Mối quan hệ tài liệu với chương trình, mơ đun/mơn học: Căn vào chương trình đào tạo nghề Thiết kế trang web, giáo trình giúp cung cấp cho người học kiến thức kỹ thuật thiết kế Flash kỹ lập trình thiết kế flash ngôn ngữ Action Script Java Script Để học mơ đun người học cần có kiến thức lập trình Cấu trúc chung giáo trình bao gồm bài: Bài Làm quen với AS Bài Sử dụng Action panel Bài Viêt code Flash Bài Điều khiển luồng movie Bài Menu button động Bài ActionScript JavaScript Bài Dùng XML với Flash Bài Sử dụng component Bài Điều khiển âm với ActionScript Lời cảm ơn Giáo trình biên soạn sở văn quy định Nhà nước tham khảo nhiều tài liệu liên quan có giá trị Song hẳn q trình biên soạn khơng tránh khỏi thiếu sót định Ban biên soạn mong muốn thực cảm ơn ý kiến nhận xét, đánh giá chuyên gia, thầy đóng góp cho việc chỉnh sửa để giáo trình ngày hoàn thiện Lâm Đồng, ngày 10 tháng 12 năm 2019 Tham gia biên soạn Phạm Đình Nam Ngơ Thiên Hồng Nguyễn Quỳnh Ngun Phan Ngọc Bảo Trang MỤC LỤC Bài Làm quen với AS Script gì? Xuất xứ AS Nhận biết AS AS làm gì? Phát triển khả AS Viết lệnh AS 6.1 Viết AS nút 6.2 Viết AS MC Bài Sử dụng Action panel 10 Học cách lập trình 11 2.Cách suy nghĩ computer 11 Lệnh, hàm, phép tính 12 Biến số 12 Điều kiện 13 Vòng lặp 13 Viết mã hoàn chỉnh 14 Bài Viêt code Flash 15 Làm việc với Output window 15 Biến số cục toàn 16 Phép so sánh phép tính 17 Điệu kiện 19 Vòng lặp 20 Hàm 21 Dot Syntax 22 Chú giải 22 Debugging 23 Bài Điều khiển luồng movie 24 Nhảy từ frame đến frame 24 Tạo nút (button) 25 Tạo script cho button 25 Điều khiển movie clip 26 dịch chuyển thay đổi movie 29 Chọn, kéo thả movie clip 33 6.1 Selection 33 6.2 Kéo movie clip 35 Trang 6.3 Kéo thả 38 Lấy thông tin từ người dùng 39 7.1 Phát qua nút: 39 7.2 Phát qua Đối tượng phím (key object) 41 7.3 Key Listener 42 Tạo Và Điểu Khiển Văn Bản 47 Làm việc với số 51 10 Đối tượng Mảng 63 11 Sử dụng Rollovers 72 12 Thành phần Scroll 80 13 Các thành phần nhập liệu 84 Bài Menu button động 97 Cách làm menu đơn giản 97 Luyện tập: Làm menu 98 2.1 Tạo menu xổ xuống click vào nút 100 2.2 Luyện tập: Sử dụng button động để tạo menu 103 Liên kết liên lạc với trình duyệt 106 3.1 Load trang web 106 3.2 Luyện tập: Làm liên kết (navigation bar) 108 Bài ActionScript JavaScript 109 Giới thiệu 110 Luyện tập: Mở window 113 Luyện tập: Tạo SlideShow điều khiển JavaScript 115 Gởi thông tin cho máy chủ 116 Bài Dùng XML với Flash 119 XML Căn 119 1.1 Đối tượng XML 119 1.2 Phân tích sử lý văn thành XML 120 1.3 Lấy liệu từ đối tượng XML 120 Tự tạo XML từ "tay trắng" 122 1.4 Thuộc tính 123 Thêm vài AS XML 124 Bài Sử dụng component 133 PushButton 133 CheckBoxes 134 RadioButtons 135 ListBox 136 Trang ComboBox 138 ScrollPane 139 ScrollBar 140 Thực hành với Components 140 Bài Điều khiển âm với ActionScript 146 Tìm hiểu cách truy xuất âm với ActionScript 146 Quản lý streaming cho movie 150 Tạo movie clip riêng cho hình vẽ 164 Trang Bài Làm quen với AS AS ngơn ngữ lập trình xây dựng Flash AS giống ngôn ngữ khác Javascript, C++ v.v bạn không cần biết ngôn ngữ khác để học AS (nếu có dễ hơn) Bắt đâu học AS, coi thử AS gì, làm có quan hẹ với chức khác Flash Trong này, bạn tìm hiểu coi AS đời nào, xem cách viết AS làm sao, tìm hiểu AS làm sau sau xác định nơi lưu trữ AS Flash Để sát nghĩa tiện cho sau này, không dịch số từ ngữ tiếng việt script, movieclip v.v Script gì? AS ngơn ngữ lập trình, với lệnh sai khiến Flash movie làm việc theo viết (chỉ có viết sai computer khơng làm sai ) Phần nhiều AS làm việc mơi trường Flash, nhiên AS gửi lệnh cho browser, hệ điều hành v.v Script ngắn gọn vài chữ hay dài trăm trang Script việt gộp lại chổ hay viết rãi rác khắp nơi movie Xuất xứ AS AS rât giống ngôn ngữ C++, Java, javascript v.v dựa tiêu chuẩn ECMA (European Computer Manufactuers Association) lập gọi ECMAScript Nhiều người hiểu lầm AS dựa Javascript, thực chất dựa ECMAScript Lúc đầu viết script Flash đơn giản Flash đuợc phát triển cịn "thơ sơ" với vịng lặp điều kiện "if else" Cho tới Flash dân Flash lập trình gắn liền script với yếu tố movie Sang tới Flash MX AS trở thành ngơn ngữ lập trình tồn diện với 300 câu lệnh, hàm v.v Nhận biết AS AS đơn giản câu lệnh viết tiếng Anh (vì lẽ mà không dịch tư tiếng Anh liên quan đến AS, phần khơng giỏi thuật ngữ computer hay tiếng việt cho lắm) phép tính dấu câu Ví dụ sau: ActionScript on (press) { gotoAndPlay ("my frame"); } Trang Bạn giải nghĩa đoạn mã cách tìm hiểu từ Chữ "press" gới ý người dùng kích chuột vào đó, (và trường hợp nút) Chữ "gotoAndPlay" chữ "go to and play" gộp lại, gợi ý AS lệnh cho Flash tớimột điểm movie bắt đầu chơi từ điểm AS làm gì? Flash movie gồm có scence (cảnh), mổi cảnh có timeline (thời giản biểu???) timeline có frame (khung) số Thơng thường Flash chơi từ frame frame cuối scence với tốc độ cố định dừng lại hay lặp lại từ đầu theo người làm Flash Mục đích AS thay đổi thứ tự cách chơi Flash AS dùng bất frame nào, hay chạy ngườc trở lại frame trước hay nhảy vài frame chơi tiếp Nhưng khơng AS làm AS biến film hoạt hình Flash thành chương trình ứng dụng có tương tác người dùng Dưới mà AS làm: • Hoạt hình: Bạn khơng cần AS để làm hoạt hình, với AS bạn tạo hoạt hình phức tạp Ví dụ, trái banh tưng xung quanh mành hình mà khơng ngừng, tuân theo định luật vật lý lực hút, lực ma sát, lực phản v.v Nếu AS cần phải dùng hàng ngàn frame để làm, cịn với AS frame đủ • Navigation (hơng biết dịchlàm cho hay ): thay movie chơi frame theo thứ tự bạn dừng movie ỏ frame nào, cho phép người dùng chơi frame v.v nhập thông tin từ người dùng (user input): bạn dùng AS để hỏi người dùng cầu hỏi, dùng thông tìn movie hay gửi cho server hay làm bạn muốn • Thu • Thu nhập thơng tìn từ nguồn khác: AS tương tác với server lấy thông tin từ server hay text file • Tính tốn: AS làm phép tính mà tốn học cho phép • Thay đổi hình ảnh movie: AS thay đổi kích thước, màu sắc, vị trí movie clip (MC) movie flash bạn Bạn tạo thêm phiên hay xố bới phiên MC với AS tích mơi trường máy tính: Với AS bạn lấy từ hệ điều hành hay địa chơi movie Flash • Phân • Điểu khiển âm flash movie: AS cách tốt để điều khiển âm Flash,AS có chơi chậm, chơi nhanh, ngừng, quay vòng v.v bât kỳ âm Flash Phát triển khả AS Điều quan trọng mà AS làm cho bạn chưa nghĩ tới Với AS trí tưởng tượng óc sáng tạo bạn khơng có khơng thể xảy với AS Trang Mục đích sách, VNFX hướng dẫn bạn hiểu biết Flash để từ bạn tự dùng để làm sản phẩm tuyệt vời mà khơng có Viết lệnh AS Câu hỏi tìm hiểu AS thường hỏi "Viết AS vào đâu?" Flash có mơi trường làm multimedia phức tạp Nếu bạn dùng Flash hay đọc qua hướng dẫn kèm với Flash, bạn biết yếu tớ timeline, key frame v.v nêu bạn chưa biết khuyên bạn nên tìm hiểu trước tiêp tục Ơ mục Flash Tổng Quá, VNFX có post link để download CD hướng dẫn cho người chưa dùng Flash AS viết vào key frame timeline Để làm vậy, bạn chọn key frame timeline trước bạn mở Action Panel (có thể nhấn F9) để viêt hay xem AS viết Mình khun bạn nên dùng Action Panel dạng Expert Normal, bạn học nhiều lẹ Khi viết AS vào key frame AS key frame hoạt động mà Flash chơi tới key frame Ví dụ lệnh AS stop() đặt key frame Flash chơi tới key frame dừng lại có lệnh khác cách viết gọi viết vào time line Một lý viết script vào time line bạn muốn dùng function (hàm), function cho phép tái sử dụng đoạn mã từ nhiều nơi, nhiều level khác 6.1 Viết AS nút Các phần tử Flash movie gọi symbol (biểu tượng) thường symbol hình ảnh Và có loại symbol: button (nút), graphich (hình ảnh), movie clips(đoạn phim) loại AS khơng thể viết liền với graphic, cịn button movie clip OK Nút khơng có tác dụng khơng kèm AS lên Muốn kèm AS vào nút chọn nút stage (sân khấu: diện tích flash movie), sau mở Action panel viết vào ta viết vào key frame AS viết nút hoạt động chuột bàn phím tác động lên nút mà 6.2 Viết AS MC MC khác với graphic chổ MC đặt tên mang vào stage, MC thường hình ành động, có AS kèm theo MC Để viết AS vào MC tương tự ta làm với nút AS kèm theo MC điểu khiển MC MC timeline hay timeline movie Bài tập Tạo movie tạo key frames Dung Flash vẽ hình khác cho frame Trang Chạy thử movie (nhấn Control + enter) Sau trở lại timeline, viết vào keyframe đoạn mã : "stop();" Cho chạy thử movie lần Và kỳ bạn thấy Flash chơi tới frame thứ ngừng, bạn thành công việc viết AS : Trang } else if (parseInt(userYearText) < thisYear-100) { phải nhập năm sinh, từ 100 năm trước đến nay"; // năm sinh tương lai :) } else if (parseInt(userYearText) > thisYear) { = "Bạn phải nhập năm sinh"; feedback = "Bạn return(false); feedback return(false); } // quay trở lại feedback = ""; return(true); } Tiếp theo hàm chechUserEmail để kiểm tra email CODE // kiểm tra email function checkUserEmail() { if (userEmailText.length < 7) { feedback = "Email ngắn"; return(false); } else if (userEmailText.indexOf("@") == -1) { feedback = "Thiếu ký tự @"; return(false); } else if (userEmailText.indexOf(".") == -1) { feedback = "Thiếu dấu chấm (.)"; return(false); } else if (userEmailText.indexOf("@") > userEmailText.indexOf(".")) { feedback = "@ dấu chấm không đúng"; return(false); } else if (userEmailText.lastIndexOf(".") > userEmailText.length-3) { feedback = "Domain không hợp lệ" return(false); } // quay trở lại feedback = ""; return(true); } Trang 95 - Thế kiểm tra liệu xong Bây sử dụng hàm để kiểm tra liệu nhập vào xuất kết Hàm sau kiểm tra ô nhập liệu, sai trả kết false, hết true CODE function checkAll() { if (!checkUserName()) { return(false); } else if (!checkUserYear()) { return(false); } else if (!checkUserEmail()) { return(false); } return(true); } - Bây viết code cho nút Submit Khi nhấn nút Submit gọi hàm CheckAll đưa sang frame với lời cám ơn CODE on (release) { if (checkAll()) { nextFrame(); } } Trang 96 Bài Menu button động Menu hệ thống quen thuộc với chương trình máy tính Hệ điều hành Flash có hệ thống menu đầu Menu cách tốt để đưa nhiều lựa chọn cho người dùng mà lại tốn diện tích hình Trong phần này, học về: - Cách làm menu đơn giản - Sử dụng menu movie - Tạo menu xổ xuống click vào nút - Cách tạo button động - Sử dụng button động movie Cách làm menu đơn giản Những bạn làm quen với AS thường muốn biết cách tạo menu Thật để tạo menu đơn giản, biết qua rồi, bạn khơng để ý Cách thức hoạt động có button, người dùng đưa trỏ qua button loạt button khác xuất bên button tạo thành dãy menu Hình ví dụ Khi đưa trỏ ngang qua nút About Us m ột loạt button khác xuất hình bên phải Như vậy, cần có frame movie clip làm menu Frame thứ chứa button About Us, frame thứ hai chứa button About Us button lại Ở frame thứ nhất, người dùng đưa trỏ ngang qua button About Us nhảy sang frame thứ dừng lại frame người dùng đưa trỏ chuột ngoài, trở frame Nếu để ý, bạn thấy cách giống học Giờ thứ 13 RollOver Chúng ta dùng hàm hitTest để kiểm tra xem vị trí trỏ chuột có nằm button không Dưới đoạn code xử lý việc Chúng ta xem nhé! CODE onClipEvent(load) { false; } previouslyOver = Trang 97 onClipEvent(enterFrame) { // kiểm tra vị trí trỏ currentlyOver = this.hitTest(_root._xmouse,_root._ymouse,true); // kiểm tra thay đổi if (!previouslyOver and currentlyOver) { previouslyOver = true; this.gotoAndStop("on"); } else if (previouslyOver and !currentlyOver) { previouslyOver = false; this.gotoAndStop("off"); } } Hãy ý, bạn sử dụng AS để quản lý thành phần khác đựơc đặt chung frame, bạn phải đưa menu lên cách sử dụng hàm swapDepths Luyện tập: Làm menu Nào, bắt tay vào làm thử menu đơn giản nhé! Menu có phần: About Us, Products Store, menu lại chứa nhiều menu - Việc tạo movie Flash - Tạo button đơn giản thôi, button khơng nên có chữ, nhớ chừa chỗ trống để đưa chữ vào sau Tạo movie clip mới, đặt tên About Us Menu Tạo hai layer, Label Buttons - Trong layer Buttons, kéo button vừa tạo vào Đặt dòng chữ About Us lên - Layer Label trải frame Nhưng frame layer Buttons khác nhau, frame đầu đặt tên off, frame đặt tên on - Trong frame thứ hai layer Buttons, kéo thêm button vào tạo nội dung cho chúng History, Clients, Partners Nhớ đặt câu lệnh stop() vào frame Movie clip giống hình bên Trang 98 Quay trở lại level root, kéo movie clip About Us Menu từ Library vào, đặt tên aboutUsMenu, chèn đoạn code sau: CODE onClipEvent(load) { FALSE; } previouslyOver = onClipEvent(enterFrame) { currentlyOver = this.hitTest(_root._xmouse,_root._ymouse,true); if (!previouslyOver and currentlyOver) { previouslyOver = true; this.gotoAndStop("on"); } else if (previouslyOver and !currentlyOver) { previouslyOver = false; this.gotoAndStop("off"); } } - Bây chạy thử movie bạn xem Đưa trỏ vào button About Us xem điều xảy ra! - Phần việc cịn lại bạn Làm tương tự cho menu lại! Trang 99 2.1 Tạo menu xổ xuống click vào nút Có nhiều cách để làm menu xổ xuống, có nhiều cách menu hoạt động Chúng ta biết cách ví dụ phần trước, người dùng đưa trỏ ngang qua button loạt button khác xuất dọc bên tạo thành menu, đơn giản frame Menu xổ xuống hoạt động theo cách khác: người dùng click vào button, loạt menu xuất người dùng phải chuột kéo trỏ để chọn menu con, muốn chọn menu thả chuột menu Chúng ta nghiên cứu mổ xẻ menu xổ xuống nhé! Chúng ta tạo frame trước, frame đầu chứa button tiêu đề menu, frame hai chứa button xếp dọc xuống thành hệ thống menu tiêu đề menu click Tuy nhiên cách viết code khác đi! Đây code cho button làm tiêu đề cho menu CODE on (press) { } expandMenu(); on (release, releaseOutside) { } collapseMenu(); Khi người dùng click vào button gọi hàm expandMenu(), người dùng thả chuột gọi hàm collapseMenu() Ngồi cịn sử dụng event on(dragOver) on(dragOut), hai event giống với on(rollOver) on(rollOut) mà phải giữ chuột di chuyển CODE on (dragOver) { } on (dragOut) { } rollOverMenu(); rollOutMenu(); Button tiêu đề gọi hàm expandMenu(), collapseMenu(), rollOverMenu(), rollOutMenu(), viết hàm này, đặt chúng frame nhé! Hàm expandMenu() đặt giá trị cho biến expanded true nhảy sang frame thứ hai CODE Trang 100 function expandMenu() { expanded = true; gotoAndStop("on"); } Hàm collapseMenu() làm ngược lại CODE function collapseMenu() { expanded = false; gotoAndStop("off"); } Hàm rollOverMenu kiểm tra biến expanded di chuyển đến frame thích hợp expanded = true Có nghĩa người dùng click chuột vào button tiêu đề menu xổ xuống người dùng phải giữ chuột lúc di chuyển để chọn, thả chuột menu thu lại CODE function rollOverMenu() { (expanded) { gotoAndStop("on"); } } function rollOutMenu() { (expanded) { gotoAndStop("off"); } } if if Chúng ta viết code tiếp cho menu xổ xuống Chúng button, viết event on(release) cho chúng để bắt kiện người người thả chuột button đó, có nghĩa người dùng chọn menu Khi đó, gọi hàm collapseMenu() thực cơng việc mình, đơn giản gọi hàm trace Chúng ta viết event on(dragOver) on(dragOut) cho button để giữ menu lại người dùng giữ chuột kéo qua button thu menu lại người dùng thả chuột kéo CODE on (release) { collapseMenu(); trace("History Button Pressed"); Trang 101 } on (dragOut) { } rollOutMenu(); Điều cuối cần phải làm phải thay đổi thuộc tính cho button Trong phần khung properties button, chuyển Track as Button thành Track as Menu Item Điều làm cho button nhận kiện release thay nhận press trước Cịn có nhiều cách để làm menu, phụ thuộc vào mục đích sử dụng bạn khả sử dụng AS người Button động Một cách khác tương tự để làm menu xổ xuống sử dụng button động Chúng ta làm menu xổ xuống mà không cần phải làm cách button trước, tự sinh AS , thú vị Điều cần phải làm tạo button mẫu Tiếp theo, đặt button vào ởmovie clip, movie clip s button, dynamic text sẽẽ có hai thành ph liên kết vầớn, mi biếộn buttonLabel Trong ct button hai dynamic text ửa sổ Library, click chuột phải lên tên movie clip chọn Linkage Nhớ chọn mục Export for Actionscript đặt tên cho buttonMovieClip Đựơc rồi, có button mẫu, sử dụng AS để sử dụng button Việc đơn giản, sử dụng lệnh attachMovie để tạo instance movie clip đặt lại giá trị cho dynamic text movie clip, đặt lại vị trí cách đặt cách thuộc tính _x, _y CODE function createButton(buttonLabel, x, y) { this.attachMovie("buttonMovieClip","button"+buttonLevels,buttonLevels); bmc = this["button"+buttonLevels]; bmc.buttonLabel = buttonLabel; bmc._x = x; bmc._y = y; buttonLevels++; return(bmc); } Đựơc rồi, thử movie bạn xem Bạn tạo hàng loạt button động cách gọi loạt hàm createButton, lưu tên button vào mảng dùng vòng lặp for để gọi hàm createButton Trang 102 Nhưng có vấn đề cần giải làm để xử lý riêng cho button Nếu viết code button button Vậy làm cách để làm cho button xử lý công việc khác nhau? Button gọi hàm từ ngồi root, button gọi hàm khác nhau, điều có nghĩa chúng thực việc khác 2.2 Luyện tập: Sử dụng button động để tạo menu - Tạo movie Flash - Tạo button mẫu phần trước, đặt đoạn code sau vào button CODE on (rollOver) { _parent.buttonRolloverAction(thisAction,buttonLabel); } on (release) { _parent.buttonClickAction(thisAction,buttonLabel); } Điều có nghĩa button gọi hàm buttonRollOverAction đưa chuột qua, gọi hàm buttonClickAction click chuột Hai đối số giúp báo button click - Dưới hàm createButton để tạo button động, lần tạo loạt button từ mảng lưu sẵn CODE function createButton(buttonLabel, x, y, buttonAction) { this.attachMovie("buttonMovieClip","button"+buttonLevels,buttonLevels); bmc = this["button"+buttonLevels]; bmc.buttonLabel = buttonLabel; bmc._x = x; bmc._y = y; bmc.thisAction = buttonAction; buttonLevels++; return(bmc); } Trang 103 // Tạo loạt button từ mảng function createButtonList(buttonList, x, y, direction) { for (var i=0;i