Action Script 3 – אירועים

במאמר הקודם למדנו על ActionScript 3 – shapes. עכשיו אנחנו נלמד על אירועים.

אירועים פשוטים

כמעט לכל אובייקט ב-ActionScript 3 יש אירועים ספציפיים להם. דווקא ל-shapes אין ממש אירועים ולפיכך אנו משתמשים באובייקטים ייחודיים ל-ActionScript 3 בשם sprites. מדובר באובייקטים רב תכליתיים שיכולים להכיל צורה גרפית. גם הם עובדים עם graphic. בואו וניצור לנו spriteCircle משלנו עם graphic. ראשית נכין לנו spriteCircle.as. ניצור בו package ו-constructor שבו אנו יוצרים את הגרפיקה בדיוק כמו ב-shape במאמר הקודם:

package
{
	import flash.display.Sprite;
	import flash.events.*;
	public class circleSprite
	{
		//defining a new variable that will be the circle
		public var m_circleSprite:Sprite = new Sprite();
		
		public function circleSprite(myStage)
		{
			this.m_circleSprite.graphics.beginFill(0x000000);
			this.m_circleSprite.graphics.drawCircle(270, 200, 50);
			this.m_circleSprite.graphics.endFill();
			myStage.addChild(m_circleSprite);
		}
	}
}

שימו לב לכמה דברים חשובים, ראשית אני מבצע import ל-flash.display.Sprite. מאיפה אני יודע למי לעשות import? זה כתוב בדוקומנטציה של ActionScript 3 שאנו עובדים איתה תמיד באופן צמוד.
שנית, אני מעביר ב-constructor אובייקט שנקרא myStage שהוא בעצם הבמה שלנו שאותה אני מעביר באת מימוש האובייקט שלי. ואם כבר מדברים, בואו ונממש אותו ב-fla שנכין ונשמור באותה תיקיה עם ה-as שלנו.
הנה הקוד של המימוש, אין פה יותר מדי.

var m_circleSprite:circleSprite  = new circleSprite(this);

ואם אתם ממש מסוקרנים, ככה זה נראה:

על מנת להצמיד אירוע כלשהו. אנחנו משתמשים ב-addEventListener. כל נושא ה-events הוא דומה הרבה יותר לפריימוורק מכל דבר אחר שיש ב-ActionScript. אנו יכולים להצמיד את addEventListener לחלק גדול מהמימושים ובמיוחד ל-Sprite. ה-addEventListener מקבל פרמטרים שונים בהתאם לאובייקט שאליו הוא מוצמד. הסינטקס שלו מאד פשוט. ראשית אנו מצמידים אליו אירוע. מהיכן אנו יודעים איזה אירוע מתאים לכל אובייקט? פשוט מאד! הדוקומנטציה!בואו ונביט בערך sprite ונראה שיש רשימה ארוכה ומכובדת של אירועים שאחד מהם הוא click שאותו ממש אין צורך להסביר. אחרי שבחרנו אירוע, אנחנו צריכים לבחור פונקציה, או שנכתוב אותה או שנפעיל פונקציה אחרת בעזרתה. בדוגמא הבאה בכל קליק מופעל trace.

package
{
	import flash.display.Sprite;
	import flash.events.*;
	public class circleSprite
	{
		//defining a new variable that will be the circle
		public var m_circleSprite:Sprite = new Sprite();
		
		public function circleSprite(myStage)
		{
			this.m_circleSprite.graphics.beginFill(0x000000);
			this.m_circleSprite.graphics.drawCircle(270, 200, 50);
			this.m_circleSprite.graphics.endFill();
			this.m_circleSprite.addEventListener("click", function(){trace("Hello!")});
			myStage.addChild(m_circleSprite);
		}
	}
}

שימו לב שביצעתי import ל-events וכן לפונקצית ה-addEventListener ולשני הפרמטרים שלה. הראשון האירוע שמצאתי בדוקומנטציה של sprite ואת השני פשוט כתבתי. המימוש של האובייקט ב-fla לא השתנה כמובן. ככה זה נראה:

הפעילו את ה-flash tracer שלכם על מנת לראות את ה-trace!

כמובן שאפשר לעשות דברים הרבה יותר מעניינים מ-trace כמו למשל לשנות את הצבע של ה-sprite שלנו או להזיז את מיקומו.

eventDispatcher

eventDispatcher הוא חלק חשוב ומהותי בכל נושא האירועים. הוא מאפשר לנו ליצור אירועים מותאמים אישית. במקום קליק או תנועה של העכבר, אנחנו יכולים ליצור אירועים שלנו. כך למשל אם יש לי אובייקט אז אני יכול ליצור אירוע שמתרחש רק אם האובייקט משנה צורה, צבע או תכונה אחרת כלשהי. על מנת להדגים אני אצור circleSprite שמשנה את מיקומו רנדומלית. בתוכו ניצור buttonSprite שיש לו אירוע לחיצה. אירוע הלחיצה ישגר אירוע אחר לגמרי שהחלטתי לקרוא לו colorChange האירוע הזה ישנה את הצבע. ראשית, ניצור את אובייקט buttonSprite. בסך הכל sprite פשוט מאד שיש לו אירוע לחיצה שמריץ פקודה מסוימת:

package
{
	import flash.display.Sprite;
	import flash.events.*;
	public class buttonSprite extends EventDispatcher
	{
		public var m_buttonSprite:Sprite = new Sprite();
		public function buttonSprite(myStage) 
		{
			this.m_buttonSprite.graphics.beginFill(0x46B04D);
			this.m_buttonSprite.graphics.drawCircle(100, 100, 20);
			this.m_buttonSprite.graphics.endFill();
			myStage.addChild(m_buttonSprite);
			this.m_buttonSprite.addEventListener("click", activateMe);
		}
		public function activateMe(ev:Event)
		{
			dispatchEvent(new Event("colorChange"));
		}
	}
}

מה שמעניין פה הוא שתי שורות: ראשית, יש לנו את extends EventDispatcher שהוא בגדר חובה בכל אובייקט שמייצר dispatchEvent. שנית, יש לנו את מתודת dispatchEvent. היא די פשוטה, אני קורא למתודה ובתוכה מייצר אירוע חדש ומעביר לתוכו את שם האירוע שלי.

עכשיו ניצור את ה-circleSprite. יש בו כמה דברים מעניינים, ראשית אני מממש בתוכו את אובייקט buttonSprite ושנית, אני יוצר את ה-eventListener. ה-eventListener מוצמד לאובייקט שמייצר את ה-dispatchEvent.

package {
	import flash.display.Sprite;
	import flash.events.*;
	import flash.geom.*;

	public class circleSprite {
		public var m_circleSprite:Sprite = new Sprite();
		private var _buttonSprite:buttonSprite;

		public function circleSprite(myStage) {
			this._buttonSprite = new buttonSprite(myStage);
			var myX:Number = Math.round(Math.random() * (myStage.stageWidth));
			var myY:Number = Math.round(Math.random() * (myStage.stageHeight));
			this.m_circleSprite.graphics.beginFill(0x000000);
			this.m_circleSprite.graphics.drawCircle(myX, myY, 50);
			this.m_circleSprite.graphics.endFill();
			myStage.addChild(m_circleSprite);
			_buttonSprite.addEventListener("colorChange", changeMyColor);
		}
		public function changeMyColor(ev:Event) 
		{
			trace("color change!");
			var myColor:ColorTransform = this.m_circleSprite.transform.colorTransform;
			myColor.color = 0xE42222;
			this.m_circleSprite.transform.colorTransform = myColor;
		}
	}
}

אובייקט ה-sprite עצמו אמור להיות פשוט להבנה – ראשית אני יוצר אותו בדיוק כמו שיצרתי את קודמו רק שה-x וה-y שלו הם רנדומליים. שנית, יש לי מתודת שינוי צבע שאין צורך להתעכב עליה. מה שמעניין הוא ה-eventListener וההצמדה שלו למימוש של אובייקט שבו יש את ה-dispatcher.

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

1. לזכור לעשות extend ל-EventDispatcher
2. יש לממש את האובייקט שמבצע את ה-dispatch בתוך האובייקט המאזין
3. יש להצמיד את addEventListener לאובייקט שמבצע את ה-dispatch

אחרי הכל, נותר לנו רק לממש את אובייקט circleSprite ב-fla עצמו.

var m_circleSprite:circleSprite  = new circleSprite(stage);

וכך זה נראה:

במאמר הבא נמשיך וללמוד על אירועים ב-ActionScript 3.