HTML5 App Smackdown: Hvilket verktøy er best?
Moderne nettlesere kan støtte rik animasjon og interaktivt innhold uten å kreve bruk av plugins som Flash. I stedet, ved å bruke en kombinasjon av JavaScript, HTML5 og CSS3, er det mulig å lage kvalitets animert, interaktivt innhold som fungerer på nettlesere og på mobile enheter som tabletter og smarttelefoner.
Selv om det finnes en rekke JavaScript-animasjonsrammer (og vi tar en titt på noen av dem senere), er det bare noen få programmer som tilbyr en rik visuell redigeringsprogram hvor koden holdes i bakgrunnen. De mest kjente av disse er Adobe Edge Animate og Tumult Hype. En tredje kandidat i denne arenaen er Sencha Animator, mens Google også har gått inn i arenaen med Google Web Designer.
Disse verktøyene ser ut til å være ganske like på overflaten, men bruker forskjellige underliggende teknologier, noe som skaper visse begrensninger og muligheter. Selv om jeg har kalt dette til en HTML5 app-smackdown, begrenser ikke alle disse verktøyene seg til HTML5.
I det røde hjørnet ...
Edge Animate CC er en del av Adobes Edge-familie, og tilbyr en rekke utviklingsverktøy og -tjenester for den moderne nettsiden. Den er tilgjengelig for både PC og Mac som en del av Adobes abonnementsbaserte Creative Cloud, som en enkelt app for $ 17,58 i måneden, eller som en del av hele CC-pakken for $ 46,88 i måneden.
Tumult Hype 2 er bare Mac, og kommer med en nåværende enkelt app pris på $ 29,99.
Sencha Animator 1.5 er en del av Senchas HTML app utviklings økosystem, tilgjengelig for Mac, PC og Linux, det er priset $ 199.
Google Web Designer , for tiden i beta, er gratis. Det er litt av en ukjent mengde, så la oss løpe regelen over den.
(30-dagers prøveversjoner er også tilgjengelige for de betalte verktøyene, så du kan laste dem ned og finne ut hva som passer dine behov.)
Tumult Hype
Tumult Hype 2, fakturert som HTML5-opprettingsapp, er fokusert på å lage enkle interaktive multimedia animasjoner. På litt under $ 30 er det stor verdi for pengene.
Å være Mac, gjør det bare mulig å tilby et kjent brukergrensesnitt for Mac-apper, noe som gjør det enkelt å komme opp med farten.
Brukergrensesnittet har et hovedvindu med et dokumentområde og en tidslinje, og et flytende inspektørvindu. Det finnes andre vinduer for mediebrowser og et ressursbibliotek hvor du kan legge til flere filer, JavaScript-funksjoner og skrifter.
Dokumentområdet er satt til skjermstørrelsen du vil opprette, og på hvilke elementer som er plassert, for eksempel tekst, knapper og enkle former, eller importerte medier som bilder, video, lyd og HTML-widgets, som vises i en iframe.
Endring av egenskapene til elementene over tid for å opprette animasjon styres på tidslinjen. Som standard vises bare 3 egenskaper - størrelse, ugjennomtrengelighet og posisjon - men det er mange flere som kan oppdateres, inkludert rotasjon, teksteffekter, kantlinje osv., Ikke alle som er relevante for alle elementene.
Hype støtter flere tidslinjer, slik at du kan ha 2 forskjellige animasjoner som spiller avhengig av hvilken knapp som trykkes for eksempel. Det er også mulig å få en tidslinje til å spille i forhold til hoved tidslinjen, slik at begge spilles samtidig. I praksis kan dette bli mektig forvirrende, og det er ikke så lett å lage nestede tidslinjer som i Edge Animate eller Sencha Animator.
Hype bruker scener til å skille ut forskjellige animasjoner, og det er enkelt å opprette overgangseffekter mellom scener. Dette gjør Hype flott for å lage interaktive presentasjoner eller storybooks.
Interaktivitet og kontroll legges til i Hype gjennom Handling-panelet og Scenepanelet til inspektøren, og gjøres ved å velge fra rullegardinlister for forskjellige samspill eller ulike hendelsesutløsere, for eksempel tidslinjefylling. Dette gjør det enkelt å legge til enkle kontroller og interaktivitet, men å gjøre noe utover dette krever at du deltar i JavaScript. For eksempel hvis du vil dynamisk oppdatere teksten til et tekstelement, eller med et museklikk endre egenskapene til et annet element, er den eneste måten å gjøre dette ved å skrive en JavaScript-funksjon.
Med versjon 2 av Hype er det et støttende produkt som heter Hype Reflect, som lar deg forhåndsvise dine Hype-kreasjoner på iOS-enheter, uten å måtte eksportere, og deretter laste opp til en server for å sjekke på en iPad eller iPhone. Det er en flott timesaver, men viser Hype's Apple bias; Hype Reflect-appen er bare iOS.
Her er hvor Hype viser det er begrensninger, da det er veldig lite hjelp. Du er pitched rett inn i hardcore JavaScript programmering og prøver å forstå DOM av filene som Hype oppretter. Mer veiledning og eksempler her fra Tumult er avgjørende hvis Hype kommer til å bevege seg utover et enkelt animasjonsverktøy. Dette er synd fordi Hype får så mye annet riktig, men det trenger mye bedre dokumentasjon.
Edge Animate CC
Originalt bare kalt Edge, endret Adobe navnet til Edge Animate når de responderer på Edge-merket for å dekke en hel serie med neste webteknologi. Edge Animate CC er den andre oppdateringen til programmet, og det viser at Edge Animate er et godt vurdert, modent produkt.
Utseendet og utseendet bruker den "mørke" brukergrensesnittet som kjennetegner alle Adobes nåværende utvalg av programmer, som ser veldig profesjonelt ut, og med de dokkede panelene fungerer det veldig bra på en storskjerm.
For brukere av Flash eller After Effects vil grensesnittet bli kjent, og det deler mange konsepter med de aktuelle appene. Som med Hype importeres elementer, plasseres på scenen og animeres ved å justere egenskaper i tidslinjen. Å legge til keyframes i egenskapene i tidslinjen, er nesten like etter Ettervirkninger. En fin touch er at du kan "snap" keyframes, slik at det er lettere å synkronisere animasjoner sammen.
Interaktivitet legges på samme måte som Flash, ved å legge til handlinger til elementer, eller på tidslinjen. Som med Hype, implementeres interaktivitet ved hjelp av JavaScript, men inkludering av kodestykker betyr at du blir forsiktig inn i den, til du føler deg trygg nok til å starte håndkoding. Jeg tror denne tilnærmingen fungerer veldig bra, og Edge Animate fungerer som en utmerket introduksjon til JavaScript-animasjonsprogrammering.
I motsetning til Hype støtter Animate ikke import av lyd eller video, men det er tilleggsrammer for å støtte dem.
En nøkkel ny funksjon i den oppdaterte versjonen er muligheten til å spesifisere posisjonen til hvert objekt enten i faste piksel enheter eller som en prosentandel av bredden. Dette lar deg lage responsive design som kan tilpasse seg forskjellige skjermstørrelser. Det er spesielt nyttig hvis du lager animerte interaktive bannerannonser.
Hva Animate mangler er forskjellige scener, men jeg liker faktisk dette. Du kan legge til etiketter på tidslinjen, og kan enkelt legge til stopppunkter på tidslinjen og legge til interaktivitet for å hoppe til et annet punkt. Men det betyr også at hvis du vil animere overganger fra en skjerm med innhold til en annen, har du full kontroll.
En kraftig funksjon av Animate er evnen til å lage symboler. Et symbol fungerer som en MovieClip i Flash, og legger til en ny tidslinje som er uavhengig av hoved tidslinjen. Symboler er kraftige hvis du vil lage et animasjonsstykke og deretter bruke det i en større animasjon. For eksempel kan du animere et romskip som kretser en måne som et symbol, og sett deretter månesymbolet omkrets en planet på en annen. Å legge til interaktivitet for å målrette symboler er også veldig grei.
Når utgitt Edge Animate bruker det allestedsnærværende jQuery-biblioteket til å håndtere visningselementer og håndtere animasjon, og CSS3 for å håndtere noen overganger og effekter. Selv om dette gjør det fleksibelt, og det er lett å skrive ekstern kode for å målrette mot Animate-innholdet, presser det virkelig grensene til biblioteket jQuery.animate. Dette kan resultere i svak ytelse på langsommere enheter. Også publiserte Edge Animate-prosjekter er større filstørrelser enn utdataene fra noen av de andre verktøyene her - noe som resulterer i lengre nedlastingstider.
En annen ny funksjon er muligheten til enkelt å legge til webfonter ved hjelp av Adobe Edge Web-fonter, som for øyeblikket inneholder 100s av gratis webfonter som er vert på Adobe's CDN. Du kan også legge til egne tilpassede webfonter relativt enkelt.
Et annet Edge-produkt, Edge Inspect (tidligere kalt skygge), lar deg forhåndsvise arbeidet ditt på tvers av enheter. Det er ikke så godt integrert med Animate as Hype Reflect er med Hype, men fungerer på flere enheter, inkludert iOS og Android.
Edge Animate kommer med 8 gode opplæringsprogrammer inkludert for å forklare det grunnleggende, og det er et voksende brukerfellesskap for å gi ytterligere støtte og opplæringsprogrammer, og utvide funksjonaliteten til Edge. Til syvende og sist kanskje dette er Edge Animes største ressurs. Jeg har sett noen eksempler hvor Greensock Animation Platform (GSAP) brukes inne i Edge Animate å bruke JavaScript for animasjon i stedet for jQuery, og dette er en spennende utvikling som jeg vil se nærmere på.
Jeg fant Edge Animate å være flott for å skape ganske sofistikerte interaktive animasjoner, den typen ting som Flash ble brukt til, men det ga meg et ønske om å se et slankere, dårligere HTML5-basert verktøy med en bedre JavaScript-basert animasjonsmotor.
Sencha Animator 1.5
Sencha Animator lover å la deg "Lag rike CSS3 animasjoner med letthet". Men på litt under 200 dollar synes det ikke å gi god valuta for pengene.
På mange måter gir den en lignende tilnærming til Hype, med ideen om å koble innholdsskener, hver med sin egen tidslinje. Men i motsetning til Hype eller Animate, har individuelle egenskaper av elementer ikke eget spor på tidslinjen. Alle keyframes for et element, for eksempel for posisjon, rotasjon, opacity osv. Er alle på samme spor - jeg tror dette skyldes bruken av CSS3 for animasjonen, der du ikke kan animere individuelle transformasjoner uavhengig. Dette kan gjøre det vanskelig å lage komplekse animasjoner.
Som Edge Animate, er en ny funksjon av Animator 1.5 at elementer eller grupper av elementer kan konverteres til Symboler, som kan animeres med egne selvforsynte tidslinjer.
Som med Hype, legges til enkel interaktivitet, leveres med drop down-handlinger for å gi grunnleggende navigasjon, eller kjøre tilpasset JavaScript. Å velge JavaScript åpner et tilpasset JavaScript-vindu der du kan slå din egen kode, og det er mange kodeutdrag å bruke også.
Jeg begynte å tenke at Sencha Animator var for begrenset til å være nyttig, men dens kraft og fleksibilitet avslører sakte seg selv. Selv om det er et godt antall prøve animasjoner inkludert, ville jeg gjerne se noen eksempler med mer avansert JavaScript-kode som virkelig presset interaktiv egenskapene til Sencha Animator.
Mens du bruker CSS3 for animasjoner og overganger, betyr at animasjoner ikke vil fungere i noen nettlesere, tror jeg at det er mer fremtidsrettet enn Edge Animates overheng av jQuery.
Google Web Designer
Veldig mye den nye gutten på blokken - og som de fleste av Googles produkter som er bestemt for å forbli for alltid i beta - Google Web Designer tilbyr en visuell IDE for å lage animasjoner og interaktivt innhold, gratis. Men det er bare gratis hvis du ikke verdsetter din tid, da du vil bruke mye på å knuse hodet av pulten.
GWD, som vi kaller det fra nå av, er faktisk en HTML5-app, pakket med Google Chromium Embedded Framework. Dette kan forklare hvorfor brukergrensesnittet mangler finesse.
En stor del av GWDs fokus synes å være rettet mot å produsere interaktiv reklame. Når du oppretter en ny fil, kan du spesifisere for å opprette en Google-annonse, med muligheter for å velge DoubleClick Studio Rich Media og AdMob som to av alternativene 'Miljø'. Det andre alternativet er å lage en Blank HTML-fil, som ikke har noen pikselmål.
GWD har også to animasjonsmoduser, Hurtig og Avansert. Hurtigmodus er mer som lysbildeseriemodusen som Hype bruker, til overgang mellom scener. Bare i avansert modus får du en tidslinje hvor du kan legge til keyframes.
GWD er vanskelig å bruke. Det klare tidslinje-grensesnittet betyr at du legger til nøkkelrammer, blir litt vant til, og du kan ikke "skrubbe" tidslinjen (dvs. dra avspillingshodet for å forhåndsvise animasjonen) som du kan med alle de andre appene. Hvis du legger til elementer som video eller bilder på siden, må du manuelt skrive filnavnet til objektets kildeegenskap. Alle disse er ganske små, men viser at det fortsatt er mye arbeid å gjøre for å gjøre dette til en fullt realisert app.
Å legge til hendelser og interaktivitet er ikke tydelig. Så vidt jeg kan fortelle, kan du bare opprette klikkhendelser når du arbeider med annonse typen.
Minst GWD er fullt HTML5, med grafiske elementer gjengitt som lerretelementer, og video- og lydobjekter innebygd ved hjelp av innfødte HTML-video- og lydkoder. Det inkluderer også 3D-transformasjoner, som er en unik funksjon, men ikke støttet av alle nettlesere.
En interessant del av GWD er komponenter, som er små biter av funksjonalitet som du kan dra og slippe på skapelsene dine. Eksempelkomponenter inkluderer et swipable bildegalleri og video, samt Google-spesifikke alternativer som en Kart- eller YouTube-video. Jeg tror dette viser at Google ser denne appen nesten mer av et Dreamweaver-lignende nettverksskapingsverktøy enn et animasjonsverktøy. Til syvende og sist prøver det kanskje å være alle ting for alle mennesker, og faller kort på alle teller.
I motsetning til resten av appene som er vurdert her, som er verktøy for å bygge prosjektet ditt, som deretter publiseres for å lage HTML, med GWD, bygger du den faktiske HTML-filen. Dette betyr at du kan bytte mellom designvisning og kodevisning, og redigere i enten. Som du forventer, er de endelige filstørrelsene små, og CSS3-animasjonene er raske.
Ikke overraskende er det svært lite dokumentasjon og praktisk talt ingen eksempler. Det ser ut til å ha blitt kastet opp der uten hensyn til hvordan man kan lette brukerne inn i den. Jeg vet egentlig ikke hvorfor Google slipper ut denne typen halvhjertet shovelware, med mindre de vil prøve å irritere folk. Det er synd, for det er ekte løfte her.
Noen konklusjoner
Hvert av disse verktøyene har sine sterke og svake sider. Hype er et flott verktøy for å lage animasjoner og enkel interaktivitet, men har ikke ambisjoner om å være det mer fullt utviklede utviklingsmiljøet som Edge Animate og Google Web Designer gjør. Jeg begynte å tenke at Sencha Animate var overpriced og under omtalt, men ut av esken er det sannsynligvis det beste av gjengen.
Edge Animate tilbyr langt det beste arbeidsmiljøet og med sine responsive funksjoner og enkel å legge til webfonter, er sannsynligvis det raskeste å komme opp til fart med. Men tilliten til jQuery for animasjon skaper store filer som hog-minne. Prismodellen for Adobe Creative Cloud gjør det også vanskelig å bedømme. Hvis du allerede er en Creative Cloud-kunde, kan du laste den ned gratis, ellers på $ 17 i måneden er det et dyrt forslag.
Google Web Designer er den mørke hesten, og trolig den største trusselen mot Adobes krone i denne arenaen. Tross alt er det veldig vanskelig å konkurrere med gratis. Jeg vil tilbringe mer tid med GWD for å se om det egentlig er et mulig valg som et utviklingsverktøy.
Det er ingen tvil om at JavaScript, HTML5 og CSS3 er fremtiden, selv om den optimale måten å utnytte disse teknologiene fremdeles er ute etter.
Pure code alternativer
Det finnes en rekke JavaScript-biblioteker som tilbyr alle funksjonene til disse verktøyene, men mangler den rike visuelle redaktøren. Som sådan har de en mye brattere læringskurve, men kan skape smidigere, mer slemme kode.
Greensock Animasjonsplattform
The Greensock Animation Platform (GSAP) springs fra Greensock animasjon tweening motor som var mye elsket av Flash utviklere. Nå portet til JavaScript, det tillater utviklere å kjede sammen komplekse sekvenser av animasjon. Men en tidslinjebasert IDE er mye lettere å visualisere.
CreateJS
De CreateJS suite av JavaScript-biblioteker inneholder alt du trenger for å lage rike interaktive applikasjoner for nettleseren. EaselJS er biblioteket som brukes til å lage elementer som bruker HTML5s lerretobjekt, mens TweenJS brukes til å kontrollere animasjon og interaktivitet. Som med GSAP, gjør den rene kodebaserte tilnærmingen det til en tøff læring, men et aktivt utviklingssamfunn betyr at det er mye hjelp der ute.
Noen dager kan en dedikert IDE for CreateJS vises. Det er en komponent for Flash som eksporterer Flash-eiendeler og animasjoner til CreateJS. Det er noen begrensninger for denne eksporten, men det gir en flott måte for Flash-designere og utviklere å overføre til et JavaScript-basert verktøy.
ProcessingJS
En port av Java-basert prosessering visuelt programmeringsspråk til JavaScript, Processing.js tilbyr et rikt og modent programmeringsmiljø for å lage interaktivt og animasjonsinnhold, vist i et lerretelement. Behandlingsspråkene gir en kraftig måte å jobbe med animert interaktivt innhold, og konverteres til JavaScript på eksport.
PaperJS
Et annet visuelt programmeringsspråk, Paper.js bruker sitt eget PaperScript-kodespråk for å bidra til å forenkle oppretting av animasjoner og interaktivitet. Den er basert på den svært populære Illustrator plug-in Scriptographer. Som med behandling blir PaperScript-kode konvertert til JavaScript for eksport, og vises i et lerretelement.
Hvilke av disse verktøyene gir dere fordel? Mistet vi verktøyet ditt? Gi oss beskjed i kommentarene.
Utvalgt bilde / miniatyrbilde, bruk smackdown wrestler image via Shutterstock.