בחזרה לעמוד הבית

יצירת Preloader באחוזים

hebrew in this page is HEBREW (ISO-LOGICAL) charset
מטרת השיעור - בשיעור זה נלמד כיצד יוצרים פרילואדר באחוזים (מספריים וגרפיים) לסרט swf ע"י תכנות.

השיטות שנשתמש בהן בשיעור (למעט פרילואדר למוביקליפ) זהות בפלאש 4 ופלאש 5 למרות שהן מודגמות בפלאש 5.

ידע נדרש - משפטי תנאי, עבודה עם משתנים


בפלאש שתי אפשרויות ליצור פרילואדר - האפשרות הראשונה היא בעזרת הפקודה if frame is loaded ועליה לא נרחיב והאפשרות השניה היא בסיוע שתי פקודות מסוג properties (פקודות המחזירות ערך):

totalframes_ - מחזירה את מספר סה"כ הפריימים בסרטון (בציר הזמן הראשי). יש להשתמש בפקודה במצב Expression ולא במצב String. דוגמא:
myFrames="_totalframes";	 	 המשתנה יהיה שווה לטקסט עצמו 
myFrames=_totalframes;			המשתנה יהיה שווה לערך המספרי 
framesloaded_ - מחזירה את מספר סה"כ הפרימים שהספקנו להעלות. גם בפקודה זו נשתמש במצב expression.

בעזרת שתי פקודות אלה, נוכל לחשב את אחוז הפריימים שהספקנו להוריד בעזרת נוסחא פשוטה:
loaded frames				30 frames
------------- X 100 = percentage  -->  ---------- X 100 = 50%
total frames				60 frames
בעזרת חישוב זה אנו יכולים לדעת שכאשר הורדנו 100 אחוזים מהסרט - אנו יכולים להמשיך קדימה בסרטון כי הורדנו את כולו. על מנת לבדוק את האחוזים האלה באופו עקבי אנחנו יכולים להשתמש ב 2 פריימים שיחזרו על עצמם עד שכל הסרט יעלה.


בתמונה אנו רואים כיצד השכבות מסודרות - 2 הפריימים הראשונים בציר הזמן הם בעצם הפרילואדר - הם מכילים את הפקודות לחישוב האחוזים (ושינוי הטקסטים ופס ההתקדמות של ההורדה) והחל מפריים מס' 3 מתחילה האנימציה.

בקיפריים הראשון בשכבה actions מתבצע חישוב האחוזים והתנאי הבודק אם הגענו ל 100 אחוזי הורדה:
loaded = _framesloaded;	 		   מס' הפריימים שהספקנו להוריד 
total = _totalframes;				מס' הפריימים סה"כ בסרט
percent = int((loaded/total)*100); 		  ביצוע החישוב לאחוזים 
_root.bar._xscale = percent;	    שינוי רוחב פס ההתקדמות לפי האחוזים 
if (percent<100) {		 	   בדיקה אם הגענו ל 100 אחוזים
	play ();
} else {
	gotoAndPlay (3);
}

יצירת פס התקדמות - פס ההתקדמות הוא למעשה הצורה הגרפית של האחוזים - אנו מציירים פס ברוחב מסויים שמבחינתנו מסמל 100 אחוזים של התקדמות (כלומר כאשר הפס יוצג ברוחבו המקורי, הגענו ל - 100 אחוזי הורדה) ונהפוך אותו למוביקליפ.
הפס צריך להיות מיושר לשמאל ממרכז המוביקליפ שהוא נמצא בתוכו -


כשהסרט מתחיל, ה - xscale של המוביקליפ bar (המכיל את הציור של הפס) משתנה בהתאם לאחוזים שחישבנו וכל כל פעם הרוחב שלו מתעדכן בהתאמה, עד שהוא חוזר ל - 100 אחוז רוחב, בדיוק כאשר הסרט מגיע ל 100 אחוזי הורדה. אם לא היינו מיישרים את הציור לשמאל ממרכז המוביקליפ, הגדילה היתה ל - 2 הכיוונים ולא רק לצד שמאל.


על מנת לבדוק את התקדמות הפרילואדר במצב "אמיתי" רצוי לבדוק את הסרט בפלאש ע"י בחירת האפשרות Test Movie מתוך תפריט Control ובמסך ה test movie Kבחור מתפריט Debug את רוחב הפס הרצוי לבדיקה:



ואז לבחור מתפריט View באפשרות Show Streaming (או לחיצה על CTRL+ENTER) על מנת להפעיל את הבדיקה ברוחב הפס שנבחר מתוך תפריט Debug.



פרילואדר לסרט חיצוני

הפקודות הקודמות לא יפעלו בשימוש עם load movie היות והן פועלות רק על ציר הזמן בסרט העכשווי. במקרה שאנחנו מעלים קובץ חיצוני כבד (לדוגמא גלריית תמונות) ואנחנו רוצים לעשות לו פרילואדר, ניתן להכין את הפרילואדר בתוך הסרט החיצוני (פרילואדר בציר הזמן הפנימי שלו), בתנאי שהסרט שאנחנו מעלים נבנה למטרה זו (יבוא ע"י load movie), אך החל מפלאש 5 ניתן להשתמש גם בשתי פקודות חדשות שנועדו למטרה זו:

()movieclip.getBytesTotal - פקודה השייכת לאובייקט movieclip - מחזירה את הגודל של הסרט החיצוני (בבייטים) שאנחנו מעלים לתוך מוביקליפ מסויים. במקום movieclip אנו רושמים את שם המוביקליפ שלתוכו אנחנו מעלים את הסרט בפקודת load movie into target.

()movieclip.getBytesLoaded - מחזירה את הבייטים שירדו מהסרטון החיצוני.



לאחר שיש בידנו את שתי הפקודות האלה אנחנו יכולים לבנות פרילואדר באותה צורה בדיוק כמו בשיטה הקודמת, רק לגבי מוביקליפ ספציפי - בנית לולאה שבודקת אם אחוזי ההורדה קטנים מ - 100 ויציאה מהלולאה כאשר אנו מגיעים ל - 100% הורדה. העובדה שהפקודות הנ"ל מחזירות את הגודל בביטים לא משנות שום דבר היות והחישוב מתבצע לפי אחוזים.

loaded = _root.myTargetMC.getBytesLoaded();    מס' הפריימים שהספקנו להוריד 
total = _root.myTargetMC.getBytesTotal(); 	    מס' הפריימים סה"כ בסרט
percent = int((loaded/total)*100); 		      ביצוע החישוב לאחוזים 
_root.bar._xscale = percent;	        שינוי רוחב פס ההתקדמות לפי האחוזים 
if (percent<100) {		 	       בדיקה אם הגענו ל 100 אחוזים
	play ();
} else {
	gotoAndPlay (3);
}


להורדת קובץ דוגמא - לחץ כאן
									בהצלחה