Animacije s Adobe Edge Animate

Korisnici na webu očekuju da će pronaći spektakularne dizajne i cijeniti animacije koje doprinose tim dizajnom, sve dok ne gube vrijeme ili negativno utječu na navigaciju po stranici.
Dobro izrađene animacije usredotočuju pozornost na važne detalje, mogu pokazati kako aplikacija radi i pomoći u navigaciji ako zadovoljavaju prethodni zahtjev, gdje su mnoge od tih animacija napravljene s Bljesak a ako su imali potrebnu kvalitetu, korisnik ih je dobro prihvatio.
No, vremena su se promijenila i kao što su tehnologije razvile i način izrade animacija, tu dolazi Adobe Edge Animate, alat koji nam omogućuje stvaranje animacija pomoću HTML5, CSS3 i JavaScript bez potrebe za programerskim znanjem.
Gore navedeno može zvučati pomalo komplicirano, kako je moguće imati alat koji mi pomaže u stvaranju animacija u tim tehnologijama, bez znanja programiranja? Nije toliko komplicirano kao što se čini, ali prvo moramo znati alat i moramo raditi s njim, jer ćemo ga pokrenuti i primit će nas početni zaslon koji bi trebao izgledati ovako:

POVEĆAJTE

S desne strane možemo vidjeti neke veze za učenje kako napraviti neke animacije s alatom, a s desne strane veze za otvaranje datoteke ili njenu izradu. Kliknemo na vezu Kreiraj novu i bit ćemo preusmjereni u radni prostor alata, za sada se nećemo brinuti oko toga, već ćemo spremiti naš projekt kako bismo mogli ispitati strukturu koju je alat stvorio, da vidimo kako naša struktura izgleda:

POVEĆAJTE

Ako smo upoznati s razvojem web aplikacija, možemo vidjeti neke datoteke s poznatim proširenjima, pogledajmo funkciju svake od njih unutar projekta Rubovi animirani:
.DatotekaOvu datoteku alat koristi za praćenje našeg projekta.
.Html datotekaOva datoteka opisuje web stranicu koja koristi kôd HTML, kao i ostale stranice na Internetu.
.Js datotekaOve datoteke sadrže kôd JavaScript za naš projekt, koji definira praznu fazu za našu animaciju i obavlja druge potrebne zadatke u projektima Rubovi animirani.
Kao i ove datoteke, u mapi edge_includes imamo dvije datoteke JavaScript dodatne, koje su knjižnice za naš projekt i na koje se upućuje unutar našeg HTML a funkcija mu je vršiti radnju kretanja kao takvu.
Nakon što smo vidjeli kako je naš projekt strukturiran, vrijeme je da upoznamo područja našeg radnog prostora, prvo da vidimo kako to izgleda:

POVEĆAJTE

Svaka ploča je označena imenom, gdje je Elementi, Svojstva (uredi) i Vremenska Crta Imaju alate i widgete za stvaranje animacija. Najveća ploča poznata je kao pozornica o Pozornica i tu gradimo animaciju, pogledajmo pobliže svaki od elemenata u našem radnom prostoru:
PozornicaOvdje se prikazuju i animiraju grafika i tekst projekta, ima ograničenja u svom rasporedu i omogućuje nam skrivanje elemenata ili njihovo postavljanje u njega. Osim toga, kada spremimo naš projekt Animirati brine se za spremanje teksta i grafike kao HTML stranice.
ElementiElementi su objekti koje dodajemo našoj pozornici i kao rezultat toga pojavljuju se na našoj posljednjoj web stranici, gdje ti elementi mogu biti ilustracije, fotografije ili čak tekst.
Svojstva (uredi)Elementi imaju svojstva koja mogu utjecati na njihov položaj, pa čak i na izgled na pozornici, a njima možemo upravljati pomoću panela Svojstva (uredi).
Vremenska CrtaOmogućuje nam evidentiranje elemenata i njihovih svojstava tijekom cijelog našeg projekta.
KnjižnicaOvdje možemo voditi evidenciju o resursima koje uvozimo u projekt i omogućiti lak pristup simbolima u koje vjerujemo Animirati.
AlatiPojavljuju se pri vrhu radnog prostora. Koristimo ih za stvaranje, odabir i izmjenu elemenata na pozornici, nema ih mnogo, ali iznenadili bismo se kad bismo znali koliko možemo učiniti s njima.
Budući da znamo kako je naš alat raspoređen i upoznati smo s pojmovima u njemu, možemo se odvažiti stvoriti svoju prvu animaciju.
Da bismo stvorili prvu animaciju, malo ćemo eksperimentirati s prijelazima na određenoj slici, pogledajmo korake koje treba slijediti:
1- Kreirat ćemo novi projekt s opcijom nova datoteka u slučaju da smo zatvorili i radimo na razumijevanju strukture i elemenata unutar alata. Kad pokrenemo projekt, naša je faza prazna, to možemo promijeniti u svojstvima pozornica na lijevoj strani zaslona, ​​za to pritisnemo bijeli okvir i odaberemo boju po želji ili u slučaju da imamo boju u heksadecimalnom zapisu možemo je uključiti kako vidimo na sljedećoj slici:

POVEĆAJTE

2- U slučaju ovog vodiča odabrali smo tamnu boju tako da sliku koju ćemo uključiti u pozornica istaknuti. Sada da uključimo sliku na koju idemo Arhiva i mi biramo za uvoz, prikazat će se istraživač datoteka i odabiremo sliku koju ćemo uključiti:

POVEĆAJTE

Važno je da u svojstvima našeg scenarija imamo preljev u prelijevanje u skriven budući da je naš pozornica predstavlja mali dio našeg HTML -a, pa ako ne želimo vidjeti elemente izvan pozornice, važno je imati tu vrijednost za to svojstvo. Također možemo promijeniti naziv naših elemenata u odjeljku Svojstva (uredi), na taj način možemo ih bolje identificirati u našem projektu.
3- Sada idemo na svoje Vremenska Crta i provjeravamo je li brojač reprodukcije na 0:00 za početak s našom animacijom. Ovdje dolazi zanimljiv dio i tu moramo posvetiti maksimalnu pažnju, prvo moramo provjeriti je li način rada s ključnim kadrovima pritiska kao i način automatskog prijelaza, što možemo vidjeti na sljedećoj slici:

Za izradu naših animacija moramo koristiti funkcionalnost Prebaci pin koji se aktivira u gumbu pored način automatskog prijelazaAktiviranjem ovog gumba aktiviramo okvire ili prijelaz i mora biti popraćen žutim brojačem, jer na taj način možemo napraviti prijelaz od toliko sekundi dok ne pomaknemo svoj pin na istu razinu kao drugi brojač.
4- Da bismo izvršili naše prvi prijelaz pritisnimo dugme Prebaci pin i mi ćemo uzeti drugi brojač i premjestit ćemo ga 200 sekundi, nakon što premjestimo našu sliku na dno zaslona, ​​da vidimo kako izgleda:

POVEĆAJTE

Kao što možemo vidjeti dio označen plavom bojom u Vremenska Crta predstavlja prijelaz koji možemo pregledati ako pritisnemo razmaknicu. Vidimo tada da je prilično lako napraviti prijelaz, no što ako želimo napraviti drugi prijelaz ili više njih? Za to moramo pomaknuti svoje Pribadača prema drugom brojaču, na ovaj način označavamo da Animirati da zatvaramo proces prvog prijelaza i da možemo započeti novi.
5- Napravit ćemo a drugi prijelaz gdje ćemo ovaj put smanjiti neprozirnost naše slike, za to odabiremo svoju sliku smanjujući njezinu neprozirnost na 46% i kao što smo spomenuli pomičemo Pribadača na drugom brojaču i ponovite korake iz točke 4, da vidimo:

POVEĆAJTE

6- Konačno ćemo napraviti a treći prijelaz kako bismo dovršili našu animaciju. Kao što već znamo, pomaknemo drugi brojač za nekoliko sekundi, povučemo sliku dijagonalno ulijevo i zatvorimo prijelaz pomicanjem Pribadača o drugom brojaču:

POVEĆAJTE

7- Spremamo svoj rad i pritisnemo razmaknicu za prikaz naše animacije, ako i dalje nismo zadovoljni možemo se kretati kroz prijelaze koji su predstavljeni plavom bojom u našem Vremenska Crta te mijenjamo vrijednosti ili ako želimo vrstu prijelaza.
Budući da smo zadovoljni svojim radom, vrijeme je da izvedemo posljednji korak, a to je da ga prikažemo za pregled u pregledniku, što je cilj za koji radimo.
Postoje dva načina za pregled našeg rada, prvi i najjednostavniji može se izvesti iz alata, za to idemo na karticu Arhiva i mi biramo Pregled u pregledniku, koji će odmah otvoriti animaciju u zadanom web pregledniku:

Drugi je malo kompliciraniji ako nemamo iskustva u web razvoju, a to je uzimanje datoteka i integracija s našom web aplikacijom. Važno je biti vrlo oprezan pri tome i uključiti sve datoteke koje je generirao Animirati u protivnom animacija neće raditi.
Ovime smo završili ovaj vodič, gdje smo mogli znati kako to radi Adobe Edge Animate, vidjeti njegove najvažnije karakteristike i napraviti prvu animaciju u nekoliko minuta bez potrebe za jednim retkom koda, generirajući je sa HTML5 Y JavaScript za implementaciju u bilo koju web aplikaciju.