Цоол фласх ефекат Туториали!

Резиме

У овом туторијалу ћете научити како да креирате ефекат коцку транзиције на миша ролловер.

Овде коначни резултат:

Захтеви

Фласх ЦС3 или Фласх ЦС4.

Напомена: Снимак екрана у овом туториал је направљен у Фласх-у ЦС3. Она ради потпуно исто у Фласх ЦС4.

Корак 1 - Инсталација компоненте ефекат

Куповина транзиције ефекат овде коцке . Молимо Вас да следите упутства инсталације и превуците компоненте компоненте панела у библиотеку своје. фајл ФЛА.

Корак 2 - Креирање новог слоја

Да би ствари уредан требало би да направите нови слој на главној временској линији и да то име. Да ли то као што је приказано на слици испод.

Корак 3 - Креирање позадина

Сада можете направити позадину са преливом. Иако то неће бити потребно да се рад ефекат показује да је ефекат такође ради са транспарентним садржаја (више о томе касније).

Изаберите први оквир у "БГ" слој и нацртати облик правоугаоника са алата на платну. Изаберите правоугаоник и подесите подешавања боје да лепо градијент (можете да користите било који други боје).

Корак 4 - Направите дугме

Цубе ефекат би требало да реагује динамички корисницима миша држава (ролловер / роллоут). То је најбоље праксе НЕ да додате догађај слушалаца да се ефекат и уместо тога користите "празна" дугме.

Кликните на први оквир у слој "бтн" и нацртајте правоугаоник са величином платну (боја не материје, јер дугме неће бити видљива). Изаберите правоугаоник и конвертовати у дугме са [притисните тастер Ф8] или кликните десним тастером на МовиеЦлип -> "Конвертовање са симболом ...".

Поставите име на дугме "бтн" и уверите се да је тип "Буттон".

Двапут кликните на дугме. Сада превуците први Кљуцни оквир "Горе" до последњег оквира "Хит". Ово осигурава да ће бити интерактивни дугме, али не види.

Вратимо на главну временску линију и подесите име инстанца дугме "бтн".

Корак 5 - Направите почети Мовиецлип

Ефекат потребно имати два Мовиецлип где се визуелна информација преузета са. Сада ћете креирати Мовиецлип транзиције ће почети.

Кликните на првом оквир на слој "имг1". Увоз слике са величином платну притиском на [притисните Цтрл-Р] или "Филе" -> "Увоз" -> "Увоз на сцени ...".

Сада претворити ову слику да Мовиецлип и назовите га "имг1".

Поставите пример име управо креирали Мовиецлип на "имг1".

Корак 6 - Креирање Мовиецлип Крај

Крај Мовиецлип ће садржати текст уместо слике. Се ово постигло, мораћете ће вам нешто другачији приступ.

Изаберите први оквир слоја "имг2" (у реду, лош назив, слободно да се исправи да се ) И нацртајте правоугаоник величине платна. Желите да проверите да ли је крај Мовиецлип има исте димензије као и Старт Мовиецлип. Тај зашто сте први реми невидљиви облика исте величине као Почетак Мовиецлип.

Изаберите облик и поставите вредност алфа на 0 (облик је још увек тамо, али невидљив).

Конвертовање облик Мовиецлип [притисните] тастер Ф8 или десни клик на МовиеЦлип -> "Конвертовање са симболом ..." и назовите га "имг2".

Двапут кликните на управо креиране Мовиецлип, направите нови празан слој и ставити неки текст на ту новоформирану слој.

Враћати се на главну временску линију и подесите име инстанца Мовиецлип на "имг2".

Корак 7 - Додавање ролловер АцтионСцрипт

Изаберите слој "писма" и отворите "акције" прозор "Виндовс" -> "Акције" или [Ф9 притисните].

Ако желите да се транзиција на ролловер (и без резервне транзиције на роллоут) копирајте следеће редове у код прозора.

 бтн.аддЕвентЛистенер (МоусеЕвент.РОЛЛ_ОВЕР, _онОвер);

 Функција _онОвер (д: МоусеЕвент) (
  вар миФилтер: ЦубеТранситионЕффецтАС3 = нови ЦубеТранситионЕффецтАС3 ();
  миФилтер.моусеЕнаблед = фалсе;
  миФилтер.моусеЦхилдрен = фалсе;
  аддЦхилд (миФилтер);

  миФилтер.инит (имг1, имг2, 75, л-> р ", 2", еасеИнОутЦубиц ", фалсе);
 )

У првом реду додате ролловер догађај слушалаца на дугме. У функцији "_онОвер" (линија 3) морате прво креирати инстанцу ЦубеТранситионЕффецтАС3 пре него што искључите миша интерактивност компоненту (линија 4 и 5). Запамтите, дугме сте раније креирали се брине о миша ефеката, а ви не желите да се ефекат да се меша у то.

У складу 9 напокон можете да покрене ефекат ( документација параметра овде ). Важан део су прва два параметра. Можете да дефинишете да транзиција почиње са "имг1" и завршава са "имг2".

Извоз свој ФЛА фајл. Као што видите, ефекат компонента ради савршено са транспарентним позадини "имг2".

Корак 8 - Сложеније АцтионСцрипт

У реду, а уз претходну код ролловер ради сасвим добро. Али шта ако желе да имају функцију која обрће око изградње мреже у транзицији из "имг2" до "имг1"? Да би се постигао које су вам потребне сложеније код. Брисање скрипту и убаците следеће:

 бтн.аддЕвентЛистенер (МоусеЕвент.РОЛЛ_ОВЕР, _онОвер);
 бтн.аддЕвентЛистенер (МоусеЕвент.РОЛЛ_ОУТ, _онОут);

 вар покренут = фалсе;
 вар гоин = фалсе;
 вар гоОут = фалсе;

 Функција _онОвер (д: МоусеЕвент) (
  ако (трчање)! (
  _цреатеАниматион ("у");
  покренут = труе;
  Елсе ()
  гоин = фалсе;
  гоОут = труе;
  )
 )

 Функција _онОут (д: МоусеЕвент) (
  ако (трчање)! (
  _цреатеАниматион ("од");
  покренут = труе;
  Елсе ()
  гоин = труе;
  гоОут = фалсе;
  )
 )

 Функција _инАниматионДоне (е: Евент) (
  е.таргет.ремовеФилтер ();
  имг1.висибле = фалсе;

  ако (гоин) (
  _цреатеАниматион ("од");
  Елсе ()
  покренут = фалсе;
  гоОут = фалсе;
  )
 )

 Функција _оутАниматионДоне (е: Евент) (
  е.таргет.ремовеФилтер ();
  имг2.висибле = фалсе;

  ако (гоОут) (
  _цреатеАниматион ("у");
  Елсе ()
  покренут = фалсе;
  гоин = фалсе;
  )
 )

 Функција _цреатеАниматион (рез: Стринг) (
  вар миФилтер: ЦубеТранситионЕффецтАС3 = нови ЦубеТранситионЕффецтАС3 ();
  миФилтер.моусеЕнаблед = фалсе;
  миФилтер.моусеЦхилдрен = фалсе;
  аддЦхилд (миФилтер);

  иф (рез == "у") (
  миФилтер.инит (имг1, имг2, 24, л-> р ", 2", еасеИнОутЦубиц ", фалсе);
  миФилтер.аддЕвентЛистенер (ЦубеТранситионЕффецтАС3.АНИМАТИОН_ДОНЕ, _инАниматионДоне);
  ) Елсе иф (рез == "ван") (
  миФилтер.инит (имг2, имг1, 24, Р-> л, 2, "еасеИнОутЦубиц", фалсе);
  миФилтер.аддЕвентЛистенер (ЦубеТранситионЕффецтАС3.АНИМАТИОН_ДОНЕ, _оутАниматионДоне);
  )
 )

Важно је да знате, да не може преокренути правац транзиције током ефекат је покренут. Уместо тога, можете да "памти" акција корисника, сачекајте ефекат је учинио и применити реверс транзиције.

Променљиве "иде" и "гоОут" (линија 5 и 6) се користе за ту сврху. Сте поставили њима када функција "_онОвер" и "_онОут" (линије 8 и 18) су погубљени. Али само ако раде вар је истина, ако је лажна (линија 9 и 19), почнете прелаз одмах (линије 10 и 20).

Функција "_цреатеАниматион" (линија 52) је ваша функција помоћник почетак анимација у зависности од правца "дир" Да ли прошао као параметар.

Обратите пажњу на то, након позива "ремовеФилтер" метод (линије 29 и 41) и Старт Мовиецлип и крај Мовиецлип су постављени на видљиве (од ефекта). Тај зашто сте поставили Мовиецлип видљивости - транзиција је почела са - на лажне (линије 30 и 42).

Довнлоад

Кликните овде да бисте преузели ФЛА у овом упутству. Напомена:. ФЛА не обухвата ефекат компоненту. Да би рад ФЛА, морате да купите транзиције ефекат овде коцке .

Овде можете пронаћи видео туториал о томе како имплементирати другачији ефекат .