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

המאמר הקודם במדריך ה-AS3
המאמר הבא במדריך ה-AS3

אחרי שלמדנו על 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);
<strong>			this.m_squareSprite.addEventListener(MouseEvent.CLICK, changeMyColor);</strong>
			
		}
		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);
<strong>			myStage.addEventListener(KeyboardEvent.KEY_DOWN, changeMyColor);
</strong>			
		}
		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.

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (אין הצבעות)

תגיות: פורסם בקטגוריה: לימוד Action Script 3 ו-פלאש

אל תשארו מאחור! יש עוד מה ללמוד!

הצטרפו לעדכונים!

העדכונים נשלחים אך ורק כאשר האתר מתעדכן.

רן בר-זיק

רן בר-זיק כותב כל המאמרים באינטרנט ישראל, מפתח אינטרנט מנוסה במגוון שפות ופלטפורמות.
ניתן ליצור איתי קשר באמצעות:
כתובת המייל שלי: info@internet-israel.com.
פרופיל הלינקדאין שלי
הטוויטר שלי
פרופיל הפייסבוק שלי
אני תמיד שמח לייעץ ולעזור, אך בשל עומס הפניות הרב, אני לא תמיד מצליח לענות במהירות.