אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » לימוד Action Script 3 ו-פלאש » Action Script 3 – צורות

Action Script 3 – צורות

רן בר-זיק יוני 8, 2009 9:10 pm אין תגובות

במדריך זה נלמד איך יוצרים shapes ומציירים גרפיקה ווקטורית עם ActionScript 3.

המאמר הקודם במדריך ה-AS3ActionScript 3: מבוא חלק ב
המאמר הבא במדריך ה-AS3Action Script 3 – אירועים
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

חשוב לי מאד להדגיש משהו. בכל הדוגמאות שאני אשתמש בהן מעכשיו אני קורא לקוד שלי מתוך אובייקט ומנסה להשתמש בכמה שיותר גישה של OOP. וזאת מכמה סיבות:

  1. AS3 היא OOPית וכל הפקודות שלה ממומשות דרך אובייקטים. מטרת המדריך היא ללמוד AS3 בצורה מקיפה וטובה ולפיכך עבודה באמצעות אובייקטים מקילה יותר על החיים.
  2. אי אפשר לפתח אפליקציות בעידן המודרני ללא עבודה עם OOP.
  3. 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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
קרנה של פלאש ירדה בשנים האחרונות, אבל כאן תוכלו ללמוד AS3 או לשפר את הידע שלכם בשפה זו.
המדריך ללימוד Action Scrip 3
ActionScript 3
ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד