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

Motion XML ב-ActionScript 3

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

במאמר זה אנו ממשיכים ללמוד על Motion XML ב-Asction Script 3.

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

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

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

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