Animasjoner med Adobe Edge Animate

Brukere på nettet forventer å finne spektakulære design og sette pris på animasjoner som bidrar til disse designene, så lenge de ikke kaster bort tid eller påvirker sidens navigasjon negativt.
Godt utførte animasjoner fokuserer oppmerksomheten på viktige detaljer, kan vise hvordan en applikasjon fungerer og hjelpe navigasjon hvis de oppfyller det forrige kravet, hvor mange av disse animasjonene ble laget med Blits og hvis de hadde den nødvendige kvaliteten, ble de godt mottatt av brukeren.
Men tidene har endret seg, og akkurat som teknologier også har utviklet måten å lage animasjoner på, er det der det kommer inn Adobe Edge Animate, et verktøy som lar oss lage animasjoner med HTML5, CSS3 og JavaScript uten behov for programmeringskunnskap.
Ovenstående kan høres litt komplisert ut, hvordan er det mulig å ha et verktøy som hjelper meg med å lage animasjoner i disse teknologiene, uten programmeringskunnskap? Det er ikke så komplisert som det ser ut, men først må vi kjenne verktøyet og at vi må jobbe med det, for dette skal vi kjøre det, og vi vil bli mottatt av startskjermen som skal se slik ut:

FORSTØRRE

På høyre side kan vi se noen lenker for å lære hvordan du lager noen animasjoner med verktøyet og på høyre side kobler du til å åpne en fil eller lage den. La oss klikke på lenken Lag ny og vi vil bli ført til arbeidsområdet til verktøyet, for nå skal vi ikke bekymre oss for det, men vi kommer til å lagre prosjektet vårt for å kunne undersøke strukturen som er opprettet av verktøyet, la oss se hvordan strukturen vår ser ut:

FORSTØRRE

Hvis vi er kjent med utviklingen av webapplikasjoner, kan vi se noen filer med kjente utvidelser, la oss se funksjonen til hver av disse i et prosjekt av Edge Animate:
.En filDenne filen brukes av verktøyet for å holde oversikt over prosjektet vårt.
. HTML -filDenne filen beskriver en webside som bruker kode HTML, så vel som resten av sidene på Internett.
.Js -filDisse filene inneholder kode JavaScript for vårt prosjekt, som definerer et tomt stadium for animasjonen vår og utfører andre nødvendige oppgaver i prosjektene til Edge Animate.
I tillegg til disse filene, i mappen edge_includes vi har to filer JavaScript tillegg, som er biblioteker for prosjektet vårt og det refereres til i vårt HTML og dens funksjon er å utføre bevegelseshandlingen som sådan.
Når vi har sett hvordan prosjektet vårt er strukturert, er det på tide å kjenne områdene i arbeidsområdet vårt. La oss først se hvordan det ser ut:

FORSTØRRE

Hvert panel er identifisert med navn, der Elementer, Egenskaper og Tidslinje De har verktøy og widgets for å lage animasjoner. Det største panelet er kjent som scenen o Scene og der bygger vi animasjonen, la oss se nærmere på hvert av elementene i arbeidsområdet vårt:
SceneDet er her grafikken og teksten til prosjektet vises og animeres, det har grenser i arrangementet og lar oss skjule elementer eller plassere dem i det. I tillegg når vi lagrer prosjektet vårt Animere tar seg av å lagre teksten og grafikken som en HTML -side.
ElementerElementene er objekter som vi legger til på scenen vår, og som et resultat vises de på vår siste webside, der disse elementene kan være illustrasjoner, fotografier eller til og med tekst.
EgenskaperElementene har egenskaper som kan påvirke deres posisjon og jevne utseende på scenen, og vi kan administrere dem ved hjelp av panelet Egenskaper.
TidslinjeDet lar oss holde oversikt over elementene og deres egenskaper gjennom hele prosjektet.
BibliotekHer kan vi føre oversikt over ressursene vi importerer til prosjektet og gi enkel tilgang til symbolene vi tror på Animere.
VerktøyDe vises øverst på arbeidsområdet. Vi bruker dem til å lage, velge og endre elementer på scenen, det er ikke mange, men vi ville bli overrasket over å vite hvor mye vi kan gjøre med dem.
Siden vi vet hvordan verktøyet vårt distribueres og vi er kjent med konseptene i det, kan vi våge å lage vår første animasjon.
For å lage vår første animasjon skal vi eksperimentere litt med overgangene i et gitt bilde, la oss se trinnene som skal følges:
1- Vi skal lage et nytt prosjekt med alternativet ny fil i tilfelle vi har lukket der vi jobber med å forstå strukturen og elementene i verktøyet. Når vi starter et prosjekt, er scenen tom, vi kan endre dette i egenskapene til scene på venstre side av skjermen, for dette trykker vi på den hvite boksen og velger en farge vi foretrekker, eller hvis vi har en farge i heksadesimal notasjon, kan vi inkludere den som vi ser på følgende bilde:

FORSTØRRE

2- I denne opplæringen har vi valgt en mørk farge slik at bildet vi vil inkludere i scene fremheve. Nå for å inkludere et bilde vi går til Arkiv og vi velger å importere, vil filutforskeren vises, og vi velger bildet som skal inkludere:

FORSTØRRE

Det er viktig at i egenskapene til vårt scenario har vi overløpet u flyte i skjult siden vår scene den presenterer en liten del av all vår HTML, så hvis vi ikke vil se elementer utenfor scenen, er det viktig å ha denne verdien for den egenskapen. Vi kan også endre navnet på elementene våre i delen av Egenskaper, på denne måten kan vi bedre identifisere dem i prosjektet vårt.
3- Nå går vi til vår Tidslinje og vi bekrefter at avspillingsdisken er på 0:00 å begynne med animasjonen vår. Det er her den interessante delen kommer inn, og det er her vi må være maksimalt oppmerksom, først må vi bekrefte at nøkkelbildemodus trykker så vel som automatisk overgangsmodus, som vi kan se på følgende bilde:

For å lage animasjonene våre må vi bruke funksjonaliteten til Veksle Pin som er aktivert i knappen ved siden av automatisk overgangsmodusNår du aktiverer denne knappen aktiverer vi rammene eller overgangen, og den må ledsages av den gule telleren, siden vi på denne måten kan gjøre en overgang på så mange sekunder til vi flytter vår pin til samme nivå som den andre telleren.
4- For å gjennomføre vår første overgang la oss trykke på knappen Veksle Pin og vi skal ta den andre telleren, og vi skal flytte den 200 sekunder, etter dette flytter vi bildet vårt til bunnen av skjermen, la oss se hvordan det ser ut:

FORSTØRRE

Som vi kan se delen markert med blått i Tidslinje representerer overgangen som vi kan forhåndsvise hvis vi trykker på mellomromstasten. Vi ser da at det er ganske enkelt å gjøre en overgang, men hva om vi ønsker å gjøre en andre overgang eller flere av disse? For dette må vi flytte vår Pin mot den andre telleren, på denne måten indikerer vi for Animere at vi avslutter prosessen med den første overgangen, og vi kan starte en ny.
5- Vi skal gjøre en andre overgang hvor vi denne gangen skal redusere opaciteten til bildet vårt, for dette velger vi bildet vårt ved å redusere dets opacitet til 46%, og som vi nevnte, flytter vi Pin på den andre telleren og gjenta trinnene i punkt 4, la oss se:

FORSTØRRE

6- Endelig skal vi lage en tredje overgang for å fullføre animasjonen vår. Som vi allerede vet, flytter vi vår andre teller noen sekunder, drar bildet diagonalt til venstre og lukker overgangen ved å flytte Pin om den andre telleren:

FORSTØRRE

7- Vi lagrer arbeidet vårt og trykker på mellomromstasten for å se animasjonen vår. Hvis vi fremdeles ikke er fornøyd, kan vi bevege oss gjennom overgangene som er representert med den blå fargen i vår Tidslinje og vi endrer verdiene eller hvis vi ønsker overgangstypen.
Siden vi er fornøyd med arbeidet vårt, er det på tide å utføre det siste trinnet, og det er å vise det for visning i en nettleser, som er målet vi jobber med.
Det er to måter å se arbeidet vårt på, den første og den enkleste kan gjøres fra verktøyet, for dette går vi til fanen Arkiv og vi velger Forhåndsvisning i nettleseren, som umiddelbart åpner animasjonen i vår standard nettleser:

Det andre er litt mer komplisert hvis vi ikke har erfaring med webutvikling, det vil si å ta filene og integrere med webprogrammet vårt. Det er viktig å være veldig forsiktig når du gjør dette og inkludere alle filene som genereres av Animere ellers fungerer ikke animasjonen.
Med dette fullførte vi denne opplæringen, hvor vi kunne vite hvordan det fungerer Adobe Edge Animate, se de viktigste egenskapene og lage vår første animasjon på få minutter uten at det er behov for en enkelt kodelinje, og generere den med HTML5 Y JavaScript for implementering i en hvilken som helst webapplikasjon.