במאמר הקודם – מבוא ל-ActionScript 3 חלק ב', המשכנו את הדיון על classים ואובייקטים. עכשיו הגיע הזמן לעשות עם זה משהו. אנו נלמד עכשיו איך לעשות shape – אלמנט גרפי ויותר חשוב – כיצד להשתמש בדוקומנטציה של פלאש שהיא חשובה מאד להמשך הדרך.
חשוב לי מאד להדגיש משהו. בכל הדוגמאות שאני אשתמש בהן מעכשיו אני קורא לקוד שלי מתוך אובייקט ומנסה להשתמש בכמה שיותר גישה של OOP. וזאת מכמה סיבות:
- AS3 היא OOPית וכל הפקודות שלה ממומשות דרך אובייקטים. מטרת המדריך היא ללמוד AS3 בצורה מקיפה וטובה ולפיכך עבודה באמצעות אובייקטים מקילה יותר על החיים.
- אי אפשר לפתח אפליקציות בעידן המודרני ללא עבודה עם OOP.
- OOP זה כיף! 🙂
יכול להיות שאצל אלו מכם שמכירים OOP רק בצורה שטחית הכל יראה מוזר ונורא מתוסבך. אבל אם תתרגלו מספיק טוב, תוכלו בסופו של דבר לראות את האור.
על מנת ליצור צורות פשוטות ב-AS3 אנו צריכים להשתמש ב-class שנקרא shape. ה-class הזה, כמו classים רבים אחרים בעצם מובנים ב-AS3 ומכילים מתודות ותכונות כמו כל class אחר. אם נסתכל על הדוקומנטציה של AS3 על אובייקט shape אנחנו ממש יכולים לראות איך להפעיל אותו. חשוב מאד שכן תכנסו לקישור כיוון שאנו נעבוד עם הדוקומנטציה של AS3.
בואו וניצור fla ב-fla יהיה מימוש של אובייקט myCircle:
var myCircle:circle = new circle(this);
נשמור את ה-fla בתיקיה מסוימת. מה שמיוחד במימוש של circle הוא שאנו מעבירים this שמייצג את ה-Stage שלנו. אני אשתמש בו מאוחר יותר. אחרי כן, ניצור as ששמו הוא circle. ולפי שמו אפשר לנחש הוא יכיל את circle class שלנו. נכתוב package ונעשה ייבוא ל-class של shape שלו אנו נעשה מימוש בתוך ה-class שלנו.
package
{
import flash.display.Shape;
}
זוכרים שבתחילת המדריך דיברתי על import? זו בדיוק הכוונה. אני צריך לייבא כל class של flash שאני צריך. מאיפה אני יודע שדווקא עבור shape אני צריך לייבא את flash.display.Shape? פשוט מאד, כתוב בדוקומנטציה של shape!
אתרו את shape בדוקומנטציה של AS3 ותראו בעצמכם!
נייצר constructor ל-class circle שלי. constructor ב-AS3 נקראת בשם ה-class. נעשה גם מימוש ל-class shape. עד כאן שום דבר לא מסובך (בתנאי שקראנו את המאמרים הקודמים).
package
{
import flash.display.Shape;
public class circle
{
//defining a new variable that will be the circle
public var newCircle:Shape = new Shape();
public function circle(myStage)
{
}
}
}
שימו לב שאני מעביר בתוך ה-constructor פוינטר ל-stage. זה חשוב כי אחר כך אני אצמיד את הצורה שיצרתי ל-stage. עכשיו הגיע הזמן ליצור את הצורה עצמה. זה פשוט למדי וכל מה שאני צריך לעשות זה להסתכל על המתודות שיש בדוקומנטציה של graphic
. התכונה שבאמצעותה אנו ניגשים לכל המתודות הנהדרות של ה-Graphic Classובאמצעותו אנו יכולים לעשות שינויים. כך למשל, אם אני רוצה לעשות עיגול אדום, אני אשתמש במתודה beginFill שבאמצעותה אני מעביר את הצבע שאני רוצה. אני אשתמש במתודה drawCircle על מנת ליצור את הציור ובמתודה endfill על מנת לסיים את המילוי ולבסוף אני אשתמש במתודה נפוצה שנקראת addChild שאותה אני מתמיד ל-stage (זוכרים שהעברתי אותו ב-constructor?).
package
{
import flash.display.Shape;
public class circle
{
//defining a new variable that will be the circle
public var newCircle:Shape = new Shape();
public function circle(myStage)
{
this.newCircle.graphics.beginFill(0xFF0000);
this.newCircle.graphics.drawCircle(100,100,50);
this.newCircle.graphics.endFill();
myStage.addChild(newCircle);
}
}
}
וככה זה נראה:
ברור שאנחנו יכולים לעשות יותר, הרבה יותר – בואו נבחן את רשימת המתודות שיש ל-graphic בדוקומנטציה:
public function drawRect(x:Number, y:Number, width:Number, height:Number):void
הנה דוגמא טובה למתודה מעניינת של graphic. בדוקומנטציה נכתב שהיא משמשת לציור ריבועים. בתוכה יש את כל הפרמטרים שאנחנו יכולים להעביר בתוכה. בואו ננסה אותה עם העמוד שלנו! פשוט נחליף בינה לבין מתודת drawCircle ולא נשכח להעביר בתוכה את כל הפרמטרים.
package
{
import flash.display.Shape;
public class circle
{
//defining a new variable that will be the circle
public var newCircle:Shape = new Shape();
public function circle(myStage)
{
this.newCircle.graphics.beginFill(0xFF0000);
this.newCircle.graphics.drawRect(100, 100, 200, 50);
this.newCircle.graphics.endFill();
myStage.addChild(newCircle);
}
}
}
והנה הקובץ מרונדר:
שימו לב כמה זה פשוט כשאנו עובדים מול הדוקומנטציה. הדוקומנטציה גם מספקת דוגמאות שמהן אפשר לעשות copy&paste. כמעט בלתי אפשרי לעבוד עם ActionScript בלי הדוקומנטציה המצויינת של AS3 שפתוחה כל הזמן. יש גם גרסה לאייפוד/אייפון.
אפשר לראות מתודות רבות רבות שיש ב-graphic. אני מציע לכל קוראי המאמר להפסיק לקרוא, לעשות קצת copy&paste לקוד שמופיע פה ולהמשיך לתרגל!
במאמר הבא אנו לומדים על מערכת האירועים שיש ב-ActionScript 3