אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » לימוד Action Script 3 ו-פלאש » External Interface ב-ActionScript 3

External Interface ב-ActionScript 3

רן בר-זיק אוגוסט 8, 2009 7:47 am אין תגובות

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

המאמר הקודם במדריך ה-AS3External Data עם ActionScript 3
המאמר הבא במדריך ה-AS3אכסון מידע מקומי באמצעות ShareObjects
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

במאמר הקודם למדנו איך ליצור תקשורת בין שרת אינטרנט לבין פלאש באמצעות 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 – דרך לשמור מידע לשימושים עתידיים בפלאש הזה או בפלאשים אחרים.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
קרנה של פלאש ירדה בשנים האחרונות, אבל כאן תוכלו ללמוד AS3 או לשפר את הידע שלכם בשפה זו.
המדריך ללימוד Action Scrip 3
ActionScript 3
ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד