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

Bitmap ב-ActionScript 3

רן בר-זיק אוגוסט 4, 2009 6:11 pm אין תגובות

המאמר מלמד כיצד לשלב תמונות (gif, png, jpeg) בתוך פלאש ולהשתמש בהן כרקע לאובייקטים

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

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

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

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