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

סיכום

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

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

דרישות

Flash CS3 או פלאש CS4.

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

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

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

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

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

שלב 3 - יצירת רקע

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

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

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

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

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

הגדר את שם הלחצן btn "" וודא את סוג הוא "לחצן".

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

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

שלב 5 - יצירת להתחיל Movieclip

השפעת צורכי שני Movieclip שבו Informations חזותית לקוחים. כעת תוכל ליצור את Movieclip המעבר יתחיל עם.

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

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

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

שלב 6 - יצירת סוף Movieclip

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

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

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

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

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

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

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

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

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

 (btn.addEventListener MouseEvent.ROLL_OVER, _onOver);

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

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

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

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

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

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

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

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

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

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

 _onOut הפונקציה (E: MouseEvent) (
  אם (! פועל) (
  _createAnimation ( "החוצה");
  פועל = true;
  אחר) (
  goin = 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;
  goin = false;
  )
 )

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

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

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

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

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

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

להוריד

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

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