HTML5-sovellus Smackdown: Mikä työkalu on paras?
Nykyaikaiset selaimet voivat tukea rikkaita animaatioita ja vuorovaikutteisia sisältöjä ilman, että Flashin käyttö edellyttää lisäosia. Sen sijaan JavaScript-, HTML5- ja CSS3-yhdistelmän avulla voidaan luoda laadukasta animoitua vuorovaikutteista sisältöä, joka toimii työpöydän selaimilla ja mobiililaitteilla, kuten tablet-laitteilla ja älypuhelimilla.
Vaikka JavaScript-animaatiorakenteita on useita (ja tarkastelemme muutamia niistä myöhemmin), on olemassa vain muutamia sovelluksia, jotka tarjoavat runsaan visuaalisen editoijan, jossa koodia säilytetään taustalla. Tunnetuimpia näistä ovat Adobe Edge Animate ja Tumult Hype. Kolmas haastaja tällä areenalla on Sencha Animator, kun taas Google on tullut areenalle Google Web Designerin kanssa.
Nämä työkalut saattavat näyttää melko samanlaisilta pinnalta, mutta käyttävät erilaisia taustatekniikoita, jotka luovat tiettyjä rajoituksia ja mahdollisuuksia. Vaikka olen nähnyt tämän HTML5- sovelluksen smackdownin, tarkkaan ottaen kaikki nämä työkalut eivät rajoitu HTML5: een.
Punainen nurkka ...
Edge Animate CC on osa Adoben Edge-perhettä, joka tarjoaa valikoiman seuraavan sukupolven kehitystyökaluja ja palveluita nykyaikaiselle verkolle. Se on saatavilla sekä PC: lle että Macille osana Adoben tilauspohjaista Creative Cloudia yhtenä sovelluksena 17,58 dollaria kuukaudessa tai osana koko CC-sarjasta 46,88 dollaria kuukaudessa.
Tumult Hype 2 on vain Mac, ja mukana on nykyinen yksittäinen sovellushinta 29,99 dollaria.
Sencha Animator 1.5 on osa Senchan HTML-sovelluskehitysympäristöä, saatavana Macille, PC: lle ja Linuxille. Sen hinta on 199 dollaria.
Google Web Designer , tällä hetkellä beta, on ilmainen. Se on vähän tuntematon määrä, joten käytä sääntöä sen yli.
(30 päivän kokeiluversiot ovat myös saatavilla maksullisille työkaluille, joten voit ladata ne ja selvittää itse, mikä sopii tarpeisiisi.)
Tumult Hype
Tumult Hype 2, laskutettu HTML5-luontisovellukseksi, on painottunut luomaan yksinkertaisia interaktiivisia multimediaanimaatioita. Alle alle 30 dollaria se on hyvää vastinetta rahalle.
Koska Mac vain sallii sen tarjota tuttua käyttöliittymää Mac-sovelluksille, mikä helpottaa nopeutta.
Käyttöliittymässä on pääikkuna, jossa on asiakirja-alue ja aikajanat sekä kelluva tarkastajan ikkuna. Media-selaimessa ja Resurssikirjastossa on muita ikkunoita, joihin voit lisätä ylimääräisiä tiedostoja, JavaScript-toimintoja ja fontteja.
Asiakirja-alue on asetettu näytön kokoon, jonka haluat luoda ja mihin elementteihin on sijoitettu, kuten tekstiä, painikkeita ja yksinkertaisia muotoja, tai tuodut mediatiedot, kuten kuvat, videot, äänet ja HTML-widgetit. iframe.
Elementtien ominaisuuksien muuttaminen ajan mittaan animaation luomiseksi ohjataan aikajanalla. Oletuksena on vain kolme ominaisuutta - koko, opasiteetti ja sijainti - mutta paljon muuta voidaan päivittää, mukaan lukien pyörimisnopeus, tekstitoiminnot, raja-alue jne., Joista kaikki eivät ole relevantteja kaikille elementeille.
Hype tukee useita aikajaksoja, joten sinulla on kaksi erilaista animaatiota, jotka toimivat riippuen siitä, mihin painiketta painetaan. On myös mahdollista saada yksi aikajana pelata suhteessa pää aikajanaan, niin että molemmat pelaavat kerralla. Käytännössä tämä voi olla mahtava hämmentävä, eikä se ole läheskään yhtä helppoa luoda sisäkkäisiä aikajaksoja kuin Edge Animate tai Sencha Animator.
Hype käyttää kohtauksia erottaakseen erilliset animaatiot, ja siirtymävaikutuksia on helppo luoda kohtausten välillä. Tämä tekee Hypestä hyvää luoda interaktiivisia esityksiä tai tarinaa.
Interaktiivisuutta ja valvontaa lisätään Hype-ohjelmaan Toiminnot-paneelissa ja Tarkastajan kohtauspaneelissa, ja se tehdään valitsemalla pudotuslistat eri vuorovaikutuksille tai erilaisille tapahtumien laukaisijoille, kuten aikajanan loppuun. Tämä helpottaa yksinkertaisten valvontatoimien ja vuorovaikutteisuuden lisäämistä, mutta tekemällä mitään muuta kuin tämä edellyttää JavaScriptin tekemistä. Jos esimerkiksi haluat päivittää tekstin elementin tekstin dynaamisesti tai hiiren napsauttamalla muuttaa toisen elementin ominaisuuksia, niin ainoa tapa tehdä tämä on kirjoittamalla JavaScript-toiminto.
Hype-version 2 mukana on Hype Reflect -tuotevalmiste, jonka avulla voit esikatsella Hype-luomuksiasi iOS-laitteilla ilman, että sinun tarvitsee viedä sitä, ja lähetä sitten palvelimelle iPad tai iPhone. Se on hyvä aikataulu, mutta näyttää hypeen Applen bias; Hype Reflect -sovellus on vain iOS.
Tässä Hype osoittaa, että se on rajoituksia, sillä on todella vähän apua. Sinut asetetaan suoraan hardcore-JavaScript-ohjelmointiin ja yritetään ymmärtää tiedostojen DOM, jonka Hype luo. Lisää ohjeita ja esimerkkejä Tumultista ovat välttämättömiä, jos Hype siirtyy yksinkertaisen animaation työkalun ulkopuolelle. Tämä on sääli, koska Hype saa niin paljon muutakin, mutta se tarvitsee paljon parempaa dokumentaatiota.
Edge Animate CC
Alun perin juuri nimeltään Edge, Adobe muutti nimensä Edge Animaatioon, kun ne täyttävät Edge-brändin kattamaan koko joukon seuraavia web-tekniikoita. Edge Animate CC on toinen päivitys sovellukselle, ja se näyttää, että Edge Animate on nyt harkittu, kypsä tuote.
Ulkonäkö ja tunnelma hyödyntävät "pimeää" käyttöliittymää, joka luonnehtii kaiken Adoben tämänhetkisen ohjelmiston, joka näyttää hyvin ammattimaiselta, ja telakoidut paneelit toimivat todella hyvin suurella näytöllä.
Flash- tai After Effects -ohjelmien käyttäjille käyttöliittymä on tuttu ja se jakaa monia konsepteja näiden sovellusten kanssa. Kuten Hype, elementit tuodaan, sijoitetaan lavalle ja animoidaan mukauttamalla ominaisuuksia aikajanalla. Avainkehysten lisääminen aikajanalle ominaisuuksiin on lähes täsmälleen sama kuin After Effects. Yksi hieno kosketus on, että voit napsauttaa avainkehyksiä, joten on helpompi synkronoida animaatiot yhteen.
Interaktiivisuutta lisätään hyvin samaan tapaan kuin Flash, lisäämällä toimintoja elementteihin tai aikajanalle. Kuten Hype-sovelluksessa, vuorovaikutteisuus toteutetaan JavaScriptin avulla, mutta koodinpätkien sisällyttäminen siihen vie sinut varovasti siihen asti, kunnes tunnet itsesi luotettavaksi aloittaaksesi käsikoodauksen. Mielestäni tämä lähestymistapa toimii todella hyvin, ja Edge Animate toimii erinomaisena esityksenä JavaScript-animaatioohjelmoinnissa.
Toisin kuin Hype, Animate ei tue ääni- tai videotiedostoja, vaikka niissä on laajennuskehyksiä tukemaan niitä.
Tärkeä uusi ominaisuus päivitetyssä versiossa on kyky määrittää kunkin kohteen joko kiinteä pikseliyksikkö tai prosenttiosuus leveydestä. Näin voit luoda reagoivia malleja, jotka sopivat eri ruudun koon mukaan. Se on erityisen hyödyllistä, jos luot animoituja vuorovaikutteisia bannerimainoksia.
Animaatio puuttuu ovat erillisiä kohtauksia, mutta minä todella pidän tästä. Voit lisätä tarroja aikajanalle, ja voit helposti lisätä aikapisteisiin pysäytyspisteitä ja lisätä vuorovaikutteisuutta siirtyäksesi toiseen pisteeseen. Mutta se tarkoittaa myös, että jos haluat animoida siirtymiä yhdestä sisällönäytöstä toiseen, sinulla on täydellinen hallinta.
Animaation voimakas ominaisuus on kyky luoda symboleja. Symboli toimii Flash-elokuvan kaltaisena, lisäämällä uusi aikajana, joka on riippumaton tärkeimmistä aikajaksoista. Symbolit ovat tehokkaita, jos haluat luoda animaation ja käyttää sitä suuremmassa animaatiossa. Esimerkiksi voit animoida avaruusaluksen, joka kiertää kuun yhtenä symbolina, ja aseta sitten kuun symboli, joka kiertää planeettaa toisella. Interaktiivisuuden lisääminen kohdesymboleihin on myös hyvin yksinkertaista.
Kun tulostettu Edge Animate käyttää läsnäolevaa jQuery-kirjastoa käsittelemään näyttöelementtejä ja käsittelemään animaatiota, ja CSS3 käsitellä joitakin siirtymiä ja tehosteita. Vaikka tämä tekee siitä joustavan ja helppokäyttöisen ulkoisen koodin animaation kohdistamiseen, se todella tukee jQuery.animate-kirjaston rajoja. Tämä voi johtaa hitaaseen suorituskykyyn hitaimmilla laitteilla. Julkaistut Edge Animate -projektit ovat myös suurempia tiedostokokoja kuin minkä tahansa muun työkalun tuotos - mikä johtaa pidempiin latausaikoihin.
Toinen uusi ominaisuus on mahdollisuus lisätä helposti Web-fontteja Adobe Edge Web -fonttien avulla, joka sisältää tällä hetkellä 100: aa ilmaista web-kirjasinta, jotka on sijoitettu Adoben CDN: ään. Voit myös lisätä omat mukautetut Web-kirjasimet suhteellisen helposti.
Toinen Edge-tuote, Edge Inspect (aiemmin nimeltään Shadow), voit esikatsella työtä eri laitteissa. Se ei ole yhtä integroitu kuin Animate, sillä Hype Reflect on Hype-sovelluksen kanssa, mutta toimii useilla laitteilla, kuten iOS: llä ja Androidilla.
Edge Animation sisältää 8 hyvää tutoriaalia, jotka selittävät perusasiat, ja kasvava käyttäjäyhteisö tarjoaa lisää tukea ja opetusohjelmia ja laajentaa Edgen toimintoja. Lopulta ehkä tämä on Edge Animaatin suurin voimavara. Olen nähnyt joitain esimerkkejä siitä, että Greensockin animaatioalusta (GSAP) käytetään Edge Animaation sisällä JavaScriptin animaation käyttämiseen jQueryn sijaan, ja tämä on jännittävä kehitys, jota tarkastelen edelleen.
Löysin Edge Animaatin olevan loistava luoda varsin kehittyneitä vuorovaikutteisia animaatioita, sellaista Flashin käyttämää asiaa, mutta se toi minulle haluavani nähdä selkeämpi HTML5-pohjainen työkalu, jossa on parempi JavaScript-pohjainen animaatiomerkki.
Sencha Animator 1.5
Sencha Animator lupaa antaa sinulle "Luo rikkaita CSS3-animaatioita helposti". Mutta alle 200 dollaria se ei näytä tarjoavan hyvää vastinetta rahalle.
Monilla tavoilla se tarjoaa samanlaisen lähestymistavan kuin Hype, ja ajatus yhdistää sisältökohteita, joista jokaisella on oma aikajana. Toisin kuin Hype tai Animate, elementtien yksittäisillä ominaisuuksilla ei ole omaa kappaletta aikajanalla. Kaikki elementtien avainkehykset, esim. Asento, pyöritys, opasiteet jne. Ovat kaikki samalla radalla - mielestäni tämä johtuu animaation CSS3: n käytöstä, jossa yksittäisiä muunnoksia ei voi animoida itsenäisesti. Tämä voi vaikeuttaa monimutkaisten animaatioiden luomista.
Kuten Edge Animate, Animator 1.5: n uusi ominaisuus on se, että elementtejä tai elementtiryhmiä voidaan muuntaa symboleiksi, jotka voidaan animoitua omilla itsenäisillä aikajaksoillaan.
Kuten Hype-sovelluksessa, yksinkertaisen vuorovaikutteisuuden lisääminen tuo pudotusoperaatioita perusavigoinnin aikaansaamiseksi tai käyttämään mukautettua JavaScriptia. JavaScriptin valitseminen avaa mukautetun JavaScript-ikkunan, jossa voit leikata oman koodisi ja useita koodinpätkiä voi käyttää.
Aloitin ajattelemalla, että Sencha Animator oli liian rajoitettu hyödylliseksi, mutta sen voima ja joustavuus paljastuvat hitaasti. Vaikka näytteen animaatioita on runsaasti, olisin halunnut nähdä näytteitä, joissa on kehittyneempi JavaScript-koodi, joka todella työnsi Sencha Animatorin vuorovaikutteiset ominaisuudet.
Käyttämällä CSS3: ta animaatioille ja siirtymisille tarkoittaa, että animaatiot eivät toimi tietyissä selaimissa, mielestäni se on enemmän eteenpäin kuin Edge Animate: n yli riippuvainen jQuerylle.
Google Web Designer
Hyvin uusi lapsi lohkossa - ja kuten useimmat Googlen tuotteista, jotka on tarkoitus pysyä ikuisesti beta-versiossa, Google Web Designer tarjoaa visuaalisen IDE: n animaation ja vuorovaikutteisen sisällön luomiseksi ilmaiseksi. Kuitenkin se on vain ilmainen, jos et arvosta aikaa, sillä aiot viettää paljon pudottamalla pääsi pöydältä.
GWD, kuten kutsumme siitä lähtien, on itse asiassa itse HTML5-sovellus, joka on pakattu Google Chromium Embedded Frameworkin avulla. Tämä voi selittää, miksi käyttöliittymässä ei ole hienovaraisuutta.
Suuri osa GWD: n painopisteistä näyttää olevan interaktiivisen mainonnan tuottamiseen. Kun luot uuden tiedoston, voit määrittää Google-mainoksen, jossa on vaihtoehtoja valita DoubleClick Studio Rich Media ja AdMob kahdeksi ympäristöasetukseksi. Toinen vaihtoehto on luoda tyhjä html-tiedosto, jolla ei ole pikselimittareita.
GWD: llä on myös kaksi animaatiotilaa, Quick and Advanced. Nopea tila on enemmän kuin diaesitystila, jota Hype käyttää, siirtymään kohtausten välillä. Vain Advanced-tilassa saat aikajanan, johon voit lisätä avainkehyksiä.
GWD on vaikea käyttää. Liukas aikajanan käyttöliittymä tarkoittaa, että näppäimistöjen lisääminen vie jonkin verran tottua ja et voi "pestä" aikajanaa (eli vetää toistopäätä esikatselemaan animaatiota) niin kuin kaikilla muilla sovelluksilla. Lisäämällä elementtejä kuten video tai kuvia sivulle edellyttää manuaalisesti kirjoittavan tiedoston nimen objektin lähdeominaisuuteen. Kaikki nämä ovat melko vähäisiä, mutta osoittavat, että on vielä paljon tekemistä, jotta tämä voidaan tehdä täysin toteutuneeksi sovellukseksi.
Tapahtumien ja vuorovaikutteisuuden lisääminen ei ole lainkaan ilmeinen. Sikäli kuin voin kertoa, voit luoda napsautustilaisuuksia vain, kun työskentelet mainostyypin kanssa.
Ainakin GWD on täysin HTML5, jossa graafiset elementit ovat kullanvärisiä elementtejä ja video- ja ääniohjelmia, jotka on upotettu alkuperäisillä HTML-video- ja äänitunnisteilla. Se sisältää myös 3D-muunnokset, mikä on ainutlaatuinen ominaisuus, vaikka kaikki selaimet eivät tue sitä.
Mielenkiintoinen osa GWD: ää ovat komponentit, jotka ovat pieniä toimintoja, joita voit vetää ja pudottaa luomuksiisi. Esimerkkikomponentteihin kuuluu swipable kuvagalleria ja video sekä Googlen tiettyjä vaihtoehtoja, kuten kartta tai YouTube-video. Mielestäni tämä osoittaa, että Google näkee sovelluksen melkein enemmän Dreamweaver-kaltaisen verkkotyökaluustyökalun kuin animaation työkalun. Viime kädessä se ehkä yrittää olla kaiken kaikkia ihmisille, ja se on lyhyt kaikista asioista.
Toisin kuin muissa sovelluksissa, jotka on käsitelty täällä, jotka ovat työkaluja projektin rakentamiseen, joka julkaistaan sitten HTML: n luomiseksi. GWD: n avulla rakennat todellista HTML-tiedostoa. Tämä tarkoittaa, että voit vaihtaa näkymän ja näkymän välillä ja muokata sitä. Kuten olette odottaa, lopulliset tiedostokoot ovat pieniä ja CSS3-animaatiot ovat nopeita.
Ei ole yllättävää, että siellä on hyvin vähän dokumentaatiota ja käytännöllisesti katsoen mitään esimerkkejä, koko asia näyttää tuhoutunut siellä ilman mitään huomiota siihen, miten helpottaa käyttäjiä siihen. En todellakaan tiedä, miksi Google vapauttaa tällaisen puoliksi sydämen käärepaperin, elleivät he halua yrittää ärsyttää ihmisiä. Mikä on häpeä, koska siellä on aito lupaus.
Joitakin päätelmiä
Jokaisella näistä työkaluista on sen vahvuudet ja heikkoudet. Hype on loistava työkalu animaatioiden luomiseen ja yksinkertaiseen vuorovaikutteisuuteen, mutta sillä ei ole pyrkimyksiä olla edistyneempi kehitysympäristö, jota Edge Animate ja Google Web Designer tekevät. Aloitin ajattelemalla, että Sencha Animate oli ylihinnoiteltu ja esillä, mutta ulos laatikosta se on luultavasti paras joukko.
Edge Animate tarjoaa ylivoimaisesti parhaan työympäristön ja sen reagoivat ominaisuudet ja helposti lisäämällä Web-fontteja, on todennäköisesti nopein saavuttaa nopeus. JQueryn luotettavuus animaatioon luo kuitenkin suuria tiedostoja, jotka hog-muisti. Myös Adobe Creative Cloudin hinnoittelumalli vaikeuttaa arviointia. Jos olet jo Creative Cloud -asiakas, voit ladata sen ilmaiseksi, muuten 17 dollaria kuukaudessa on kallis ehdotus.
Google Web Designer on tumma hevonen ja todennäköisesti suurin uhka Adoben kruunulle tällä areenalla. Loppujen lopuksi on erittäin vaikeaa kilpailla ilmaiseksi. Aion viettää enemmän aikaa GWD: n kanssa, jotta näen, onko se todellakin mahdollista valita kehitystyökaluksi.
Ei ole epäilystäkään siitä, että JavaScript, HTML5 ja CSS3 ovat tulevaisuutta, vaikka optimaalinen hyödyntäminen näiden tekniikoiden suhteen on edelleen koukussa.
Puhtaiden koodien vaihtoehdot
On olemassa useita JavaScript-kirjastoja, jotka tarjoavat kaikki näiden työkalujen toiminnot, mutta niissä ei ole rikkaita visuaalisia editoijia. Sellaisinaan heillä on paljon jyrkempi oppimiskäyrä, mutta he voivat luoda heikompia, keskiarvoisempaa koodia.
Greensockin animaatioalusta
Greensockin animaatioalusta (GSAP) lähtee Greensockin animaation tweening-moottorista, jota Flash-kehittäjät rakastivat paljon. Nyt siirretty JavaScript-muotoon, sen avulla kehittäjät voivat ketjuttaa yhteen monimutkaisia animaatiojaksoja. Kuitenkin aikajanalla perustuva IDE on paljon helpompi visualisoida.
CreateJS
CreateJS CreateJS sarja JavaScript-kirjastoja sisältää kaiken, mitä tarvitset luoda interaktiivisia interaktiivisia sovelluksia selaimelle. EaselJS on kirjasto, jota käytetään luomaan elementtejä HTML5-kankaaseen, kun taas TweenJS: ää käytetään animaation ja interaktiivisuuden hallintaan. Kuten GSAP: ssä, sen puhdas koodipohjainen lähestymistapa tekee siitä kovaa oppimista, vaikka aktiivinen kehittäjäyhteisö tarkoittaa sitä, että siellä on paljon apua.
Jotkut päivät voivat syntyä erityinen IDE CreateJS: lle. Flashille on olemassa komponentti, joka tuo Flash-ominaisuuksia ja animaatioita CreateJS: hen. Tällä viennillä on joitain rajoituksia, mutta se tarjoaa erinomaisen tavan Flash-suunnittelijoille ja kehittäjille siirtyä JavaScript-pohjaiseen työkaluun.
ProcessingJS
Java-pohjaisen Visual Visualization -ohjelmointikielen portti JavaScript, Processing.js tarjoaa rikkaan ja kypsän ohjelmointiympäristön vuorovaikutteisten ja animaatiosisällön luomiseksi, joka näkyy kangaselementissä. Käsittelytekstin kieli on tehokas tapa työskennellä animoitujen vuorovaikutteisten sisältöjen kanssa, ja se muunnetaan JavaScriptin vienniksi.
PaperJS
Toinen visuaalinen ohjelmointikieli, Paper.js käyttää omaa PaperScript-koodikieliä helpottaakseen animaatioiden ja vuorovaikutteisuuden luomista. Se perustuu hyvin suosittuun Illustrator-plug-in-skriptaattoriin. Kuten käsittelyssä, PaperScript-koodi muunnetaan JavaScriptiksi viennissä, ja se näkyy kankaalle.
Mitkä näistä työkaluista suosivat? Kaipaitteko sinun valitsemasi työkalun? Kerro meille kommentit.
Esitetty kuva / pikkukuva, käyttää smackdown painija kuva kautta Shutterstock.