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

ActionScript 3 Drawing API

רן בר-זיק אוגוסט 2, 2009 12:54 am אין תגובות

במאמר נלמד כיצד מציירים צורה בפלאש באמצעות AS3.

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

במאמר הקודם למדנו על פילטרים ו-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.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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