פלאש אפקט מגניב הדרכות!

תקציר

במדריך זה תוכלו ללמוד כיצד ליצור מעבר קוביית אפקט rollover על העכבר.

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

דרישות

Flash CS3 או Flash CS4.

הערה: המסך במדריך זה הוא עשה ב CS3 פלאש. זה עובד בדיוק אותו הדבר ב Flash CS4.

שלב 1 - התקן את השפעת רכיב

רכישת אפקט המעבר קיוב כאן . אנא עקוב אחר הוראות ההתקנה ולגרור את הרכיב רכיב לוח לספרייה של שלך. קובץ FLA.

שלב 2 - צור שכבה חדשה

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

שלב 3 - צור את הרקע

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

בחר את המסגרת הראשונה של שכבת "" BG ו לצייר צורה עם כלי המלבן על הבד. בחר את המלבן ולהתאים את הגדרות הצבע יש שיפוע נחמד (אתה יכול גם להשתמש בכל צבע אחר).

שלב 4 - יצירת כפתור

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

לחץ על המסגרת הראשונה בשכבה "btn" ו לצייר מלבן בגודל של הבד (צבע לא mater מאז הכפתור לא יהיה גלוי). בחר את המלבן ולהמיר אותו עם כפתור ללחוץ [F8] או קליק ימני על MovieClip -> "המרת סימן ...".

הגדר את שם הכפתור ל btn "" וודא כי סוג זה "כפתור".

לחץ פעמיים על הכפתור. עכשיו לגרור את keyframe הראשון "Up" את המסגרת האחרונה "להכות". פעולה זו תבטיח, כי הלחצן יהיה אינטראקטיבי, אבל לא נראה לעין.

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

שלב 5 - להתחיל ליצור movieclip

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

לחץ על המסגרת הראשונה על השכבה "img1". ייבוא תמונה עם הגודל של הבד על ידי לחיצה על [Ctrl-R בעיתונות] או "קובץ" - ייבוא> "" -> "יבוא על הבמה ...".

עכשיו להמיר את התמונה ל movieclip וגם שם זה "img1".

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

שלב 6 - צור MovieClip סוף

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

בחר את המסגרת הראשונה של השכבה "img2" (בסדר, שיום רע, אל תהסס לתקן את זה ) ו לצייר מלבן בגודל של הבד. אתה רוצה לוודא כי MovieClip סוף יש אותם ממדים כמו movieclip התחלה. Thats למה אתה הראשון לצייר צורה בלתי נראית בגודל זהה MovieClip התחלה.

בחר את הצורה להגדיר את הערך אלפא 0 (הצורה היא עדיין שם, אבל נראה).

המרת צורה [F8 MovieClip] הקש או לחץ לחיצה ימנית על MovieClip -> "המרת סימן ..." שם זה "img2".

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

ראש בחזרה אל ציר הזמן הראשי ולהגדיר את שם מופע של MovieClip כדי "img2".

שלב 7 - הוסף הגלגול ActionScript

בחר את שכבת "סקריפט" ופתח את "פעולות" החלון "Windows" - "פעולות>" או] F9 [העיתונות.

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

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 _onOver פונקציה (ה: MouseEvent) (
  myFilter var: CubeTransitionEffectAS3 CubeTransitionEffectAS3 חדש = ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

  r myFilter.init (img1, img2, 75, "L->", 2, "easeInOutCubic", false);
 )

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

בשורה 9 סוף סוף לך לאתחל את האפקט ( תיעוד של הפרמטר כאן ). חלק חשוב הם הפרמטר הראשון לשני. אתה מגדיר את המעבר מתחיל עם "img1" ומסתיים "img2".

ייצוא קובץ FLA שלך. כפי שאתה רואה, את רכיב השפעת עובד בצורה מושלמת עם רקע שקוף של "img2".

שלב 8 - מורכב יותר ActionScript

אישור, עם הקוד הקודם הגלגול עובד בסדר גמור. אבל מה אם אתה רוצה גם להיות פונקציה בהשקה כי מפלות את המעבר מן "img2" ל "img1"? כדי להשיג את זה אתה צריך קוד מורכב יותר. מחק את התסריט להוסיף את הדברים הבאים:

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);
 btn.addEventListener (MouseEvent.ROLL_OUT, _onOut);

 פועל var = false;
 הולך var = false;
 goOut var = false;

 _onOver פונקציה (ה: MouseEvent) (
  אם (! פועל) (
  _createAnimation ("בתוך");
  פועל = true;
  אחר) (
  הולך = false;
  goOut = true;
  )
 )

 _onOut פונקציה (ה: MouseEvent) (
  אם (! פועל) (
  _createAnimation ("החוצה");
  פועל = true;
  אחר) (
  הולך = true;
  goOut = false;
  )
 )

 _inAnimationDone פונקציה (e: Event) (
  e.target.removeFilter ();
  img1.visible = false;

  אם (נוסעים) (
  _createAnimation ("החוצה");
  אחר) (
  פועל = false;
  goOut = false;
  )
 )

 _outAnimationDone פונקציה (e: Event) (
  e.target.removeFilter ();
  img2.visible = false;

  אם (goOut) (
  _createAnimation ("בתוך");
  אחר) (
  פועל = false;
  הולך = false;
  )
 )

 _createAnimation הפונקציה (בימוי: מחרוזת) (
  myFilter var: CubeTransitionEffectAS3 CubeTransitionEffectAS3 חדש = ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

  אם (dir == "ב") (
  r myFilter.init (img1, img2, 24, "L->", 2, "easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
  אחר) אם (dir == "החוצה") (
  אני myFilter.init (img2, img1, 24, "r->", 2, "easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

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

המשתנים "הולך" ו "goOut" (קו 5 ו 6) משמשים למטרה זו. אתה מגדיר אותם כאשר הפונקציות "_onOver" ו "_onOut" (שורה 8, 18) מוצאים להורג. אבל רק אם var פועל נכון, אם זה שקר (קו 9 ו 19), אתה מתחיל את המעבר באופן מיידי (קו 10 ו 20).

הפונקציה "_createAnimation" (שורה 52) היא פונקציה העוזר שלך להתחיל את האנימציה תלוי בכיוון "dir" עברת כפרמטר.

שימו לב כי לאחר להתקשר removeFilter "" השיטה (קו 29 ו 41) גם MovieClip התחל את movieclip סוף מוגדרים גלויים (מתוך ההשפעה). Thats למה אתה מגדיר את הנראות movieclip - המעבר התחיל - קו (שווא 30 ו 42).

הורדה

לחץ כאן כדי להוריד את fla של מדריך זה. הערה:. FLA אינו כולל את מרכיב ההשפעה. כדי לעשות את העבודה fla, אתה צריך לרכוש את אפקט המעבר קיוב כאן .

כאן תוכלו למצוא וידאו הדרכה של כיצד ליישם את אפקט שונה .