Giáo trình môn họcmô đun Thiết kế đa phương tiện – Flash (Ngành nghề Thiết kế trang web)

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 { // display complete displayText = "Loading Complete."; // fill out bar barFill._xscale = 100; // go to next frame _root.nextFrame(); } } } Ko biết hướng dẫn bạn hình dung cách làm chưa Nếu bạn chưa hiểu cbt post thêm hình minh họa vào Timeline tôt nên phân sau nha: -Timeline gồm có layer Layer thứ chứa loader bar mc mà tạo Nó kéo dài frames -Layer thứ gồm có keyframes fr1 fr2 Ở kf lệnh stop(); Layer thứ ta cho button Người sử dụng click vào button để xem tiếp phần lại movie Trong btn cho đoạn code sau: CODE on (release) { } play(); -Layer thứ frame thứ chứa movie cần load bạn Các bạn xem thêm file : 23complexLoader.fla Có lúc bạn cần tạo movie lớn có media ta ko cần phải tạo movie đầy file media mà load file media có sẵn từ bên ngồi Nhờ bạn xây dựng trình diễn lớn cách sử dụng file bên Trang 155 Đểngoài làm điều tìm hiểu bước sau: Thế chỗ movie thời Cách đơn giản để làm điều bạn chia cắt movie thành phần riêng Khi movie kết thúc ta chuyển đến movie khác Tất bạn cần dùng lệnh loadMovie Ví dụ, bạn có frame cuối movie dài Khi người xem đến đó, họ click vào button xem movie khác Đoạn code đơn giản sau: CODE on (release) { loadMovie("animation2.swf"); } Hoặc bạn cho người sử dụng lựa chọn animation mà họ muốn xem tiếp Ở cuối movie có buttons chứa movie khác Việc tạo liên kết movie quan trọng cho user trở lại movie cũ ban đầu Bạn xem ví dụ file 23movie1.fla để biết thêm làm để trình bày tác phẩm bạn với files có sẵn Loading a Movie Clip Với lệnh loadMovie bạn thay chỗ mc mc khác Ví dụ để thay chỗ myMovieClip file otherMovie.swf bạn cần làm: CODE myMovieClip.loadMovie("otherMovie.swf); Khi sử dụng loadMovie bạn dùng getBytesTotal and getBytesLoaded functions để thông báo cho người dùng text progess bar mà làm trình load Nếu muốn preload movie clip để sẵn sàng lúc cần hiển thị, tạo movie trống, khơng có ngoại trừ câu lệnh stop() Sau load mc vào mc trống (ko hiển thị stage) Khi load hồn tồn movie sẵn sàng frame Trang 156 đoạn Movie file nằm sẵn sàng browser cache user Bây đến đượcó sc download hồn tồn vử dụng mc lệnh loadMovie sề Sau làm viử dụng lệc Lúc ệnh gotoAndPlay(2) nhanh file để qua frame Loading a JPEG myMovieClip.loadMovie("picture.jpg"); Flash MX cho phép ta khả load file JPEG vào Cách làm tương tự cách load movie trên, cần thay đổi địa movie địa file JPEG ok: CODE myMovieClip.loadMovie("picture.jpg"); mc myMovieClip thay chỗ mc có chứa bitmap image Bạn kiểm tra xem ví dụ file 23loadipeg.fla Loading a Sound Có cách để play sound từ file bên Cả sử dụng sound object lệnh loadSound Các sound file cần dạng phổ biến mp3 Sau ví dụ cho cách thứ 1, để chơi event sound Ở toàn sound load vào nhớ trước sau chơi có lệnh start(); CODE on (release) { mySound = new sound(); mySound.loadSound("mysound.mp3",false); } mySound.start(); Flash ghi nhớ lệnh start đưa chí sound bắt đầu download Khi sound load xong play Trang 157 CODE on (release) { mySound = new sound(); mySound.loadSound("mysound.mp3",true); } Cách thứ ta sử dụng true param thứ Giá trị true bảo với flash stream sound Ngay sound load phần bắt đầu chơi lúc phần cịn lại tiếp tục load Nếu người dùng có kết nối mạng tốt nghe tồn sound load Ghi bạn ko cần phải sử dụng lệnh start với streaming sound Tuy nhiên bạn cần phải ý sử lí file MP3 Ví dụ bạn sử dụng file nhạc mp3 với 128 Kbps hay 160 Kbps thường dùng để nghe file lớn để stream vói internet, đặc biệt người sư dụng dùng modem 32 Kpsb hay thích hợp ta sử dụng stream Một số câu hỏi trả lời sau giúp bạn nắm rõ hơn: Câu 1: ta load mc, unload chúng ko?? -Trả lời: có, lệnh unloadMovie Câu 2: bình thường flash cần để load trước start?? -Trả lời: frame Bởi bạn cần sử dụng lệnh stop muốn đợi trước tiếp tục Câu 3: cách để xác định movie load hoàn toàn?? -Trả lời: cách dùng getBytesLoaded == getBytesTotal function cách dùng _frameLoaded property _totalFrames property Ngồi bạn xem thêm viết sau: Cách tạo preloader đơn giản Trang 158 http://www.vnfx.com/ipb/index.php?showtopic=2325 Cách tổng quát để tạo loader đẹp: http://www.vnfx.com/ipb/index.php?showtopic=2921 Ngoài loadMovie, loadSound có nhiều Bạn chịu khó search Vẽ với AS Đây h cuối cùng, thú vị, hy vọng bạn cảm thấy dzui dzẻ vẽ AS CBT ko có kinh nghiệm dịch bài, nhìn vào text dày đặc chữ tối mắt tối mũi nên nhiều chỗ dịch lung tung, theo ý thích có chỗ diễn đạt tối nghĩa, ko bạn thẳng thắn góp ý, đừng thương tiếc Drawing lines -Để vẽ đường thẳng, việc cần làm định nghĩa giá trị lineStyle, dày nè, rùi có màu độ alpha CODE lineStyle(thickness, color, alpha); Màu (color): giá trị đưa dạng số thập lục phân hexa, ví dụ: 0x000000 màu đen, 0xffffff: trắng , nhìn vào bảng color mixer để biết thêm Độ suốt(alpha): = 0; max=100; Độ dày (thickness): độ dày nhỏ 0, cịn lớn bao nhiu cbt ko biết Với độ dày line có độ dày pixel, cịn ta cho giá trị (hairline) có độ dày pixel Tuy nhiên chúng khác chỗ: với hairline thay đổi scale độ dày ko thay đổi Các bạn thử đoạn code sau, thay đổi giá trị độ dày nhé: CODE lineStyle(0,0x000000,100); moveTo(20,50); lineTo(200,200); _xscale=300; _yscale=300; Nhìn đoạn code ta thấy xuất lệnh: Trang 159 CODE moveTo(20,50) Để vẽ đường thẳng ta cần xác định điểm: đầu cuối Mỗi điểm lại xác đinh với giá trị x y -> moveTo điểm đầu, điểm đặt bút Như câu ta đặt bút x=20; y=50 > lineTo điểm tiếp đến Ta có x= 200; y=200 Như vẽ đường thẳng nối từ điểm (20,50) đến (200,200) Chú ý: bạn ko nêu điểm moveTo tự mặc định điểm (0,0) bạn vẽ thêm line với lineTo điểm đặt bút mặc định điểm cuối line trước Ví dụ để vẽ 500 đường lung tung hình ta có đoạn code đơn giản sau: CODE // set line style lineStyle(2,0x000000,100); // draw 500 lines for(var i=0;i