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

פברואר 2, 2011   //   על ידי אבי כהן   //   מדריכים, עיצוב, פוטושופ, פלאש ואנימציה, שימושון  //  10 תגובות

תוצאה סופית:

תעבירו את העכבר על הכפתור "הצטרף" לצפייה באפקט

.
.

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

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

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

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

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

1. תחילה נפתח את הקובץ מקור של המדריך הקודם למי שאין את הקובץ ניתן להוריד אותו מפה .

2. לאחר שפתחנו את הקובץ בפוטושופ נראה את הדבר הבא:

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

4. נשמור את התמונה

5. כעת נסתיר את כל השכבות + layer 4 שנמצא בתוך תיקית הכפתור ונציג רק את השכבות השייכות לכפתור (המלצה אנחנו מורידים גם את השכבה של הצל מפני שניצור אותו ידנית בפלאש).

6. נחתוך את התמונה באמצעות crop tool ונשמור את התמונה בפורמט PNG כדי שתהיה עם רקע שקוף.

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

7. לאחר שפתחנו את הפלאש נבחר בflash  file as2

8. נגדיר תחת propties את גודל המסמך ומהירות הFPS (פריימים לשנייה).

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

9. כעת נלחץ על file>import>import to libary ונייבא את התמונות ששמרנו בפוטושופ

10. לאחר ששמרנו את התמונות נלחץ על libary  ונגרור את bg לבמה הרקע הלבן שבמרכז התוכנה) ונמקם אותו על ציר x=0 , y=0

11. כעת ניצור layer חדש באמצעות לחיצה על האייקון new layers שמוקף בריבוע אדום

12. ננעל את Layer 1 כדי שלא נלחץ עליו בטעות באמצעות לחיצה על העיגול המוקף בריבוע אדום שבתמונה ולאחר מכן נלחץ על layer 2 כדי שהוא יהיה מסומן

13. כעת נגרור מהספריה (libary) את הכפתור שלנו ונמקם אותו באמצע למי שרוצה להיות מדוייק ניתן להשתמש ב align tool  וללחוץ על מה שמוקף באדום, שימו לב שהאייקון של הstage לחוץ גם הוא אחרת הוא לא ידע ביחס למה למרכז לכם את הכפתור.

14. נלחץ על הכפתור שנמצא על הבמה ולאחר מכן נלחץ על F8  במקלדת כדי ליצור Movie Clip חדש, ונלחץ O.K לאישור.

15. כעת יש ללחוץ לחיצה כפולה על הכפתור שבבמה, ולאחר מכן ניכנס לתוך הטיים-ליין (Time-line) של הmovie clip שיצרנו לכפתור ניתן לדעת אם אתם בטוח הטיים ליין של הכפתור אם מופיע לכם הסרגל כמו שבתמונה.

כעת ניצור את האנימציה של הכפתור

16.  נלחץ לחיצה אחת על הכפתור ונלחץ שוב על F8 רק שהפעם נגדיר את הכפתור בתור GRAPHIC. (דומה לסעיף 14).

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

18. כעת נסמן את פריים 15 ונלחץ על הכפתור שבבמה וניגש לחלונית propties  ונבחר ב-color effect  ונעשה כמו שבתמונה:

19. כעת נחזור לטיים ליין וניצור לעצמנו את האנימציה באמצעות לחיצה על פריים שבין הנקודות מקש ימני ובחירה ב- Create Classic Tween כמו שבתמונה.

20. כעת ניצור layer חדש ובפריים הראשון שלו בתוך actions  נשים את הקוד הבא:

// עצור
stop();
// הגדרת הפונקציה שבודקת מה מצב הכפתור האם יש עליו עכבר או לא והאם הוא צריך לרוץ קדימה או אחורה
this.onEnterFrame = function(){
if(rewind == true){
prevFrame();
}
}
// כאשר העכבר נכנס לשטח הכפתור תריץ את האנימציה
this.onRollOver = function(){
rewind = false;
play();
}
// כאשר העכבר יוצא משטח הכפתור תריץ את הפריימים אחורה
this.onRollOut = function(){
rewind = true;
}
// כפתור
this.onRelease = function(){
getURL("http://www.idomain.co.il","_blank");
}

stop();

21. כעת ניצור נלך הlayer 2 לפריים 15 נלחץ על F7 וניצור פריים ריק ונכניס בתוכו את הפקודה הבאה:

// עצור
stop();

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

ככה הליירים שלכם צריכים להיראות

זהו הכפתור שלכם מוכן תלחצו על ctrl+enter ותריצו את הסרטון

להורדת קובץ מקור

אשמח לפידבקים כדי לדעת כיצד לשפר את המדריכים בעתיד!

תודה חברים

אודות הכותב:

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

פוסטים נוספים - אתר אישי

אנשים שקראו כתבה זו התעניינו גם ב:



10 תגובות

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

    • אחלה מדריך אחי
      עזרת לי מאוד!

    • תודה רבה על התגובות

  • כל הכבוד!
    עשוי ומפורט יפה מאד.

  • אחלה מדריך, מפורט מאד. תודה!

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

  • נחמד,תודה =]

  • תודה רבה חברים,
    מקווה בקרוב לכתוב עוד כמה מדריכים כאלו.

  • תגיד, יש את זה גם בסרטון? זה פשוט נורא מסובך… פעם ראשונה

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

הגב

שוחחו איתי אונליין

אוגוסט 2017
א ב ג ד ה ו ש
« אוגוסט    
 12345
6789101112
13141516171819
20212223242526
2728293031