Motion XML ב-ActionScript 3

במאמר הקודם למדנו על אנימציה באמצעות ActionScript 3 ועשינו אנימציה ראשונית באמצעות Motion XML. במאמר הזה נרחיב את הנושא של Motion XML.

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

אנו עובדים עם animSrite שעליו עבדנו במאמר הקודם. להזכירכם, animSprite הוא אובייקט פשוט אך בתוכו יש Motion XML. הנה הקוד שלו:

package {
	import flash.display.Sprite;
	import flash.events.*;
	import flash.geom.*;
	import flash.utils.*;
	import fl.motion.Animator;

	public class animSprite {
		public var m_animSprite:Sprite = new Sprite();
		private var myStage;
		public var anim:Animator;

		public function animSprite(myStage) {
			this.m_animSprite.graphics.beginFill(0x000000);
			this.m_animSprite.graphics.drawRect(100, 100, 50, 50);
			this.m_animSprite.graphics.endFill();
			this.myStage = myStage;
			myStage.addChild(m_animSprite);
			this.m_animSprite.addEventListener(MouseEvent.MOUSE_DOWN, animateMe);
			
		}
		public function animateMe(ev:Event) 
		{
			var myXml = MYXML;
			
			this.anim = new Animator(myXml, this.m_animSprite);
			this.anim.play();
		}
	}
}

אנו יוצרים את האובייקט שלנו ב-fla בצורה פשוטה ביותר:

var m_animSprite:animSprite  = new animSprite(stage);

עכשיו, אחרי שהראנו את ה-animSprite, נתחיל לעבוד על ה-Motion XML. באופן עקרוני, האובייקטים השונים שיש ב-XML צריכים להיות מוצבים באופן הבא:

<Motion>
  <source>
    <Source>
    </Source>
  </source>
  <Keyframe>
    <color>  
      <Color /> 
    </color> 	
    <tweens>
      <SimpleEase />
      <CustomEase>
        <geom:Point />
      </CustomEase>
    </tweens>
    <filters>  
      <filters /> 
    </filters> 	
  </Keyframe>
</Motion>

כפי שציינתי קודם, כל תגית כזו נחשבת לאובייקט ואנו יכולים לתת לה תכונות המשפיעות/מכוונות את האנימציה שלנו.

אובייקט Motion

הוא האובייקט שעוטף את ה-XML שלנו והוא מנדטורי. על מנת להשתמש ב-filters או באובייקטים אחרים אנו צריכים להשתמש בתכונת xmlns כך למשל, אם אני רוצה להשתמש בפילטרים באנימציה שלי, אני אצטרך להציב xmlns:filters="flash.filters.*". בדיוק כמו שאני מייבא ספריה של flash. אם נבהלתם, לא נורא, אסביר בהמשך.

ניתן גם להגדיר אורך אנימציה באמצעות תכונת duration אך לא חייבים לעשות כן באנימציות בסיסיות.

אובייקט source (ב-s קטנה)

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

אובייקט Source (ב-S גדולה)

גם הוא אובייקט מנדטורי.

אובייקט Keyframe

מדובר באובייקט המרכזי מבחינת אנימציה שאנו עובדים איתו, יש לנו את התכונה index שמצביעה על מספר הפריים שיש בו את ה-Keyframe שלנו ואותה אנו מכירים. יש לנו את תכונה x ו-y שמצביעה על מיקום האובייקט בנקודת ה-keyFrame וגם אותה אנו מכירים. בואו ונבדוק תכונות אחרות!

ScaleX ו-ScaleY

יש לתכונות אלו שימושים רבים באובייקטים אחרים אבל במקרה שלנו אנו יכולים לבחור את האחוזים היחסיים של ה-X וה-Y של האובייקט שלנו. דוגמא מסבירה את העסק בצורה הטובה ביותר:

וכך ה-XML נראה, כל מה שעשיתי זה להוסיף scaleX="2" שמכפיל את הרוחב המקורי של האובייקט שעובר את האנימציה ב-Keyframe השני. ScaleY עובד על הרוחב של האלמנט. ככה זה נראה:

<Motion duration="10">
				<source>
					<Source>
					</Source>
				</source>
				<Keyframe index="0">
					<tweens>
						<SimpleEase />
					</tweens>
				</Keyframe>
				<Keyframe index="10" x="198" y="123" scaleX="2"/>
			</Motion>

rotation

זו אחת התכונות היותר מעניינות שקובעת, במעלות, את הסיבוב של ה-keyframe.

Color

אובייקט color מגיע בתוך ה-Keframe ובאמצעותו אנו יכולים לשנות תכונות הנוגעות לצבע של האלמנט. הוא מגיע בתוך אובייקט color (עם c קטנה) שלא מקבל תכונות. התכונות של ה-Color הן רבות ואני אדגים דווקא באמצעות תכונת שקיפות שנקראת alphaMultiplier והיא מקבלת ערך בין 0 (שקוף) ל-1 (לא שקוף):

וככה ה-XML נראה, פשוט שבפשוטים, פשוט הכנסתי לתוך תגית ה-Keyframe את ה-color וה-Color עם התכונה שלו.

<Motion duration="10">
				<source>
					<Source>
					</Source>
				</source>
				<Keyframe index="0">
					<tweens>
						<SimpleEase />
					</tweens>
				</Keyframe>
				<Keyframe index="10" x="198" y="123">
				        <color>
            				<Color alphaMultiplier="0.5"/>
       				 	</color>
				</Keyframe>
			</Motion>

ישנן עוד תכונות שזמינות בדוקומנטציה של ה-XML.

החשובה שבהן היא שינוי צבע, אותו מבצעים באמצעות tintColor שמקבל את ערך הצבע שאליו רוצים לשנות ו-tintMultiplier שמקבל ערך בין 0 (לא להוסיף בכלל את הצבע) ו-1 (להוסיף את הצבע במאה אחוז) הנה הדוגמא:

וככה ה-XML נראה, שימו לב שחייבים להוסיף tintMultiplier.

<Motion duration="10">
				<source>
					<Source>
					</Source>
				</source>
				<Keyframe index="0">
					<tweens>
						<SimpleEase />
					</tweens>
				</Keyframe>
				<Keyframe index="10" x="198" y="123">
				        <color>
            				<Color tintColor="0x950F1B" tintMultiplier="1"/>
       				 	</color>
				</Keyframe>
			</Motion>

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

במאמר הבא נלמד על פילטרים ו-masking ב-ActionScript 3.