<html  dir=rtl>
<head>
<style type="text/css">
h1 {font-family:arial; font-size:20pt}
body {font-family:arial; font-size:12pt; background:#ffffff}
td {font-family:arial; font-size:12pt; background:#ffffff}
pre {font-family:arial; font-size:12pt}
input {width:200px}
table {background:#ffffff}

</style>
<META CHARSET=windows-1255> 
<title>
שימוש בתכנות ליצירת אנימציה - חלק 2
</title>
</head>
<body >
<a href='http://www.flashdev.co.il'>בחזרה לעמוד הבית</a><p>

<table border=0 align=right width="640px" bgColor=#ffffff>

<tr><td>
<center>
<font size="+3"><b>

שימוש בתכנות ליצירת אנימציה - חלק 2
<br><br>
</b></font>
<img src="hebrew.gif" width=394 height=28 alt="You must have HEBREW (ISO-LOGICAL) text encoding to see the hebrew in this page">
</center>
<br><br>
<font size="+1">
<b>
ידע נדרש
</b>
</font>
 - עבודה עם משתנים, שימוש בפקודת onClipEvent (רצוי לעבור על חלק ראשון של שיעור אנימציה בעזרת תכנות)
<br><br>
</td></tr>
<tr><td>


<br><br>

בחלק ראשון של שיעור זה, ניתן הסבר כיצד להשתמש בתכנות על מנת ליצור תנועה לאובייקטים, בציר אחד ובשני צירים, 
אך ללא התחשבות בגורמים כמו תאוצה, האטה וכח המשיכה - בשיעור זה ננסה להסביר כיצד ניתן ליצור תנועה התלויה בתנאים אלו על מנת ליצור 
תנועה יותר ריאליסטית.




<br><Br>
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
 WIDTH=600 HEIGHT=250>
	<PARAM NAME=movie VALUE="advanced.swf"> 
	<PARAM NAME=quality VALUE=high> 
	<PARAM NAME=bgcolor VALUE=#999999> 
	<EMBED 
		src="advanced.swf" 
		quality=high 
		bgcolor=#999999  
		WIDTH=600 
		HEIGHT=250 
		TYPE="application/x-shockwave-flash" 
		PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">	
	</EMBED>
</OBJECT>
<br><Br>
</td></tr>

<tr><td>
<b>
<font size="+1">
האטה/תאוצה
</font>
</b>
<br><br>
 בשיעור הקודם למדנו כיצד לגרום לאובייקט לזוז במהירות אחידה - 10 פיקסלים בכל פריים 
(התוספת היתה 10 פיקסלים והשתמשנו ב onClipEvent עם enterFrame שמתבצע כל פריים).
על מנת ליצור תאוצה או האטה במהירות עלינו לעדכן את גודל השינוי בכל פעם - אם ניקח לדוגמא את ההאטה, 
בהתחלה גודל השינוי הוא 10 פיקסלים, ועם כל פריים שעובר עלינו להוריד חלק קטן , 
עד שלבסוף נשאר עם גודל שינוי 0 פיקסלים (או כמעט 0) שלמעשה לא מזיז את האובייקט בכלל.

<br><br>
דרך אחת לבצע את ההורדה הזו היא באחוזים - בכל פריים נחשב מחדש את התוספת למיקום ל - 90% מהערך הקודם שלה, 
עד שלבסוף נשאר עם מספר מאוד קטן והאוביקט לא יזוז. 
בקובץ הדוגמא, אובייקט מס' 1 משתמש במשתנה בשם Friction (חיכוך) שמקבל את הערך 0.9 כאשר המוביקליפ עולה. 
<br>
הקוד שמבצע את העדכון הוא:
</td></tr>
<tr><td>
<span dir=ltr><pre>
onClipEvent (load) {
     speed = 10;
     Xdirection = 1*speed;
     Ydirection = 1*speed;
     <FONT COLOR=BLUE>friction = 0.9;</font>				// איפוס משתנה החיכוך
}

onClipEvent (enterFrame) {
     this._x = this._x <font color=blue>+ Xdirection;</font>		// הוספת מקדם השינוי 
     this._y = this._y <font color=blue>+ Ydirection;</font>		// הוספת מקדם השינוי
     if (this._x>=600 || this._x<=0) {
          Xdirection = -(Xdirection);
     } else {
          Xdirection = <font color=blue>Xdirection*friction</font>;		// X חישוב מחדש של מקדם השינוי בציר 
     }
     if (this._y>=250 || this._y<=0) {
          Ydirection = -(Ydirection);
     } else {
          Ydirection = <font color=blue>Ydirection*friction</font>;		// Y חישוב מחדש של מקדם השינוי בציר 
     }
}
</pre></span>

שיטת העבודה זהה לשיטה הרגילה (ללא חיכוך) - כאשר המוביקליפ עולה, מקדם השינוי (direction של כל אחד מהצירים) 
מקבל ערך ראשוני (10 בדוגמא שלנו). בכל פריים מתווסף הערך של מקדם השינוי לגבי כל ציר ומתבצעת בדיקה האם האובייקט הגיע לגבולות המותרים.
במידה וכן, מתהפך הסימן של המקדם (תנועה בכיוון הפוך) ובמידה שלא, מבוצע חישוב מחדש של התוספת למיקום 
(על מנת להקטין את "המהירות" של האובייקט - בכל פעם הוא יעבור מרחק קטן יותר).
<br>


<br><br>
</td></tr>

<tr><td>
<b>
<font size="+1">
כח משיכה
</font>
</b>
<br><br>
כאשר אנו זורקים כדור לאויר, על הכדור מופעל כח המושך אותו למטה, ולכן ככל שעובר הזמן, הכדור מאבד מהירות 
עד שהוא מגיע לשיא הגובה שלו ,שם המהירות שלו היא 0. 
<br>
לעומת זאת, כאשר הכדור נופל למטה, שוב מופעל עליו כח המשיכה - מה שגורם לו לצבור מהירות כל זמן שעובר (תאוצה) עד שהוא מגיע לקרקע שם הוא קופץ חזרה.

<br><br>
בתרגום לשפת פלאש -  בהנחה שהגובה מחושב מחדש בכל פריים (מה שמבוצע בתוך החלק של ה - enterFrame בפקודת onClipEvent):
<br>
<ul>
<li>
כאשר הכדור עולה למעלה, ההתקדמות שלו צריכה להיות קטנה יותר בכל פריים שעובר עד שהוא יגיע לגבול העליון שאנחנו קובעים לו, 
או שהוא עד שהוא יגיע למהירות 0 (שיא הגובה).
<li>
כאשר הכדור נופל למטה, ההתקדמות שלו צריכה להיות גדולה יותר בכל פריים שעובר, עד שהוא יגיע לגבול התחתון שאנחנו קובעים לו.
<li>
בכל פעם שהכדור קופץ חזרה למעלה, הגובה המקסילי שהוא יגיע אליו יהיה קטן יותר עד שלבסוף הוא ישאר על הקרקע.

</ul>

נקודת ההתחלה (כאשר Y הוא 0) על הבמה של פלאש נמצאת למעלה - כך שלמעשה היחסים בין פלאש למציאות הם הפוכים - 
אם "נזרוק" כדור מהקצה התחתון של הבמה בפלאש, הוא למעשה מתחיל ממספר גבוה בציר Y ומתקרב כל הזמן לנקודת ה - 0, 
כך שכאשר הכדור עולה, השינוי בגובה צריך להיות שלילי, וכאשר הכדור נופל, השינוי צריך להיות חיובי.
<br>



<br>
הקוד שמבצע את העדכון הוא:
</td></tr>
<tr><td>
<br>
<span dir=ltr><pre>
onClipEvent (<font color=blue>load</font>) {			// איפוס נתונים
	speedY = 0;			// מהירות התחלתית 0
	Ypos=0;				// נקודת גובה 0
	gravity = 15;			// מקדם כח משיכה
	friction = 0.7;			// מקדם חיכוך
}
onClipEvent ((<font color=blue>enterFrame</font>) {
	speedY = speedY + gravity;		// חישוב מחדש של המהירות
	Ypos = this._y +speedY/10;		// חישוב המיקום המעודכן בהתאם למהירות
	if (Ypos > 240) {			// בדיקת גבול תחתון 
		Ypos = 240;		// איפוס הגובה על מנת שלא יחרוג מהקרקע
		speedY = -(speedY*friction);// הפיכת הכיוון
	}
	this._y =  Ypos;			// עדכון הגובה
}
</pre></span>
הקוד מחשב את מיקום האובייקט בכל פריים שעובר, כאשר סדר הפעולות הוא:
<br><br>
<b>
1. חישוב המהירות
</b>
 - המהירות ההתחלתית היא 0 (כאשר הכדור בדיוק מתחיל ליפול). 
בכל פריים המהירות מקבלת תוספת של מקדם כח המשיכה, שיוצר גדילה של 15 פיקסלים במרחק. 
בגלל שהמיקום מחושב לפי המהירות, התוצאה תהיה שבכל פריים המרחק שיעבור האובייקט יהיה גדול יותר - חיקוי של תאוצה.
<br>
<b>
2. חישוב המיקום
</b>
Ypos
הוא מבחינתנו המיקום המעודכן של האובייקט - החישוב של המיקום מבוצע לפי המיקום העכשווי בתוספת של מקדם המהירות (שבכל פריים יש לו ערך שונה). 
החלוקה ב - 10 באה רק כדי להקטין את המספר הגדול על מנת שהשינוי לא יהיה במספרים גדולים מדי. 
<br>
<b>
3. בדיקת גבול תחתון
</b>
 - בדיקה האם הכדור הגיע לגבול התחתון שמייצג בשבילנו את הקרקע - במקרה שלנו 250. במידה והוא עובד את הגבול, 
אנחנו מעדכנים את Ypos על מנת שלא יחרוג מהגבול (וייכנס ל"תוך הקרקע"), ובנוסף הופכים את הסימן של מקדם המהירות 
(שהתנועה תהיה לכיון השני) ומכפילים את המהירות במקדם החיכוך על מנת להקטין אותה.
<br>
<b>
4. עדכון הגובה
</b>
 - עדכון הגובה של האובייקט לפי הערך של Ypos שחושב מחדש בשורות הקודמות.
<br><br>
כאשר הכדור מתחיל ליפול, הוא מתחיל ממהירות 0, ולכן התוספת לגובה (שורה שניה) היא קטנה. בכל פריים שעובר המהירות גודלת 
(בגלל הוספת מקדם כח המשיכה) ולכן גם השינוי בגובה יותר גדול, כך שנוצר מצב של תאוצה. 
<br>
כאשר האובייקט מגיע לקרקע, הסימן של המהירות מתהפך והמהירות נהפכת להיות שלילית מה שגורם לאובייקט לעלות למעלה 
(שאיפה לנקודת ה - 0 בציר Y). 
<br>
המהירות מוכפלת במקדם החיכוך שמוריד את הערך שלה ל - 0.7 מהערך הקודם כך שעל מנת שהמהירות 
תקבל שוב ערך חיובי (בגלל התוספת של gravity  בכל פריים) נדרשים פחות "צעדים" (תוספות של gravity לערך של  speed בשורה 2) 
ולכן האובייקט יגיע לגובה יותר נמוך מהגובה בו התחיל. כאשר האובייקט יתחיל את הנפילה הבאה, הגובה שלו יהיה נמוך יותר מהפעם הקודמת ולכן הקפיצה הבאה 
תהיה אפילו יותר נמוכה, כך עד שהוא ישאר על הקרקע.
</td></tr>
<tr><td>
<br>
<br>
<font size="+1">
<b>
"זריקת" אובייקט
</b>
</font>
<br><br>
אובייקט מס' 3 מדמה מצב של "זריקת" אובייקט. שיטת החישוב פשוטה:
<br><br>
בכל פריים אנחנו מחשבים מחדש את המהירות של האובייקט ע"י חלוקת הדרך שעבר האובייקט במספר קבוע (3 במקרה שלנו). 
ככל שהמרחק בין התחלת הגרירה ועזיבת האובייקט יהיה גדול יותר כך המספר שייצא בחישוב יהיה גדול יותר ומכאן - מהירות גבוהה יותר.
<br><BR>
על מנת שנוכל לדעת מתי עלינו לחשב מהירות ומתי עלינו לבצע את התנועה שנוצרה מהזריקה, עלינו להשתמש במשתנה שיסמן לנו אם אנחנו נמצאים במצב של גרירה. 
לשם כך נשתמש בכפתור שימוקם בתוך המוביקליפ ובלחיצה עליו מקבל ערך מספרי 1 (שווה ערך ל - true), ובשחרור, כלומר בעזיבת האובייקט, מקבל את הערך 0 (שווה ערך ל - false).
משתנה זה נקרא בדוגמא המצורפת isDragged:
<br>

<span dir=ltr><pre>
onClipEvent (load) {
	speedX = 0;
	friction = 0.6;
}
onClipEvent (enterFrame) {
<font color=blue>if (isDragged==true){
	speedX = (this._x - Xpos) /3 ;
	Xpos = this._x;
}</font>else{
	Xpos = this._x+speedX;
	if (Xpos<0 ) {
		Xpos = 0;
		speedX = -(speedX*friction);
	}
	if (Xpos>600 ) {
		Xpos = 600;
		speedX = -(speedX*friction);
	}
	this._x = Xpos;
}
}
</pre></span>
<br>
כאשר isDragged מתקיים (שווה ל - true), מבוצע החישוב של המהירות שמורכב משתי שורות (הקטע המסומן בכחול). 
בשורה הראשונה אנחנו מחלקים את המרחק שעבר האובייקט מהמקום בו היה בפריים האחרון ומחלקים את התוצאה ב - 3.
<br>
בשורה השניה אנחנו מעדכנים את המקום האחרון בו היה האוביקט ומזינים את המספר הזה למשתנה Xpos.
<BR><BR>
בצורת חישוב שכזו - בכל פרים אנחנו מחשבים את המרחק מחדש ולא "צוברים" מרחקים. אם לא הינו מאפסים את המשתנה Xpos בכל פריים, 
המרחק שבו היינו מתשמשים בחישוב לא היה יחסי לזמן ולכן גם חישוב המהירות לא היתה נכון. ברגע שאנחנו מאפסים את המשתנה בכל פעם, 
בפעם הבאה שמתבצע החישוב (בפריים הבא) החישוב מתבצע ביחס למיקום העכשווי לעומת המיקום בפריים הקודם (שהזנו בשורה השניה של הפריים הקודם).
<br><Br>
חישוב התנועה לאחר מכן הוא בשיטות עליהן עברנו קודם לכן - תנועה בתוך גבולות ציר X בלבד, כאשר בכל פעם שנתקלים בקיר, המהירות מוכפלת במשתנה החיכוך friction ומקבלת ערך נמוך יותר, עד שהיא מגיעה למספר קרוב מאוד ל - 0.


</td>></tr>
<tr><td>
<br>
<br>
<font size="+1">
<b>
כח משיכה - תנועה בשני צירים
</b>
</font>
<br><br>
אובייקט מס' 4 משתמש בשיטות החישוב שראינו באובייקטים 2 ו - 3. התנועה בו היא תנועה אנכית (כח משיכה) ותנועה לפי זריקה (שני כיוונים).
<br>
<br>
על מנת לבצע תנועה בתוך 4 "קירות", עלינו לבצע בדיקה מול 4 גבולות בכל פעם (מול כל "קיר"). הקוד המלא לתנועה האובייקט הוא:


<span dir=ltr><pre>
onClipEvent (load) {
	<font color=blue>speedX = 15;</font>
	speedY = 0;
	Ypos = 0;
	Xpos = 0;
	gravity = 15;
	friction = 0.6;
}
onClipEvent (enterFrame) {
  if (isDragged==true){
	speedX = (this._x - Xpos) /10 ;	// חישוב מחדש של המהירות במקרה גרירה
	speedY = (this._y - Ypos) /10 ;	// חישוב מחדש של המהירות במקרה גרירה
	Xpos = this._x;			
	Ypos = this._y;			
  }else{
	speedX= speedX * 0.98;		// האטה תמידית במהירות בציר המאוזן
	speedY = speedY+gravity;
	Xpos = this._x+speedX;
	Ypos = this._y+speedY/10;
	if (Xpos<0 ) {
		Xpos = 0;
		speedX = -(speedX*friction);
	}
	if (Xpos>600 ) {
		Xpos = 600;
		speedX = -(speedX*friction);
	}
	if (Ypos<0) {
		Ypos = 0;
		speedY = -(speedY*friction);
	}
	if (Ypos>240) {
		Ypos = 240;
		speedY = -(speedY*friction);
	}
	this._x = Xpos;
	this._y = Ypos;
  }
}
</pre></span>

באובייקט מס' 4, התנועה בשני הצירים מושפעת מכח המשיכה - אם נזרוק כדור לצד, הוא יאבד גובה תוך כדי שהוא באויר, אבל גם יאבד מהמהירות שלו עד שלבסוף הוא יעצר גם במישור המאוזן ולכן, שלא כמו באובייקט  מס' 3, אובייקט מס' 4 מאבד מהמהירות כל הזמן בציר X.









<br><Br><br>
<a href="advanced.zip" taret="_blank">
להורדת דוגמא - לחצו כאן
</a>



<pre>
									בהצלחה
</pre>
שיעור זה נכתב ע"י אופיר אברהמוב. 
<br>
להערות והצעות :

<a href="mailto:ofir@yuppys.com" target="_blank">ofir@yuppys.com</a>

</td></tr>





</table>
</body>
</html>�