אירועים ב-ActionScript 3 – המשך

אחרי שלמדנו על dispatchEvents ואירועים ב-ActionScript 3 במאמר הקודם, כדאי שנרחיב מעט על אירועים. במאמר הזה אנו ניצור square sprite ועליו נעשה את כל האירועים. ראשית, ניצור את ה squareSprite – אובייקט שיוצר sprite מרובע במקום רנדומלי, בדיוק כמו ה-sprite שדיברנו עליו במאמר הקודם. ל-sprite הזה יש מתודת changeMyColor שתופעל על ידי event (בגלל זה היא גם מקבלת פרמטר event שמועבר באופן דיפולטיבי לכל פונקציה שמופעלת כתוצאה מאירוע). המתודה משנה את הצבע לצבע אקראי כלשהו ועושה trace שמדפיס את האירוע.

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

	public class squareSprite {
		public var m_squareSprite:Sprite = new Sprite();

		public function squareSprite(myStage) {
			var myX:Number = Math.round(Math.random() * (myStage.stageWidth));
			var myY:Number = Math.round(Math.random() * (myStage.stageHeight));
			this.m_squareSprite.graphics.beginFill(0x000000);
			this.m_squareSprite.graphics.drawRect(myX, myY, 50, 50);
			this.m_squareSprite.graphics.endFill();
			myStage.addChild(m_squareSprite);
		}
		public function changeMyColor(ev:Event) 
		{
			trace("color change!" + ev);
			var myColor:ColorTransform = this.m_squareSprite.transform.colorTransform;
			myColor.color = Math.random() * 0xFFFFFF;;
			this.m_squareSprite.transform.colorTransform = myColor;
		}
	}
}

יצירת האובייקט הזה ב-fla פשוטה מאד:

var m_squareSprite:squareSprite  = new squareSprite(stage);

עכשיו בואו וניצור מאזינים לאירועים. נוסיף addEventListener לכל אירוע של העכבר. בעוד שבמאמר הקודם השתמשנו במחרוזת טקסט כגון "click" הפעם אנו נשתמש בקבועים – במקום "click" נשתמש ב-MouseEvent.CLICK.

הוספת המאזין תהיה פשוטה ביותר, רק להוסיף את השורה הזו:

			this.m_squareSprite.addEventListener(MouseEvent.CLICK, changeMyColor);

וכך נראה הקוד עם המאזין שלנו:

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

	public class squareSprite {
		public var m_squareSprite:Sprite = new Sprite();

		public function squareSprite(myStage) {
			var myX:Number = Math.round(Math.random() * (myStage.stageWidth));
			var myY:Number = Math.round(Math.random() * (myStage.stageHeight));
			this.m_squareSprite.graphics.beginFill(0x000000);
			this.m_squareSprite.graphics.drawRect(myX, myY, 50, 50);
			this.m_squareSprite.graphics.endFill();
			myStage.addChild(m_squareSprite);
			this.m_squareSprite.addEventListener(MouseEvent.CLICK, changeMyColor);
			
		}
		public function changeMyColor(ev:Event) 
		{
			trace("color change!" + ev);
			var myColor:ColorTransform = this.m_squareSprite.transform.colorTransform;
			myColor.color = Math.random() * 0xFFFFFF;;
			this.m_squareSprite.transform.colorTransform = myColor;
		}
	}
}

וככה זה נראה במציאות, הפעילו את ה-Flash Tracer שלכם ושימו לב לאירוע שמודפס ולכל הפרמטרים שלו. הפרמטרים האלו נותנים לנו מידע נוסף על האירוע – כמו למשל אם בעת הלחיצה מקשי ה-ctrl ה-shift או ה-alt היו מופעלים.

להלן סוגי האירועים שיש:

MouseEvent.CLICK – קליק, האירוע שאותו הדגמנו.

DOUBLE_CLICK – הקלקה כפולה.

MOUSE_DOWN – כאשר מקש העכבר נלחץ (תחילת הקליק).

MOUSE_UP -כאשר אנו משחררים את מקש העכבר (סוף הקליק).

MOUSE_LEAVE – כאשר העכבר זז מחוץ לבמה.

MOUSE_MOVE -כאשר העכבר זז.

MOUSE_OUT – כאשר העכבר זז אל מחוץ לאובייקט.

MOUSE_OVER – כאשר העכבר זז אל מעל האובייקט.

MOUSE_WHEEL – כאשר גלגל העכבר מופעל (ואז האירוע מעביר דלתא עבור מיקום וכיוון הגלילה).

אירועי מקלדת

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

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

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

	public class squareSprite {
		public var m_squareSprite:Sprite = new Sprite();

		public function squareSprite(myStage) {
			var myX:Number = Math.round(Math.random() * (myStage.stageWidth));
			var myY:Number = Math.round(Math.random() * (myStage.stageHeight));
			this.m_squareSprite.graphics.beginFill(0x000000);
			this.m_squareSprite.graphics.drawRect(myX, myY, 50, 50);
			this.m_squareSprite.graphics.endFill();
			myStage.addChild(m_squareSprite);
			myStage.addEventListener(KeyboardEvent.KEY_DOWN, changeMyColor);
			
		}
		public function changeMyColor(ev:Event) 
		{
			trace("color change!" + ev);
			var myColor:ColorTransform = this.m_squareSprite.transform.colorTransform;
			myColor.color = Math.random() * 0xFFFFFF;;
			this.m_squareSprite.transform.colorTransform = myColor;
		}
	}
}

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

עד כאן בנוגע לאירועים. במאמר הבא אנו נלמד על אנימציה וטרנספורמציה של צורות ב-ActionScript 3.