סטרימינג בפלאש ועבודה עם ה- Bandwidth Profiler

 

מטרת השיעור

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

 

הקדמה

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

למרבה האירוניה, דווקא מאפיין זה זוכה למודעות קטנה מאוד ורוב הפלאשיסטים לא

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

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

 

מהו סטרימינג?

כל מהירות חיבור מוגבלת בכמות המידע שהיא יכולה לקבל בשנייה.

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

לא מדובר במשקל הקובץ הסופי כמו שמדובר במשקל האובייקטים שהוא מכיל  לכל שנייה נתונה.

ברמה העקרונית ניתן להציג סרט פלאש של 10 מגה בלי טעינה מוקדמת בתנאי שהוא לא דורש מהחיבור של המשתמש לקבל יותר מידע ממה שהוא מסוגל, כלומר, הסרט בנוי בסטרימינג.

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

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

אם נתרגם את הדימוי הציורי הזה לשפת פלאש אז הרכבת היא הסטרימינג (download) והאדם הוא מה שאנחנו רואים מולנו נכון לאותה שנייה (playback).

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

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

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

 

מהו ה- Bandwidth Profiler?

 

ה-Bandwidth Profiler  הוא כלי מאוד יעיל המאפשר לנו לראות בדיוק כיצד הסרט שלנו מתנגן ומשפיע על מהירויות חיבור שונות.הוא מצביע על נקודות בעיתיות בהן הסרט יתקע ולא יוכל להתקדם בקצב הקבוע שלו כי באותה נקודה החיבור מתבקש לעכל בשנייה יותר מידע ממה שהוא מסוגל, וקבלת המידע השמור באותו פריים יכול לקחת כמה שניות.לפעמים כמה דקות.

המטרה שלנו היא להמנע מיצירת פריימים כאלה עד כמה שאפשר ושמירה על תוכן פריימים "חכם" שיזרום ברשת.

 

ניתן לצפות ב- Bandwidth Profiler כאשר בוחנים את הסרט על ידי crtl+enter.

הוא נמצא תחת תפריט View וניתן לצפות בו בשני מצבים:

1.Streaming Graph.

2.Frame by Frame Graph.

 

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

 

 

מצד שמאל מופיעים לנו הפרטים הטכניים של הסרט:

Movie

1.מימדים.

2.מהירות פריימים.

3.משקל.

4.משך הטעינה הכולל לסרט.

5.יחס הטעינה.

 

Settings

מהירות החיבור אותה אנו מדמים ובודקים.

 

State

מצב הסרט בזמן הבדיקה.

1.הפריים הנוכחי.

2.משקל הפריים הנוכחי.

3.כמה אחוזים מסך כל הסרט נטענו.

4.גודל הקובץ הכללי.

 

בתצוגה המתוארת אנו יכולים לראות את ההשלכות שיש לכל פריים בסרט שלנו על הסטרימינג.

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

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

 

התצוגה המודגמת כרגע היא של Frame by Frame Graph ובה אנו יכולים לראות את השפעת הסרט בחתך של כל פריים ופריים לאורך הטיים ליין של הסרט.

 

אפשרות נוספת לצפייה בסטרימינג של הסרט היא streamig graph ובה ניתן לראות את ההשפעה של כל פריים לאורך זמן (כמה זמן תמשך הטעינה) ולא כחריגה מעבר לקו האדום.

 

 

כדי לבחון את הסרט ב"זמן אמת" ולדמות את הסטרימינג יש לבחור show streaming מתפריט view.

במצב הזה הפלאש מציג את התקדמות הטעינה בצורת פס ירוק ובמקביל את תנועת "ראש הוידאו" שמציג את מה שהמשתמש רואה הלכה למעשה.

תחת תפריט debug  אפשר לבחור את מהירות החיבור שרוצים לדמות ולראות איך הסרט מתנהג בכל אחת.

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

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

 

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

 

להלן כמה קווים מנחים ונקודות שחשוב לזכור:

 

1.הגדירו כל אובייקט שמופיע בסרט כסימבול

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

 

2.השתדלו כמה שיותר למחזר סימבולים

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

 

3.סדר הופעה חכם של אלמנטים

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

 

4.עבודה צמודה עם ה- Bandwidth Profiler

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

 

5.סוג האנימציה בה אתם משתמשים

אנימציית Motion Tween  שמבוצעת על סימבול אחד שנמצא בשכבה משלו צורכת הרבה פחות משאבים וטעינה מאנימציית   Motion Shapeאשר בה מבוצע חישוב חדש בכל פריים ופריים.

 

6.שאפו לפשטות

ככל שאלמנט גראפי (גם אם הוא סימבול) מורכב מהרבה צורות וקווים הוא משפיע ישירות על מהירות ההרצה של הסרט ועל הטעינה של הפריימים בהם הוא מופיע.

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

כדי לרכך קווים וצורות ולדלל קצת את המורכבות שלהם אפשר להשתמש באופציות ה-

Optimize  ו-smooth מתפריט Modify.

 

 

7.שמירה על איזור התרחשות מצומצם

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

 

8.שימוש נכון בפונטים

אל תשברו פונטים אלא אם כן הדבר חיוני ביותר ליצירת אנימציה שבטח גם היא מיותרת.

סרט פלאש אוגר בתוכו את כל המידע של הפונט בו הוא משתמש. פחות פונטים שונים שווה פחות מידע לשמור.

 

9.תמונות? רק אם ממש חייבים

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

 

10.סאונד

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

 

 

לסיכום,

 

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

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

אני מקווה שההסבר היה מובן ופתח כמה דלתות חדשות למחשבה.