Резюме

У цьому підручнику ви дізнаєтеся, як створити ефект куб перехід на мишу перекидання.

Ось кінцевий результат:


Потреби

Flash CS3 або Flash CS4.

Примітка: скріншот в цьому підручнику виконаний в Flash CS3. Вона працює точно так само в Flash CS4.

Крок 1 - Установка компонентів ефекту

Купуйте Вплив Cube перехідний тут. Будь ласка, дотримуйтесь інструкцій установці і перетягніть компонент з компонентів панелі у вашій бібліотеці. FLA файл.

Перетягніть компонент у бібліотеку

Крок 2 - Створення нового шару

Щоб зберегти порядок речей ви повинні створити новий шар на основні терміни і дати йому ім'я. Зробіть це, як показано на скріншоті нижче.

Створити шар на основні терміни

Крок 3 - Створення фону

Ви створюєте фон з градієнтом. Хоча це не є необхідним, щоб зробити роботу ефекту це показує, що ефект також працює з прозорим змістом (докладніше про це пізніше).

Виберіть перший кадр в "БГ" шар і зробити форму прямокутника з інструментом на полотні. Виділіть прямокутник і скоригувати настройки кольору мають приємний градієнт (ви також можете використовувати будь-який інший колір).

Створення фону форми

Установки кольору градієнт

Крок 4 - Створення кнопки

Куба ефект повинен реагувати динамічне держава користувачам миша (перекидання / сувою). Це кращі практики не додавати події слухач сам ефект і замість цього використовувати кнопку "порожнім".

Натисніть на перший кадр в шарі "Btn" і намалюйте прямокутник з розміром полотно (колір не так-матер кнопка не буде видно). Виділіть прямокутник і перетворити його на кнопку з [натиснути F8] або клацніть правою кнопкою на MovieClip -> "Перетворити в символ ...".

Перетворення форми на кнопці

Встановити ім'я кнопки на "Btn" і переконайтеся, що тип "кнопка".

Поставити ім'я кнопки

Двічі клацніть на кнопці. Тепер перетягніть перший кадр "Вгору" до останнього кадру "Hit". Це гарантує, що кнопка буде інтерактивною, але не видно.

Зміна ключових кадрів всередині кнопки

Назад до основних терміни і встановити наприклад ім'я кнопки на "Btn".

Встановити ім'я екземпляра кнопки

Крок 5 - Створення початку Movieclip

Ефект потреби мати два Movieclip де візуальна інформація взяті з. Тепер ви будете створити Movieclip перехід почнеться з.

Натисніть на перший кадр на шарі "img1". Імпорт зображень з розміром полотно, натиснувши [натисніть Ctrl-R] або "Файл" -> "Імпорт" -> "Імпортувати на сцену ...".

Імпорт зображень

Тепер перетворити цей образ на ролику, так і назвіть його "img1".

Перетворення зображення в Movieclip

Встановити ім'я Movieclip

Встановити ім'я екземпляра тільки що створений Movieclip на "img1".

Встановити ім'я екземпляра

Крок 6 - Створення Кінець Movieclip

Кінець Movieclip буде містити текст, а не зображення. Цього вам буде потрібно дещо інший підхід.

Виберіть перший кадр шару "img2" (ОК, поганий іменування, не соромтеся, правильно, що :) ) І намалюйте прямокутник розміром полотна. Ви хочете, щоб переконатися, що кінець Movieclip має ті ж розміри, як і початок роликах. Thats, чому ви перший розіграш невидимою формою такого ж розміру, як початок роликах.

Намалюйте форму

Вибір форми і встановіть значення альфа 0 (за формою все ще там, але невидимі).

Поставити альфа-форму

Перетворення форму Movieclip [натиснути F8] або клацніть правою кнопкою на MovieClip -> "Перетворити в символ ..." і назвіть його "img2".

Перетворити на Movieclip

Двічі клацніть на тільки що створену мувікліпі, створіть новий порожній шар і покласти на який-небудь текст, що новостворений шар.

Додати текст Movieclip

Повертайтеся до основних терміни і встановити ім'я екземпляра мувікліпа в "img2".

Встановити ім'я екземпляра

Крок 7 - Додати перекидання ActionScript

Виберіть шар "сценарій" і відкрийте "Дії" вікна "Windows" -> "Дії" або [натиснути F9].

Відкрите вікно ActionScript

Якщо ви просто хочете, щоб перехід від перекидання (а не тому перехід на свиті) скопіювати наступні рядки у вікно коду. 

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 Функція _onOver (E: MouseEvent) (
  VAR MyFilter: 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

ОК, з попереднім кодексом перекидання працює прекрасно. Але що, якщо ви також хочете мати функцію, що розгортання перевертає перехід від "img2" до "img1"? Для досягнення цієї мети потрібно більш складний код. Видалити сценарій і вставити наступний текст: 

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

 VAR Running = false;
 VAR Goin = false;
 VAR goOut = false;

 Функція _onOver (E: MouseEvent) (
  IF (! Running) (
  _createAnimation ( "В");
  Running = true;
  () Інше
  Goin = false;
  goOut = true;
  )
 )

 Функція _onOut (E: MouseEvent) (
  IF (! Running) (
  _createAnimation ( "Out");
  Running = true;
  () Інше
  Goin = true;
  goOut = false;
  )
 )

 Функція _inAnimationDone (E: Event) (
  e.target.removeFilter ();
  img1.visible = false;

  якщо (ГОІН) (
  _createAnimation ( "Out");
  () Інше
  Running = false;
  goOut = false;
  )
 )

 Функція _outAnimationDone (E: Event) (
  e.target.removeFilter ();
  img2.visible = false;

  якщо (goOut) (
  _createAnimation ( "В");
  () Інше
  Running = false;
  Goin = false;
  )
 )

 Функція _createAnimation (Dir: string) (
  VAR MyFilter: 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 == "Out") (
  myFilter.init (img2, img1, 24, "R-> L", 2 ", easeInOutCubic", FALSE);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

Важливо знати, що ви не можете змінити напрямок переходу при впливі працює. Замість цього, ви можете "запам'ятовувати" дії користувача, почекати, поки ефекту зробили і застосовувати реверс з перехідною економікою.

Змінні "Goin" і "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 роботу, вам необхідно придбати Вплив Cube перехідний тут.

Тут ви можете знайти відео-підручник того, як здійснювати інші наслідки.

  • Соціальні закладки