HTML5 App Smackdown: Hvilket værktøj er bedst?
Moderne browsere kan understøtte rige animationer og interaktivt indhold uden at bruge plugins som Flash. I stedet kan du ved hjælp af en kombination af JavaScript, HTML5 og CSS3 skabe kvalitets animeret, interaktivt indhold, der fungerer på desktopbrowsere og på mobile enheder som tabletter og smartphones.
Mens der er en række JavaScript-animationsrammer (og vi tager et kig på et par af dem senere), er der kun få programmer, der tilbyder en rigtig visuel editor, hvor koden holdes i baggrunden. De mest kendte af disse er Adobe Edge Animate og Tumult Hype. En tredje deltager i denne arena er Sencha Animator, mens Google også er kommet ind i arenaen med Google Web Designer.
Disse værktøjer kan synes at være ret ens på overfladen, men bruge forskellige underliggende teknologier, hvilket skaber visse begrænsninger og muligheder. Selvom jeg har kaldt dette til en HTML5 app smackdown, begrænser ikke alle disse værktøjer strengt taget til HTML5.
I det røde hjørne ...
Edge Animation CC er en del af Adobes Edge-familie, der tilbyder en række næste generationsværktøjer og -tjenester til det moderne web. Den er tilgængelig til både pc og Mac som en del af Adobes abonnementsbaserede Creative Cloud, som en enkelt app for $ 17,58 om måneden eller som en del af den komplette CC-pakke til $ 46,88 om måneden.
Tumult Hype 2 er kun Mac og leveres med en nuværende enkelt app-pris på 29,99 dollar.
Sencha Animator 1.5 er en del af Sencha's HTML app udvikling eco-system, tilgængelig til Mac, PC og Linux, det er prissat $ 199.
Google Web Designer , i øjeblikket i beta, er gratis. Det er lidt af en ukendt mængde, så lad os køre reglen over det.
(30-dages prøveversioner er også tilgængelige for de betalte værktøjer, så du kan downloade dem og finde ud af, hvilken som passer til dine behov.)
Tumult Hype
Tumult Hype 2, faktureret som HTML5-oprettelsesapp, er stærkt fokuseret på at skabe enkle interaktive multimedie-animationer. På lige under $ 30 er det stor værdi for pengene.
At være Mac giver det kun mulighed for at tilbyde et velkendt brugergrænseflad til Mac-apps, hvilket gør det nemt at komme hurtigt op.
UI'en har et hovedvindue med et dokumentområde og en tidslinje og et flydende inspektionsvindue. Der er andre vinduer til mediebrowser og et ressourcebibliotek, hvor du kan tilføje yderligere filer, JavaScript-funktioner og skrifttyper.
Dokumentområdet er indstillet til den skærmstørrelse, du vil oprette, og på hvilke elementer som f.eks. Tekst, knapper og enkle former eller importerede medier som billeder, video, lyd og HTML-widgets, der vises i en iframe.
Ændring af egenskaberne af elementer over tid for at skabe animation styres på tidslinjen. Som standard vises kun 3 egenskaber - størrelse, opacitet og position - men der er mange flere, der kan opdateres, herunder rotation, teksteffekter, grænseradius osv., Som ikke alle er relevante for alle elementer.
Hype understøtter flere tidslinjer, så du kan have 2 forskellige animationer, der afspilles afhængigt af hvilken knap der trykkes for eksempel. Det er også muligt at få en tidslinje til at spille i forhold til hovedtidslinjen, så begge spiller på en gang. I praksis kan dette blive stærkt forvirrende, og det er ikke så tæt på at skabe indlejrede tidslinjer som i Edge Animate eller Sencha Animator.
Hype bruger scener til at adskille forskellige animationer, og det er nemt at oprette overgangseffekter mellem scener. Dette gør Hype godt til at skabe interaktive præsentationer eller storybooks.
Interaktivitet og kontrol tilføjes i Hype via Handlingspanelet og Inspektørens Scenepanel, og det gøres ved at vælge fra drop-down lister til forskellige interaktioner eller forskellige hændelsesudløsere, som f.eks. Gennemførelse af tidslinjen. Dette gør det nemt at tilføje enkle kontroller og interaktivitet, men at gøre noget ud over dette kræver at deltage i JavaScript. Hvis du f.eks. Vil dynamisk opdatere teksten til et tekstelement eller ved et klik med musen ændre egenskaberne for et andet element, er den eneste måde at gøre dette ved at skrive en JavaScript-funktion.
Med version 2 af Hype findes der et understøttende produkt kaldet Hype Reflect, som lader dig forhåndsvise dine Hype-kreationer på iOS-enheder uden at skulle eksportere, og derefter uploade til en server for at kontrollere en iPad eller iPhone. Det er en stor timesaver, men viser Hype's Apple bias; Hype Reflect-appen er kun iOS.
Her er hvor Hype viser det er begrænsninger, da der virkelig er meget lidt hjælp. Du er pitched lige ind i hardcore JavaScript programmering og forsøger at forstå DOM af de filer, som Hype opretter. Flere vejledninger og eksempler her fra Tumult er vigtige, hvis Hype kommer til at bevæge sig ud over et simpelt animationsværktøj. Dette er synd, fordi Hype får så meget andet rigtigt, men det kræver meget bedre dokumentation.
Edge Animation CC
Oprindeligt kaldes Edge, Adobe ændrede navnet til Edge Animate, når de responderede på Edge-mærket for at dække en hel række næste web-teknologier. Edge Animation CC er den anden opdatering til programmet, og det viser, at Edge Animate nu er et velovervejet, modent produkt.
Udseende og udnyttelse udnytter den "mørke" brugergrænseflade, der kendetegner alle Adobes nuværende udvalg af programmer, der ser meget professionelt ud, og de dockede paneler fungerer rigtig godt på en storskærm.
For brugere af Flash eller After Effects bliver grænsefladen kendt, og den deler mange koncepter med disse apps. Som med Hype importeres elementer, placeres på scenen og animeres ved at justere egenskaber i tidslinjen. Tilføjelse af keyframes til egenskaber i tidslinjen er næsten nøjagtigt som After Effects. En fin touch er, at du kan "snap" keyframes, så det er lettere at synkronisere animationer sammen.
Interaktivitet tilføjes på en meget lignende måde som Flash, ved at tilføje handlinger til elementer eller på tidslinjen. Som med Hype implementeres interaktivitet ved hjælp af JavaScript, men inddragelsen af kodestykker betyder, at du føres forsigtigt ind i den, indtil du føler dig sikker nok til at starte håndkodning. Jeg tror, at denne tilgang fungerer rigtig godt, og Edge Animate fungerer som en glimrende introduktion til JavaScript-animationsprogrammering.
I modsætning til Hype understøtter Animate ikke import af lyd eller video, selvom der er udvidelsesrammer til at understøtte dem.
En nøgle ny funktion i den opdaterede version er evnen til at angive positionen for hvert objekt enten i faste pixel enheder eller som en procentdel af bredden. Dette giver dig mulighed for at skabe lydhørige design, som kan tilpasse sig forskellige skærmstørrelser. Det er især nyttigt, hvis du opretter animerede interaktive bannerannoncer.
Hvad Animate mangler er forskellige scener, men jeg kan faktisk lide det her. Du kan tilføje etiketter til tidslinjen og kan nemt tilføje stoppunkter på tidslinjen og tilføje interaktivitet for at hoppe til andre punkter. Men det betyder også, at hvis du vil animere overgange fra en skærm af indhold til en anden, har du fuldstændig kontrol.
Et stærkt træk ved Animate er evnen til at skabe symboler. Et symbol virker som en MovieClip i Flash, tilføjer en ny tidslinje, der er uafhængig af den vigtigste tidslinje. Symboler er kraftfulde, hvis du vil oprette et animationsstykke og derefter bruge det i en større animation. For eksempel kan du animere et rumskib, der kredser om en måne som et symbol, og derefter sætte månesymbolet rundt om en planet på en anden. Tilføjelse af interaktivitet til målsymboler er også meget ligetil.
Når outputted Edge Animate bruger det allestedsnærværende jQuery-bibliotek til at håndtere displayelementer og håndtere animation og CSS3 til at håndtere nogle overgange og effekter. Selvom det gør det fleksibelt og nemt at skrive ekstern kode for at målrette mod animeret indhold, skubber det virkelig grænserne for biblioteket jQuery.animate. Dette kan resultere i træg ydelse på langsommere enheder. Også udgivne Edge Animate-projekter er større filstørrelser end output fra et af de andre værktøjer her - hvilket resulterer i længere downloadtider.
En anden ny funktion er evnen til nemt at tilføje web skrifttyper ved hjælp af Adobe Edge Web skrifttyper, som i øjeblikket indeholder 100'erne af gratis web skrifttyper hostet på Adobes CDN. Du kan også tilføje dig egne brugerdefinerede web skrifttyper relativt nemt.
Et andet Edge-produkt, Edge Inspect (tidligere kaldet Shadow) giver dig mulighed for at forhåndsvise dit arbejde på tværs af enheder. Det er ikke så godt integreret med Animate as Hype Reflect er med Hype, men arbejder på flere enheder, herunder iOS og Android.
Edge Animate kommer med 8 gode tutorials med til at forklare det grundlæggende, og der er et voksende brugersamfund til at yde yderligere support og tutorials, og udvide Edge's funktionalitet. I sidste ende er dette måske Edge Animate's største aktiv. Jeg har set nogle eksempler, hvor Greensock Animation Platform (GSAP) bruges inden for Edge Animate til at bruge JavaScript til animation snarere end jQuery, og dette er en spændende udvikling, som jeg vil se nærmere på.
Jeg fandt Edge Animate at være fantastisk til at skabe relativt sofistikerede interaktive animationer, den slags ting, som Flash blev brugt til, men det gav mig lyst til at se et slankere, mere gennemsigtigt HTML5-baseret værktøj med en bedre JavaScript-baseret animationsmotor.
Sencha Animator 1.5
Sencha Animator lover at lade dig "Opret rige CSS3 animationer med lethed". Men på lige under 200 bucks synes det ikke at tilbyde stor værdi for pengene.
På mange måder giver den en lignende tilgang til Hype, med ideen om at forbinde scener med indhold, hver med sin egen tidslinje. Men i modsætning til Hype eller Anim, har individuelle egenskaber af elementer ikke deres eget spor på tidslinjen. Alle keyframes for et element, f.eks. For position, rotation, opacitet osv. Er alle på samme spor - jeg tror, det skyldes brugen af CSS3 til animationen, hvor du ikke kan animere individuelle transformationer uafhængigt. Dette kan gøre det vanskeligt at skabe komplekse animationer.
Ligesom Edge Animate er et nyt element i Animator 1.5, at elementer eller grupper af elementer kan konverteres til Symboler, som kan animeres med deres egne selvstændige tidslinjer.
Som ved Hype er tilføjelse af simpel interaktivitet forsynet med drop down handlinger for at give grundlæggende navigation eller køre tilpasset JavaScript. At vælge JavaScript åbner et brugerdefineret JavaScript-vindue, hvor du kan slå din egen kode, og der er også mange kodestykker at bruge.
Jeg begyndte at tænke på, at Sencha Animator var for begrænset til at være nyttig, men dens magt og fleksibilitet afslører langsomt sig selv. Selv om der er et godt antal prøve animationer inkluderet ville jeg gerne se nogle prøver med mere avanceret JavaScript kode, der virkelig skubbet de interaktive evner Sencha Animator.
Mens du bruger CSS3 til animationer og overgange betyder, at animationer ikke virker i nogle browsere, tror jeg, at det er mere fremadrettet end Edge Animate's overhed på jQuery.
Google Web Designer
Meget det nye barn i blokken - og ligesom de fleste af Googles produkter, der er bestemt til at forblive for evigt i beta - Google Web Designer tilbyder en visuel IDE til gratis animation og interaktivt indhold. Men det er kun gratis, hvis du ikke sætter pris på din tid, da du vil bruge en masse bang på hovedet fra skrivebordet.
GWD, som vi kalder det fra nu af, er faktisk en HTML5-app, pakket med Google Chrome Embedded Framework. Dette kan forklare, hvorfor brugergrænsefladen mangler finess.
En stor del af GWD's fokus synes at være rettet mod at producere interaktiv reklame. Når du opretter en ny fil, kan du angive, at du opretter en Google-annonce, med valgmuligheder for at vælge DoubleClick Studio Rich Media og AdMob som to af miljømulighederne. Den anden mulighed er at oprette en Blank html-fil, som ikke har pixeldimensioner.
GWD har også to animationsfunktioner, Hurtig og Avanceret. Hurtigtilstanden er mere som den diasshowfunktion, som Hype bruger, til overgang mellem scener. Kun i avanceret tilstand får du en tidslinje, hvor du kan tilføje keyframes.
GWD er svært at bruge. Den klare tidslinje grænseflade betyder at tilføje keyframes tager nogle vænne sig til, og du kan ikke "skrubbe" tidslinjen (dvs. trække afspilningshovedet for at forhåndsvise animationen) som du kan med alle de andre apps. Tilføjelse af elementer som video eller billeder til siden kræver manuelt at indtaste filnavnet i objektets kildeegenskab. Alle disse er forholdsvis små, men viser, at der stadig er masser af arbejde, der skal gøres for at gøre dette til en fuldt realiseret app.
Tilføjelse af begivenheder og interaktivitet er slet ikke indlysende. Så vidt jeg kan fortælle, kan du kun oprette klikhændelser, når du arbejder med annoncetypen.
I det mindste GWD er fuldt HTML5, med grafiske elementer gengivet som lærredelementer og video- og lydobjekter indlejret ved hjælp af native HTML-video- og lydkoder. Det omfatter også 3D-transformer, som er en unik funktion, men ikke understøttet af alle browsere.
En interessant del af GWD er komponenter, som er små biter af funktionalitet, som du kan trække og slippe på dine kreationer. Prøvekomponenter omfatter et swipable billedgalleri og video samt Google-specifikke indstillinger, som f.eks. En kort eller en YouTube-video. Jeg tror, at dette viser, at Google ser denne app næsten mere af et Dreamweaver-lignende web oprettelsesværktøj end et animationsværktøj. I sidste ende forsøger det måske at være alle ting for alle mennesker og mangler alle ting.
I modsætning til resten af de apps, der er gennemgået her, som er værktøjer til at opbygge dit projekt, som derefter offentliggøres for at oprette HTML, med GWD, bygger du den egentlige HTML-fil. Dette betyder, at du kan skifte mellem designvisning og kodevisning og redigere i enten. Som du ville forvente, er de endelige filstørrelser små, og CSS3 animationerne er hurtige.
Ikke overraskende er der meget lidt dokumentation og praktisk taget ingen eksempler. Det hele ser ud til at være blevet kastet deroppe uden hensyn til, hvordan man lette brugerne ind i det. Jeg ved virkelig ikke, hvorfor Google frigiver denne slags halvhjertet shovelware, medmindre de vil forsøge at irritere folk. Det er en skam, for der er ægte løfte her.
Nogle konklusioner
Hvert af disse værktøjer har sine styrker og svagheder. Hype er et godt værktøj til at skabe animationer og simpel interaktivitet, men har ikke ambitioner om at være det mere fuldt udviklede udviklingsmiljø, som Edge Animate og Google Web Designer gør. Jeg begyndte at tænke på, at Sencha Animate var overpris og under featured, men ud af kassen er det nok det bedste af bunken.
Edge Animate tilbyder langt det bedste arbejdsmiljø og med sine lydhøre funktioner og lethed at tilføje web skrifttyper, er nok den hurtigste til at komme op til fart med. Men afhængigheden af jQuery til animation skaber store filer, som hog-hukommelse. Prissætningsmodellen for Adobe Creative Cloud gør det også svært at bedømme. Hvis du allerede er en Creative Cloud-kunde, kan du downloade den gratis, ellers på $ 17 om måneden er det et dyrt forslag.
Google Web Designer er den mørke hest, og sandsynligvis den største trussel mod Adobes krone i denne arena. Det er trods alt meget vanskeligt at konkurrere med gratis. Jeg vil bruge mere tid med GWD for at se, om det virkelig er et muligt valg som et udviklingsværktøj.
Der er ingen tvivl om, at JavaScript, HTML5 og CSS3 er fremtiden, selvom den optimale måde at udnytte disse teknologier stadig er på spil.
Pure code alternativer
Der er en række JavaScript-biblioteker, der tilbyder alle funktionaliteterne i disse værktøjer, men mangler den rige visuelle editor. Som sådan har de en meget stejlere indlæringskurve, men kan skabe en slankere, mere meningsfuld kode.
Greensock Animation Platform
The Greensock Animation Platform (GSAP) fjedre fra Greensock animation tweening motor, der var meget elsket af Flash udviklere. Nu portet til JavaScript, det tillader udviklere at kæde sammen komplekse sekvenser af animation. Men en tidslinjebaseret IDE er meget lettere at visualisere.
CreateJS
Det CreateJS suite af JavaScript-biblioteker indeholder alt hvad du behøver for at oprette rige interaktive applikationer til browseren. EaselJS er biblioteket, der bruges til at oprette elementer, der bruger HTML5s lærredobjekt, mens TweenJS bruges til at styre animation og interaktivitet. Som med GSAP gør den rene kodebaserede tilgang det til en hård læring, selvom et aktivt udviklerfællesskab betyder, at der er masser af hjælp derude.
Nogle dage kan der vises en dedikeret IDE til CreateJS. Der er en komponent til Flash, der eksporterer Flash-aktiver og animationer til CreateJS. Der er nogle begrænsninger for denne eksport, men det giver en fantastisk måde for Flash-designere og udviklere at overgå til et JavaScript-baseret værktøj.
ProcessingJS
En port i Java-baseret Processing visuelt programmeringssprog til JavaScript, Processing.js tilbyder et rigt og modent programmeringsmiljø til at skabe interaktivt og animationsindhold, der vises i et lærredselement. Processions script sprog tilbyder en effektiv måde at arbejde med animeret interaktivt indhold, og konverteres til JavaScript på eksport.
PaperJS
Et andet visuelt programmeringssprog, Paper.js bruger sit eget PaperScript-kodesprog for at gøre det lettere at oprette animationer og interaktivitet. Det er baseret på den meget populære Illustrator plug-in Scriptographer. Som med Processing konverteres PaperScript-kode til JavaScript ved eksport, og vises inden for et lærredselement.
Hvilke af disse værktøjer favoriserer du? Har vi savnet dit valgværktøj? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, anvendelser smackdown wrestler billede via Shutterstock.