יצירת תפריט אנימטיבי בפלאש

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

 

 

 

 

 

 

 

 

 

שלב 1.נפתח קובץ פלאש חדש במקרה שלנו אני פתחתי קובץ AS3 לביצוע התהליך. ונגדיר את מימדי הבמה שלנו (ניתן גם לבצע את ההתהליך באמצעות AS2 עם מעט התאמות שונות)

שלב 01 - מדריך ליצירת תפריט אנימטיבי בפלאש

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

שלב 02 - מדריך ליצירת תפריט אנימטיבי בפלאש

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

שלב 03 - מדריך ליצירת תפריט אנימטיבי בפלאש

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

שלב 04 - מדריך ליצירת תפריט אנימטיבי בפלאש

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

שלב 05 - מדריך ליצירת תפריט אנימטיבי בפלאש

 

 

 

 

 

 

 

 

 

 

 

 

 

 

שלב 6. השלב הבאים חשובים בדיוק אפיון האלמנטים. כרגע לכפתור שלנו יש 4 מצבים. מצב סטטי (UP) , מצב ריחוף (OVER) , מצב לחיצה (DOWN), ומצב מרחב הלחיצה על הכפתור (HIT). נשכפל את האלמנט שהיה לנו רק על מצב UP באמצעות כפתור F6. חשוב לוודא שעדין לא יצרנו Movie clip וכן שיכפלנו את האלמנט במצב שבו היה במצב שלנו "קבוצה".

שלב 06 - מדריך ליצירת תפריט אנימטיבי בפלאש

 

 

 

 

 

 

 

 

 

 

 

 

 

 

שלב 7. השלב הבא לאחר ששיכפלנו לכל מצב את אותו אלמנט ויזואלי , נסגור כל פריים של מצב ב-MOVIE CLIP ייחודי. מומלץ לתת שמות מסודרים לכל MOVIE CLIP להמשך נוחות התהליך.

שלב 07 - מדריך ליצירת תפריט אנימטיבי בפלאש

 

 

 

 

 

 

 

 

 

 

 

 

 

 

שלב 8. בשלב הזה ניצור את האנימציה של הכפתור, לכל מצב ניצור אנימציה שונה חוץ ממצב HIT שהוא לא ויזאולי למעשה. לאנימציה הראשונה של מצב UP ניכנס ע"י לחיצה כפולה על ה-MOVIE CLIP שיצרנו ושוב ניצור MOVIE CLIP פנימי – שלב מאוד חשוב שאסור לפספס בתהליך. ללא יצירת ה-MC הפנימי לא נוכל ליצור את האנימציות הדרושות. האנימציה שניצור קצרה בכמות הפריימים כמו שאתם יכולים לראות ונמשכת רק 5 פריימים,אפשר אפילו לקצר את זה מעט. אנימציית ה-UP קצת שונה ממה שנחשוב , היא תתחיל ממצב שאלמנט גדול מעט מגודלו הרגיל (מומלץ לרשום בצד את המידות המדוייקות – למעשה יש לנו 2 מידות של הכפתור שאנחנו צריכים לזכור) וע"י יצירת CLASSIC TWEEN נחזיר את הכפתור למצב הרגיל והקטן יותר.

שלב 08 - מדריך ליצירת תפריט אנימטיבי בפלאש

 

 

 

 

 

 

 

 

 

 

 

 

 

 

שלב 9.בשלב הבא ניצור שכבת ACTION מעל האנימציה שלנו , חשוב מאוד וחובה ליצור את השכבה.

שלב 09 - מדריך ליצירת תפריט אנימטיבי בפלאש

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

;()stop

שזאת למעשה פקודה שאנחנו קובעים לעצירת האנימציה כדי שלא תרוץ לנו בצורה אינסופית (LOOP). מומלץ בשלב הזה לבצע שמירה של הקובץ. מכאן למעשה אנחנו נמשיך ליתר המצבים באותה דרך ועיקרון , 2 מצבים נוספים שנשארו לנו בכפתור – מצב DOWN ומצב OVER. מצב OVER הולך לעבור אנימציה הפוכה למצב שיצרנו במצב UP שזה אומר – שכפתור שלנו יעבור תהליך "גדילה" מהמצב הרגיל שלו למצב השני – הגדול יותר במימדים – חשוב לדייק במידות שבהם אנחנו עובדים ולהמשיך להיצמד למידות שרשמנו בצד. מידה למצב רגיל (קטן) , ומידה למצב גדול. כדאי מאוד לשמור על אותו אורך פריימים גם במצב OVER בהשוואה למצב UP כך שהמעבר וריחוף עם העכבר מעל הכפתור ישמור לנו על תנועה אורגנית. חשוב לא לשכוח גם במצב UP ליצור פקודת STOP בסוף האנימציה. למצב DOWN ניצור אנימציה זהה למצב UP – אנימציית הקטנה בגלל שלמעשה אנחנו לוחצים על הכפתור. למצב HIT לא נתייחס כרגע , חשוב שרק יופיע שם משהו – אלמנט גרפי או MOVIE CLIP שלא קורה בו שום דבר.

שלב 10 - מדריך ליצירת תפריט אנימטיבי בפלאש

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

שלב 11 - מדריך ליצירת תפריט אנימטיבי בפלאש

 

 

 

 

 

 

 

 

 

 

 

 

 

 

שלב 13. אחרי שסוף סוף סיימנו ליצור את הכפתור שלנו. ניתן לשכפל אותו במידה ואנחנו יוצרים תפריט מגוון שמכיל אופציות שונות לדוג' – משחק שכולל התחלת משחק / טעינת משחק / סיום משחק. את שכפול הכפתור נבצע דרך הבמה הראשית ונשכפל את ה-BUTTON הראשוני שיצרנו.

שלב 12 - מדריך ליצירת תפריט אנימטיבי בפלאש

 

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

ושוב נציג התוצאה הסופית שלנו:

 

 

 

 

 

 

 

 

 

למדריכים נוספים לחץ כאן