Actionscript3 ב-5 דקות - אירועים ומאזינים

כתבה זו נועדה לאילו מביניכם שמתחילים עם תכנות בפלאש, או בעלי ידע בסיסי מאד בתכנות ורוצים ללמוד יותר. שפת התכנות היא actionscript3 ואני יודע שיש אנשים שיש להם נסיון תכנותי ב-actionscript2 ומפחדים לעבור לגירסה החדשה והמתקדמת יותר. אני בעצמי הרגשתי כך עד לפני מספר חודשים. לכן אני בונה סדרה של כתבות וסרטוני הדרכה שנקראת actionscript ב-5 דקות, שמטרתה לתת לכם חלקים קטנים ובסיסיים משפת התכנות הזאת במנות קטנות. יש צורך רק בהיכרות כללית עם פלאש ורצוי גם התנסות בסיסית מאד עם תכנות.

אז נתחיל עם נושא האירועים (events) ומאזינים (listeners).
יש כמות גדולה מאד של אירועים שקורים במהלך נגינה של סרטון פלאש. למשל: כניסה לפריים (מתרחש מספר פעמים בשניה, ע"פ הגדרת פריימים לשניה FPS בסרטון), הקלקת עכבר, תזוזת עכבר.
ניתן לזהות כל אחד מהאירועים בעת התרחשותו ולהצמיד לו פעולה כלשהי.

על מנת לעשות זאת יש לבצע 3 שלבים:

1.לייבא את ספריית האירועים, זאת אם אנו כותבים את הקוד שלנו בקובץ חיצוני, מחוץ לסביבת ה-Flash. לדוגמא:

import flash.events.*;

אם כותבים בתוך סביבת Flash באחד הפריימים, אז אין צורך לייבא את הספרייה הזו.

2.להכריז לאיזה אירוע אנו מעוניינים להאזין ומהי הפעולה שתקרה כשהאירוע יתרחש. לדוגמא:

stage.addEventListener(MouseEvent.MOUSE_MOVE,MouseMoveListener);

במקרה זה stage הוא האובייקט שאליו מוסיפים את המאזין ו- MouseEvent.MOUSE_MOVE זה האירוע שמאזינים לו. לעומת זאת MouseMoveListener זאת הפונקציה שלה יקרא הפלאש מיד עם התרחשות האירוע ובתוכה תהיה פעולה כלשהי, ע"פ בחירתנו. במילים אחרות, בכל פעם שיזוז העכבר מעל הבמה, תופעל הפונקציה

MouseMoveListener.

3.לכתוב את הפעולה הנדרשת. במקרה שלנו – הפעולה תוגדר בתוך הפונקציה MouseMoveListener

הנה דוגמא פשוטה, שמיישמת את 3 השלבים:

צרו MovieClip על הבמה ותנו לו שם (instance name – בתוך חלון ה-properties).
בדוגמא המצורפת יש MovieClip עם ציור של דג.

אנחנו הולכים לגרום לדג לעקוב אחרי סמן העכבר על גבי הבמה.

צרו שכבה בשם Actions, בחרו בפריים 1 ולחצו F9 כדי לפתוח את חלון עריכת הקוד.
כתבו את הקוד הבא:

import flash.events.*;

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener);

function mouseMoveListener (event:MouseEvent):void
{
fish.x=mouseX;
fish.y=mouseY;

}

זוהי הפונקציה שפועלת בזמן האירוע (תזוזת העכבר).

אנחנו מציבים את הדג בדיוק במיקום של הסמן. קודם את ציר ה-X ואח"כ את ציר ה-Y.

שימו לב שההתייחסות ל-X ו-Y תלויה בנקודת ה-registration של ה-MovieClip. בדוגמא שלנו היא נמצאת בדיוק באף של הדג, לכן האף יהיה תמיד צמוד לסמן העכבר.

את התוצאה ניתן לראות ב-SWF המצורף.

את קובץ המקור ניתן להוריד מהשרת של קודאקטיב:

http://www.codactive.com/blog/listeners/FishSwimmingAfterMousePointer.zip