Суммары

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

Овде крајњи резултат:


Захтеви

Фласх ЦС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).

Коначни резултат

Преузети

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

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

  • Деонички / Маркер