• אלירן מאור-טריפמן

מדריך מצולם | איך לייצר אנימצייה ב-Loop בסטוריליין

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

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

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

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


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

בזמן ה-Preview, זה יראה ככה:



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


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

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

1. צרו Layer חדש בסלייד, קראו לו Animation.

2. ב-Layer הזה, הכניסו את האובייקטים אותם אתן רוצות להנפיש (פעם אחת, אין צורך לשכפל את האובייקטים).

3. הוסיפו לאובייקט/ים הנפשת כניסה, והנפשת יציאה, לדוגמא - Fade. אם האובייקט שלכן "מורכב" מכמה צורות (למשל, החץ שיצרתי בסרטון למעלה מורכב מ-3 עיגולים קטנים וחץ אחד גדול יותר), ניתן לייצר לכל אובייקט כזה הנפשת כניסה ויציאה.

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

זה יראה כך:


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


5. חזרו לשכבת הבסיס (Base Layer) וצרו טריגר חדש שיעלה את ה-Layer שיצרתם (ששמו Animation) כשהסלייד מתחיל. הטריגר אמור להראות כך:


לנוחיותכן, אתן יכולות לעשות Preview לסלייד הזה כעת ולראות שה-Layer עם ההנפשה עולה ישר כשמתחיל הסלייד. זה יראה כך:



מעולה! ההנפשה עובדת! אבל.. רק פעם אחת.

אז איך אנחנו יוצרות מזה לופ שיעבוד שוב ושוב? כך:


6. צרו Layer נוסף באותו סלייד. קראו ל-Layer החדש הזה בשם Loop ( * כמובן שאפשר לקרוא ל-Layers בכל שם שתרצו, השמות הם לנוחות בלבד).

7. חזרו ל-Layer הראשון שיצרתן (Animation) וצרו עליו טריגר, שיפעיל את ה-Layer החדש (loop) כשהטיימליין של Animation נגמר.

זה יראה כך:


שימו לב: את הטריגר הזה עושים על ה-Layer בשם Animation (לא על שכבת הבסיס ולא על ה-Layer בשם loop).


8. לחצו על ה-Layer בשם Loop, וצרו בו טריגר חדש שיפעיל את ה-Layer בשם Animation כשהטיימליין של ה-Layer בשם Loop יפעל.

זה יראה כך:


שימו לב: את הטריגר הזה אתן עושות על ה-Layer בשם Loop, כלומר על ה-Layer השני שיצרתן.


ו...זהו!


בואו רגע נבין - מה היה לנו עד עכשיו?

נתחיל מה-Base Layer: יש לנו טריגר שמפעיל Layer בשם Animation ישר כשהטיימליין של הסלייד מתחיל. הלומדת תראה את ההנפשה פעם אחת.

בסיום ההנפשה, כלומר בסיום הטיימליין של ה-Layer בשם Animation יש לנו טריגר שמפעיל Layer בשם Loop.

כשה-Layer בשם Loop מתחיל, יש לנו טריגר שישר מפעיל את ה-Layer בשם Animation, ואז הלומדת תראה את ההנפשה שוב.

כשההנפשה תגמר, הטריגר שוב יפעיל את ה-Layer בשם Loop, שיפעיל את ה-Layer בשם Animation וחוזר חלילה, עד אין סוף!


ב-Preview זה יראה ככה:


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


ונכון שזה נראה מדהים? :)

תחשבו כמה זמן עבודה ייחסך לכן מעכשיו!


יש לכן רעיונות נוספים למדריכים שאני יכול ליצור עבורכן בסטוריליין או בכלים נוספים?

דברו איתי בתגובות!


נתראה בפוסט הבא,

אלירן.

נעים להכיר!

שמי אלירן מאור-טריפמן, ואני מנהל ומפתח הדרכה כבר למעלה מ-8 שנים.

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

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

קריאה מהנה!

  • Facebook
  • Instagram
  • LinkedIn Social Icon

©2019 by MisterBrainy

אין לעשות כל שימוש בתכנים באתר ללא אישור מפורש בכתב