HTML5 App Smackdown: Vilket verktyg är bäst?
Moderna webbläsare kan stödja rik animering och interaktivt innehåll utan att behöva använda plugins som Flash. I stället är det möjligt att använda en kombination av JavaScript, HTML5 och CSS3 för att skapa kvalitativt animerat, interaktivt innehåll som fungerar på skrivbords webbläsare och på mobila enheter som tabletter och smartphones.
Medan det finns ett antal JavaScript-animeringsramar (och vi tar en titt på några av dem senare), finns det bara ett fåtal applikationer som erbjuder en rik visuell redigerare där koden hålls i bakgrunden. De mest kända av dessa är Adobe Edge Animate och Tumult Hype. En tredje spelare i denna arena är Sencha Animator, medan Google också har gått in på arenan med Google Web Designer.
Dessa verktyg kan tyckas vara ganska lika på ytan, men använda olika underliggande tekniker, vilket skapar vissa begränsningar och möjligheter. Även om jag har kallat detta för en HTML5- app smackdown, begränsar inte alla dessa verktyg strängt sig till HTML5.
I det röda hörnet ...
Edge Animera CC är en del av Adobes Edge-familj, som erbjuder en serie utvecklingsverktyg och -tjänster för den nuvarande webben. Den är tillgänglig för både PC och Mac som en del av Adobes abonnemangsbaserade Creative Cloud, som en enda app för 17,58 USD per månad, eller som en del av hela CC-paketet för 46,88 USD per månad.
Tumult Hype 2 är endast Mac och levereras med ett aktuellt enda apppris på 29,99 kr.
Sencha Animator 1.5 är en del av Senchas HTML apputvecklingsekosystem, tillgängligt för Mac, PC och Linux, det kostar $ 199.
Google Web Designer , för närvarande i beta, är gratis. Det är lite av en okänd mängd, så låt oss springa över regeln.
(30-dagars versioner finns också tillgängliga för de betalda verktygen, så du kan ladda ner dem och ta reda på själv vilken som passar dina krav.)
Tumult Hype
Tumult Hype 2, fakturerad som HTML5 skapningsapp, är inriktad på att skapa enkla interaktiva multimedia animationer. På knappt 30 dollar är det bra valuta för pengarna.
Att vara Mac tillåter det bara att erbjuda ett välbekant användargränssnitt för Mac-appar, vilket gör det enkelt att få fart på hastigheten.
UI-enheten har ett huvudfönster med ett dokumentområde och en tidslinje och ett flytande inspektionsfönster. Det finns andra fönster för Media-webbläsare och ett Resursbibliotek där du kan lägga till ytterligare filer, JavaScript-funktioner och teckensnitt.
Dokumentområdet är inställt på skärmstorleken du vill skapa, och på vilka element som placeras, t.ex. text, knappar och enkla former, eller importerade media, t.ex. bilder, video, ljud och HTML-widgets som visas i en iframe.
Att ändra elementernas egenskaper över tid för att skapa animering styrs på tidslinjen. Som standard visas endast 3 egenskaper - storlek, opacitet och position - men det finns mycket mer som kan uppdateras, inklusive rotation, texteffekter, gränserad radie etc., som inte alla är relevanta för alla element.
Hype stöder flera tidslinjer, så att du kan ha 2 olika animeringar som spelar beroende på vilken knapp som trycks in till exempel. Det är också möjligt att få en tidslinje att spela i förhållande till huvudtidslinjen, så att båda spelar samtidigt. I praktiken kan detta bli mäktigt förvirrande, och det är inte nära så enkelt att skapa nestade tidslinjer som i Edge Animate eller Sencha Animator.
Hype använder scener för att skilja ut separata animeringar, och det är lätt att skapa övergångseffekter mellan scener. Detta gör Hype bra för att skapa interaktiva presentationer eller storybooks.
Interaktivitet och kontroll läggs till i Hype genom åtgärdspanelen och inspektionspanelens scenpanel och görs genom att välja från listrutor för olika interaktioner eller olika händelseutlösare, till exempel att tidslinjen fylls i. Detta gör det enkelt att lägga till enkla kontroller och interaktivitet, men att göra något bortom detta kräver att du deltar i JavaScript. Om du till exempel vill uppdatera texten på ett textelement dynamiskt eller på ett musklick ändra egenskaperna hos ett annat element, är det enda sättet att göra detta genom att skriva en JavaScript-funktion.
Med version 2 av Hype finns en stödjande produkt som heter Hype Reflect, som låter dig förhandsgranska dina Hype-skapelser på iOS-enheter, utan att behöva exportera, sedan ladda upp till en server för att kolla på en iPad eller iPhone. Det är en bra timesaver men visar Hype's Apple bias; Hype Reflect-appen är endast iOS.
Här är där Hype visar det är begränsningar, eftersom det verkligen är mycket lite hjälp. Du ställs in direkt i hardcore JavaScript-programmering och försöker förstå DOM för filerna som Hype skapar. Mer vägledning och exempel här från Tumult är viktiga om Hype kommer att gå utöver ett enkelt animationsverktyg. Det är synd eftersom Hype får så mycket annat rätt, men det behöver mycket bättre dokumentation.
Edge Animera CC
Ursprungligen kallas bara Edge, Adobe ändrade namnet till Edge Animate när de svarade på Edge-varumärket för att täcka en hel serie av nästa webteknologi. Edge Animate CC är den andra uppdateringen till programmet, och det visar att Edge Animate nu är en väl övervägd, mogen produkt.
Utseendet utnyttjar den "mörka" användargränssnittet som kännetecknar alla Adobes nuvarande sortiment av program, vilket ser väldigt professionellt ut, och de dockade panelerna fungerar riktigt bra på en storskärmsdisplay.
För användare av Flash eller After Effects kommer gränssnittet att vara bekant, och det delar många koncept med dessa appar. Som med Hype importeras element, placeras på scenen och animeras genom att justera egenskaper i tidslinjen. Att lägga till keyframes till egenskaper i tidslinjen är nästan exakt som efter effekter. En fin touch är att du kan "snap" keyframes så det är lättare att synkronisera animationer tillsammans.
Interaktivitet läggs till på ett mycket likartat sätt som Flash, genom att lägga till åtgärder till element eller på tidslinjen. Som med Hype implementeras interaktivitet med hjälp av JavaScript, men införandet av koduttag innebär att du försiktigt förs in i det, tills du känner dig trygg nog att starta handkodning. Jag tror att detta tillvägagångssätt fungerar väldigt bra, och Edge Animate fungerar som en utmärkt introduktion till JavaScript-animationsprogrammering.
Till skillnad från Hype stöder Animate inte import av ljud eller video, men det finns tilläggsramar för att stödja dem.
En ny ny funktion i den uppdaterade versionen är möjligheten att ange positionen för varje objekt antingen i fasta pixelenheter eller som en procentandel av bredden. Detta gör att du kan skapa responsiva mönster som kan anpassas till olika skärmstorlekar. Det är särskilt användbart om du skapar animerade interaktiva bannerannonser.
Vad Animate saknar är olika scener, men jag gillar det här. Du kan lägga till etiketter på tidslinjen och kan enkelt lägga till stopppunkter på tidslinjen och lägga till interaktivitet för att hoppa till andra punkter. Men det betyder också att om du vill animera övergångar från en skärm av innehåll till en annan, har du fullständig kontroll.
En stark funktion av Animera är möjligheten att skapa symboler. Ett symbol verkar som en MovieClip i Flash, och lägger till en ny tidslinje som är oberoende av den huvudsakliga tidslinjen. Symboler är kraftfulla om du vill skapa en animering och sedan använda den i en större animering. Till exempel kan du animera ett rymdskepp som kretsar runt en måne som en symbol, och sedan ställer månsymbolen runt en planet på en annan. Att lägga till interaktivitet för målsymboler är också mycket enkelt.
När utmatad Edge Animate använder det allestädes närvarande jQuery-biblioteket för att hantera visningselement och hantera animering och CSS3 för att hantera vissa övergångar och effekter. Medan detta gör det flexibelt och enkelt att skriva extern kod för att rikta in på Animate-innehållet, skjuter det verkligen gränserna för det jQuery.animate-biblioteket. Detta kan resultera i trög prestanda på långsammare enheter. Också publicerade Edge Animate-projekt är större filstorlekar än resultatet av något annat verktyg här, vilket resulterar i längre nedladdningstider.
En annan ny egenskap är möjligheten att enkelt lägga till webbfonter med Adobe Edge Web-teckensnitt, som för närvarande innehåller 100-tal gratis webbfonter som finns på Adobes CDN. Du kan också lägga till egna anpassade webbfonter relativt enkelt.
En annan Edge-produkt, Edge Inspect (tidigare kallad skugga) låter dig förhandsgranska ditt arbete över enheter. Det är inte lika integrerat med Animate as Hype Reflect är med Hype, men fungerar på flera enheter, inklusive iOS och Android.
Edge Animate kommer med 8 bra handledning som ingår för att förklara grunderna, och det finns ett växande användargrupp för att ge ytterligare support och handledning, och utöka Edge-funktionerna. I slutändan är det kanske Edge Animes största tillgång. Jag har sett några exempel där Greensock Animation Platform (GSAP) används inom Edge Animate för att använda JavaScript för animering snarare än jQuery, och det här är en spännande utveckling som jag kommer att titta vidare på.
Jag hittade Edge Animate för att vara bra för att skapa ganska sofistikerade interaktiva animeringar, den typ av sak som Flash användes för, men det gav mig en önskan om att se ett smidigare, meningsfullt HTML5-baserat verktyg med en bättre JavaScript-baserad animationsmotor.
Sencha Animator 1.5
Sencha Animator lovar att låta dig "Skapa rika CSS3-animeringar med lätthet". Men på knappt 200 dollar verkar det inte ge stort värde för pengarna.
På många sätt erbjuder det ett liknande tillvägagångssätt som Hype, med tanken på att länka innehållsskenor, var och en med sin egen tidslinje. Men till skillnad från Hype eller Animera, har enskilda egenskaper hos element inte egna spår på tidslinjen. Alla nyckelbilder för ett element, till exempel för position, rotation, opacitet etc är alla på samma spår. Jag tror att det beror på användningen av CSS3 för animationen, där du inte kan animera individuella transformationer självständigt. Detta kan göra det svårt att skapa komplexa animationer.
Precis som Edge Animation, är en ny egenskap av Animator 1.5 att element eller grupper av element kan konverteras till Symboler, som kan animeras med egna fristående tidslinjer.
Precis som med Hype, läggs till enkel interaktivitet med drop down-åtgärder för att ge grundläggande navigering, eller köra anpassad JavaScript. Välja JavaScript öppnar ett anpassat JavaScript-fönster där du kan slå din egen kod, och det finns många kodsedlar att använda också.
Jag började tänka att Sencha Animator var för begränsad för att vara användbar, men dess kraft och flexibilitet avslöjar sig långsamt. Medan det finns ett bra antal provanimeringar inkluderade skulle jag gärna se några prover med mer avancerad JavaScript-kod som verkligen drivit den interaktiva förmågan hos Sencha Animator.
Medan du använder CSS3 för animeringar och övergångar innebär det att animeringar inte fungerar i vissa webbläsare. Jag tror att det är mer framåtblickande än Edge Animes överlit på jQuery.
Google Web Designer
Mycket mycket det nya barnet i kvarteret - och som de flesta av Googles produkter som är avsedda att förbli för alltid i beta - Google Web Designer erbjuder en visuell IDE för att skapa animationer och interaktivt innehåll gratis. Det är dock bara gratis om du inte värdesätter din tid, eftersom du kommer att spendera mycket på ditt huvud på skrivbordet.
GWD, som vi kallar det från och med nu, är i själva verket en HTML5-app som är förpackad med hjälp av Google Chromium Embedded Framework. Detta kan förklara varför användargränssnittet saknar finess.
En stor del av GWD: s fokus verkar vara inriktad på att producera interaktiv annonsering. När du skapar en ny fil kan du ange för att skapa en Google-annons, med alternativ för att välja DoubleClick Studio Rich Media och AdMob som två av alternativen "Miljö". Det andra alternativet är att skapa en tom html-fil, som inte har några pixeldimensioner.
GWD har också två animationslägen, snabb och avancerad. Snabbläge är mer som det diasshowläge som Hype använder, för att övergå mellan scener. Endast i avancerat läge får du en tidslinje där du kan lägga till nyckelbilder.
GWD är svår att använda. Det klara tidsgränssnittet innebär att lägga till nyckelbilder tar lite att vänja sig och du kan inte "skura" tidslinjen (dvs dra uppspelningshuvudet för att förhandsgranska animeringen) som du kan med alla andra appar. Om du lägger till element som video eller bilder på sidan måste man manuellt skriva in filnamnet i objektets källegenskap. Alla dessa är ganska små men visar att det fortfarande finns gott om arbete som ska göras för att göra det till en fullt genomförd app.
Att lägga till händelser och interaktivitet är inte alls uppenbart. Såvitt jag kan berätta kan du bara skapa klickevenemang när du arbetar med annonstypen.
Åtminstone GWD är helt HTML5, med grafiska element gjorda som dukelement och video och ljudobjekt inbäddade med inbyggda HTML-video och ljudkoder. Den innehåller även 3D-transformer, vilket är en unik funktion, men inte stöds av alla webbläsare.
En intressant del av GWD är komponenter, som är små bitar av funktionalitet som du kan dra och släppa på dina skapelser. Exempelkomponenterna inkluderar ett swipable bildgalleri och video samt Google-specifika alternativ som en karta eller en YouTube-video. Jag tycker att det här visar att Google ser den här appen nästan mer av ett Dreamweaver-liknande verktyg för webbskapande än ett animeringsverktyg. I slutändan försöker det kanske vara allting för alla människor, och saknar allting.
Till skillnad från resten av de apps som granskas här, vilka är verktyg för att bygga ditt projekt, som sedan publiceras för att skapa HTML, med GWD bygger du den faktiska HTML-filen. Det betyder att du kan byta mellan designvy och kodvisning och redigera i antingen. Som du förväntar dig är de sista filstorlekarna små och CSS3-animationerna snabbt.
Inte överraskande finns det väldigt lite dokumentation och praktiskt taget inga exempel. Det verkar hela tiden ha blivit kastat upp där utan att överväga hur man lättar användarna in i det. Jag vet verkligen inte varför Google släpper ut denna typ av halvhjärtade shovelware, om inte de vill försöka irritera människor. Det är synd, för det finns ett verkligt löfte här.
Några slutsatser
Var och en av dessa verktyg har sina styrkor och svagheter. Hype är ett bra verktyg för att skapa animeringar och enkel interaktivitet, men har inte ambitioner att vara den mer fullt utvecklade utvecklingsmiljö som Edge Animate och Google Web Designer gör. Jag började tänka på att Sencha Animate var överprissatt och under featured, men ur lådan är det förmodligen det bästa av bandet.
Edge Animate erbjuder överlägset den bästa arbetsmiljön och med sina lyhörda funktioner och lätthet att lägga till webbfonter, är förmodligen det snabbaste att få fart på. Men beroende av jQuery för animering skapas stora filer som hogminne. Prissättningsmodellen för Adobe Creative Cloud gör det också svårt att bedöma. Om du redan är Creative Cloud-kund kan du ladda ner det gratis, annars kostar det 17 dollar per månad det är ett dyrt förslag.
Google Web Designer är den mörka hästen, och förmodligen det största hotet mot Adobes krona i den här arenan. Det är trots allt mycket svårt att tävla med gratis. Jag kommer att spendera mer tid med GWD för att se om det verkligen är ett möjligt val som ett utvecklingsverktyg.
Det råder ingen tvekan om att JavaScript, HTML5 och CSS3 är framtiden, även om det optimala sättet att utnyttja dessa tekniker fortfarande är klart.
Ren kodalternativ
Det finns ett antal JavaScript-bibliotek som erbjuder alla funktioner i dessa verktyg, men saknar den rika visuella redaktören. Som sådan har de en mycket brantare inlärningskurva, men kan skapa smalare, meningsfullare kod.
Greensock Animationsplattform
The Greensock Animation Platform (GSAP) fjädrar från Greensock-animations-tweening-motorn som var mycket älskad av Flash-utvecklare. Nu portas till JavaScript, tillåter det utvecklare att kedja samman komplexa sekvenser av animering. Men en tidslinjebaserad IDE är mycket lättare att visualisera.
CreateJS
De CreateJS Svit med JavaScript-bibliotek innehåller allt du behöver för att skapa rika interaktiva applikationer för webbläsaren. EaselJS är biblioteket som används för att skapa element som använder HTML5s dukobjekt, medan TweenJS används för att styra animering och interaktivitet. Precis som med GSAP, är det rena kodbaserade tillvägagångssättet ett svårt lärande, men en aktiv utvecklare community betyder att det finns gott om hjälp där ute.
En dag kan en dedikerad IDE för CreateJS visas. Det finns en komponent för Flash som exporterar Flash-tillgångar och animeringar till CreateJS. Det finns några begränsningar för denna export, men det är ett bra sätt för Flash-designers och utvecklare att övergå till ett JavaScript-baserat verktyg.
ProcessingJS
En port i det Java-baserade Processing-visuella programmeringsspråket till JavaScript, Processing.js erbjuder en rik och mogen programmeringsmiljö för att skapa interaktivt och animationsinnehåll, som visas i ett dukelement. Processningsspråksspråket är ett kraftfullt sätt att arbeta med animerat interaktivt innehåll och konverteras till JavaScript vid export.
PaperJS
Ett annat visuellt programmeringsspråk, Paper.js använder sitt eget PaperScript-kodspråk för att underlätta för att skapa animeringar och interaktivitet. Det bygger på den mycket populära Illustrator plug-in Scriptographer. Precis som vid bearbetning konverteras PaperScript-koden till JavaScript för export och visas inom ett dukelement.
Vilket av dessa verktyg föredrar du? Missade vi ditt valfria verktyg? Låt oss veta i kommentarerna.
Utvalda bild / miniatyrbild, användningar smackdown wrestler bild via Shutterstock.