Анимации с Adobe Edge Animate

Потребителите в мрежата очакват да намерят ефектни дизайни и да оценят анимациите, които допринасят за тези дизайни, стига да не губят време или да влияят негативно на навигацията на страницата.
Добре направените анимации фокусират вниманието върху важни детайли, могат да покажат как работи приложението и да подпомогнат навигацията, ако отговарят на предишното изискване, където много от тези анимации са направени с Светкавица и ако имаха необходимото качество, бяха добре приети от потребителя.
Но времената се промениха и точно както технологиите развиха и начина на създаване на анимации, това е мястото, където идва Adobe Edge Animate, инструмент, който ни позволява да създаваме анимации с HTML5, CSS3 и JavaScript без нужда от познания по програмиране.
Горното може да звучи малко сложно, как е възможно да имам инструмент, който да ми помага да създавам анимации в тези технологии, без познания за програмиране? Не е толкова сложно, колкото изглежда, но първо трябва да знаем инструмента и че трябва да работим с него, за това ще го стартираме и ще бъдем приети от началния екран, който трябва да изглежда така:

Увеличете

От дясната страна можем да видим някои връзки, за да научите как да правите някои анимации с инструмента, а от дясната страна връзки, за да отворите файл или да го създадете. Нека кликнете върху връзката Създай нов и ще бъдем отведени в работното пространство на инструмента, засега няма да се притесняваме за това, но ще запазим нашия проект, за да можем да разгледаме структурата, създадена от инструмента, нека видим как изглежда нашата структура:

Увеличете

Ако сме запознати с разработването на уеб приложения, можем да видим някои файлове с известни разширения, нека видим функцията на всеки от тях в рамките на проект на Edge Animate:
.ФайлТози файл се използва от инструмента за проследяване на нашия проект.
.Html файлТози файл описва уеб страница, която използва код HTML, както и останалите страници в Интернет.
.Js файлТези файлове съдържат код JavaScript за нашия проект, който определя празен етап за нашата анимация и изпълнява други необходими задачи в проектите на Edge Animate.
Както и тези файлове, в папката edge_includes имаме два файла JavaScript допълнителни, които са библиотеки за нашия проект и са посочени в нашия HTML и неговата функция е да изпълнява действието на движението като такова.
След като видяхме как е структуриран нашият проект, е време да се запознаем с областите на нашето работно пространство, първо нека видим как изглежда:

Увеличете

Всеки панел е идентифициран по име, където Елементи, Свойства (редактиране) и Хронология Те имат инструменти и приспособления за създаване на анимации. Най -големият панел е известен като етап o сцена и там изграждаме анимацията, нека разгледаме по -отблизо всеки от елементите в нашето работно пространство:
сценаТук графиките и текстът на проекта се показват и анимират, той има ограничения в подреждането си и ни позволява да скрием елементи или да ги позиционираме в него. Освен това, когато запазваме нашия проект Анимация се грижи за запазването на текста и графиките като HTML страница.
ЕлементиЕлементите са обекти, които добавяме към нашата сцена и в резултат те се появяват на последната ни уеб страница, където тези елементи могат да бъдат илюстрации, фотографии или дори текст.
Свойства (редактиране)Елементите имат свойства, които могат да повлияят на тяхното положение и дори на външния вид на сцената и можем да ги управляваме с помощта на панела на Свойства (редактиране).
ХронологияТя ни позволява да водим запис на елементите и техните свойства по време на нашия проект.
БиблиотекаТук можем да водим запис на ресурсите, които импортираме в проекта, и да осигурим лесен достъп до символите, в които вярваме Анимирайте.
ИнструментиТе се появяват в горната част на работното пространство. Използваме ги за създаване, подбор и промяна на елементи на сцената, няма много, но бихме се изненадали да разберем колко можем да направим с тях.
Тъй като знаем как е разпределен нашия инструмент и сме запознати с концепциите в него, можем да се осмелим да създадем първата си анимация.
За да създадем първата си анимация, ще експериментираме малко с преходите в дадено изображение, нека видим стъпките, които трябва да следваме:
1- Ще създадем нов проект с опция нов файл в случай, че сме затворили, в който работим, за да разберем структурата и елементите в инструмента. Когато стартираме проект, нашият етап е празен, можем да променим това в свойствата на сцена от лявата страна на екрана, за това натискаме бялото поле и избираме цвят по наше предпочитание или в случай, че имаме цвят в шестнадесетична нотация, можем да го включим, както виждаме на следното изображение:

Увеличете

2- В случая с този урок сме избрали тъмен цвят, така че изображението, което ще включим в сцена подчертайте. Сега, за да включим изображение, към което отиваме Архив и ние избираме да внасям, ще се покаже файловият изследовател и ние избираме изображението, което да включва:

Увеличете

Важно е, че в свойствата на нашия сценарий имаме преливането u препълване в скрит тъй като нашите сцена той представя малка част от целия ни HTML, така че ако не искаме да виждаме елементи извън сцената, важно е да имаме тази стойност за това свойство. Можем също да променим името на нашите елементи в раздела на Свойства (редактиране), по този начин можем по -добре да ги идентифицираме в нашия проект.
3- Сега отиваме при нашите Хронология и проверяваме дали броячът за възпроизвеждане е на 0:00 за да започнем с нашата анимация. Тук идва интересната част и тук трябва да обърнем максимално внимание, първо трябва да проверим дали режим на ключови кадри се натиска, както и режим на автоматичен преход, което можем да видим на следното изображение:

За да направим нашите анимации, трябва да използваме функционалността на Превключване на щифта който се активира в бутона до режим на автоматичен преходКогато активирате този бутон, ние активираме кадрите или прехода и той трябва да бъде придружен от жълтия брояч, тъй като по този начин можем да направим преход от толкова секунди, докато преместим нашия Пин на същото ниво като втория брояч.
4- Да изпълним нашите първи преход нека натиснем бутона Превключване на щифта и ще вземем втория брояч и ще го преместим 200 секунди, след това преместваме изображението си в долната част на екрана, нека видим как изглежда:

Увеличете

Както можем да видим частта, подчертана в синьо в Хронология представлява прехода, който можем да визуализираме, ако натиснем клавиша за интервал. Виждаме тогава, че е доста лесно да се направи преход, но какво ще стане, ако искаме да направим втори преход или повече от тях? За това трябва да преместим нашите ПИН към втория брояч, по този начин посочваме да Анимация че приключваме процеса на първия преход и можем да започнем нов.
5- Ще направим а втори преход където този път ще намалим непрозрачността на нашето изображение, за това избираме нашето изображение, като намалим непрозрачността му до 46% и както споменахме, преместваме ПИН на втория брояч и повторете стъпките от точка 4, нека видим:

Увеличете

6- Накрая ще направим а трети преход за да завършим нашата анимация. Както вече знаем, преместваме втория си брояч за няколко секунди, плъзгаме нашето изображение по диагонал наляво и затваряме прехода, като преместваме ПИН за втория брояч:

Увеличете

7- Запазваме работата си и натискаме клавиша за интервал, за да видим нашата анимация, ако все още не сме доволни, можем да преминем през преходите, които са представени със синия цвят в нашия Хронология и ние променяме стойностите или ако желаем типа на прехода.
Тъй като сме доволни от работата си, е време да извършим последната стъпка, а именно да я покажем за гледане в браузър, което е целта, за която работим.
Има два начина да видите нашата работа, първият и най -простият може да се направи от инструмента, за това отиваме в раздела Архив и ние избираме Визуализация в браузъра, който веднага ще отвори анимацията в нашия уеб браузър по подразбиране:

Второто е малко по -сложно, ако нямаме опит в уеб разработката, а именно да вземем файловете и да направим интеграция с нашето уеб приложение. Важно е да бъдете много внимателни, когато правите това, и да включите всички файлове, генерирани от Анимация в противен случай анимацията няма да работи.
С това завършихме този урок, където можехме да знаем как работи Adobe Edge Animate, виждайки най -важните му характеристики и правим първата си анимация за броени минути, без да е необходимо един ред код, генерирайки го с HTML5 Y JavaScript за внедряване във всяко уеб приложение.