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

Резюме

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

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

Изисквания

Flash CS3 или Flash CS4.

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

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

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

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

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

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

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

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

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

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

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

Задайте име на бутона, за да "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 -> "Convert да Символ ..." и го наречете "img2".

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

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

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

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

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

 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 тичане = FALSE;
 VAR Goin = FALSE;
 VAR goOut = FALSE;

 функция _onOver (E: MouseEvent) (
  ако (! тичане) (
  _createAnimation ( "в");
  тичане = вярно;
  иначе ()
  Goin = FALSE;
  goOut = вярно;
  )
 )

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

 функция _inAnimationDone (E: Event) (
  e.target.removeFilter ();
  img1.visible = FALSE;

  IF (става) (
  _createAnimation ( "Out");
  иначе ()
  тичане = FALSE;
  goOut = FALSE;
  )
 )

 функция _outAnimationDone (E: Event) (
  e.target.removeFilter ();
  img2.visible = FALSE;

  IF (goOut) (
  _createAnimation ( "в");
  иначе ()
  тичане = FALSE;
  Goin = FALSE;
  )
 )

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

  IF (реж. == "в") (
  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 Ефект тук.

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