Av: Erica Brandin

Adobe Edge Animate är ett program som jag lärt känna nu under min praktik hos Right Thing United. Edge Animate är ett program för att skapa animerat, responsivt och interaktivt innehåll för webben.På Right Thing United används det framförallt till att göra animerade HTML5 banners, men även till att göra större projekt så som workbooks.
Kolla in hur presentationen ser ut i Edge Animate här!


Introduktion

Adobe Edge Animate är ett program i Edge-serien från Adobe. Adobe Edge är en serie webbutvecklar-program. Det första programmet släpptes i augusti 2011 och kallades Edge. I september 2012 bytte Adobe namn på programmet till Edge Animate. Samtidigt släpptes även Edge Reflow (Ett program där du skapar design för responsiva webbplatser), Edge Code (En texteditor där du kan arbeta med HTML, CSS och JavaScript. Adobe avbröt dock utvecklingen av detta program i november 2014 för att istället fokusera på att utveckla Brackets) och Edge Inspect (Ett program där du kan förhandsgranska ditt innehåll i olika mobila enheter. Till exempel när du designar din responsiva webbplats i Edge Reflow kan du se resultatet i realtid i din smartphone.) (Wikipedia, 2015).

Edge Animate skapar applikationer baserat på HTML5, JavaScript, jQuery och CSS3. Detta betyder dock inte att du behöver kunna koda utan du kan som designer skapa en fullt fungerande animation utan att editera kod. Men om du vill koda så kommer du enkelt åt koden och kan skapa en animation som fungerar och ser ut exakt så som du vill.

Funktioner

Responsiv
Allt man publicerar på webben idag bör vara responsivt och med Edge Animate kan du med enkla metoder göra så att dina animationer ser lika bra ut på en stor tv-skärm som på en lite mindre smartphone-skärm.

Interaktivt
Med Edge Animate är det lätt att göra ditt innehåll interaktivt. Du kan med hjälp av att lägga till actions på objekt få saker att hända när användare till exempel klickar på dem. Du kan till exempel länka till en annan sida, få ett objekt att röra på sig eller skapa ett bildspel. Och du behöver inte kunna JavaScript! Det finns ett stort bibliotek med olika actions så genom endast några klick skapar Edge Animate skriptet åt dig. Och om du kan JavaScript är möjligheterna ännu större.

Workspace

Om man är bekant med andra Adobe program sedan tidigare kommer man att känna igen sig, gränssnittet ser ungefär likadant ut. Jag tänkte nu förklara de olika delarna man ser när man öppnar programmet:

Stage (Scen) är där du ser din animation som du håller på att utveckla, här kan man även spela upp och se hur animationen ser ut.

Elements (Element) är objekt, så som bilder och text, som du kan lägga till på din scen.

Properties (Egenskaper) alla element har egenskaper som avgör hur elementet fungerar på scenen och i animationen, inställningarna kan du ändra i properties-panelen.

Timeline
(Tidslinje) linkar den som finns i Flash och After Effects och håller koll på elementen och deras egenskaper över tiden. Det är här du skapar animationer med hjälp av keyframes. Du kan till exempel få ett element att fadea in från sidan genom att lägga till keyframes där du ändrar egenskaperna, i det här fallet positionen, för elementet.

Library (bibliotek) Här hittar du element och symboler som du importerat in i projektet.

Tools (verktyg) Verktygen hittar du ovanför scenen och det finns inte så många, om man jämför med till exempel Photoshop, men man kan ändå göra förvånansvärt mycket med de få som finns.

 

Edge Animate och Flash

Innan Edge Animate var Flash det dominerande verktyget för att skapa animerat webbinnehåll. Flash blev dock ifrågasatt när Apple valde att inte tillåta Flash i iOS. När iPad släpptes blev frågan ännu större och Steve Jobs, Apples grundare, skrev då ett öppet brev i April 2010, ”Thoughts on Flash”, där han ville ge en närmare förklaring till varför Apple inte tillåter Flash. Där förklarar han till exempel att Flash inte är så öppet som Adobe väljer att framställa det, problemet med att flash inte är optimalt för mobil då han beskriver hur många webbplatser använder ”Mouse-over” vilket inte fungerar på en touchskärm och att han ser en stor nackdel med att låta en tredje parts programvara komma mellan plattform och utvecklaren då det kan resultera i dåliga appar och hindra utveckling och förbättring av plattformen (Jobs, 2010). Här kan du läsa hela brevet.

Adobes CEO Shantau Narayen svarade på brevet i en intervju med The Wall Street Journal. Där menade han på att de tekniska problem som Jobs beskriver endast är ett försök för Apple att dölja sina egna problem och att om Adobe verkligen är den största anledningen till att Mac kraschar, som Jobs beskriver, så ligger problemet i Apple OS och inte i Adobes produkter (Rubenstein, 2010).

Jobs förespråkade användandet av den nya webbstandarden HTML5 och tyckte att Adobe istället borde fokusera på att skapa ett verktyg där man kan skapa avancerad grafik och animationer med hjälp av HTML5 (Jobs, 2010). Adobes svar på detta var att de förespråkar flera plattformar så att kunderna själva får välja vilken teknik de vill använda (Rubenstein, 2010).

Edge Animate presenterades av Adobe som ett nytt multimedia verktyg för webbaserat innehåll den 1 augusti 2011. Adobe meddelade sedan den 9 november 2011 att de inte längre skulle utveckla Flash för mobila webbläsare utan istället fokusera på nya produkter med mer öppen standard såsom HTML5, JavaScript och CSS3 (Wikipedia, 2015). Detta blev alltså startskottet för Edge Animate som ett verktyg för webbaserat innehåll både för desktop, mobil och surfplattor.


Slutsats

När jag skulle lära mig Edge Animate kände jag att jag hade en fördel i och med att jag jobbat i andra Adobe program så som Photoshop och Illustrator tidigare. Man är van vid gränssnittet och behöver inte lägga någon extra tid på att förstå det. Jag kände även att jag hade en fördel eftersom jag kan både HTML5, CSS3 och JavaScript. Även om det inte är ett måste att kunna det för att skapa en animation var det lättare att förstå vad de olika skripten gjorde och kunna göra mindre ändringar.

Jag tycker att programmet varit roligt att arbeta med och ett program som jag känner att jag kommer att ha användning för. Jag gillar att man kan se resultatet i scenen framför sig och även att man kan förhandsvisa i programmet och i webbläsaren. Jag vet att många som arbetat i Flash tidigare är lite negativa till programmet och saknar många funktioner som Flash tillgodosåg, jag har dock ingen erfarenhet av Flash så personligen kan jag inte jämföra dessa två.

Jag skulle rekommendera detta program till personer som tycker att webb är kul, de som kan koda och även de som inte kan. Det är ett bra program för att göra banners och mindre projekt som ska vara interaktivt och innehålla animationer.

Tutorial

Här är en bra tutorial i tre delar som Abobe gjort om hur man gör en webbanner i Edge Animate.

Övningsuppgift

Du ska genom att följa tutorialsen skapa en webbanner där du marknadsför dig själv.
Bannern ska innehålla, text, bild och någon slags animation. Den ska även vara responsiv.

 

Källhänvisning

Jobs, Steve. (2010-04). Thoughts on Flash. [Elektronisk] Tillgänglig: http://www.apple.com/hotnews/thoughts-on-flash/ [2015-10-26]

Rubenstein, Benjamin (2010-04-29). Adobe respons to Jobs “Thoughts on Flash”. [Elektronisk] Tillgänglig: http://www.neowin.net/news/adobe-respond-to-jobs039-quotthoughts-on-flashquot [2015-10-26]

Wikipedia. (2015-09-09). Adobe Edge. [Elektronisk] Tillgänglig: https://en.wikipedia.org/wiki/Adobe_Edge [2015-10-25]