Animationer med Adobe Edge Animate

Brugere på nettet forventer at finde spektakulære designs og værdsætte animationer, der bidrager til disse designs, så længe de ikke spilder tid eller påvirker sidens navigation negativt.
Godt udførte animationer fokuserer opmærksomheden på vigtige detaljer, kan vise hvordan en applikation fungerer og hjælpe navigation, hvis de opfylder det tidligere krav, hvor mange af disse animationer blev lavet med Blitz og hvis de havde den nødvendige kvalitet, blev de godt modtaget af brugeren.
Men tiderne har ændret sig, og ligesom teknologier også har udviklet måden at lave animationer på, er det her det kommer ind Adobe Edge Animate, et værktøj, der giver os mulighed for at oprette animationer med HTML5, CSS3 og JavaScript uden behov for programmeringskendskab.
Ovenstående lyder måske lidt kompliceret, hvordan er det muligt at have et værktøj, der hjælper mig med at oprette animationer i disse teknologier uden programmeringskendskab? Det er ikke så kompliceret, som det ser ud til, men først skal vi kende værktøjet, og at vi skal arbejde med det, for dette skal vi køre det, og vi vil blive modtaget af startskærmen, der skal se sådan ud:

FORSTØRRE

På højre side kan vi se nogle links for at lære at lave nogle animationer med værktøjet og på højre side links til at åbne en fil eller oprette den. Lad os klikke på linket Lav ny og vi vil blive taget til værktøjets arbejdsområde, for nu skal vi ikke bekymre os om det, men vi vil gemme vores projekt for at kunne undersøge strukturen, der er skabt af værktøjet, lad os se, hvordan vores struktur ser ud:

FORSTØRRE

Hvis vi kender udviklingen af ​​webapplikationer, kan vi se nogle filer med kendte udvidelser, lad os se funktionen af ​​hver af disse inden for et projekt af Edge Animate:
.En filDenne fil bruges af værktøjet til at holde styr på vores projekt.
.Html -filDenne fil beskriver en webside, der bruger kode HTML, samt resten af ​​siderne på Internettet.
.Js -filDisse filer indeholder kode JavaScript til vores projekt, som definerer en tom scene for vores animation og udfører andre nødvendige opgaver i projekterne af Edge Animate.
Samt disse filer, i mappen edge_includes vi har to filer JavaScript yderligere, som er biblioteker til vores projekt, og som der refereres til i vores HTML og dens funktion er at udføre bevægelsen som sådan.
Når vi har set, hvordan vores projekt er struktureret, er det tid til at kende områderne i vores arbejdsområde, lad os først se, hvordan det ser ud:

FORSTØRRE

Hvert panel er identificeret med navn, hvor Elementer, Egenskaber og Tidslinje De har værktøjer og widgets til at oprette animationer. Det største panel er kendt som scenen o Scene og der bygger vi animationen, lad os se nærmere på hvert af elementerne i vores arbejdsområde:
SceneDet er her, grafikken og teksten i projektet vises og animeres, det har grænser i arrangementet og giver os mulighed for at skjule elementer eller placere dem i det. Derudover når vi gemmer vores projekt Animer sørger for at gemme teksten og grafikken som en HTML -side.
ElementerElementerne er objekter, som vi tilføjer til vores scene, og som følge heraf vises de på vores sidste webside, hvor disse elementer kan være illustrationer, fotografier eller endda tekst.
EgenskaberElementerne har egenskaber, der kan påvirke deres position og endda udseende på scenen, og vi kan styre dem ved hjælp af panelet Egenskaber.
TidslinjeDet giver os mulighed for at registrere elementerne og deres egenskaber i løbet af vores projekt.
BibliotekHer kan vi registrere de ressourcer, vi importerer til projektet, og give let adgang til de symboler, vi tror på Animer.
VærktøjerDe vises øverst på arbejdsområdet. Vi bruger dem til at oprette, vælge og ændre elementer på scenen, der er ikke mange, men vi ville blive overrasket over at vide, hvor meget vi kan gøre med dem.
Da vi ved, hvordan vores værktøj distribueres, og vi er fortrolige med begreberne i det, kan vi vove at lave vores første animation.
For at oprette vores første animation skal vi eksperimentere lidt med overgangene i et givet billede, lad os se trinene, der skal følges:
1- Vi skal oprette et nyt projekt med muligheden ny fil, hvis vi har lukket, hvor vi arbejder på at forstå strukturen og elementerne i værktøjet. Når vi starter et projekt, er vores fase tom, vi kan ændre dette i egenskaberne af scene på venstre side af skærmen, til dette trykker vi på den hvide boks og vælger en farve, vi foretrækker, eller hvis vi har en farve i hexadecimal notation, kan vi inkludere den, som vi ser i følgende billede:

FORSTØRRE

2- I tilfælde af denne tutorial har vi valgt en mørk farve, så det billede, som vi vil inkludere i scene fremhæve. Nu for at inkludere et billede, vi går til Arkiv og vi vælger at importere, vil filudforskeren blive vist, og vi vælger det billede, der skal omfatte:

FORSTØRRE

Det er vigtigt, at vi i egenskaberne i vores scenario har overløbet u flyde over i skjult siden vores scene det præsenterer en lille del af al vores HTML, så hvis vi ikke ønsker at se elementer uden for scenen, er det vigtigt at have denne værdi for den ejendom. Vi kan også ændre navnet på vores elementer i afsnittet om Egenskaber, på denne måde kan vi bedre identificere dem i vores projekt.
3- Nu går vi til vores Tidslinje og vi bekræfter, at afspilningstælleren er på 0:00 at starte med vores animation. Det er her, den interessante del kommer ind, og det er her, vi skal være mest opmærksomme, først skal vi kontrollere, at keyframe mode trykker såvel som automatisk overgangstilstand, som vi kan se på følgende billede:

For at lave vores animationer skal vi bruge funktionaliteten af Skift Pin som aktiveres i knappen ved siden af automatisk overgangstilstandNår vi aktiverer denne knap, aktiverer vi rammerne eller overgangen, og den skal ledsages af den gule tæller, da vi på denne måde kan foretage en overgang på så mange sekunder, indtil vi flytter vores pin til samme niveau som den anden tæller.
4- At udføre vores første overgang lad os trykke på knappen Skift Pin og vi tager den anden tæller, og vi kommer til at flytte den 200 sekunder, efter dette flytter vi vores billede til bunden af ​​vores skærm, lad os se, hvordan det ser ud:

FORSTØRRE

Som vi kan se delen fremhævet med blåt i Tidslinje repræsenterer overgangen, som vi kan få vist, hvis vi trykker på mellemrumstasten. Vi ser da, at det er ret let at foretage en overgang, men hvad nu hvis vi vil foretage en anden overgang eller flere af disse? Til dette må vi flytte vores Pin mod den anden tæller, på denne måde angiver vi til Animer at vi lukker processen med den første overgang, og vi kan starte en ny.
5- Vi skal lave en anden overgang hvor vi denne gang vil reducere opasitet af vores billede, til dette vælger vi vores billede ved at reducere dets opacitet til 46%, og som vi nævnte flytter vi Pin på den anden tæller og gentag trinene i punkt 4, lad os se:

FORSTØRRE

6- Endelig skal vi lave en tredje overgang for at fuldføre vores animation. Som vi allerede ved, flytter vi vores anden tæller et par sekunder, trækker vores billede diagonalt til venstre og lukker overgangen ved at flytte Pin om den anden tæller:

FORSTØRRE

7- Vi gemmer vores arbejde og trykker på mellemrumstasten for at se vores animation, hvis vi stadig ikke er tilfredse, kan vi bevæge os gennem de overgange, der er repræsenteret af den blå farve i vores Tidslinje og vi ændrer værdierne, eller hvis vi ønsker overgangstypen.
Da vi er tilfredse med vores arbejde, er det tid til at udføre det sidste trin, og det er at vise det til visning i en browser, hvilket er det mål, vi arbejder for.
Der er to måder at se vores arbejde på, den første og den enkleste kan gøres fra værktøjet, for at gå til fanen Arkiv og vi vælger Forhåndsvisning i browser, som straks åbner animationen i vores standardwebbrowser:

Det andet er lidt mere kompliceret, hvis vi ikke har erfaring med webudvikling, det vil sige at tage filerne og foretage en integration med vores webapplikation. Det er vigtigt at være meget forsigtig, når du gør dette og inkludere alle de filer, der genereres af Animer ellers virker animationen ikke.
Med dette afsluttede vi denne vejledning, hvor vi kunne vide, hvordan det fungerer Adobe Edge Animateser dens vigtigste egenskaber og laver vores første animation på få minutter uden behov for en enkelt kodelinje og genererer den med HTML5 Y JavaScript til implementering i enhver webapplikation.