(NB) 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) - Phần 2 cung cấp cho người học những kiến thức về: ActionScript và JavaScript, dùng XML với Flash, sử dụng component, điều khiển âm thanh với ActionScript. Mời các bạn cùng tham khảo.
1 Giới thiệu Nếu bạn quen sử dụng JavaScript bạn vui biết JavaScript liên lạc với ActionScript Tuy nhiên, cách không hoạt động tốt tất loại trình duyệt Việc liên lạc xây dựng công nghệ Một công nghệ LiveConnect xây dựng phiên trình duyệt Netscape trước phiên 6.0 Công nghệ thứ hai ActiveX dùng để liên lạc Flash Internet Explorer Nhưng bạn thiết kế cho người dùng sử dụng trình duyệt Windows cách tốt Gởi thông điệp đến JavaScript Gởi thông điệp từ ActionScript đến JavaScript cần viết code ActionScript thay đổi nội dung trang HTML bạn Nếu bạn tạo file Flash cách chọn FSCommand Publish settings, bạn tạo file HTML sửa chữa đầy đủ để nhận thông điệp Công việc bạn thay chỗ đánh dấu Your code here phần JavaScript bạn Để hiểu rõ cách làm việc mổ xẻ file html mà Flash tạo Đầu tiên, ý đến thẻ OBJECT/EMBED, có số phần để chấp nhận liên lạc Tham số ID thẻ OBJECT giống với tham số NAME thẻ EMBED Hai tham số đặt tên cho movie trang web để JavaScript gọi Ngồi cịn có tham số khác thẻ EMBED, tham số swLiveConnect phép phiên bạn Netscape trước phiên 6.0 liên lạc với Flash cơng nghệ LiveConnect CODE Trang 110 Trước đoạn code thẻ OBJECT/EMBED có đoạn script Phần hàm JavaScript với tên movie ID thẻ OBJECT nối tiếp với _DoFSCommand Như ví dụ tên hàm flashmovie_DoFSCommand Trong hàm truyền liệu lại cho movie Không may Netscape Internet Explorer nhìn nhận movie khác Internet Explorer nhìn movie với tên truyền vào tham số ID (flashmovie), cịn Netscape nhìn movie với tên document.flashmovie Hãy xem đoạn code xem nhé: CODE function flashmovie_DoFSCommand(command, args) { if (navigator.appName.indexOf("Microsoft") != -1) { var flashmovieObj = flashmovie; } else { var flashmovieObj = document.flashmovie; } alert(command); alert(args); } Trong Internet Explorer, Flash không liên lạc với JavaScript mà cịn liện lạc với VBScript Đoạn code viết JavaScript thay cho đoạn JavaScript trên: CODE if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && navigator.userAgent.indexOf("Windows") != -1 && navigator.userAgent.indexOf("Windows 3.1") == -1) { document.write(' \n'); document.write('on error resume next \n'); document.write('Sub flashmovie_FSCommand(ByVal command, ByVal args)\n'); document.write('call flashmovie_DoFSCommand(command, args)\n'); document.write('end sub\n'); document.write(' \n'); } Trang 111 Vậy phần ActionScript phải Xin trả lời cần dịng mà thơi CODE fscommand ("alert", "This is alert 1."); Nhận thông điệp từ JavaScript Nhận thơng điệp từ JavaScript dễ Nhưng bạn phải nhớ đặt tham số ID thẻ OBJECT tham số NAME thẻ EMBED, nhớ đặt giống tên Và nhớ đặt swLiveConnect=true thẻ EMBED Bây sẵn sàng để truyền thông điệp từ JavaScript cho movie Hãy xem ví dụ nhé, ví dụ sử dụng hàm gotoFrame để di chuyển movie sang frame thứ hai CODE Chắc đến bạn tự hỏi di chuyển sang frame thứ hai mà lại sử dụng gotoFrame(1), không nào? Bởi hệ đếm số (zero-based) Vì vậy, frame 0, frame 1, frame 2… Có 24 câu lệnh Flash movie Tuy nhiên khơng cần phải dành nhiều thời gian để tìm hiểu nói cách liên lạc hoạt động tốt tất loại trình duyệt Bạn sử dụng hàm GetVariable SetVariable để điều khiển biến timeline movie Câu lệnh Zoom dùng để kéo dãn movie Hai hàm isPlaying percentLoaded dùng để kiểm tra movie hoạt động Play dùng để play movie ngừng Trang 112 Luyện tập: Mở window Có lẽ yêu cầu thường gặp người sử dụng Flash Bạn làm điều cách sử dụng hàm getURL JavaScript Tuy nhiên, sử dụng JavaScript có nhiều đặc điểm hay hơn, bạn đặt lại thuộc tính window Nào, làm thử nhé: - Tạo movie - Đặt vào movie button - Chèn đoạn code sau cho button vừa tạo CODE on (release) { fscommand ("newwindow", "content.html"); } - Trong phần Publish Settings, chọn để publish file HTML với Flash movie Trong phần HTML, nhớ chọn vào mục Flash with FSCommand Publish movie bạn - Mở file HTML mà Flash vừa tạo trình soạn thảo được, NotePad chẳng hạn Hãy tìm phần để chèn JavaScript, chèn đoạn code sau vào: CODE if (command == "newwindow") { window.open(args,"","width=320,height=240,location=no,toolbar=no, menubar=no"); } - Tạo thêm file HTML đơn giản đặt tên content.html Trang 113 - Mở file HTML bạn trình duyệt nhớ trình duyệt phải hỗ trợ JavaScript nha Khi nhấn vào button cửa sổ xuất hiện, khơng có toolbar, kích thước 320x240 - Vậy cịn trình duyệt khơng hỗ trợ JavaScript sao? Đơn giản thơi, sử dụng getURL Điều quan trọng cần phải cho Flash biết lúc sử dụng Flash, lúc sử dụng JavaScript Quay trở lại file HTML mà Flash tạo, chèn đoạn code JavaScript sau vào cuối đoạn code ta chèn vào lúc trước CODE function initComm() { window.document.newWindowMovie.SetVariable("jsCommOK","OK"); } Đ oạn code thử đặt giá trị cho biến jsCommOK OK Nếu trình duyệt có hỗ trợ JavaScript jsCommOK mang giá trị OK cịn khơng biến jsCommOK undefined - Để chạy hàm initComm bạn sửa lại phần BODY trang HTML sau: CODE Đ iều có nghĩa hàm initComm gọi sau trang load xong - Bây quay trở lại file Flash bạn, sửa đoạn script button thành: CODE on (release) { if (jsCommOK == "OK") { fscommand ("newwindow", "content.html"); } else { getURL ("content.html", "_blank"); } Trang 114 } Luyện tập: Tạo SlideShow đƣợc điều khiển JavaScript Trong phần này, làm file Flash khơng có ActionScript mà điều khiển JavaScript - Tạo movie Flash với frame nhiều Nội dung frame khơng quan trọng, bạn muốn để đựơc lời khuyên frame nên khác để theo dõi thay đổi - Đặt câu lệnh stop() vào frame - Publish file HTML - Mở file HTML trình soạn thảo văn - Truyền tham số ID thẻ OBJECT NAME thẻ EMBED, hai mang giá trị slideshow - Nhớ đặt swLiveConnect=true thẻ EMBED - Tạo button file HTML đoạn code sau: CODE - Mỗi button gọi hàm Cả hai hàm sử dụng TcurrentFame(“/”)biết frame thứ mấy, sử dụng gotoFrame để di chuyển tới lui CODE Trang 115 function nextFrame() { var frameNum = window.document.slideshow.TCurrentFrame("/"); window.document.slideshow.GotoFrame(frameNum+1); } function prevFrame() { var frameNum = window.document.slideshow.TCurrentFrame("/"); window.document.slideshow.GotoFrame(frameNum-1); } Công việc bạn cịn nhớ khơng: CHẠY THỬ Gởi thông tin cho máy chủ Cho đến tận bây giờ, movie làm hầu hết chạy (stand alone) Có nghĩa chạy máy khách (client-side) khơng có liên lạc với máy chủ (Server) Nên nhớ Flash gởi trả thơng tin cho Server giống form HTML Vậy thứ 18 này, tìm hiểu vấn đề Trong phần học: - Tìm hiểu đối tượng LoadVars - Tạo chương trình server-side đơn giản - Sử dụng Flash để gởi liệu cho Server Đối tƣợng LoadVars Đối tượng LoadVars bao gồm tập hợp câu lệnh biến đặc biệt để gởi liệu cho Server giống post form HTML Chúng ta tạo đối tượng giống tạo đối tượng khác Lấy liệu Dưới ví dụ Thay sử dụng new Object() new LoadVars Sau đối tượng LoadVars tạo CODE myVars = new LoadVars(); Trang 116 Với đối tượng LoadVars, làm việc, gởi lấy liệu Để lấy liệu, sử dụng câu lệnh load Cái cần đường dẫn đến nơi chứa liệu: CODE myVars.load("myURL.txt"); Ví dụ hoạt động giống câu lệnh LoadVariables thứ 10 Tuy nhiên, câu lệnh LoadVariables lấy thay liệu level với câu lệnh mà Hãy tưởng tượng, có file chứa liệu sau: CODE name=George&ID=47 Gởi liệu Với đối tượng LoadVars, gởi liệu lên Server Trước hết, đưa liệu vào đối tượng LoadVars, sau sử dụng câu lệnh send để gởi liệu CODE myVars = new LoadVars(); myVars.name = "George"; myVars.ID = 47; myVars.send("serverprogram.cgi", "_self"); Đoạn code tạo đối tượng LoadVars tên myVars, đưa hai thuộc tính vào đối tượng myVars Sau đó, gởi liệu lên Server, xác đến chương trình CGI tên echo.cgi Câu lệnh send hoạt động tương tự form HTML _self Target, thay giá trị khác biết Nhưng câu lệnh sendAndLoad Câu lệnh ghép câu lệnh send load Có nghĩa đối tượng LoadVars gởi liệu lên Server, sau lấy giá trị trả CODE mySendVars = new LoadVars(); myLoadVars = new LoadVars(); mySendVars.name = "George"; mySendVars.ID = 47; mySendVars.sendAndLoad("serverprogram.cgi", myLoadVars); Trang 117 Trạng thái lấy liệu Hãy nhớ câu lệnh send load khơng lấy liệu tức Có thể phải đợi thời gian ngắn dài Vì vậy, có nhu cầu theo dõi trạng thái lấy liệu Chúng ta sử dụng liệu sau câu lệnh load sendAndLoad, mà cần phải kiểm tra xem lấy liệu xong chưa Cách đơn giản dùng movie clip lặp lặp lại để kiểm tra Cũng sử dụng getBytesLoaded getBytesTotal với liệu lớn Dưới ví dụ để kiểm tra việc lấy liệu: CODE myLoadVars.onLoad = function(success) { if (success) { gotoAndStop("load done"); } else { gotoAndStop("load problem"); } } Như đoạn code đối số success nhận hai giá trị true false biết việc nhận liệu xong hay chưa Trang 118 Bài Dùng XML với Flash Càng ngày XML trở nên thông dụng ứng dụng tin học, Flash, phần học điều sau: • XML • Đối tượng XML Flash • Phân tích xử lý XML theo phuơng pháo đệ quy (recursive) XML Căn XML đơn giản văn để chứa liệu XML tương tự HTML, dùng thẻ Tuy nhiên, XML khác HTML thẻ HTML ấn định trước cho chức khác nhau, cịn XML khơng Với XML, bạn tự tạo cho thẻ theo ý bạn để phù hợp cho mục đích riêng bạn Có thể tạo XML file với trình biên tập văn (như Notepad, Textpad ) đơn giản software chuyên để viết XML (XMLSpy, Epic ) Với Flash MX, bạn dễ dàng truy cập liệu trữ XML, đối tượng XML Flash tự động phân tích văn XML Trong VNFX có nhiều viết XML (ví dụ giới thiệu XML FlashLee) bạn tham khảo thêm 1.1 Đối tƣợng XML Đối tượng XML Flash gồm có nhiều hàm vằ đặc tính dùng để giúp bạn lấy phân tích kiện XML file cách dễ dàng Bước dùng đối tượng XML tạo phiên XML trước: CODE myXML = new XML() Trang 119 } 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 Đểngồ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 hoàn toàn movie sẵn sàng frame Trang 156 Movie file nằm sẵn sàng browser cache user Bây đến đoạ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 lại tiếp tục load Nếu người dùng có kết nối mạng tốt nghe toà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 q 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 Ngồ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, 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