Bitmap ב-ActionScript 3

במאמר הקודם למדנו איך יוצרים צורות באמצעות ה-Drawing API שיש ב-ActionScript. עכשיו הגיע הזמן ללמוד איך בדיוק אנו עובדים עם תמונות. בעוד שעד כה למדנו איך לעבוד עם גרפיקה ווקטורית, לפעמים יש צורך לעבוד עם תמונות – רקע שהגרפיקאי עיצב למשל או תמונה שאי אפשר ליצור באופן ווקטורי.

על מנת לעבוד עם תמונה – bitmap יש לייבא אותה. בעוד בפלקס יש אפשרות לעשות את זה בסקריפט עצמו.בפלאש, שזו התוכנה שאנו עובדים איתה, יש צורך לייבא את התמונה דרך הממשק. איך עושים את זה? ב-CS3 שעושים זאת כך: פותחים את ה-fla שבו אנו ניצור את האובייקטים שלנו, לוחצים על file ואז על import ואחרי כן לבחור ב-import to library. בוחרים את התמונה שרוצים להעלות. לוחצים Ctrl+L על מנת לראות את כל הקבצים שיש 'בספריה', לוחצים על התמונה שלנו עם הכפתור הימני ואז לוחצים על Linkage. מסמנים את Export for ActionScript ואז בוחרים את שם ה-class. זהו בעצם ה-bitmapData – האובייקט שמכיל את המידע הבסיסי של התמונה שלנו.

אחרי שעשינו את זה, ה-class שבחרנו הוא אובייקט כמו כל אובייקט אחר. השם הרשמי שלו נקרא bitmapData ואנו יכולים ליצור אותו. אחרי כן אנו יכולים ליישם אותו באמצעות אובייקט שנקרא Bitmap שמקבל כפרמטר את האובייקט שלנו.

הכי טוב עם דוגמא, לקחתי את התמונה שלי וייבאתי אותה לספריה. השם שלה הוא myPic. בדוגמא הבאה יצרתי את אובייקט myPic, העברתי אותו דרך אובייקט Bitmap ואז הצמדתי את Bitmap ל-stage:

כך נראה bitmapImage.as

package {
	import flash.display.*;

	public class bitmapImage {
		private var m_pic:myPic = new myPic(0, 0);
		private var myStage;

		public function bitmapImage(myStage) 
		{
			this.myStage = myStage;
			var square:Bitmap = new Bitmap(m_pic);
			myStage.addChild(square);
		}
	}
}

וכך נראה ה-fla (שאליו גם ייבאתי את התמונה)

var m_bitmapImage:bitmapImage  = new bitmapImage(stage);

כך זה נראה במציאות, פלאש שיש בו תמונה שלי במימדיה המקוריים של התמונה:

מדובר באובייקט גרפי כמו כל אובייקט גרפי אחר, אני יכול להוסיף לו פילטרים, לשנות את מיקומו ואת הרוחב והגובה שלו ועוד שלל אפשרויות אחרות. בדיוק כמו שעשינו עם האלמנטים הגרפיים האחרים. אפשר גם לעשות לו אנימציה אם ממש רוצים.

אחד מהשימושים היותר חשובים הוא להשתמש ב-bitmapData שלי על מנת למלא צורות ואלמנטים אחרים. השימוש הוא מאד פשוט, אנו יוצרים צורה כלשהי אך במקום להשתמש ב-beginFill, אנו משתמשים במתודת beginBitmapFill של האובייקט הגרפי. המתודה הזו כמו השאר נמצאת בדוקומנטציה של ActionScript 3 תחת האובייקט graphics.

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

נחזור לעניין. כך אנחנו עושים את זה, אני יוצר sprite פשוט שנקרא SimpleSprite, יוצר בתוכו מרובע ומשתמש במתודת beginBitmapFill. לא העברתי שום פרמטרים ל-constructor של beginBitmapFill, אבל אתם יכולים להעביר פרמטרים שלמש ימנעו מהרקע לחזור על עצמו כמו בדוגמא:

package {
	import flash.display.*;

	public class bitmapImage {
		private var m_pic:myPic = new myPic(0, 0);
		private var m_simpleSprite:Sprite = new Sprite();
		private var myStage;

		public function bitmapImage(myStage) 
		{
			this.myStage = myStage;
			
			this.m_simpleSprite.graphics.beginBitmapFill(m_pic);
			this.m_simpleSprite.graphics.drawRect(100, 100, 400, 400);
			this.m_simpleSprite.graphics.endFill();

			myStage.addChild(m_simpleSprite);
		}
	}
}

וככה זה נראה:

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

במאמר הבא נדון בשדות טקסט ב-ActionScript 3.