Готин ефект уроци Flash!

Обобщение

В този урок ще научите как да създадете ефект куб преход на мишката преобръщане.

Ето крайния резултат:

Изисквания

Flash CS3 или Flash CS4.

Забележка: на екрана в този урок е направено в Flash CS3. Тя работи едни и същи във Flash CS4.

Стъпка 1 - Инсталиране на компонент ефект

Покупка на прехода Cube Ефект тук . Моля, следвайте инструкциите инсталирате и плъзнете компонент от компонент панел в библиотеката на вашия. файл FLA.

Стъпка 2 - Създаване на нов слой

За да запазите нещата подредено трябва да създадете нов слой върху основните дати и да му дадете име. Правете това, както е показано на снимката по-долу.

Стъпка 3 - Създаване на заден план

Сега можете да създадете фон с наклон. Въпреки че това не е необходимо да се работи ефект, който показва, че ефектът също работи с прозрачни съдържание (повече за това по-късно).

Изберете първата рамка, в "БГ" слой и начертайте фигура с Rectangle Tool върху платното. Изберете правоъгълник и коригиране на цвета настройки, за да имат хубава градиент (можете да използвате всеки друг цвят).

Стъпка 4 - Създаване на бутон

Ефектът куб следва да реагира динамично на потребителите мишката състояние (разсрочване / внедряването). Най-добре е практика не да се добави слушател на събитието към самия ефект и вместо да използвате "празни" бутона.

Щракнете върху първата рамка в слоя "btn" и начертайте правоъгълник с размера на платното (цветът няма Матер, тъй като бутоните няма да се вижда). Изберете правоъгълник и да го превърнете в един бутон с [натиснете F8] или десния бутон на MovieClip -> "Преобразуване в символ ...".

Задайте името на бутона, за да "btn" и се уверете, че типът е "бутон".

Кликнете два пъти върху бутона. Сега плъзнете първото keyframe "Up" на последния кадър "Хит". Това гарантира, че бутонът ще бъде интерактивен, но не се вижда.

Върни се към основните дати и настроите например името на бутона, за да "btn".

Стъпка 5 - Създаване началото Movieclip

Ефектът се нуждае от две са Movieclip в което се извършва визуално информации от. Сега ще създаде Movieclip преходът ще започнете.

Кликнете на първия кадър на слоя "img1". Внос на изображение с размери на платното, като натиснете [Натиснете Ctrl-R] или "Файл" -> "Внос" -> "Внасяне на сцената ...".

Сега конвертирате тази снимка на Movieclip и име "img1".

Задайте например името на току-що създадената Movieclip към "img1".

Стъпка 6 - Създаване на Movieclip Крайна

Краят Movieclip ще съдържа текст вместо изображения. В постигането на това ще ви трябва малко по-различен подход.

Изберете първия кадър на слоя "img2" (добре, лошо имена, не се колебайте да се коригира тази ) И начертайте правоъгълник с размери на платното. Вие искате да сте сигурни, че краят Movieclip е със същите размери като "Старт Movieclip. Този защо за първи път се направи невидима форма със същия размер като "Старт Movieclip.

Изберете формат и да зададете алфа стойност 0 (формата е все още там, но невидима).

Конвертиране на формата на] Movieclip натиснете [F8 или прав щракване на MovieClip -> "Преобразуване в символ ..." и наименованието му "img2".

Кликнете два пъти върху току-що създадената Movieclip, да създадете нов празен слой и се въведе някакъв текст, че новосъздадения слой.

Ръководителят обратно към основните дати и настроите например името на Movieclip към "img2".

Стъпка 7 - Добавяне на преобръщане ActionScript

Изберете слой "скрипт" и отворете "действия" прозорец с "Windows" -> "действия" или [натиснете F9].

Ако просто искате да имате един преход на преобръщане (и не обратно прехода на внедряването) копирайте следните редове в кода на прозореца.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 функция _onOver (E: MouseEvent) (
  Var myFilter: CubeTransitionEffectAS3 = нови CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = фалшиви;
  myFilter.mouseChildren = фалшиви;
  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 тичане = фалшиви;
 Var става = фалшиви;
 Var goOut = фалшиви;

 функция _onOver (E: MouseEvent) (
  ако (! движение) (
  _createAnimation ("от");
  тичане = вярно;
  ) (Останало
  Goin = фалшиви;
  goOut = вярно;
  )
 )

 функция _onOut (E: MouseEvent) (
  ако (! движение) (
  _createAnimation ("Out");
  тичане = вярно;
  ) (Останало
  Goin = вярно;
  goOut = фалшиви;
  )
 )

 функция _inAnimationDone (E: Събития) (
  e.target.removeFilter ();
  img1.visible = фалшиви;

  ако (става) (
  _createAnimation ("Out");
  ) (Останало
  тичане = фалшиви;
  goOut = фалшиви;
  )
 )

 функция _outAnimationDone (E: Събития) (
  e.target.removeFilter ();
  img2.visible = фалшиви;

  ако (goOut) (
  _createAnimation ("от");
  ) (Останало
  тичане = фалшиви;
  Goin = фалшиви;
  )
 )

 функция _createAnimation (реж.: String) (
  Var myFilter: CubeTransitionEffectAS3 = нови CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = фалшиви;
  myFilter.mouseChildren = фалшиви;
  addChild (myFilter);

  ако (реж. == "в") (
  myFilter.init (img1, img2, 24, "L-> R", 2 "easeInOutCubic", FALSE);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
  ) Иначе ако (реж. == "Out") (
  myFilter.init (img2, img1, 24, "R-> L", 2 "easeInOutCubic", FALSE);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

Важно е да знаете, че не можете да обърне посоката на прехода по време на действие работи. Вместо това можете да "помни" действията на потребителя, изчакайте, докато ефектът е направено и да се прилага ревер преход.

Променливата "става" и "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, трябва да се закупи на прехода Cube Ефект тук .

Тук можете да намерите видео настойнически за това как да се приложи различен ефект .