Comparativa de 4 eines d’animació HTML5: Edge, Hype, Google Web Designer i Animate

El canvi de Flaix a HTML5 per a agències i marques ha estat dur, per a superar-ho ja vam explicar el cas de Binaria en aquest post y també el procés de dol que havíem viscut prèviament.

El que pensàvem que succeiria de manera gradual es va materialitzar en una campanya íntegra en HTML5 que ens va arribar de cop: noves especificacions tècniques, limitacions de pes, número i tipus d’arxius permesos pels suports, adaptació dels treballs a les plantilles HTML5 dels adservers, formats responsive…

Així va ser com en menys de 2 setmanes l’equip tècnic de Binària va analitzar fins a 5 solucions per a l’animació avançada HTML5 de bàners estàndard i rich mitjana. I per què no compartir les nostres conclusions?

Les eines d’animació HTML5 que us presentem a continuació són aquelles que considerem que resolen millor les nostres necessitats com a agència i que millor s’adapten al nostre workflow i als diferents perfils de l’equip:

Adobe Edge Animate, Hype de Tumult, Google Web Designer i Adobe Animate,
l’últim intent d’Adobe per a recuperar l’eina de Flaix, això sí, ara amb capacitat per a exportar a HTML5 Canvas o WebGL.

En què consisteix la comparativa

Per a realitzar la nostra comparativa hem decidit produir la mateixa peça (un roba 300x250px) a través de les quatre solucions proposades, inserint al final de cada anàlisi el resultat final per a la seva valoració i un arxiu descargable amb el projecte i els recursos utilitzats.

Quins aspectes mesurarem

  • User Experience de l’Aplicació
  • Eines d’animació HTML5 avançada
  • Ús d’estàndard HTML i CSS
  • Càrrega de llibreries externes js
  • Llegibilitat i manipulació del codi resultant
  • Pes total del material lliurable

I en l’anàlisi de cada eina hem inclòs:

  • Què destaquem de l’eina
  • Banner desenvolupat + projecte descarregable

Per a la producció de la peça partirem d’un storyboard creat amb Sketch, exportarem tots els assets necessaris en format png o jpg i passarem totes les imatges pel compressor TinyPNG, un servei web capaç de reduir dràsticament el pes dels nostres arxius.

Per a aquest cas concret prioritzarem el pes de la peça pel que hem decidit exportar els textos com a imatge i no afegir-les com webfont al projecte.

En la mesura que sigui possible prioritzarem l’ús d’elements HTML i propietats CSS tals com formes bàsiques amb colors sòlids o degradats, amb vores, ombres, opacitats… en lloc de fer ús d’imatges.

Adobe Edge Animate

Adobe va llançar aquesta eina en 2011, un any després que Steve Jobs arremetés contra Flash i mesos abans que el mateix Adobe deixés de donar suport Flash en dispositius mòbils.

User Experience de l’aplicació

En general el workflow amb aquesta aplicació és molt bo, es nota l’experiència d’Adobe en eines amb línia de temps. L’experiència d’usuari en les operacions amb la línia de temps, modificació de propietats, tant a través del panell de propietats com en l’àrea de treball, és bona.

Té, no obstant això, alguns detalls que donen la sensació d’eina inacabada, com per exemple la impossibilitat de reordenar les capes des de la línia de temps (sí des de la pestanya “Elements”) o la gestió dels assets externs.

Eines d’animació HTML5 avançada

Deixant de costat les propietats bàsiques animables, és amb diferència l’eina que permet una major quantitat de modificacions i animacions en els elements: punt d’ancoratge, posició i escala del background, filtres avançats (no tots els navegadors els suporten)…

Amb una gran quantitat de presets, es troba a faltar poder personalitzar les corbes d’acceleració.

Ús d’stàndarts HTML i CSS

Per desgràcia el codi resultant no està basat en animacions CSS3 i el DOM es construeix dinàmicament a través de l’anomenada a arxius js externs, la qual cosa impedeix possibles modificacions a través del codi.

El material resultant de la publicació de la peça està compost per un document HTML, una carpeta amb els assets utilitzats (imatges, vídeo, àudio) i diversos arxius js.

Cárrega de libreries externas js

Edge Animate ofereix la possibilitat d’allotjar la llibreria Javascript base, necessària per al funcionament de les peces (edge.6.0.0.min.js), en el seu CDN. Això reduirà considerablement el pes total de la peça. No obstant això és important tenir en compte que aquestes llibreries continuen sent necessàries i, encara que no estiguin dins de la nostra carpeta de publicació, una vegada la peça estigui online farà una petició als servidors d’Adobe per a descarregar aquesta llibreria.

Cal tenir en compte que si les creativitats se serveixen via un adserver extern (com DFP o Sizmek) pot ser que no admeti dependències externes, i per tant calgui incloure en l’exportació aquest fitxer.

Actualment el pes d’aquesta llibreria és de 104 KB

Llegibilitat i manipulació del codi resultant

L’HTML generat per l’aplicació és bàsic. L’estructura completa de la peça es construirà en temps d’execució, per tant no tindrem accés als elements de la peça a través del seu codi.

La API de desenvolupament està ben documentada, ens permetrà afegir interactivitat a la peça i controlar, per exemple, la seva reproducció fent ús de les seves funcions.

Pes total del material lliurable

Com ja hem comentat, el pes de la peça dependrà de si fem ús del CDN d’Adobe o allotgem nosaltres la llibreria de edge.

  • Versió amb llibreria allotjada en Adobe: 101 KB
  • Versió amb llibreria allotjada en la carpeta js: 212 KB

Pros i contres de l’eina

Ens agrada: És l’eina més professional i amb més possibilitats de totes les que hem analitzat fins al moment. Ara com ara Edge és l’eina més completa i la que més s’ajusta a les nostres necessitats.
No ens agrada: Des de novembre del 2015 Adobe ha deixat de desenvolupar-la. Potser a causa de la seva estratègia de recuperar Flaix (ara anomenat Animate).

Adobe no ofereix la possibilitat de comprar aquesta aplicació per separat pel que haurem de tenir una subscripció al paquet complet de Creative Cloud EUR 69,99.
Disponible per a Mac i Windows.

 Tumult Hype

Tumult Hype és una eina desenvolupada exclusivament per a animació HTML5. Dos dels seus fundadors són veterans d’Apple, suposem que per això és una app només per a Mac i sense intenció de fer la versió per a Windows en el futur.

User Experience de l’aplicació

Hype ens agrada, el seu interface és amigable i les persones familiaritzades amb aquesta mena d’aplicacions ens trobem còmodes ràpidament. És intuïtiva i àgil. Com la resta d’aplicacions té particularitats que hem d’assimilar, però s’aconsegueix ràpidament una bona velocitat de producció.

Eines d’animació HTML5 avançada

És molt completa. Disposa fins i tot d’eines que no hem vist en altres aplicacions, com un apartat per a propietats físiques (gravetat, col·lisions, etc).

L’aplicació està ben documentada. En el seu web tenim vídeo-tutorials que ens ajudaran a familiaritzar-nos amb l’eina.

Ús d’estàndard HTML i CSS

Hype construeix l’estructura de l’HTML i totes les animacions en temps d’execució a través de la seva pròpia llibreria js, no tindrem accés als elements de la peça a través del seu codi.

Té una API ben documentada per al desenvolupament de peces amb programació avançada.

Càrrega de libreries externas js

El projecte, una vegada publicat en la seva versió optimitzada, consta d’un arxiu HTML, una carpeta amb els assets utilitzats i un arxiu js.

Els settings de publicació ens donen l’opció d’indicar una URL per a la llibreria js, amb això podrem fer referència a ella en lloc de generar-la per a cada projecte.

Llegibilitat i manipulació del codi resultant

Les seves animacions no són CSS3 i l’estructura de l’HTML es genera en temps d’execució.

Podrem fer ús del seu API per a interactuar amb la peça.

Pes total del material lliurable

Per a la prova realitzada hem obtingut un pes total de 150 KB sense fer ús de l’opció d’allotjar la llibreria js en una URL.

  • Versió amb llibreria allotjada en URL externa : 111 KB
  • Versió amb llibreria allotjada en la carpeta del projecte (sense dependències externes): 166 KB

Què destaquem de l’eina

Ens agrada: el seu entorn és amigable i la seva corba d’aprenentatge és mínima. Té característiques avançades que permeten un desenvolupament professional.
No ens agrada: El preu de la seva versió professional i la modalitat de pagament, que ens obligarà a comprar l’app amb cada nova versió d’aquesta.

És comercialitza en dues versions: standard (49,99 USD) i professional (99,99 USD) i només està disponible per a Mac. Nosaltres hem usat la versió professional per a l’anàlisi.

 Google Web Designer

Google va llançar Google Web Designer en 2013 segurament per a tenir sota control el contingut (i el codi) que ja es començava a pujar a la seva plataforma DoubleClick Rich Media. Aquesta eina és gratuïta i disponible per a Mac, Windows i Linux.

User Experience de l’aplicació

Per estrany que sembli, Google Web Designer és, de totes les eines d’animació HTML5 que hem usat per a aquesta comparativa, la menys intuïtiva i més incòmoda d’usar. Treballar amb GWD pot causar bastant frustració per la malaptesa amb la qual es fan tasques bàsiques amb la línia de temps i la seva falta de lògica.

Eines d’animació HTML5 avançada

GWD compta amb dues maneres d’animació:

  • La manera ràpida, més pensat per a realitzar animacions senzilles d’una manera bàsica.
  • La manera avançada, ens donarà accés total a totes les característiques de l’aplicació, animació amb keyframes… l’entorn al qual estem acostumats.

Encara així, la manera avançada no permet algunes operacions que sí que permeten les altres eines analitzades.

Ús d’stàndards HTML i CSS

El punt fort, sens dubte, de GWD és que el codi resultant és estàndard CSS3 i usa canvas per a les formes generades en l’aplicació (rectangles, ovals, línies i eina de dibuix).

Càrrega de llibreries externas js

Fa ús de diversos arxius js bastant lleugers. No necessita una llibreria js molt pesada gràcies a l’ús de CSS3 per a les animacions sobre la línia de temps. Inclou la possibilitat de combinar tots els arxius externs en l’HTML.

Llegibilitat i manipulació del codi resultant

El fet que totes les animacions siguin CSS3 ens permet cert control sobre elles a través del codi resultant. El codi Javascript i les funcions de la seva llibreria són també bastant estàndard.

Pes total del material lliurable

GWD porta una quantes opcions de publicació bastant útils, com la possibilitat de comprimir reduirà substancialment el pes del projecte i combinar-los ens permetrà incloure tots els css i js generats en el mateix HTML.

El pes total del projecte publicat amb GWD és de 150 KB amb les opcions de combinar i comprimir arxius activades, i sempre sense dependències externes.

Què destaquem de l’eina

Ens agrada: És gratuïta, usa CSS3 per a les animacions i el seu codi és estàndard.
No ens agrada: A nivell d’usabilitat GWD encara està lluny d’aconseguir el nivell de les altres solucions.

Durant un temps, quan el desenvolupament de banners en HTML5 era incipient, GWD va ser l’eina utilitzada a Binaria. Vam aconseguir fer coses bastant atractives però dedicant un esforç a vegades incomprensible per a una eina d’aquest tipus.

 Adobe Animate

Adobe Animate CC és l’últim a arribar però diuen que qui riu últim… de moment ja ha aconseguit que deixin de desenvolupar Adobe Edge coincidint amb el seu llançament.

User Experience de l’Aplicació

Parlar de la UX de Animate és parlar de la UX de Flash. Amb 19 anys d’història a la seva esquena, Animate té un interface depurada i optimitzada per a desenvolupar animacions avançades de manera àgil i efectiva.

Eines d’animació HTML5 avançada

Compta amb eines que no trobarem en altres solucions: animació de formes, efectes avançats, maneres de fusió…

Animate, igual que Flaix, compta amb dues maneres d’animació: la interpolació clàssica, tan usada pels usuaris de flaix, i la interpolació introduïda en les últimes versions de flaix amb un control més detallat sobre les corbes d’animació

Per a l’anàlisi hem usat hem usat la interpolació de forma amb control sobre les corbes d’animació.

Ús d’estàndarts HTML i CSS

Animate no usa CSS3 per a l’animació dels elements, usa canvas i Javascript per a convertir el projecte a un format compatible amb els navegadors. En l’HTML resultant només trobarem un element contenidor on a través de Javascript es carregarà el seu contingut en temps d’execució.

Alguna cosa que ens agrada molt de Animate és que combina tots els recursos d’imatge en un sol sprite, la qual cosa reduirà significativament les peticions al servidor i per tant la càrrega de la peça serà més ràpida.

Tenint en compte l’herència de l’aplicació no és d’estranyar que encara tingui suport per a ActionScript 3. Encara que també és cert que han afegit suport per a Javascript, desconeixem amb quin abast.

Carrega de libreries externes js

Genera un arxiu js per a cada projecte però a més hem de comptar amb la llibreria de Animate que podem allotjar localment per a cada peça o bé fer ús de l’allotjada en el CDN d’Adobe, el pes d’aquesta llibreria actualment és de 191 KB pel que és una decisió important que haurem de prendre.

Llegibilitat i manipulació del codi resultant

El codi resultant difícilment el podrem modificar més enllà dels settings bàsics com a color de fons o dimensions.

Pes total del material lliurable

  • Versió amb llibreria allotjada en Adobe: 152 KB
  • Versió amb llibreria allotjada en la carpeta js (sense dependències externes): 343 KB

Què destaquem de l’eina

Animate és Flaix, ni més ni menys. En la nostra opinió Adobe ha usat les seves cartes per a conservar a tants desenvolupadors/animadors de Flash que han virat al desenvolupament web. No hem tingut encara l’oportunitat de treballar més profundament amb l’eina i les seves noves característiques, però a primera vista sembla la solució més potent si volem fer treballs amb gràfics vectorials, no obstant això no ens sembla la solució més adequada per a animacions bàsiques i interactivitat.

Ens agrada: La coneixem, estem acostumats a treballar amb ella. És completa i el pas dels anys i les diferents versions l’han convertit en una solució sòlida i fiable.
No ens agrada: L’herència de Flash, com que encara continuï tenint suport per a ActionScript. El pes final es pot disparar en funció de la complexitat de les animacions.

Adobe no ofereix la possibilitat de comprar aquesta aplicació per separat pel que haurem de tenir una subscripció al paquet complet de Creative Cloud EUR 69,99. Disponible per a Mac i Windows.

Resum i conclusió

L’estudi que vam realitzar a Binaria per a decidir quina solució havíem d’adoptar ens va servir, també, per a reflexionar sobre el moment actual i l’evolució de les eines d’animació HTML5 d’aquest tipus. A diferència que en l’era hegemònica de Flash, actualment disposem d’una infinitat de solucions per a realitzar el mateix tipus de tasca, unes més completes, altres menys, unes gratuïtes, unes altres de pagament, eines d’escriptori o en el núvol…

Possiblement a l’inici d’aquest procés vam cometre l’error de buscar un únic substitut al nostre volgut i rendible Flaix. El constant moviment de totes aquestes solucions, les diferents exigències imposades tant per l’emissor com el receptor, la millora progressiva que imprimim en tots els nostres treballs ens han ensenyat que no existeix una única solució a la qual puguem migrar. La cerca de noves solucions, més ràpides, més completes, més eficients i el seu profund coneixement ha de ser part de la nostra rutina de treball.

¿En vols saber més?

Escriu-nos

Altres articles que poden interessar-te:

Binaria.com: un site desenvolupat amb Gatsby que va como un coet 🚀

Últimament has notat una cosa diferent quan visites les webs d’algun dels teus competidors, són ràpides, molt ràpides. A més algune [...]

Leer más

La nova Binaria

En aquest article us expliquem tot el procés de reinvenció de Binaria. Per a això, hem de començar des del principi i entendre la base de [...]

Leer más