Action Script 3: מבוא

פלאש, נרצה או לא נרצה, הפכה להיות הפלטפורמה המובילה לפיתוח תוכנות רשת בלתי תלויות בדפדפן. למרות שטכנולוגיות כמו Silverlight או JavaFX מאיימות עליה וה-HTML 5 עם אלמנט ה-canvas שלו מציב בפניה אתגרים בעתיד. עדיין פלאש היא אחת הדרכים הפופולריות להציג תוכן אינטראקטיבי ברשת.

באופן מפתיע משהו, עדיין בישראל משתמשים ב-Action Script 2 לתכנות פלאשי. לפיכך החלטתי ליצור סדרת מאמרים שתתלכד למדריך אחד על Action Script 3.

אין צורך לדעת Action Script 2 על מנת להתחיל במדריך הזה. אך אני מניח שלקוראים יש ידע בשפת תכנות מבוססת אובייקטים כלשהי (כגון JavaScript או PHP). כיוון שאני אכן משתמש פה במונחים כמו 'אובייקט', 'מתודה' ו'תכונה' שהן בסיסיות בשפות כאלו. מצד שני, אני מבטיח לא להשתמש יותר מדי במונחי OOP ואם מדי פעם יצא לי 'פולימורפיזם' אני מבטיח להסביר.

סביבת פיתוח

ישנן כמה סביבות פיתוח ל-AS3. ללימוד ראשוני אפשר בהחלט להתחיל עם flash CS4 שניתן להוריד גרסת נסיון שלה ל-30 יום. לאחר השתפשפות קלה אפשר לעבור לסביבת פיתוח יותר נורמלית כמו Eclipse עם flex plugin. אבל בהתחלה Flash CS4 יספיק וההסברים יהיו על התוכנה הזו.

כתיבת המחרוזת הראשונה ב-AS3

ראשית נפתח את Adobe Flash CS4 ונבחר file -> new -> Flash File (ActionScript 3.0) ייפתח לנו קובץ. אנו נתעלם מקו הזמן וכל שאר קשקושי ה-GUI ונלחץ על F9 על מנת להגיע אל המקום שבו כותבים את ה-AS3.

אנו צריכים להגדיר משתנה ואחרי כן נדפיס אותו. להדפסה בפלאש אנו משתמשים בפונקצית trace שמדפיסה ללוג מסוים שאותו מראה לנו תוכנת הפלאש. נכתוב את הקוד הבא ואז נקמפל ונצפה באמצעות ctrl+Enter הפלט אמור להיות מוצג בחלון שנקרא output.

var myString:String = "Hello, World!";
trace ("The String is" + myString);

ישנם כמה סוגים של משתנים. String הוא אחד מהם ומשמש… להצגת טקסטים. הסוגים האחרים הם:

• Number
• Boolean
• Void, Null, Undefined
• מערכים [באמצעות, סוגריים מרובעות]
• אובייקטים {סוגריים:true, מסולסלות: true}

אם ננסה להכניס מספר לתוך משתנה שהגדרנו אותו כ-string יהיה לנו compile error. במידה ואנחנו לא יודעים איזה מידע יהיה במשתנה שלנו, אפשר להשתמש ב-*

var myString:*= "Hello, World!";
trace ("The String is" + myString);

אופרטורים, משפטי תנאי ולולאות

האופרטורים ומשפטי התנאי זהים למעשה ל-JavaScript. אין הרבה מה להוסיף על זה וחבל להשחית מילים על דברים שכולם אמורים להכיר. (אני מזכיר שתנאי הסף למדריך היא הכרות טובה עם שפת תכנות אחת לפחות). אני כן אתעכב על פונקצית each שמשמשת לאיטרציה באובייקט. יש לנו שתי דרכים לבצע איטרציה באובייקט. הראשונה היא שימוש ב-for שמחזירה לנו גם את ה-key וגם את ה-value. השניה היא באמצעות for each שמחזירה לנו רק את ה-value.

foreach

בניתי אובייקט בשם human. אם אני רוצה לעבור על כל תכונותיו, שימוש כמעט אינטואטיבי ב-each יסייע לנו. ראשית אני רושם את for each ואז בתוך הסוגריים אני כותב את שם ה-value שישמש אותי באיטרציה (במקרה הזה אלמנט) ומגדיר אותו בתור מה שבא לי (במקרה הזה אובייקט) אחר כך in ואת שם האובייקט האמיתי שלי. בתוך הסוגריים המסולסלות אני אשתמש בפונקציית trace (הדפסה ללוג, זוכרים?) על מנת לראות מהו האובייקט.

var human:Object = new Object;
human.ears = 2;
human.eyes = 2;
human.sex = "male";
for each (var element:Object in human)
{
	trace(element);
}

שימוש בלולאת for

לולאת for בלבד (ללא each) מאפשרת לנו לצפות גם ב-key ולא ב-value. השימוש כמעט זהה ל for each רק שהפרמטר הראשון הוא ה-key שלנו ועל מנת לגשת ל-value בתוך הלולאה אנו משתמשים בסינטקס של מערך. נשמע מסובך? פשוט תסתכלו על הדוגמא:

var human:Object = new Object;
human.ears = 2;
human.eyes = 2;
human.sex = "male";
for (var key:Object in human)
{
	trace(key + " : " + human[key]);
}

אובייקטים ו-class

השימוש ב-class הוא חשוב מאד בכל מה שנוגע ל-OOP. כל מי שפיתח מערכת אחת בחייו יודע שמערכת ללא class ואובייקטים מסודרים היא קשה מאד לתפעול. כל התכנות ב-AS3 נעשה עם classים.

לשם הדוגמא נבנה אובייקט שכל תפקידו בחיים הוא לעשות trace כדי לומר לנו שהוא קיים. ראשית, ניצור קובץ as. קובץ as הוא קובץ לא בינארי אלא קובץ טקסט רגיל. אנו נשתדל להשתמש כמה שיותר בקבצי as ונשתמש ב-fla רק לבצע הידור. נלך ל-file->new->ActionScript File ובתוך עורך הטקסט ניצור את ה-class המאד מאד פשוט שלנו. כל מה שיש בו זה constructor.

package //Mandatory package
{
	public class exampleClass
	{
		public function exampleClass() //Constructor
		{
		trace('Hello World');
		}
	}
}

חובה לשמור את הקובץ בתיקיה כלשהי על המחשב המקומי. שימו לב שחובה שה-class יהיה מוקף ב-package. כרגע נקבל את העובדה הזו AS-IS ובמאמרים מאוחרים יותר אסביר עליה. ללא package אין class.

אחרי שיצרנו ושמרנו את ה-class שלנו, עלינו ליצור instance שלו על מנת שנוכל להשתמש בו. נפתח קובץ fla חדש ונשמור אותו באותו המיקום שבו אנו שמרנו את קובץ ה-as שלנו. על מנת לבצע instance אנו צריכים לבצע import לקובץ ה-as. הסינטקס של ה-import הוא פשוט ביותר – import ואז את שם הקובץ ללא ה-as. ביצוע ה-instance הוא גם פשוט למדי. אנו יוצרים משתנה כאשר הסוג שלו הוא הסוג של ה-class שלנו.

import exampleClass; //Name of the ActionScrip file. 
var myObject:exampleClass = new exampleClass();

זה היה class פשוט, אפשר לצורך העניין ליצור class קצת יותר מעניין. בוא וניצור class בשם human. ה-constructor שלו יגדיר לו שם ומתודה נוספת תבדוק אם יש לו פה ואם כן, אז היא תגרום לו 'לדבר'.

ראשית, כמו בכל class, אנו יוצרים קובץ as, שומרים אותו, כותבים package (מנדטורי), כותבים את שם ה-class שבמקרה שלי הוא humanClass. אחרי כן צריך להגדיר תכונות (properties). ב-AS3 יש הכמסה ולפיכך צריך וכדאי להגדיר private, public או protected. שימו לב שבניגוד ל-AS2. פה ה-private הוא באמת private. אחרי כן אני גם אצור פונקציה שבודקת אם יש פה ויוצרת את הדיבור. ככה נראה הקוד:

package //Mandatory package
{
	public class humanClass
	{
		//Properties
		private var eyes:Number = 2;
		private var mouth:Number = 1;
		private var sex:String = "male";
		public var nameOfHuman:String;
	
		public function humanClass(nameOfHuman) //Constructor
		{
			this.nameOfHuman = nameOfHuman;
			trace(this.nameOfHuman);
		}
		public function talk() // Talk method
		{
			if(this.mouth) //Checking to see if the human have mouth
			{
				trace("Blah Blah Blah"); //"Speak"
			}
		}
	}
}

ממש לא מסובך: ההגדרה של ה-class היא כרגיל, רק הוספתי תכונות שונות ל-class. רובן פרטיות (פה, עיניים, מין) ואחת, השם, היא פומבית ומי שמגדיר אותה הוא ה-constructor שלנו. אחרי כן, יש לנו מתודה פומבית של דיבור.

עכשיו ניצור קובץ fla ובו נממש את ה-humanClass שלנו ונגרום לו לדבר:

import humanClass; //Name of the ActionScrip file. 

var mosheHuman:humanClass = new humanClass("Moshe");
mosheHuman.talk();

המימוש פה הוא פשוט מאד. שימו לב שחייבים לשמור את ה-fla באותו מיקום של ה-humanClass.as אחרת ה-import לא יעבוד.

בחלקו השני של המבוא ל-ActionScript 3 אנו nמשיכים לעסוק ב-AS3 class ונדבר גם על הורשה, interface ועוד דברים מעניינים שיש ל-AS3 Class להציע לנו. אחרי זה – ת'כלס. אני מבטיח.