עמוד הבית > בלוג > עיצוב וגרפיקה > יצירת כפתור שקוף לבאנר
 
 
 
îàîøéí

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

התוצאה הסופית

Get Adobe Flash player

רמת ידע בפלאש: קל | רמת תכנות: בינוני AS3

התאוריה

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

הביצוע

1. נוסיף שכבה חדשה מעל כל שכבות האנימציה שכבר יש לנו בבאנר וניתן לה את השם btn כקיצור של button.

2. בשכבה שיצרנו נצייר מלבן בעזרת כלי המלבן במקום כלשהו על הבמה.

3. נכסה את כל הבאנר במלבן.
נלחץ על המלבן שציירנו ובעזרת חלונית ה- Align – נסמן תחילה את To Stage כדי שתהיה לנו נקודת ייחוס ליישור והתאמת גודל המלבן לגודל הבאנר, נלחץ באופציה הראשונה מימין ב Match Size כדי להתאים את גודל המלבן לגודל הבמה כולה, אח"כ נלחץ פעם אחת על היישור האמצעי והמרכזי ב-Align.
עכשיו יש לנו מלבן ממורכז ומיושר שמכסה את כל הבאנר.

4. נהפוך את המלבן שלנו לסימבול מסוג כפתור.
כאשר המלבן מסומן נלחץ בתפריט על Modify> Convert To Symbol.

5. בחלון שנפתח ניתן לסימבול שלנו את השם button ונבחר ב Type את האופציה Button.

6. ניתן שם למופע של הסימבול.
בחלון המאפיינים, Properties, נקליד בשדה instance name את השם: btn1.

7. נהפוך את הכפתור לשקוף.
ניכנס לתוך הכפתור בעזרת קליק כפול על מופע הסימבול שלנו, נגרור את הפריים היחיד מ-Up ל-Hit כך בעצם גרמנו לכך שהכפתור יהיה שקוף ורק אזור ה-Hit, שאינו מוצג בתוצאה הסופית, יהיה פעיל. נלחץ על Scene 1 כדי לחזור לבמה.

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

8. ניצור שכבה חדשה וניתן לה את השם as כקיצור ל-actionScript.

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

10. בחלונית שתפתח לנו נעתיק ונדביק את הקוד הבא:

import flash.events.MouseEvent;
function getLink(e:MouseEvent)
{

var link1:URLRequest =
new URLRequest('http://www.bluedot.co.il');
navigateToURL(link1, "_blank");
}
btn1.addEventListener(MouseEvent.MOUSE_UP,getLink);

11. נלחץ על CTRL+ENTER  כדי להפעיל ולצפות.

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

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

ראיתם, פשוט קל ומאוד שימושי.

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

 
 
ואם בא לכם לדבר על זה:
 
 
 

 
  • בלוג
     

     
  • צרו קשר

    רוצים לשמוע עוד? להתייעץ? לברר? להצטרף?
    נשמח לענות על כל שאלה!
    בטלפון 03-5594746 ובתיבת צרו קשר זו:

     אני מעוניינ/ת לקבל דיוור במייל

     
  • בלודוט בפייסבוק

    בלודוט ניוזלטר

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



    אני מאשר/ת קבלת דיוור