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

במאמר הקודם דנו ב-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.