Анимације са Адобе Едге Анимате

Корисници на вебу очекују да ће пронаћи спектакуларне дизајне и ценити анимације које доприносе тим дизајном, све док не губе време или негативно утичу на навигацију по страници.
Добро урађене анимације усредсређују пажњу на важне детаље, могу показати како апликација функционише и помоћи у навигацији ако испуњавају претходни захтев, где су многе од ових анимација направљене са Фласх а ако су имали потребан квалитет, корисник их је добро прихватио.
Али времена су се променила и као што су технологије такође развиле начин стварања анимација, ту долази Адобе Едге Анимате, алат који нам омогућава креирање анимација помоћу ХТМЛ5, ЦСС3 и ЈаваСцрипт без потребе за познавањем програмирања.
Горе наведено може звучати помало компликовано, како је могуће имати алат који ми помаже у стварању анимација у тим технологијама, без знања програмирања? Није толико компликовано као што се чини, али прво морамо знати алат и да морамо радити с њим, јер ћемо га покренути и примит ће нас почетни екран који би требао изгледати овако:

ЕНЛАРГЕ

На десној страни можемо видети неке везе за учење како направити неке анимације помоћу алата, а на десној страни за отварање датотеке или њену израду. Хајде да кликнемо на везу Створи ново и бићемо преусмерени у радни простор алата, за сада нећемо бринути о томе, већ ћемо сачувати наш пројекат да бисмо могли да испитамо структуру коју је алатка направила, да видимо како наша структура изгледа:

ЕНЛАРГЕ

Ако смо упознати са развојем веб апликација, можемо видети неке датотеке са познатим екстензијама, хајде да видимо функцију сваке од њих у оквиру пројекта Едге Анимате:
.ДатотекаОву датотеку алат користи за праћење нашег пројекта.
.Хтмл датотекаОва датотека описује веб страницу која користи код ХТМЛ, као и остале странице на Интернету.
.Јс датотекаОве датотеке садрже код ЈаваСцрипт за наш пројекат, који дефинише празну фазу за нашу анимацију и обавља друге неопходне задатке у пројектима Едге Анимате.
Као и ове датотеке, у фасцикли едге_инцлудес имамо два досијеа ЈаваСцрипт додатне, које су библиотеке за наш пројекат и референциране су у оквиру нашег ХТМЛ а његова функција је да врши радњу кретања као такву.
Када смо видели како је наш пројекат структуриран, време је да сазнамо области нашег радног простора, прво да видимо како то изгледа:

ЕНЛАРГЕ

Сваки панел је означен именом, где је Елементи, Својства (уреди) и Временска линија Имају алате и виџете за креирање анимација. Највећи панел је познат као позорница о Фаза и ту градимо анимацију, погледајмо поближе сваки од елемената у нашем радном простору:
ФазаОвде се приказују и анимирају графика и текст пројекта, има ограничења у свом распореду и омогућава нам да сакријемо елементе или их поставимо у њега. Додатно, када сачувамо наш пројекат Анимате брине о чувању текста и графике као ХТМЛ странице.
ЕлементиЕлементи су објекти које додајемо нашој сцени и као резултат тога појављују се на нашој посљедњој веб страници, гдје ти елементи могу бити илустрације, фотографије или чак текст.
Својства (уреди)Елементи имају својства која могу утицати на њихов положај, па чак и на изглед на сцени, а њима можемо управљати помоћу панела Својства (уреди).
Временска линијаОмогућава нам да водимо евиденцију о елементима и њиховим својствима током читавог нашег пројекта.
БиблиотекаОвде можемо водити евиденцију о ресурсима које увозимо у пројекат и омогућити лак приступ симболима у које верујемо Анимате.
АлатиПојављују се на врху радног простора. Користимо их за креирање, одабир и модификовање елемената на сцени, нема их много, али би нас изненадило да знамо колико можемо учинити с њима.
Пошто знамо како је наш алат дистрибуиран и упознати смо са концептима у њему, можемо се упустити у стварање прве анимације.
Да бисмо направили нашу прву анимацију, експериментисаћемо мало са прелазима на датој слици, да видимо кораке које треба следити:
1- Креираћемо нови пројекат са опцијом нова датотека у случају да смо затворили и радимо на разумевању структуре и елемената унутар алата. Када започнемо пројекат, наша фаза је празна, ово можемо променити у својствима фаза на левој страни екрана, за то притиснемо бело поље и изаберемо боју по жељи или у случају да имамо боју у хексадецималном запису можемо је укључити како видимо на следећој слици:

ЕНЛАРГЕ

2- У случају овог водича одабрали смо тамну боју тако да слику коју ћемо укључити у фаза истакнути. Сада да укључимо слику на коју идемо Архива и ми бирамо за увоз, приказат ће се истраживач датотека и одабиремо слику коју ћемо укључити:

ЕНЛАРГЕ

Важно је да у својствима нашег сценарија имамо прелив у преливање у сакривен од нашег фаза представља мали део нашег ХТМЛ -а, па ако не желимо да видимо елементе изван позорнице, важно је имати ову вредност за то својство. Такође можемо променити име наших елемената у одељку Својства (уреди), на овај начин можемо их боље идентификовати у нашем пројекту.
3- Сада идемо на наш Временска линија и проверавамо да ли је бројач репродукције на 0:00 за почетак са нашом анимацијом. Овде долази занимљив део и ту морамо посветити максималну пажњу, прво морамо да проверимо да ли је режим кључних кадрова притиска као и режим аутоматског преласка, коју можемо видети на следећој слици:

За израду анимација морамо користити функционалност Пребаци пин који се активира у дугмету поред режим аутоматског преласкаАктивирањем овог дугмета активирамо оквире или прелаз и он мора бити пропраћен жутим бројачем, јер на овај начин можемо извршити прелаз од толико секунди док не преместимо наш пин на исти ниво као и други бројач.
4- Да извршимо наше први прелаз притиснемо дугме Пребаци пин и узећемо други бројач и померићемо га 200 секунди, након тога премештамо слику на дно екрана, да видимо како изгледа:

ЕНЛАРГЕ

Као што видимо део означен плавом бојом у Временска линија представља прелаз који можемо прегледати ако притиснемо тастер за размак. Тада видимо да је прилично лако направити прелаз, али шта ако желимо да направимо други прелаз или више њих? За ово морамо померити своје Пин према другом бројачу, на овај начин указујемо на Анимате да затварамо процес прве транзиције и да можемо започети нову.
5- Урадићемо а други прелаз где ћемо овај пут смањити непрозирност наше слике, за то одабиремо нашу слику смањујући њену непрозирност на 46% и као што смо споменули премештамо Пин на другом бројачу и поновите кораке из тачке 4, да видимо:

ЕНЛАРГЕ

6- Коначно ћемо направити а трећи прелаз да употпунимо нашу анимацију. Као што већ знамо, померимо други бројач за неколико секунди, повучемо слику дијагонално улево и затворимо прелаз померањем Пин о другом бројачу:

ЕНЛАРГЕ

7- Чувамо свој рад и притиснемо тастер за размак да погледамо нашу анимацију, ако и даље нисмо задовољни можемо се кретати кроз прелазе који су представљени плавом бојом у нашем Временска линија и мењамо вредности или ако желимо врсту прелаза.
Пошто смо задовољни својим радом, време је да извршимо последњи корак, а то је да га прикажемо за прегледање у прегледачу, што је циљ за који радимо.
Постоје два начина за преглед нашег рада, први и најједноставнији се може урадити из алата, за то идемо на картицу Архива и ми бирамо Преглед у прегледачу, који ће одмах отворити анимацију у нашем подразумеваном веб прегледачу:

Други је мало компликованији ако немамо искуства у веб развоју, а то је узимање датотека и интеграција са нашом веб апликацијом. Важно је да будете веома опрезни при томе и укључите све датотеке које генерише Анимате у супротном анимација неће радити.
Овим смо завршили овај водич, где смо могли знати како то функционише Адобе Едге Анимате, сагледавајући његове најважније карактеристике и направивши нашу прву анимацију за неколико минута без потребе за једним редом кода, генеришући је са ХТМЛ5 И ЈаваСцрипт за имплементацију у било коју веб апликацију.