ActionScript 3 Drawing API

במאמר הקודם למדנו על פילטרים ו-Masking ב-ActionScript 3. במאמר הזה אנו נלמד כיצד ליצור ציורים של ממש. למדנו כבר כיצד יוצרים באמצעות תכונת graphics ריבועים ועיגולים באממצעות אובייקט sprite. עד כה, השתמשנו בכל הדוגמאות שלנו באובייקט sprite – סוג של אובייקט שבו ציירנו ריבועים וצורות אחרות וביצענו בו שאר מניפולציות. אך ישנן עוד כמה סוגי אובייקטים ב-AS3 שכדאי להכיר וכל אחד מהם משמש אותנו לצרכים אחרים:

shape – לצרכים גרפיים.

sprite – לכל מה שקשור ב-user interface.

MovieClip – לכל אנימציה (כולל וידאו ואודיו) שמושפעת מ-Frame rate.

עד כה השתמשנו ב-sprite, עכשיו כדאי שנשתמש ב-shape על מנת לצייר את הקווים שלנו. ראשית, ניצור shape דוגמא שאינו שונה באופן מהותי מה-sprite שאנו מכירים:

package {
	import flash.display.*;

	public class drawing {
		
		private var m_shape:Shape = new Shape();
		private var myStage;

		public function drawing(myStage) 
		{
			this.myStage = myStage;
			myStage.addChild(m_shape);
		}
	}
}

את ה-class הזה נשמור בשם drawing.as ואותו ניצור באמצעות fla שמכיל שורה אחת:

var m_drawing:drawing  = new drawing(stage);

לא נשכח לשמור את ה-fla באותה תיקיה שבה שמרנו את ה-drawing.as.

כרגע ה-shape שלנו הוא ריק. אנו יכולים ליצור ריבוע או עיגול עם ה-shape בדיוק כמו שעשינו את זה עם ה-sprite. אבל הפעם אנו רוצים לצייר קווים. על מנת לצייר קו, ראשית עלינו להגדיר את הקו. מה העובי שלו, מה הצבע שלו, מידת השקיפות שלו ועוד תכונות רבות. עושים זאת באמצעות מתודת lineStyle ששייכת לאובייקט graphics שבו השתמשנו על מנת ליצור את הריבוע והעיגול במאמרים הקודמים. אז ראשית, בואו ונגדיר קו אדום, ברוחב של פיקסל אחד:

package {
	import flash.display.*;

	public class drawing {
		
		private var m_shape:Shape = new Shape();
		private var myStage;

		public function drawing(myStage) 
		{
			this.myStage = myStage;
			m_shape.graphics.lineStyle(1, 0xFF0000);

			myStage.addChild(m_shape);
		}
	}
}

כמובן שאת הפרמטרים שהעברתי למתודה והפרמטרים הנוספים שאפשר להוסיף לה, מצאתי בדוקומנטציה תחת מתודת lineStyle שבאובייקט graphics. אובייקט graphics קיים בכל אלמנט: sprite, shape או movieClip.

אחרי שיצרנו את הקו, הגיע הזמן לצייר! באמצעות מתודת moveTo אנו מעבירים את העט הדמיוני שלנו לנקודה 0,0 ובאמצעות lineTo אנו גורמים לעט לצייר קו ישר עד הנקודה הרצויה. דוגמא תמיד טובה במקרה הזה:

package {
	import flash.display.*;

	public class drawing {
		
		private var m_shape:Shape = new Shape();
		private var myStage;

		public function drawing(myStage) 
		{
			this.myStage = myStage;
			m_shape.graphics.lineStyle(1, 0xFF0000);
			m_shape.graphics.moveTo(0, 0);
			m_shape.graphics.lineTo(100, 0);
			m_shape.graphics.lineTo(100, 50);
			m_shape.graphics.lineTo(0, 50);
			m_shape.graphics.lineTo(0, 0);
			myStage.addChild(m_shape);
		}
	}
}

כדאי לשים לב ש-moveTo מזיז את העט אך לא מצייר ו-lineTo מזיז את העט וגם מצייר.

ציור עקומה

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

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

package {
	import flash.display.*;

	public class drawing {
		
		private var m_shape:Shape = new Shape();
		private var myStage;

		public function drawing(myStage) 
		{
			this.myStage = myStage;
			m_shape.graphics.lineStyle(1, 0xFF0000);
			m_shape.graphics.moveTo(0, 0);
			m_shape.graphics.curveTo(50, 50,100, 0);
			m_shape.graphics.lineTo(100, 50);
			m_shape.graphics.lineTo(0, 50);
			m_shape.graphics.lineTo(0, 0);
			myStage.addChild(m_shape);
		}
	}
}

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

במאמר הבא אנו נלמד על תמונות בתוך פלאש באמצעות ActionScript 3.