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

External Data עם ActionScript 3

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

במאמר זה אנו לומדים כיצד לשלוח ולקבל נתונים משרת באמצעות פלאש ו-ActionScript

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

במאמר הקודם למדנו על טפסים וכפתורים ב-ActionScript 3 ובפעם האחרונה נותרנו עם סקריפט שמדפיס את המידע. עכשיו נשאלת השאלה איך לשלוח את המידע הזה?

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


package 
{
	import flash.text.*;
	import flash.display.*;
	import flash.events.*;
	import flash.net.*

	public class myTextField {
		private var myStage;
		private var m_myTextField:TextField = new TextField();
		
		public function myTextField(myStage) 
		{
			/*Creating textFormat Object */
			this.m_myTextField.type = "input";
			this.m_myTextField.border = true;
			this.m_myTextField.borderColor = 0x0000FF;
			this.m_myTextField.restrict = "A-Z";
			this.m_myTextField.x = 10;
			this.m_myTextField.maxChars = 11;
			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, getTheText)
			
			btnOne.x = 200;
			btnOne.y = 200;
			
			/* adding the textfield and the button */
			myStage.addChild(m_myTextField);
			myStage.addChild(btnOne);
		}
		function getTheText(ev:Event)
		{
				var myText = this.m_myTextField.text;
				//HERE WILL BE OUR DATA SENDING
		}
	}
}

על מנת לתרגל את התקשורת בצד השרת אני אשתמש ב-PHP די סטנדרטי שמה שהוא עושה זה לקבל אותיות באנגלית (בלבד, הוא לא יקבל משהו אחר) באמצעות GET או POST ולהפוך את סדר האותיות. הדף עצמו נמצא ב:
https://internet-israel.com/internet_files/ajax_example/ajax.php
והנה הקוד המאד מאד פשוט שלו:


< ?php
if(ctype_alpha($_REQUEST['myName']))
{
	$string =$_REQUEST['myName'];
	$result = strrev($string);
	print $result;
}
else
{
	die;
}
?>


ראשית, נתמקד בשליחת מידע פשוטה get/post ומעבר לדף שאליו אנחנו שולחים את המידע. בדיוק כמו שכל טופס HTML פשוט שבפשוטים מתנהג.

על מנת ליצור את התקשורת הזו אנו נשתמש בספרית flash.net (ולא נשכח לעשות import flash.net.*). בספריה הזו יש אובייקט שנקרא URLRequest שדרכו אנו מבצעים את התקשורת. אנו ניצור אותו, נעביר בתוכו אובייקט של הכתובת שאנו רוצים להשתמש בה ואז נמלא שתי תכונות שלו – הראשונה אם אנו רוצים לשלוח את המידע בצורת GET או POST והשניה היא המידע שאנו שולחים. לבסוף נשתמש ב-navigateToURL על מנת לעבור לעמוד החדש.

נשמע מסובך? אני תמיד מראה את הדוגמא:



package 
{
	import flash.text.*;
	import flash.display.*;
	import flash.events.*;
	import flash.net.*

	public class myTextField {
		private var myStage;
		private var m_myTextField:TextField = new TextField();
		
		public function myTextField(myStage) 
		{
			/*Creating textFormat Object */
			this.m_myTextField.type = "input";
			this.m_myTextField.border = true;
			this.m_myTextField.borderColor = 0x0000FF;
			this.m_myTextField.restrict = "A-Z";
			this.m_myTextField.x = 10;
			this.m_myTextField.maxChars = 11;
			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, getTheText)
			
			btnOne.x = 200;
			btnOne.y = 200;
			
			/* adding the textfield and the button */
			myStage.addChild(m_myTextField);
			myStage.addChild(btnOne);
		}
		function getTheText(ev:Event)
		{
				var myText = this.m_myTextField.text;
				
				var request:URLRequest = new URLRequest("https://internet-israel.com/internet_files/ajax_example/ajax.php");
				request.method = "GET";
				request.data = "myName="+myText;
				flash.net.navigateToURL(request);

		}
	}
}


וכך זה נראה בעולם האמיתי, שימו לב להכניס רק אותיות גדולות בטופס:

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

זה מאד מאד פשוט בפלאש. אנחנו עושים את זה באמצעות אובייקט URLLoader שבדומה ל-AJAX הוא זה שמנהל את התקשורת בינינו לבין השרת.

אנחנו מכינים את ה-request בדיוק כמו בדוגמא הקודמת, רק אנו משמיטים את השורה של flash.net.navigateToURL(request) כיוון שאנחנו לא שולחים את המשתמש לשום דף. במקום זה אנו יוצרים את URLLoader ושמים לו מאזינים לאירוע של PROGRESS (כל עוד התקשורת נמשכת, היא יכולה להמשך לא מעט זמן במקרה שאנו מושכים קובץ גדול) ולאירוע של COMPLETE (התקשורת נגמרה) כאשר התקשורת נגמרת, יש לנו את הפלט ואנו יכולים להדפיס אותו או לעשות איתו מה שבא לנו.

שימו לב לדוגמא הבאה, הדגשתי את החלקים שהוספתי:


package {
	import flash.text.*;
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;

	public class myTextField {
		private var myStage;
		private var m_myTextField:TextField = new TextField();
		private var loader:URLLoader;

		public function myTextField(myStage) {
			/*Creating textFormat Object */
			this.m_myTextField.type = "input";
			this.m_myTextField.border = true;
			this.m_myTextField.borderColor = 0x0000FF;
			this.m_myTextField.restrict = "A-Z";
			this.m_myTextField.x = 10;
			this.m_myTextField.maxChars = 11;
			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, getTheText);
			btnOne.x = 200;
			btnOne.y = 200;

			/* adding the textfield and the button */
			myStage.addChild(m_myTextField);
			myStage.addChild(btnOne);
		}
		function getTheText(ev:Event) {
			var myText = this.m_myTextField.text;

			var request:URLRequest = new URLRequest("https://internet-israel.com/internet_files/ajax_example/ajax.php");
			request.method = "GET";
			request.data = "myName="+myText;
			loader = new URLLoader(request);
			loader.addEventListener(Event.COMPLETE, completeListener);
			loader.addEventListener(ProgressEvent.PROGRESS, progressListener);
		}
		private function completeListener(event:Event):void {
			trace("Finished loading. Here is the data: " + loader.data);
		}
		private function progressListener(event:Event):void {
			trace(" we're in progress, we've loaded " + loader.bytesLoaded +" out of " + loader.bytesTotal + " bytes ");
		}
	}
}

וכך זה נראה בעולם האמיתי, הפעילו את ה-Flash Tracer שלכם על מנת לצפות בפלט!

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

דרך יותר פשוטה היא להשתמש באובייקט URLVariables. מה שנעשה זה ליצור את האובייקט ולהכניס לתוכו כתכונות את הערכים שלנו. הנה דוגמא קטנה:


package {
	import flash.text.*;
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;

	public class myTextField {
		private var myStage;
		private var m_myTextField:TextField = new TextField();
		private var loader:URLLoader;

		public function myTextField(myStage) {
			/*Creating textFormat Object */
			this.m_myTextField.type = "input";
			this.m_myTextField.border = true;
			this.m_myTextField.borderColor = 0x0000FF;
			this.m_myTextField.restrict = "A-Z";
			this.m_myTextField.x = 10;
			this.m_myTextField.maxChars = 11;
			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, getTheText);
			btnOne.x = 200;
			btnOne.y = 200;

			/* adding the textfield and the button */
			myStage.addChild(m_myTextField);
			myStage.addChild(btnOne);
		}
		function getTheText(ev:Event) {
			var myText = this.m_myTextField.text;

			var request:URLRequest = new URLRequest("https://internet-israel.com/internet_files/ajax_example/ajax.php");
			request.method = "GET";
			var variables:URLVariables = new URLVariables();
			variables.myName = myText;
			request.data = variables;
			loader = new URLLoader(request);
			loader.addEventListener(Event.COMPLETE, completeListener);
			loader.addEventListener(ProgressEvent.PROGRESS, progressListener);
		}
		private function completeListener(event:Event):void {
			trace("Finished loading. Here is the data: " + loader.data);
		}
		private function progressListener(event:Event):void {
			trace(" we're in progress, we've loaded " + loader.bytesLoaded +" out of " + loader.bytesTotal + " bytes ");
		}
	}
}

הדגשתי את החלק החשוב, רק ליצור את האובייקט ולהכניס לתוכו מידע כאשר תכונה זה ה-key שלנו והמידע שיש בתכונה הוא ה-value – כך ש variables.myName = myText; כש-variables הוא האובייקט שלנו.

במאמר הבא אנו נלמד על externalInterface ואיך הוא יכול לעזור לנו בתקשורת של פלאש עם JavaScript שנמצא באותו דף שבו ה-JavaScript נמצא.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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