Animācijas ar Adobe Edge Animate

Tīmekļa lietotāji cer atrast iespaidīgus dizainus un novērtēt animācijas, kas veicina šo dizainu, ja vien viņi netērē laiku vai negatīvi neietekmē lapas navigāciju.
Labi veiktas animācijas pievērš uzmanību svarīgām detaļām, var parādīt, kā darbojas lietojumprogramma, un palīdzēt navigācijai, ja tās atbilst iepriekšējai prasībai, kur daudzas no šīm animācijām tika veidotas ar Zibspuldze un, ja tiem bija nepieciešamā kvalitāte, lietotājs tos labi uztvēra.
Bet laiki ir mainījušies, un tāpat kā tehnoloģijas ir attīstījušās animācijas veidošanas veidā, tas ir tas, kur tas nāk Adobe Edge Animate, rīks, kas ļauj mums izveidot animācijas ar HTML5, CSS3 un JavaScript bez programmēšanas zināšanām.
Iepriekš minētais var šķist nedaudz sarežģīts. Kā bez programmēšanas zināšanām ir iespējams izveidot rīku, kas palīdz izveidot animācijas šajās tehnoloģijās? Tas nav tik sarežģīti, kā šķiet, bet vispirms mums ir jāzina rīks un ar to ir jāstrādā, jo mēs to izmantosim, un sākuma ekrāns mūs redzēs šādi:

PALIELINĀT

Labajā pusē mēs varam redzēt dažas saites, lai uzzinātu, kā ar rīku izveidot dažas animācijas, un labajā pusē - saites, lai atvērtu failu vai izveidotu to. Noklikšķiniet uz saites Izveidot jaunu un mēs tiksim novirzīti uz rīka darbvietu, pagaidām par to neuztraucamies, bet mēs saglabāsim savu projektu, lai varētu pārbaudīt rīka izveidoto struktūru, paskatīsimies, kā izskatās mūsu struktūra:

PALIELINĀT

Ja mēs esam iepazinušies ar tīmekļa lietojumprogrammu izstrādi, mēs varam redzēt dažus failus ar zināmiem paplašinājumiem, apskatīsim katra no tiem funkciju projekta ietvaros. Edge Animate:
.FailaŠis fails tiek izmantots, lai sekotu mūsu projektam.
.Html failuŠis fails apraksta Web lapu, kurā tiek izmantots kods HTML, kā arī pārējās interneta lapas.
.Js failsŠajos failos ir kods JavaScript mūsu projektam, kas nosaka mūsu animācijas tukšo posmu un veic citus nepieciešamos uzdevumus projektos Edge Animate.
Kā arī šie faili mapē mala_ ietver mums ir divi faili JavaScript papildu, kas ir mūsu projekta bibliotēkas un uz kurām atsaucas mūsu HTML un tā funkcija ir veikt kustības darbību kā tādu.
Kad esam redzējuši, kā mūsu projekts ir strukturēts, ir pienācis laiks uzzināt mūsu darbvietas jomas, vispirms apskatīsim, kā tas izskatās:

PALIELINĀT

Katrs panelis ir identificēts pēc nosaukuma, kur Elementi, Rekvizīti (rediģēt) un Laika skala Viņiem ir rīki un logrīki animāciju veidošanai. Lielākais panelis ir pazīstams kā stadija o Stage un tur mēs veidojam animāciju, sīkāk apskatīsim katru no mūsu darbvietas elementiem:
StageŠeit tiek parādīta un animēta projekta grafika un teksts, tā izvietojums ir ierobežots un ļauj mums paslēpt elementus vai novietot tos tajā. Turklāt, saglabājot savu projektu Animēt rūpējas par teksta un grafikas saglabāšanu kā HTML lapu.
ElementiElementi ir objekti, kurus mēs pievienojam savai stadijai, un rezultātā tie parādās mūsu pēdējā tīmekļa lapā, kur šie elementi var būt ilustrācijas, fotogrāfijas vai pat teksts.
Rekvizīti (rediģēt)Elementiem ir īpašības, kas var ietekmēt to stāvokli un pat izskatu uz skatuves, un mēs varam tos pārvaldīt, izmantojot paneli Rekvizīti (rediģēt).
Laika skalaTas ļauj mums reģistrēt elementus un to īpašības visā mūsu projekta gaitā.
BibliotēkaŠeit mēs varam reģistrēt resursus, kurus mēs importējam projektā, un nodrošināt vieglu piekļuvi simboliem, kuriem mēs ticam Animēt.
RīkiTie parādās darbvietas augšpusē. Mēs tos izmantojam, lai izveidotu, atlasītu un modificētu elementus uz skatuves, to nav daudz, bet mēs būtu pārsteigti, uzzinot, cik daudz mēs varam ar tiem izdarīt.
Tā kā mēs zinām, kā tiek izplatīts mūsu rīks, un esam iepazinušies ar tā jēdzieniem, mēs varam uzdrošināties izveidot savu pirmo animāciju.
Lai izveidotu mūsu pirmo animāciju, mēs nedaudz eksperimentēsim ar pārejām noteiktā attēlā, apskatīsim, kādas darbības jāveic:
1- Mēs izveidosim jaunu projektu ar opciju jauns fails gadījumā, ja mēs to slēgsim, un mēs strādājam, lai izprastu rīka struktūru un elementus. Kad mēs sākam projektu, mūsu posms ir tukšs, mēs to varam mainīt rekvizītos posms ekrāna kreisajā pusē, lai to izdarītu, mēs nospiežam balto lodziņu un izvēlamies sev vēlamo krāsu, vai gadījumā, ja mums ir krāsa heksadecimālā apzīmējumā, mēs varam to iekļaut, kā redzams šādā attēlā:

PALIELINĀT

2- Šīs apmācības gadījumā mēs esam izvēlējušies tumšu krāsu, lai attēls, kuru mēs iekļausim posms izcelt. Tagad iekļaujiet attēlu, pie kura ejam Arhīvs un mēs izvēlamies importēt, tiks parādīts failu pārlūks, un mēs atlasīsim iekļaujamo attēlu:

PALIELINĀT

Ir svarīgi, lai mūsu scenārija rekvizītos mums būtu pārpilde u pārplūde iekšā paslēptas kopš mūsu posms tas parāda nelielu daļu no visa mūsu HTML, tādēļ, ja mēs nevēlamies redzēt elementus ārpus skatuves, ir svarīgi, lai šim īpašumam būtu šī vērtība. Mēs varam arī mainīt savu elementu nosaukumu sadaļā Rekvizīti (rediģēt), tādā veidā mēs varam tos labāk identificēt mūsu projektā.
3- Tagad mēs ejam pie savas Laika skala un mēs pārbaudām, vai atskaņošanas skaitītājs atrodas 0:00 lai sāktu ar mūsu animāciju. Šeit parādās interesantā daļa, un šeit mums jāpievērš maksimāla uzmanība, vispirms jāpārbauda, ​​vai atslēgkadra režīms spiež, kā arī automātiskais pārejas režīms, ko mēs varam redzēt šādā attēlā:

Lai izveidotu animācijas, mums ir jāizmanto Pārslēgt tapu kas tiek aktivizēts blakus esošajai pogai automātiskais pārejas režīmsAktivizējot šo pogu, mēs aktivizējam rāmjus vai pāreju, un tai ir jāpievieno dzeltenais skaitītājs, jo šādā veidā mēs varam veikt pāreju uz tik daudzām sekundēm, līdz mēs pārvietojam savu tapu tādā pašā līmenī kā otrais skaitītājs.
4- Lai veiktu mūsu pirmā pāreja nospiedīsim pogu Pārslēgt tapu un mēs ņemsim otro skaitītāju, un mēs to pārvietosim 200 sekundes, pēc tam mēs pārvietojam attēlu uz ekrāna apakšdaļu, redzēsim, kā tas izskatās:

PALIELINĀT

Kā redzam zilā krāsā iezīmēto daļu Laika skala apzīmē pāreju, kuru mēs varam priekšskatīt, nospiežot atstarpes taustiņu. Tad mēs redzam, ka ir diezgan viegli veikt pāreju, bet ko darīt, ja mēs vēlamies veikt otro vai vairākas no šīm pārejām? Šim nolūkam mums ir jāpārvieto savs Piespraude pret otru skaitītāju, tādā veidā mēs norādām Animēt ka mēs noslēdzam pirmās pārejas procesu un varam sākt jaunu.
5- Mēs gatavojamies darīt a otrā pāreja Šoreiz mēs samazināsim sava attēla necaurredzamību, tāpēc mēs izvēlamies savu attēlu, samazinot tā necaurredzamību līdz 46%, un, kā jau minējām, mēs pārvietojam Piespraude otrajā skaitītājā un atkārtojiet 4. punkta darbības, redzēsim:

PALIELINĀT

6- Visbeidzot mēs gatavojamies a trešā pāreja lai pabeigtu mūsu animāciju. Kā mēs jau zinām, dažas sekundes pārvietojam otro skaitītāju, velkam attēlu pa diagonāli pa kreisi un aizveram pāreju, pārvietojot Piespraude par otro skaitītāju:

PALIELINĀT

7- Mēs saglabājam savu darbu un nospiežam atstarpes taustiņu, lai apskatītu mūsu animāciju, ja mēs joprojām neesam apmierināti, mēs varam pāriet uz pārejām, kuras mūsu attēlā attēlo zilā krāsa Laika skala un mēs mainām vērtības vai, ja vēlamies pārejas veidu.
Tā kā esam apmierināti ar savu darbu, ir pienācis laiks veikt pēdējo darbību, proti, parādīt to apskatei pārlūkprogrammā, kas ir mūsu mērķis.
Ir divi veidi, kā apskatīt mūsu darbu, pirmo un vienkāršāko var izdarīt no rīka, šim nolūkam mēs ejam uz cilni Arhīvs un mēs izvēlamies Priekšskatīt pārlūkprogrammā, kas nekavējoties atvērs animāciju mūsu noklusējuma tīmekļa pārlūkprogrammā:

Otrais ir nedaudz sarežģītāks, ja mums nav pieredzes tīmekļa izstrādē, proti, ir jāņem faili un jāveic integrācija ar mūsu tīmekļa lietojumprogrammu. To darot, ir svarīgi būt ļoti uzmanīgam un iekļaut visus failus, ko ģenerējis Animēt pretējā gadījumā animācija nedarbosies.
Ar to mēs pabeidzām šo apmācību, kur mēs varētu uzzināt, kā tā darbojas Adobe Edge Animate, redzot tās vissvarīgākās īpašības un izveidojot mūsu pirmo animāciju dažu minūšu laikā bez nepieciešamības pēc vienas koda rindas, ģenerējot to ar HTML5 Y JavaScript ieviešanai jebkurā tīmekļa lietojumprogrammā.