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

תוצאה סופית:

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

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

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

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

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

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

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 תגובות

• 
  נווה 2 בפברואר 2011 בשעה 21:26

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

  הגב
  • 
    תמיר 2 בפברואר 2011 בשעה 21:37

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

    הגב
  • 
    avi cohen 2 בפברואר 2011 בשעה 23:16

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

    הגב
• 
  קובי 3 בפברואר 2011 בשעה 0:19

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

  הגב
• 
  עופר 3 בפברואר 2011 בשעה 0:20

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

  הגב
• 
  יעל 3 בפברואר 2011 בשעה 0:49

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

  הגב
• 
  דור 5 בפברואר 2011 בשעה 21:28

  נחמד,תודה =]

  הגב
• 
  avi cohen 6 בפברואר 2011 בשעה 1:31

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

  הגב
• 
  ירין כהן 13 באוגוסט 2012 בשעה 14:33

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

  הגב
  • 
    אבי כהן 14 באוגוסט 2012 בשעה 0:10

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

    הגב