Tip Cepat: Cara Berkomunikasi Antara Flash dan JavaScript

() translation by (you can also view the original English article)

Di Tip Cepat ini, kita akan melihat cara menggunakan kelas ExternalInterface. Ini memungkinkan kita untuk menulis AS3 yang dapat menjalankan kode JavaScript, dan sebaliknya. Itu berarti Anda dapat menggunakan Flash untuk mengubah bagian-bagian dari halaman web dimana ia berjalan!

Langkah 1: Siapkan Dokumen Flash

Buat dokumen Flash ActionScript 3 baru. Ubah ukuran panggung menjadi 600x300. Dengan alat persegi panjang, gambar persegi panjang yang merupakan ukuran panggung. Beri warna #CCCCCC. Juga, beri stroke hitam 2px.

Langkah 2: Siapkan UI Flash

Berikut tata letaknya yang akan kita kerjakan:

Buka Components Panel (Window > Components) dan, dari folder User Interface, seret komponen ColorPicker ke atas panggung. Berikan nama instance 'cp'.

Selanjutnya buat field teks dinamis yang disebut 'resizeText'; tempatkan dan ukur sesuka Anda (Anda tidak bisa melihat yang ada di gambar saya; itu kosong, dan di kanan atas panggung.)

Sekarang, buat field teks dinamis lainnya. Berikan nama instance 'jsText'. Kemudian buat simbol tombol dan berikan nama instance 'prompt'. Setelah itu, buat tombol lain dan berikan nama instance 'change'.

Akhirnya, buat dua field masukan teks. Tempatkan satu di sebelah tombol 'prompt' Anda, dan beri nama 'promptText'. Ambil field teks kedua, pindahkan di sebelah tombol 'change' dan beri nama 'changeText'.

Juga, tambahkan label apa pun yang Anda inginkan; lihat gambar saya untuk melihat bagaimana saya mengaturnya.

Langkah 3: Siapkan UI HTML

Agar ExternalInterface bekerja, dokumen harus berada di internet. Pertama, buat file teks baru, dan simpan sebagai 'externalInterface.html'. Selanjutnya, buka editor teks dan tambahkan semua kode di bawah ini. Simpan file HTML.

<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>externalInterface</title>
<style type="text/css">

body {
  font-family:Arial;
}

#asSend {
	padding-top:20px;
	font-size:12px;
}
#htmlWrap {
	margin-top:10px;
	width:578px;
	padding-left:20px;
	border-width:1px;
	border-style:solid;
}
#sender {
	margin-top:10px;
}
#textChange {
	font-size:13px;
	font-weight:bold;
	padding-top:10px;
	padding-bottom:20px;
}

</style>
</head>
<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="600" height="300" id="externalInterface" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="allowFullScreen" value="false" />
  <param name="movie" value="externalInterface.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="externalInterface.swf" quality="high" bgcolor="#ffffff" width="600" height="300" name="externalInterface" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<div id="htmlWrap">
<div id="asSend">
  <label for="textArea">Send to actionscript:</label><br />
  <textarea cols="50" rows="4" id="textArea" name="textArea"></textarea>
  <br />
  <button id="sender" name="sender">Send</button>
</div>
<div id="textChange">Use Actionscript to change me!</div>
</div>
</body>
</html>

Area utamanya adalah:

Bagian <object>, yang menyematkan SWF yang akan Anda buat dari file Flash.
<div> dan <textarea>, yang memiliki properti id sehingga kita dapat mengaksesnya dari SWF.

HTML Anda akan muncul seperti di bawah ini:

Ketika kode telah diganti, unggah file ke server web Anda, sehingga kita bisa memulai dengan ActionScript.

Langkah 4: Siapkan Kelas Document

Buat kelas dokumen untuk file Flash Anda; sebut saja Main.as. Jika Anda tidak akrab dengan kelas dokumen, baca Tip Cepat ini.

package
{
	import flash.display.MovieClip;
	public class Main extends MovieClip {
		public function Main() {
			
		}
	}
}

Langkah 5: Memanggil Fungsi JavaScript dari Flash

Hal pertama yang akan kita lakukan dengan ExternalInterface adalah memanggil fungsi JavaScript yang akan mengubah warna latar belakang halaman web kita. Jadi, lampirkan listener event ke komponen ColorPicker kita. Ketika warnanya berubah, ia akan mengirim nilai hex ke fungsi javascript yang disebut receiveColor():

package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	import flash.external.ExternalInterface;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
		}
		
		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);	//calls receiveColor(event.target.hexValue) in the javascript
		}
	}
}

Sekarang kita harus menulis fungsi receiveColor() ini. Di head dokumen HTML kita, kita memulai javascript dengan mendefinisikan fungsi ini. Ini hanya mengambil nilai yang dikirim kepadanya dari Flash dan mengubah warna latar belakang.

<script type="text/javascript">
function receiveColor(value) {
	document.bgColor = "#" + value;
}
</script>

Letakkan itu tepat setelah di <head> file HTML Anda. Jika semuanya baik-baik saja, ketika Anda menjalankan halaman HTML di browser dan mengubah warna di ColorPicker, itu harus mengubah warna latar belakang halaman web. yang Anda tambahkan di langkah terakhir:

Langkah 6: Memanggil Fungsi ActionScript dari JavaScript

Contoh selanjutnya adalah mengirim data dari JavaScript ke Flash. Dalam dokumen HTML, tempel kode berikut dalam tag <script> yang Anda tambahkan di langkah terakhir:

window.onload = function() {
	var sender = document.getElementById("sender");		//getElementById finds an element according to its "id" property
	sender.onclick = function() {
		var ta = document.getElementById("textArea");
		document['externalInterface'].receiveText(ta.value);
		ta.value = "";
	};
};

Inilah yang terjadi: setelah dokumen dimuat, kita mendapatkan tombol 'sender' dan melampirkan listener event ke sana. Ketika tombol 'sender' diklik, itu akan memanggil fungsi receiveText() dalam Flash yang akan kita atur sekarang.

Kembali ke Flash, kita memberi tahu ExternalInterface untuk mendaftarkan fungsi ActionScript sehingga bisa dipanggil dari JavaScript. Kemudian kita mengatur fungsi receiveText():

package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	import flash.external.ExternalInterface;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
			ExternalInterface.addCallback("receiveText", receiveText);	//allows JavaScript to access the receiveText() function.
		}
		
		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);
		}
		
		//this is the new receiveText function
		public function receiveText(value:String):void {
			jsText.text = value;
		}
	}
}

(Baris baru adalah 5, 9 dan 16-19.)

Langkah 7: Memanggil Alert, Confirm dan Prompt JavaScript dari ActionScript

Kita juga dapat memanggil peringatan dengan sangat mudah dari ActionScript. Di sini kita hanya memberitahu ExternalInterface untuk memanggil 'prompt'. Kita juga bisa menggunakan ExternalInterface untuk mengirimkan parameter ke fungsi. Di sini kita memberi tahu fungsi 'prompt' untuk menanyakan nama penggunanya. Ketika pengguna kita memasukkan infonya, itu diteruskan kembali ke field teks 'promptText'.

package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	import flash.external.ExternalInterface;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
			ExternalInterface.addCallback("receiveText", receiveText);
			prompt.addEventListener(MouseEvent.CLICK, promptClick);	//makes promptClick() run when prompt button is clicked
		}
		
		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);
		}
		
		public function receiveText(value:String):void {
			jsText.text = value;
		}
		
		//function to be called when prompt button is clicked. Will ask for user's name using a JS prompt.
		public function promptClick(event:MouseEvent):void {
			promptText.text = "You said your name is: " + ExternalInterface.call("prompt", "What is your name?");
		}
	}
}

(Baris baru adalah 10 dan 21-24.)

Langkah 8: Memanggil Fungsi JavaScript Anonim

Hal lain yang bisa kita lakukan adalah menulis fungsi JavaScript kita sendiri sebagai string, kemudian memanggilnya dari ExternalInterface. Di sini kita membuat fungsi JavaScript yang menerima parameter. Kita mengambil parameter itu dan menetapkan nilainya ke atribut innerHTML dari div 'textChange' kita di dokumen HTML. Anda akan melihat bahwa tidak ada fungsi JavaScript eksternal yang dipanggil - semuanya ada dalam ActionScript.

package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	import flash.external.ExternalInterface;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
			ExternalInterface.addCallback("receiveText", receiveText);
			prompt.addEventListener(MouseEvent.CLICK, promptClick);
			change.addEventListener(MouseEvent.CLICK, changeClick);	//makes changeClick() run when change button is clicked
		}
		
		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);
		}
		
		public function receiveText(value:String):void {
			jsText.text = value;
		}
		
		public function promptClick(event:MouseEvent):void {
			promptText.text = "You said your name is: " + ExternalInterface.call("prompt", "What is your name?");
		}
		
		//changes text inside the HTML to match text field inside Flash
		public function changeClick(event:MouseEvent):void {
			ExternalInterface.call("function(param){ document.getElementById('textChange').innerHTML = param; }", changeText.text);
			changeText.text = "";
		}
	}
}

(Baris baru adalah 11 dan 26-30.)

Langkah 9: Memanggil Fungsi JavaScript dan ActionScript Anonim

Akhirnya, kita dapat memanggil fungsi anonim di kedua sisi. Dalam fungsi 'anonim', kita mendaftarkan fungsi ActionScript anonim dengan ExternalInterface. Fungsinya mengisi beberapa teks, lalu memulai pengatur waktu. Selanjutnya, kita panggil fungsi JavaScript anonim. Fungsi ini memberitahu jendela, ketika sudah diubah ukurannya, itu harus memanggil kembali fungsi ActionScript anonim kita.

package
{
	import fl.events.ColorPickerEvent;
	import flash.display.MovieClip;
	import flash.external.ExternalInterface;
	public class Main extends MovieClip {
		public function Main() {
			cp.addEventListener(ColorPickerEvent.CHANGE, colorChange);
			ExternalInterface.addCallback("receiveText", receiveText);
			prompt.addEventListener(MouseEvent.CLICK, promptClick);
			change.addEventListener(MouseEvent.CLICK, changeClick);
			
			//create a new timer with a one second tick, and add an event listener
			var timer:Timer = new Timer(1000);
			timer.addEventListener(TimerEvent.TIMER, onTimer);
			
			anonymous();   //set up the anonymous functions
		}
		
		public function colorChange(event:ColorPickerEvent):void {
			ExternalInterface.call("receiveColor", event.target.hexValue);
		}
		
		public function receiveText(value:String):void {
			jsText.text = value;
		}
		
		public function promptClick(event:MouseEvent):void {
			promptText.text = "You said your name is: " + ExternalInterface.call("prompt", "What is your name?");
		}
		
		public function changeClick(event:MouseEvent):void {
			ExternalInterface.call("function(param){ document.getElementById('textChange').innerHTML = param; }", changeText.text);
			changeText.text = "";
		}
		
		//clear the text after one second has passed
		public function onTimer(event:TimerEvent):void {
			resizeText.text = "";
			timer.stop();
		}
		
		public function anonymous():void {
			//see how we're defining a function inside another function?
			ExternalInterface.addCallback("anon", function(){
				resizeText.text = "The window has been resized.";
				timer.start();
			});
			
			//same applies here
			ExternalInterface.call("function(){ window.onresize = function(){ document['externalInterface'].anon(); }; }");
		}
	}
}

(Baris baru adalah 13-17 dan 37-52.)

Kesimpulan

ExternalInterface adalah kelas yang sangat kuat dan berguna. Dengannya, Anda dapat menerima nilai dan event, semua di luar SWF. Bersenang-senanglah dengan itu dan terima kasih telah membaca!