External Interface ב-ActionScript 3

כיצד לבצע תקשורת בין JavaScript לפלאש באמצעות ActionScript 3

במאמר הקודם למדנו איך ליצור תקשורת בין שרת אינטרנט לבין פלאש באמצעות ActionScript 3 – תקשורת Client Side ו-ServerSide. הפעם אנו נלמד איך לעשות תקשורת בין JavaScript שנמצא באותו עמוד שבו הפלאש נמצא. יש אינספור שימושים לתקשורת בין רכיבי JavaScript לפלאש.

על מנת לאפשר תקשורת בצורה הטובה ביותר, יש להציב את הפלאש באמצעות swfobjects – קוד ג'אווסקריפט קטן שחוסך לנו המון בעיות של תזמון, כמו פלאש שנטען לפני הג'אווסקריפט והפוך. איך משתמשים ב- swfobjects? פשוט מאד! מורידים את swfobjects מ-Google Codes, מציבים אותו ובוחרים div או אלמנט אחר ואז משתמשים בפקודה הבאה:


swfobject.embedSWF("YOURFILE.swf", "YOUR ID", "WIDTH", "HEIGHT", "9.0.0");

כש-YOUR ID הוא ה-ID של ה-div שיכיל את קובץ הפלאש.

הפעלת פונקציות מפלאש ל-JavaScript

מצד הפלאש:

הדוגמא שלנו תהיה אותו כפתור שעבדנו איתו במאמרים הקודמים שמפעיל פונקציה שנקראת activateJS. בפונקציה הזו תהיה קריאה לפונקצית giveMeAlert.

מצד הג'אווהסקריפט:

נדאג להציב את הפלאש באמצעות swfobjects. נדאג שתהיה פונקצית giveMeAlert שתקפיץ לנו alert.

בואו ונתחיל עם ה-HTML והג'אווהסקריפט:

כל מה שעלי לעשות זה למקם את קובץ ה-swf שלי (במקרה הזה בחרתי שהשם שלו יהיה JSflash.swf) עם swfobjects וכמובן ליצור פונקצית giveMeAlert שתקפיץ לי הודעת alert ברגע שהיא מופעלת.


<!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>
    <title>תקשורת מפלאש לג'אווהסקריפט</title>

</head>
<body>

<div id="myFlash"></div>

<script src="swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
    swfobject.embedSWF("JSflash.swf", "myFlash", "300", "300", "9.0.0");
    function giveMeAlert()
    {
        alert("Hello! I was activated from flash!");
    }
</script>

</body>
</html>

עכשיו נדאג ל-ActionScript. יצרתי קובץ ActionScript בשם myJS.as ושמתי לו את הקוד של הכפתור, הכפתור מפעיל פונקציה בשם activateJS שבתוכה יש שורה אחת בלבד, זו שמפעילה את פונקצית ה-JavaScript. השורה היא: ExternalInterface.call("giveMeAlert"); כש-giveMeAlert היא שם הפונקציה שאני רוצה להפעיל. ככה זה נראה:


package {
	import flash.display.*;
	import flash.events.*;
	import flash.external.*;

	public class myJS {
		private var myStage;

		public function myJS(myStage) {
			this.myStage = myStage;
			/* the over state will be red, this will show when the user hovers over the button */
			var overSprite:Sprite = new Sprite();
			overSprite.graphics.beginFill(0xff0000, 1);
			overSprite.graphics.drawRect(0, 0, 100, 100);
			overSprite.graphics.endFill();
			/* the up state will be green, this will show when the user is not interacting with the button */
			var upSprite:Sprite = new Sprite();
			upSprite.graphics.beginFill(0x00ff00, 1);
			upSprite.graphics.drawRect(0, 0, 100, 100);
			upSprite.graphics.endFill();
			/* this is the down state sprite which will show when the user clicks on the  button */
			var downSprite:Sprite = new Sprite();
			downSprite.graphics.beginFill(0x000000, 1);
			downSprite.graphics.drawRect(0, 0, 100, 100);
			downSprite.graphics.endFill();
			/* now we just pass the sprites into the SimpleButton so that it has all of its
			states immediately, the last parameter describes the hitTestState, that is, the
			area that can be moused over or clicked on */
			var btnOne:SimpleButton = new SimpleButton(upSprite, overSprite, downSprite, overSprite);
			btnOne.addEventListener(MouseEvent.CLICK, activateJS);
			btnOne.x = 200;
			btnOne.y = 200;
			/* adding the textfield and the button */
			myStage.addChild(btnOne);
		}
		private function activateJS(ev:Event) 
		{
			ExternalInterface.call("giveMeAlert");
		}
	}
}

את ה-ActionScript הזה אני שומר כקובץ myJS.as ואז מכין את קובץ ה-fla שלי שהוא קובץ מאד מאד פשוט, בדיוק כפי שלמדנו בכל מאמר ומאמר במאמרים הקודמים:


var m_myJS:myJS  = new myJS(stage);

ועל מנת לצפות בדוגמא חיה – לחצו כאן.

הפעלת פונקציות מ-JavaScript לפלאש

מצד הפלאש:

אנו ניצור פלאש פשוט שיש בו רק מתודה אחת, המתודה הזו יוצרת אובייקט טקסט שיש בו טקסט מסוים, בדיוק כמו שלמדנו במאמר להכנסת טקסטים בפלאש באמצעות ActionScript 3. מה שעוד יש זו שורה אחת פשוטה שקובעת שני דברים – פונקצית ה-JavaScript שתפעיל את פונקצית הפלאש ופונקצית הפלאש. השורה נראית כך: ExternalInterface.addCallback("NAME OF FUNCTION", THE_FLASH_FUNCTION);

מצד הג'אווהסקריפט

חוץ מהטמעת הפלאש על ידי swfobjects, אנחנו צריכים ליצור קישור ולתת לו onclick שיפעיל פונקציה. הפונקציה תפעיל את הפלאש באופן הבא: YOUR_SWF_ID_NAME.NAME_OF_FUNCTION();

כך נראה ה-HTML שלי:


<!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>
    <title>תקשורת מפלאש לג'אווהסקריפט</title>

</head>
<body>
<a href="javascript:void(0);" onclick="callFlash();">Activate Flash</a>


<div id="myFlash"></div>

<script src="swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
    swfobject.embedSWF("JSflash2.swf", "myFlash", "300", "300", "9.0.0");
    function callFlash()
    {
        myFlash.activeFlashFunction();
    }
</script>

</body> 
</html>

וכך נראה ה-ActionScript שלי:


package {
	import flash.events.*;
	import flash.external.*;
	import flash.text.*;

	public class myJS {
		private var myStage;

		public function myJS(myStage) 
		{
		this.myStage = myStage;
		ExternalInterface.addCallback("activeFlashFunction", fromJS);
		}
		public function fromJS()
		{
			var m_myTextField:TextField = new TextField();
			m_myTextField.text = "הפעילו אותי";
			this.myStage.addChild(m_myTextField);
		}
	}
}

ועל מנת לצפות בדוגמא חיה – לחצו כאן.

אם אנו רוצים להעביר מידע ולא רק להפעיל פונקציות, אין דבר קל מזה, פשוט לקבוע שהפונקציה תחזיר מידע והיא תחזיר אותו לתוך משתנה כלשהו.

במאמר הבא אנו עוברים על SharedObject – דרך לשמור מידע לשימושים עתידיים בפלאש הזה או בפלאשים אחרים.