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

Action Script 3 – אירועים

רן בר-זיק יוני 21, 2009 9:38 pm אין תגובות

מאמר זה מלמד על אירועים ב-ActionScript 3 ועל dispatchEvent שמאפשר ליצור אירועים לפי הזמנה.

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

במאמר הקודם למדנו על 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.

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

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