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

פילטרים ו-masking בפלאש עם Action Script 3

רן בר-זיק יולי 31, 2009 2:10 pm אין תגובות

במאמר יש הסבר כיצד ליישם פילטרים ו-Masking ב-ActionScript 3

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

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

פילטרים

יצירת דוגמא

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

שימו לב ל- import flash.filters.* שחשוב להשתמש בו אם אנחנו רוצים פילטרים.


package {
	import flash.display.Sprite;
	import flash.events.*;
	import flash.geom.*;
	import flash.utils.*;
	import flash.filters.*;

	public class filterSprite {
		public var m_filterSprite:Sprite = new Sprite();
		private var myStage;

		public function filterSprite(myStage) {
			this.m_filterSprite.graphics.beginFill(0x000000);
			this.m_filterSprite.graphics.drawRect(100, 100, 50, 50);
			this.m_filterSprite.graphics.endFill();
			this.myStage = myStage;
			myStage.addChild(m_filterSprite);
			this.m_filterSprite.addEventListener(MouseEvent.MOUSE_DOWN, filterMe);
			
		}
		public function filterMe(ev:Event) 
		{
			//HERE WILL BE OUR FILTERS
		}
	}
}

את האובייקט הזה אנו שומרים ב-filterSprite.as. את האובייקט אנו מממשים ב-fla שמכיל בסך הכל שורה אחת:


var m_filterSprite:filterSprite  = new filterSprite(stage);

לא נשכח לשמור את ה-fla וה-as באותה תיקיה ועכשיו אנו יכולים לצאת לדרך.

הוספת אפקט אחד

פילטרים הם באופן עקרוני 'אפקטים' שאנו יכולים להוסיף לאובייקטים. כמו למשל פילטר של טשטוש. או הוספת הילה בצבע מסוים לאובייקט וכו' וכו'. לכל אובייקט שהוא, כמו למשל sprite יש תכונה של filters שהיא בעצם מערך. באופן דיפולטיבי אין בה דבר, אך אנו יכולים להוסיף לה איברים שונים לפי הצורך, כמו למשל איבר של dropshadow או טשטוש.

כדי להוסיף אפקט של טשטוש, עלינו קודם ליצור אותו. יש לנו ספריה שלמה של פילטרים שאותה אנו מוצאים בדוקומנטציה של AS3 שצריכה להיות ב-bookmark של כל מי שעוסק בתחום. יש גם אפליקציה לאייפון/אייפוד שמכילה את הדוקומנטציה הזו. בצד שמאל למעלה יש את הרשימה המלאה של הספריות – components ובה יש את ספרית filters שמכילה את כל סוגי האובייקטים שהם הפילטרים שלנו. אחד מהם הוא BlurFilter. בואו ניצור ונוסיף אותו!

היצירה של BlurFilter הוא פשוט מאד ודומה לכל יצירה אחרת של אובייקט ב-Action Script 3. אחרי שיצרנו אותו, נוסיף אותו לתכונת ה-filter של ה-sprite שלנו. נשמע מסובך? ממש לא! שימו לב:


package {
	import flash.display.Sprite;
	import flash.events.*;
	import flash.geom.*;
	import flash.utils.*;
	import flash.filters.*;

	public class filterSprite {
		public var m_filterSprite:Sprite = new Sprite();
		private var myStage;

		public function filterSprite(myStage) {
			this.m_filterSprite.graphics.beginFill(0x000000);
			this.m_filterSprite.graphics.drawRect(100, 100, 50, 50);
			this.m_filterSprite.graphics.endFill();
			this.myStage = myStage;
			myStage.addChild(m_filterSprite);
			this.m_filterSprite.addEventListener(MouseEvent.MOUSE_DOWN, filterMe);
			
		}
		public function filterMe(ev:Event) 
		{
			var bfInstance:BlurFilter = new BlurFilter(10, 40); 
			this.m_filterSprite.filters = [bfInstance];
		}
	}
}

וכך זה נראה במציאות, לחצו על הכפתור על מנת להפעיל את הפילטר:

אנחנו כמובן לא חייבים להסתפק בהגדרות הדיפולטיביות. ל-BlurFilter יש כמה תכונות שאפשר לשנות, כך למשל אני יכול לגרום לטשטוש להיות פחות אגרסיבי על ידי שינוי תכונת blurX ו-blurY ל-2 במקום 4. איך אני יודע את זה? פשוט הסתכלתי על BlurFilter בדוקומנטציה ואשנה זאת ב-constructor עצמו:


package {
	import flash.display.Sprite;
	import flash.events.*;
	import flash.geom.*;
	import flash.utils.*;
	import flash.filters.*;

	public class filterSprite {
		public var m_filterSprite:Sprite = new Sprite();
		private var myStage;

		public function filterSprite(myStage) {
			this.m_filterSprite.graphics.beginFill(0x000000);
			this.m_filterSprite.graphics.drawRect(100, 100, 50, 50);
			this.m_filterSprite.graphics.endFill();
			this.myStage = myStage;
			myStage.addChild(m_filterSprite);
			this.m_filterSprite.addEventListener(MouseEvent.MOUSE_DOWN, filterMe);
			
		}
		public function filterMe(ev:Event) 
		{
			var bfInstance:BlurFilter = new BlurFilter(10, 10); 
			this.m_filterSprite.filters = [bfInstance];
		}
	}
}

וכך זה נראה במציאות:

הוספת יותר מפילטר אחד

ניתן להוסיף כמה פילטרים שרוצים, כך למשל, אני אוסיף פילטר ששמו בישראל הוא DropShadowFilter ומטרתו היא ליצור צל. איך עושים את זה? מאד פשוט – פשוט מוסיפים למערך:


package {
	import flash.display.Sprite;
	import flash.events.*;
	import flash.geom.*;
	import flash.utils.*;
	import flash.filters.*;

	public class filterSprite {
		public var m_filterSprite:Sprite = new Sprite();
		private var myStage;

		public function filterSprite(myStage) {
			this.m_filterSprite.graphics.beginFill(0x000000);
			this.m_filterSprite.graphics.drawRect(100, 100, 50, 50);
			this.m_filterSprite.graphics.endFill();
			this.myStage = myStage;
			myStage.addChild(m_filterSprite);
			this.m_filterSprite.addEventListener(MouseEvent.MOUSE_DOWN, filterMe);
			
		}
		public function filterMe(ev:Event) 
		{
			var bfInstance:BlurFilter = new BlurFilter(20, 20); 
			var dsfInstance:DropShadowFilter = new DropShadowFilter(50);
			this.m_filterSprite.filters = [dsfInstance, bfInstance];
		}
	}
}

וכך זה נראה:

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

Masking

masking היא טכניקה שבה אלמנט אחד מהווה פילטר שרק דרכו רואים את האלמנט השני. אם יש לי אלמנט גדול שהוא הממוסך ואלמנט קטן יותר שהוא הממסך, אני אראה רק מה שבגבולות האלמנט הקטן יותר. זה שימושי להמון דברים ופשטוט מאד. לצורך הדוגמא יצרתי אובייקט שנקרא circleAndRectSprite והוא יוצר עיגול כתום ענק וריבוע שחור שניתן להזזה על ידי החיצים. בסך הכל מדובר במשהו שאם עברתם על המאמרים הקודמים אתם יודעים לעשות – יצירת ריבוע והצמדתו ל-stage, יצירת עיגול והצמדתו ל-stage, יצירת מאזין לאירוע הקלדה והשפעה על x ו-y במידה והחיצים המתאימים נלחצים:


package {
	import flash.display.Sprite;
	import flash.events.*;
	import flash.geom.*;
	import flash.utils.*;
	import flash.filters.*;

	public class circleAndRectSprite {
		
		
		public var m_circle:Sprite = new Sprite();
		public var m_rect:Sprite = new Sprite();
		private var myStage;

		public function circleAndRectSprite(myStage) 
		{
			/*Creating circle */
			this.m_circle.graphics.beginFill(0xFF6600, 1);
			this.m_circle.graphics.drawCircle(100, 100, 50);
			this.m_circle.graphics.endFill();
			this.myStage = myStage;
			myStage.addChild(m_circle);
			
			/*Creating rect */
			this.m_rect.graphics.beginFill(0x000000);
			this.m_rect.graphics.drawRect(100, 100, 50, 50);
			this.m_rect.graphics.endFill();
			myStage.addChild(m_rect);
			
			/* Adding Event Listener */
			myStage.addEventListener(KeyboardEvent.KEY_DOWN, moveRect);
			
		}
		public function moveRect(ev:KeyboardEvent) 
		{
				/* moving the rect according to the arrows */
				if(ev.keyCode == 40)
				{
					this.m_rect.y+=4;
				}
				else if(ev.keyCode == 38)
				{
					this.m_rect.y-=4;
				}
				else if(ev.keyCode == 37)
				{
					this.m_rect.x-=4;
				}
				else if(ev.keyCode == 39)
				{
					this.m_rect.x+=4;
				}
		}
	}
}

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

עד כאן הכל אמור להיות מובן, אבל אם אני רוצה שהריבוע יהיה ה-masking לעיגול? כל מה שעלי לעשות זה להגדיר את תכונת mask של העיגול שיש באופן מנדטורי לכל אובייקט תצוגה ולהגדיר שהריבוע יהיה הממסך. עושים את זה בשורה הבאה: this.m_circle.mask = this.m_rect;

בקוד עצמו זה נראה כך:


package {
	import flash.display.Sprite;
	import flash.events.*;
	import flash.geom.*;
	import flash.utils.*;
	import flash.filters.*;

	public class circleAndRectSprite {
		
		
		public var m_circle:Sprite = new Sprite();
		public var m_rect:Sprite = new Sprite();
		private var myStage;

		public function circleAndRectSprite(myStage) 
		{
			/*Creating circle */
			this.m_circle.graphics.beginFill(0xFF6600, 1);
			this.m_circle.graphics.drawCircle(100, 100, 50);
			this.m_circle.graphics.endFill();
			this.myStage = myStage;
			myStage.addChild(m_circle);
			
			/*Creating rect */
			this.m_rect.graphics.beginFill(0x000000);
			this.m_rect.graphics.drawRect(100, 100, 50, 50);
			this.m_rect.graphics.endFill();
			myStage.addChild(m_rect);
			
			/* Adding Event Listener */
			myStage.addEventListener(KeyboardEvent.KEY_DOWN, moveRect);
			
			/* Adding Masking */
			this.m_circle.mask = this.m_rect;
			
		}
		public function moveRect(ev:KeyboardEvent) 
		{
				/* moving the rect according to the arrows */
				if(ev.keyCode == 40)
				{
					this.m_rect.y+=4;
				}
				else if(ev.keyCode == 38)
				{
					this.m_rect.y-=4;
				}
				else if(ev.keyCode == 37)
				{
					this.m_rect.x-=4;
				}
				else if(ev.keyCode == 39)
				{
					this.m_rect.x+=4;
				}
		}
	}
}

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

במאמר הבא נלמד על ה-Drawing API של פלאש באמצעות Action Script 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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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