Tính tương tác giữa JavaScript và Flash
Hôm nay rảnh rổi, ngồi viết một bài về tính tương tác giữa JavaScript và Flash cho mọi người cùng chiêm nghiệm. I. Tạo Flash Trước hết, chúng ta tạo file flash cần cho demo. 1. Tạo file flash đơn giản. a. Tạo file FLA – Bạn mở Flash IDE. Vào File/New để tạo mới file FLA – ...
Trước hết, chúng ta tạo file flash cần cho demo.
1. Tạo file flash đơn giản.
a. Tạo file FLA
– Bạn mở Flash IDE. Vào File/New để tạo mới file FLA
– Bạn chọn tiếp Flash File (ActionScript 3.0)
– Kế tiếp, bạn vào File/Save để lưu file vừa tạo xong.
– Bạn lưu với tên bạn thích.
b. Tạo file ActionScript
– Vào File/New để tạo mới file ActionScript
– Bạn chọn ActionScript File
– Sau đó bạn lưu file lại. Nhớ lưu cùng tên và cùng thư mục với file FLA của bạn
c. Viết một ít code:
– Bạn mở file ActionScript và gõ vào đoạn mã sau. Nhớ đổi tên class trùng với tên file ActionScript của bạn.
package
{
import flash.display.*;
import flash.text.*;
import flash.external.ExternalInterface;
import flash.events.*;
public class TuongtacJS extends Sprite
{
private var txt:TextField;
public function TuongtacJS():void
{
txt = new TextField();
txt.awidth = 300;
txt.text = "Xin chào bà con.";
addChild(txt);
}
}
}
– Bạn mở file FLA và thêm tên class vào
– Bạn vào Control/Test Movie hoặc bấm tổ hợp phím Ctrl + Enter để build.
d. Kết quả
Cuối cùng bạn có 1 Flash đơn giản với câu “Xin chào bà con”.
2. Viết ít code cho tạo tính tương tác giữa với JavaScript
– Bạn mở file ActionScript và gõ vào đoạn mã sau. Nhớ đổi tên class trùng với tên file ActionScript của bạn.
package
{
import flash.display.*;
import flash.text.*;
import flash.external.ExternalInterface;
import flash.events.*;
public class TuongtacJS extends Sprite
{
private var txt:TextField;
public function TuongtacJS():void
{
txt = new TextField();
txt.awidth = 300;
txt.text = "Xin chào bà con.";
btn = new SimpleButton();
btn.upState = drawButtonState(0xDAD8F3);
btn.overState = drawButtonState(0x4F42C6);
btn.downState = drawButtonState(0xDDF2FF);
btn.hitTestState = drawButtonState(0xDDF2FF);
btn.useHandCursor = true;
btn.addEventListener(MouseEvent.CLICK, btnClicked);
addChild(txt);
addChild(btn);
ExternalInterface.addCallback("goiTuJavaScript", goiTuJavaScript);
}
private function goiTuJavaScript():void
{
txt.text = "JavaScript gửi lời chào đến ActionScript";
}
private function btnClicked(evt:MouseEvent):void
{
ExternalInterface.call("goiTuActionScript", "ActionScript gửi lời chào đến JavaScript");
}
private function drawButtonState(rgb:uint):Sprite
{
var sprite:Sprite = new Sprite();
sprite.graphics.lineStyle(4,0x33621E,1);
sprite.graphics.beginFill(rgb);
sprite.graphics.drawRoundRect(((this.stage.stageWidth/2)-(numButtonWidth/2)),((this.stage.stageHeight/2)-(numButtonHeight/2)), numButtonWidth,numButtonHeight,10,10);
return sprite;
}
}
}
Ở đoạn mã trên, có 2 câu lệnh quan trọng nhất, đó là:
– Lệnh ExternalInterface.addCallback(“goiTuJavaScript”, goiTuJavaScript): lệnh này dành cho JavaScript gọi vào ActionScript. Chuỗi “goiTu JavaScript” (tham số thứ 1), được JavaScript sử dụng như là hàm. Ví dụ: var a; a.goiTuJavaScript();. Còn tham số thứ 2 là hàm ActionScript dùng để xử lý lời gọi từ JavaScript. Như ở trên, bạn thấy có hàm goiTuJavaScript().
– Lệnh ExternalInterface.call(“goiTuActionScript”, “ActionScript gửi lời chào đến JavaScript”): lệnh này dành cho ActionScript gọi ra JavaScript. Chuỗi “goiTuActionScript” là tên hàm của JavaScript mà ActionScript sẽ gọi. Chuỗi “ActionScript gửi lời chào đến JavaScript” là tham số của hàm “goiTuActionScript”.
Ngoài ra đoạn mã trên còn tạo thêm một cái nút và sự kiện cho nút đó xử lý khi người dùng click lên. Khi người dùng click lên nút sẽ gọi ra JavaScript.
II. Tạo HTML
Chúng ta đã có trong tay file swf có khả năng tương tác với JavaScript. Bây giờ chúng ta chuẩn bị file html có chứa mã JavaScript tương tác được với ActionScript.
Bạn tạo một file html chứa mã HTML + JavaScript dưới đây.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tuong tac Flash va JavaScript</title></head>
<script type="text/javascript">
function GetFlashObject(movieName)
{
if (window.document[movieName])
{
return window.document[movieName];
}
if (navigator.appName.indexOf("Microsoft Internet")==-1)
{
if (document.embeds && document.embeds[movieName])
return document.embeds[movieName];
}
else
{
return document.getElementById(movieName);
}
}
function btnClicked(){
var flashObj = GetFlashObject("myFlash");
flashObj.goiTuJavaScript();
}
function goiTuActionScript(msg)
{
alert(msg);
}
</script>
<body>
<object id="myFlash" height="400" awidth="550" align="absmiddle" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param value="sameDomain" name="allowScriptAccess"/>
<param value="false" name="allowFullScreen"/>
<param value="TuongtacJS.swf" name="movie"/>
<param value="high" name="quality"/>
<param value="transparent" name="wmode"/>
<embed name="myFlash" height="400" awidth="550" align="bottom" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="sameDomain" wmode="transparent" quality="high" src="TuongtacJS.swf"/>
</object>
<br />
<input type="button" value="Gọi từ ActionScript từ JavaScript" id="btn" onclick="btnClicked()" />
</body>
</html>
Đoạn mã có 3 hàm JavaScript là đáng chú ý:
– Hàm GetFlashObject: hàm này trả về đối tượng là file Flash của chúng ta vừa tạo
– Hàm btnClicked: được gọi khi nút được người dùng click. Khi nút được click JavaScript sẽ gọi ActionScript
– Hàm goiTuActionScript: hàm này được gọi khi nút trong Flash được click.
III. Test kết quả cuối cùng
Bây giờ thử chúng ta test thử thành quả cuối cùng.
Bạn download source code để tham khảo tại đây . Happy Coding 
