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

אירועי עכבר ומקלדת ב-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.

פוסטים נוספים שכדאי לקרוא

בינה מלאכותית

להריץ ממשק של open-webui על הרספברי פיי

להפעיל ממשק של צ׳אט ג׳יפיטי שאפשר לגשת אליו מכל מחשב ברשת הביתית על רספברי פיי עם מודל בשם tinydolphin שרץ על רספברי פיי.

פתרונות ומאמרים על פיתוח אינטרנט

המנעו מהעלאת source control לשרת פומבי

לא תאמינו כמה אתרים מעלים את ה-source control שלהם לשרת. ככה תמצאו אותם וגם הסבר למה זה רעיון רע.

מיקרו בקרים

חיבור מצלמה למיקרובקר

חיבור מצלמה למיקרו בקר ויצירה של מצלמת אבטחה מרחוק בעלות של 20 שקל.

פתרונות ומאמרים על פיתוח אינטרנט

יישום של nonce על מנת להגן מפני התקפות injection

בפוסט הקודם הסברתי על hash עם CSP על משאבי inline – שזה נחמד ומעולה אבל פחות ישים בעולם האמיתי שבו בדרך כלל התוכן ה-inline (בין

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