Animationer med Adobe Edge Animate

Användare på webben förväntar sig att hitta spektakulära mönster och uppskattar animationer som bidrar till dessa mönster, så länge de inte slösar bort tid eller påverkar sidnavigering negativt.
Välgjorda animationer fokuserar uppmärksamhet på viktiga detaljer, kan visa hur en applikation fungerar och hjälpa navigering om de uppfyller det tidigare kravet, där många av dessa animationer gjordes med Blixt och om de hade den nödvändiga kvaliteten, blev de väl mottagna av användaren.
Men tiderna har förändrats och precis som teknik också har utvecklat sättet att göra animationer, det är där det kommer in Adobe Edge Animate, ett verktyg som gör att vi kan skapa animationer med HTML5, CSS3 och JavaScript utan behov av programmeringskunskap.
Ovanstående kan låta lite komplicerat, hur är det möjligt att ha ett verktyg som hjälper mig att skapa animationer i den tekniken, utan programmeringskunskap? Det är inte så komplicerat som det verkar, men först måste vi känna till verktyget och att vi måste arbeta med det, för det här kör vi det och vi kommer att tas emot av startskärmen som ska se ut så här:

FÖRSTORA

På höger sida kan vi se några länkar för att lära dig hur du gör några animationer med verktyget och på höger sida länkar för att öppna en fil eller skapa den. Låt oss klicka på länken Skapa ny och vi kommer att tas till verktygets arbetsyta, för nu oroar vi oss inte för det, men vi kommer att spara vårt projekt för att kunna undersöka strukturen som skapats av verktyget, låt oss se hur vår struktur ser ut:

FÖRSTORA

Om vi ​​är bekanta med utvecklingen av webbapplikationer kan vi se några filer med kända tillägg, låt oss se funktionen för var och en av dessa inom ett projekt av Edge Animera:
.En filDenna fil används av verktyget för att hålla reda på vårt projekt.
. HTML -filDen här filen beskriver en webbsida som använder kod HTML, liksom resten av sidorna på Internet.
.Js -filDessa filer innehåller kod JavaScript för vårt projekt, som definierar en tom scen för vår animation och utför andra nödvändiga uppgif.webpter i projekten Edge Animera.
Samt dessa filer, i mappen edge_includes vi har två filer JavaScript ytterligare, som är bibliotek för vårt projekt och som det refereras till inom vårt HTML och dess funktion är att utföra rörelseåtgärden som sådan.
När vi har sett hur vårt projekt är uppbyggt är det dags att känna till områdena i vår arbetsyta, låt oss först se hur det ser ut:

FÖRSTORA

Varje panel identifieras med namn, där Element, Egenskaper (redigera) och den Tidslinje De har verktyg och widgets för att skapa animationer. Den största panelen är känd som scenen o Skede och där bygger vi animationen, låt oss titta närmare på var och en av elementen i vår arbetsyta:
SkedeDet är här grafiken och texten i projektet visas och animeras, det har begränsningar i sitt arrangemang och gör att vi kan dölja element eller placera dem i det. Dessutom när vi sparar vårt projekt Animera tar hand om att spara texten och grafiken som en HTML -sida.
ElementElementen är objekt som vi lägger till på vår scen och som ett resultat visas de på vår sista webbsida, där dessa element kan vara illustrationer, fotografier eller till och med text.
Egenskaper (redigera)Elementen har egenskaper som kan påverka deras position och jämna utseende på scenen och vi kan hantera dem med hjälp av panelen Egenskaper (redigera).
TidslinjeDet gör att vi kan hålla reda på elementen och deras egenskaper under hela vårt projekt.
BibliotekHär kan vi registrera de resurser som vi importerar till projektet och ge enkel åtkomst till de symboler som vi tror på Animera.
VerktygDe visas högst upp på arbetsytan. Vi använder dem för att skapa, välja och ändra element på scenen, det finns inte många men vi skulle bli förvånade över att veta hur mycket vi kan göra med dem.
Eftersom vi vet hur vårt verktyg distribueras och vi är bekanta med begreppen i det, kan vi våga skapa vår första animering.
För att skapa vår första animering kommer vi att experimentera lite med övergångarna i en given bild, låt oss se stegen att följa:
1- Vi ska skapa ett nytt projekt med alternativet ny fil om vi har stängt där vi arbetar för att förstå strukturen och elementen i verktyget. När vi startar ett projekt är vårt stadium tomt, vi kan ändra detta i egenskaperna för skede på vänster sida av skärmen, för detta trycker vi på den vita rutan och väljer en färg vi föredrar eller om vi har en färg i hexadecimal notation kan vi inkludera den som vi ser i följande bild:

FÖRSTORA

2- När det gäller denna handledning har vi valt en mörk färg så att bilden som vi kommer att inkludera i skede markera. Nu för att inkludera en bild som vi går till Arkiv och vi väljer att importera, kommer filutforskaren att visas och vi väljer bilden för att inkludera:

FÖRSTORA

Det är viktigt att i egenskaperna i vårt scenario har vi överflödet u svämma över i dold sedan vår skede den presenterar en liten del av all vår HTML, så om vi inte vill se element utanför scenen är det viktigt att ha detta värde för den egenskapen. Vi kan också ändra namnet på våra element i avsnittet av Egenskaper (redigera), på detta sätt kan vi bättre identifiera dem i vårt projekt.
3- Nu går vi till vår Tidslinje och vi verifierar att uppspelningsräknaren är på 0:00 att börja med vår animation. Det är här den intressanta delen kommer in och det är här vi måste ägna maximal uppmärksamhet, först måste vi verifiera att nyckelbildsläge trycker såväl som automatiskt övergångsläge, som vi kan se i följande bild:

För att göra våra animationer måste vi använda funktionen Toggle Pin som aktiveras i knappen bredvid automatiskt övergångslägeNär du aktiverar den här knappen aktiverar vi ramarna eller övergången och den måste åtföljas av den gula räknaren, eftersom vi på så sätt kan göra en övergång på så många sekunder tills vi flyttar vår Pin till samma nivå som den andra räknaren.
4- Att genomföra vår första övergången låt oss trycka på knappen Toggle Pin och vi ska ta den andra räknaren och vi ska flytta den 200 sekunder, efter detta flyttar vi vår bild till botten av vår skärm, låt oss se hur den ser ut:

FÖRSTORA

Som vi kan se delen markerad med blått i Tidslinje representerar övergången som vi kan förhandsgranska om vi trycker på mellanslagstangenten. Vi ser då att det är ganska lätt att göra en övergång, men tänk om vi vill göra en andra övergång eller fler av dessa? För detta måste vi flytta vår Stift mot den andra räknaren, på detta sätt indikerar vi till Animera att vi avslutar processen med den första övergången och vi kan starta en ny.
5- Vi ska göra en andra övergången där vi den här gången kommer att minska ogenomskinligheten i vår bild, för detta väljer vi vår bild genom att minska dess opacitet till 46% och som vi nämnde flyttar vi Stift på den andra räknaren och upprepa stegen i punkt 4, låt oss se:

FÖRSTORA

6- Äntligen ska vi göra en tredje övergången för att slutföra vår animation. Som vi redan vet flyttar vi vår andra räknare några sekunder, drar vår bild diagonalt till vänster och stänger övergången genom att flytta Stift om den andra räknaren:

FÖRSTORA

7- Vi sparar vårt arbete och trycker på mellanslagstangenten för att se vår animation, om vi fortfarande inte är nöjda kan vi gå igenom de övergångar som representeras av den blå färgen i vår Tidslinje och vi ändrar värdena eller om vi önskar övergångstyp.
Eftersom vi är nöjda med vårt arbete är det dags att utföra det sista steget, och det är att visa det för visning i en webbläsare, vilket är målet för vilket vi arbetar.
Det finns två sätt att se vårt arbete, det första och det enklaste kan göras från verktyget, för detta går vi till fliken Arkiv och vi väljer Förhandsgranska i webbläsaren, som omedelbart öppnar animationen i vår standardwebbläsare:

Det andra är lite mer komplicerat om vi inte har erfarenhet av webbutveckling, det vill säga att ta filerna och göra en integration med vår webbapplikation. Det är viktigt att vara mycket försiktig när du gör detta och inkludera alla filer som genereras av Animera annars fungerar inte animationen.
Med detta avslutade vi denna handledning, där vi kunde veta hur det fungerar Adobe Edge Animate, se de viktigaste egenskaperna och göra vår första animering på några minuter utan att behöva en enda kodrad, generera den med HTML5 Y JavaScript för implementering i alla webbapplikationer.