אשכול: מדריך-כפתורים משוכללים עם חיבור לעיצוב, עם קול

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


תוכן עניינים של הפרקים:
*התחלה
*אנימציות
*יצירת הקוד
*הכנסת הצליל לכפתור
*שיכפול הכפתורים בלי לעשות את העבודה שוב ובלי לבזבז עוד משקל ועוד מובי קליפים
*חיבור לעיצוב ולדף html

טוב נתחיל

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

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

עכשיו לכו לfile>import>import to library ופתחו את התמונה של הכפתורים.
עכשיו תגררו אותה מlibrary (סיפריה בעברית) (אם אתם לא יודעים איפה זה זה אמור להיות בצד ימין איפה שהחלונות שם ואם זה לא מופיע לכו לwindow>library).
תגררו מהסיפריה לבמה הראשית ע"י לחיצה על המקש של העכבר בלי לעזוב.
כאת תמקמו בדיוק בגבולות של הבמה הראשית את התמונה.

טוב עכשיו מתחילה העבודה עצמה - האנימציות

פתחו לייר חדש מעל התמונה ותכינו כפתור בלי מסגרת באחד הצבעים בדיוק בגודל של הכפתור בתמונה, תמקמו אותו בדיוק מעליו ותעשו לו MC (לחיצה על F8, בחירה של movie clip ובחירת שם-לא חובה).
כעת כנסו לMC שלכם (יש את הסיפריה שם הוא מופיע לחצו פעמיים) ועל הפריים הראשון היחיד שיש רשמו את הפקודה הבאה ב-action script (נמצא גם למטה בחלון מעל ה-properties):


CODE stop();




עכשיו פתחו לייר חדש ועליו תעשו אנימציה בעזרת הפריימים שתעבור על הכפתור. תתחילו מפריים 2!
למשל אם אתם רוצים הבהוב לבן שקוף אתם עושים מפריים 2 את הצורה של הכפתור בלבן, עושים אותה שקופה על איזה 2 אלפה(בעזרת הכולור מיקס שנמצא חלון בצד ימין) ואז אחרי איזה כמה פריימים לעשות F6 ללחוץ על הלבן ולהשים אותו על איזה 50 אלפה. עכשיו אחרי כמה פריימים לעשות שוב F6 ולהחזיר את השקיפות למה שהיה בהתחלת האנימציה למשל במקרה הזה 2. בפריים שיצרנו הרגע עם הF6 תשימו גם בAS את הקוד הבא:


CODE gotoAndPlay(2);




זה אומר שכל פעם שהוא מגיע הוא עובר אוטומטית לפריים 2.
עכשיו שהוא חוזר אחורה זה יהבהב בלי סוף.
אל תשכחו כדיי ליצור אנימציות כאלה של שקפות או של פס עובר צריכים בין הפריימי מפתח (אלא עם הנקודה השחורה) שאתם רוצים שיהיה אנימציה לעשות tween בproperties ולשנות אותו לshape

כעת פריים 1 אחרי סוף האנימציה שעשינו הרגע תצרו פריים חדש ותעשו עליו F6 (נגיד שזה יצא פריים 30) ותעשו שקיפות בערך באמצע נגיד 30 אלפה. עכשיו כמה פריימים אחרי זה תעשו שוב F6 ותורידו את האלפה ל0.

זכרו את מה שעשינו למעלה^ ואם לא הבנתם תבינו בהמשך.

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

יצירת הקוד:

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

לכו לבמה הראשית (מ שלא יודע איך יש לכם מעל הפריימים את האייקונים של הבמה הראשית (הראשון) ושל הMC אז תלחצו על הבמה הראשית (הראשון)), לחצו על הכפתור שיצרנו פעם 1 (אם תלחצו פעמיים זה יכנס למובי קליף), תוודאו שהוא מסומן במן מסגרת כחולה דקה כזאת, ושימו לו את הקוד הבא בAS:


CODE on (rollOver) {gotoAndPlay(2);}
on (rollOut) {gotoAndPlay(30);}
on (release) {getURL("http://www.isrart.net","_self");}




מה זה אומר? אני יסביר עכשיו.

on (rollOver) {gotoAndPlay(2);}
^השורה הראשונה^

זה אומר כשאתה עובר על העצם שעליו הקוד עם העכבר (rollOver) זה מגיע לך לפריים 2 ({gotoAndPlay(2);}).
בגלל זה גם אמרתי שנתחיל את האנימציה מפרים 2. בבמה הראשית אין פריים 2 ולכן הוא קופץ למובי קליף. אם אתם עושים פריים 2 במובי קליף מכל סיבה שהיאא שלא קשורה פה תצטרכו לצייר את השם שזה יעבור אליו, ואם אתם עושים אחרי זה עוד מובי קליףעם פריים 2 אבל אחרי זה אז הוא ישאר ככה.


on (rollOut) {gotoAndPlay(30);}
^שורה שנייה^

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


CODE כעת פריים 1 אחרי סוף האנימציה שעשינו הרגע תצרו פריים חדש ותעשו עליו F6 (נגיד שזה יצא פריים 30) ותעשו שקיפות בערך באמצע נגיד 30 אלפה. עכשיו כמה פריימים אחרי זה תעשו שוב F6 ותורידו את האלפה ל0.



אז זה בעצם הפריים בו האנימציה שהעכבר יורד מתחילה. ואם תשימו לב זה באמת יורד ל0 לרגיל.
אם זה היה יוצא לכם פריים אחר לא 30 הייתם רושמים את המספר שזה יצא לכם ולא 30


on (release) {getURL("http://www.isrart.net","_self");}
^השורה השלישית^

זה בעצם הקישור.
זה אמר כשאתה לוחץ על זה ועוזב את הלחצן (release) זה ישלח אותך לכתובת (getURL) לאתר ישרארט (http://www.isrart.net) וזה יפתח באותו חלון (self_).
בדרך כלל כפתורים באתר אתם רוצים שיפתחו את הקישור באותו דף כאילו יעברו ולא בדף חדש. אם אתם רוצים בדף חדש תורידו את הקטע אחרי ה" של הכתובת.

במקום האתר ישרארט כמובן תשימו את הכתובת של הדף שאתם רוצים שיפתח בכפתור

שימו לב לסימנים החשובים שבלעדיהם הקוד לא יצא!


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

הכנסת הצליל לכפתור:

כמובן שבכפתור הכי מגניב שאתם עוברים עליו באותו רגע יש צליל כזה.

לחצו file>import>import to library ובחרו את הצליל שאתם רוצים. כעת הוא בספרייה.
עכשיו לכו לMC של הכפתורים איפה שהאנימציות, ולכו ללייר 2 ולפריים 2. כעת תגררו את הקובץ מוזיקה מהספריה לבמה בפריים 2, תוודאו שעל הפריימים יהיה סימן כזה של קו, וזהו, יש לכם צליל!

שיכפול הכפתורים בלי לעשות את העבודה שוב ובלי לבזבז עוד משקל ועוד מובי קליפים.

הכותרת אומרת הכל.

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

חיבור לעיצוב ולדף HTML

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

תשמרו את הכפתורים כקובץ SWF, עכשיו קחו את הקובץ לתיקיה שבו נמצאים התמונות של הסלייסים ששם גם נמצאת התמונה של הסלייס של הכפתורים.
כעת הוא נמצא שם ואז לכו לדף HTML שבא עם התיקיה, חפשו את השם של התמונה של הסלייס של הכפתורים, ושנו את זה.
אם נגיד זה היה ככה:
ss.jpg והקובץ פלאש הוא caf.swf אז תחליפו את השם כולל הסיומת שיצא לכם caf.swf.

כעת הוא מחובר לעיצוב ממוקם ונמצא בדף HTML.

בצהלחה!

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

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

נקווה שנסתדר איתו