Animacijos naudojant „Adobe Edge Animate“

Žiniatinklio naudotojai tikisi rasti įspūdingų dizainų ir vertina animaciją, kuri prisideda prie šių dizainų, jei jie nešvaisto laiko ar neigiamai neįtakoja puslapio naršymo.
Gerai atliktos animacijos sutelkia dėmesį į svarbias detales, gali parodyti, kaip veikia programa, ir padėti naršyti, jei jos atitinka ankstesnį reikalavimą, kur daugelis šių animacijų buvo sukurtos naudojant Blykstė ir jei jie turėjo reikiamą kokybę, vartotojas juos gerai priėmė.
Tačiau laikai pasikeitė ir kaip technologijos taip pat tobulino animacijos kūrimo būdą, taip ir atsiranda „Adobe Edge Animate“, įrankis, leidžiantis kurti animaciją HTML5, CSS3 ir „JavaScript“ be programavimo žinių.
Tai, kas išdėstyta aukščiau, gali atrodyti šiek tiek sudėtinga, kaip įmanoma turėti įrankį, padedantį kurti animaciją šiose technologijose be programavimo žinių? Tai nėra taip sudėtinga, kaip atrodo, bet pirmiausia turime žinoti įrankį ir su juo dirbti, nes mes jį paleisime ir būsime priimti pagrindiniame ekrane, kuris turėtų atrodyti taip:

DIDELIS

Dešinėje pusėje matome kai kurias nuorodas, kaip išmokti kurti animaciją naudojant įrankį, o dešinėje - nuorodas failui atidaryti arba sukurti. Spustelėkite nuorodą Sukurk naują ir būsime nukreipti į įrankio darbo vietą, kol kas dėl to nesijaudinsime, bet išsaugosime savo projektą, kad galėtume išnagrinėti įrankio sukurtą struktūrą, pažiūrėkime, kaip atrodo mūsų struktūra:

DIDELIS

Jei žinome žiniatinklio programų kūrimą, galime pamatyti kai kuriuos failus su žinomais plėtiniais, pažiūrėkime kiekvieno iš jų funkciją projekto metu „Edge Animate“:
.FailasŠis failas naudojamas įrankiui sekti mūsų projektą.
.Html failasŠiame faile aprašomas tinklalapis, kuriame naudojamas kodas HTML, taip pat likusius interneto puslapius.
.Js failasŠiuose failuose yra kodas „JavaScript“ mūsų projektui, kuris apibrėžia tuščią mūsų animacijos stadiją ir atlieka kitas būtinas užduotis projektuose „Edge Animate“.
Kaip ir šie failai, aplanke kraštas_apima mes turime du failus „JavaScript“ papildomos, kurios yra mūsų projekto bibliotekos ir yra nurodytos mūsų HTML o jo funkcija yra atlikti judesio veiksmą kaip tokį.
Pamatę mūsų projekto struktūrą, atėjo laikas sužinoti mūsų darbo srities sritis, pirmiausia pažiūrėkime, kaip jis atrodo:

DIDELIS

Kiekvienas skydelis yra identifikuojamas pagal pavadinimą, kur Elementai, Ypatybės (redaguoti) ir Laiko juosta Jie turi įrankius ir valdiklius animacijai kurti. Didžiausia plokštė yra žinoma kaip scena o Scena ir kuriame animaciją, atidžiau pažvelkime į kiekvieną mūsų darbo srities elementą:
ScenaČia rodoma ir animuojama projekto grafika ir tekstas, jo išdėstymas turi ribas ir leidžia mums paslėpti elementus arba juos išdėstyti. Be to, kai išsaugome savo projektą Animuoti rūpinasi teksto ir grafikos išsaugojimu kaip HTML puslapiu.
ElementaiElementai yra objektai, kuriuos pridedame prie savo scenos, todėl jie pasirodo mūsų galutiniame tinklalapyje, kur šie elementai gali būti iliustracijos, nuotraukos ar net tekstas.
Ypatybės (redaguoti)Elementai turi savybių, kurios gali turėti įtakos jų padėčiai ir net išvaizdai scenoje, ir mes galime juos valdyti naudodami skydelį Ypatybės (redaguoti).
Laiko juostaTai leidžia mums registruoti elementus ir jų savybes viso projekto metu.
BibliotekaČia galime įrašyti į projektą importuojamus išteklius ir lengvai pasiekti simbolius, kuriais tikime Animuoti.
ĮrankiaiJie rodomi darbo srities viršuje. Mes naudojame juos scenos elementams kurti, atrinkti ir modifikuoti, jų nėra daug, bet būtume nustebinti sužinoję, kiek galime su jais nuveikti.
Kadangi žinome, kaip platinamas mūsų įrankis, ir žinome joje esančias sąvokas, galime ryžtis sukurti pirmąją animaciją.
Norėdami sukurti pirmąją animaciją, šiek tiek paeksperimentuosime su tam tikro vaizdo perėjimais, pažiūrėkime, kokius veiksmus reikia atlikti:
1- Mes ketiname sukurti naują projektą su galimybe naujas failas tuo atveju, kai baigsime darbą, kuriame stengiamės suprasti įrankio struktūrą ir elementus. Kai pradedame projektą, mūsų etapas tuščias, mes galime tai pakeisti etapas kairėje ekrano pusėje, tam paspaudžiame baltą langelį ir pasirenkame norimą spalvą arba, jei turime šešioliktainę spalvą, galime ją įtraukti, kaip matome šiame paveikslėlyje:

DIDELIS

2- Šios pamokos atveju mes pasirinkome tamsią spalvą, kad vaizdas, kurį įtrauksime į etapas paryškinti. Dabar įtraukite vaizdą, prie kurio einame Archyvas ir mes pasirenkame importuoti, bus rodomas failų naršyklė ir mes pasirenkame vaizdą, kurį norite įtraukti:

DIDELIS

Svarbu, kad mūsų scenarijaus ypatybėse mes turėtume perpildymą u perpildymas į paslėptas nuo mūsų etapas ji pateikia nedidelę viso mūsų HTML dalį, todėl jei nenorime matyti elementų už scenos ribų, svarbu turėti šią tos nuosavybės vertę. Taip pat galime pakeisti savo elementų pavadinimą skyriuje Ypatybės (redaguoti), tokiu būdu mes galime juos geriau atpažinti savo projekte.
3- Dabar einame į savo Laiko juosta ir patikriname, ar atkūrimo skaitiklis yra 0:00 pradėti nuo mūsų animacijos. Čia atsiranda įdomi dalis ir čia turime skirti didžiausią dėmesį, pirmiausia turime patikrinti, ar „keyframe“ režimas spaudžia taip pat, kaip automatinis perėjimo režimas, kurį galime pamatyti šiame paveikslėlyje:

Norėdami sukurti animaciją, turime naudoti Perjungti kaištį kuris įjungiamas mygtuke šalia automatinis perėjimo režimasKai įjungiate šį mygtuką, mes suaktyviname rėmus arba perėjimą, o jį turi lydėti geltonas skaitiklis, nes tokiu būdu galime pereiti tiek sekundžių, kol perkelsime smeigtuką į tą patį lygį kaip ir antrasis skaitiklis.
4- Atlikti mūsų pirmasis perėjimas paspausime mygtuką Perjungti kaištį ir mes paimsime antrą skaitiklį ir jį perkelsime 200 sekundžių, po to perkeliame vaizdą į ekrano apačią, pažiūrėkime, kaip jis atrodo:

DIDELIS

Kaip matome mėlynai paryškintą dalį Laiko juosta reiškia perėjimą, kurį galime peržiūrėti, jei paspausime tarpo klavišą. Tada matome, kad pereiti yra gana paprasta, bet kas, jei norime atlikti antrą ar daugiau perėjimų? Norėdami tai padaryti, turime judėti Smeigtukas link antrojo skaitiklio, tokiu būdu mes nurodome Animuoti kad baigiame pirmojo perėjimo procesą ir galime pradėti naują.
5- Mes ketiname daryti a antrasis perėjimas šį kartą mes sumažinsime savo vaizdo neskaidrumą, todėl mes pasirenkame savo įvaizdį, sumažindami jo nepermatomumą iki 46% ir, kaip minėjome, perkeliame Smeigtukas antrame skaitiklyje ir pakartokite 4 punkto veiksmus, pažiūrėkime:

DIDELIS

6- Pagaliau padarysime a trečiasis perėjimas kad užbaigtume animaciją. Kaip jau žinome, keletą sekundžių perkeliame antrąjį skaitiklį, vilkite vaizdą įstrižai į kairę ir uždarome perėjimą judindami Smeigtukas Apie antrą skaitiklį:

DIDELIS

7- Išsaugome savo darbą ir paspaudžiame tarpo klavišą, kad pamatytume animaciją. Jei vis tiek nesame patenkinti, galime pereiti perėjimus, kuriuos vaizduoja mėlyna spalva Laiko juosta ir mes keičiame reikšmes arba norime perėjimo tipo.
Kadangi esame patenkinti savo darbu, atėjo laikas atlikti paskutinį žingsnį, tai yra parodyti jį peržiūrėti naršyklėje, o tai yra mūsų tikslas.
Yra du būdai, kaip peržiūrėti mūsų darbą, pirmasis ir paprasčiausias gali būti atliktas naudojant įrankį, tam mes einame į skirtuką Archyvas ir mes pasirenkame Peržiūra naršyklėje, kuris iš karto atidarys animaciją numatytojoje žiniatinklio naršyklėje:

Antrasis yra šiek tiek sudėtingesnis, jei neturime žiniatinklio kūrimo patirties, ty paimti failus ir integruoti juos į mūsų žiniatinklio programą. Svarbu tai padaryti labai atsargiai ir įtraukti visus sugeneruotus failus Animuoti kitaip animacija neveiks.
Tuo baigėme šią mokymo programą, kur galėjome sužinoti, kaip ji veikia „Adobe Edge Animate“pamatę svarbiausias jo savybes ir per kelias minutes sukurdami pirmąją animaciją, nereikalaudami vienos kodo eilutės, sukurkite ją HTML5 Y „JavaScript“ skirta bet kuriai žiniatinklio programai.