אפקט של rollover עם תמונה - שיעור 5

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

בואו נתחיל...

נשים כפתור על המסך
נגרור מלוח הכלים Push Button אל "סטקיה חדשה" שפתחנו (לא עברתי לענייני בישול.. זה השם העברי שהחלטתי לתת בקריצה ל-New Mainstack).

נייבא תמונה או כמה תמונות שהכנו
נבחר מתפריט "File" את "Import as control" ובתפריט המשנה שלו את "Image file..."

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

יבאו שתי תמונות - רצוי שתיים שנראות כמו שני מצבים שונים של אותה תמונה (רגיל ומואר למשל).

נפתח את ה-property inspector של הכפתור שיצרנו
דאבל קליק על הכפתור וייפתח ה-property inspector שלו.

נבחר במקום שבו מגדירים את האייקון של הכפתור
נבחר 'Icons & border' ב-property inspector.

נגדיר את האייקון שיופיע במצבים השונים של הכפתור (רגיל ובהצבעה עליו)
במצב 'icon' נציב את אחת התמונות
במצב 'hovericon' נציב את התמונה השנייה.

נלחץ על הכפתורים שמימין לשדות 'icon' ו-'hovericon' ונבחר ב-'Image Library' את 'This Stack'.
יופיעו לפנינו התמונות שצירפנו לסטקיה ואנו נבחר כל תמונה למצב שבו נרצה אותה.

נוסיף שקיפות לכפתור
נגדיר את הכפתור כשקוף, כלומר שלא יראו כפתור אלא רק תמונה:

1. ב-property inspector נבחר את הגדרות ה-Basic Properties.
2. נשנה את מידות הכפתור למידה הרצויה לנו.
3. בתפריט Style נגדיר שהכפתור יהיה Transparent.
4. נגדיר ששם הכפתור לא יופיע (פשוט מבטלים את האופציה 'showName').
5. נגדיר שהכפתור לא יואר בלחיצה  (ביטול האופציה ''autoHilite').
6. נבטל גם את האופציה 'sharedHilite'.

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

בהצלחה!



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