תכנות בסיסי AS3 - אירועים ומאזינים

[assafsahar]

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

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

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

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

1.לייבא את ספריית האירועים. לדוגמא:

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using actionscript3 Syntax Highlighting

import flash.events.*;

Parsed in 0.029 seconds, using GeSHi 1.0.8.4

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

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using actionscript3 Syntax Highlighting

stage.addEventListener(MouseEvent.MOUSE_MOVE,MouseMoveListener);

Parsed in 0.028 seconds, using GeSHi 1.0.8.4

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

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

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

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

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

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using actionscript3 Syntax Highlighting

import flash.events.*;


stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener);


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

Parsed in 0.030 seconds, using GeSHi 1.0.8.4

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

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

את קובץ המקור ניתן להוריד מהשרת של קודאקטיב:http://www.codactive.com/blog/listeners/FishSwimmingAfterMousePointer.zip