In het najaar van 2011 alweer, zagen de eerste HTML5 Rich Media uitingen het licht. Aanvankelijk waren deze eerste uitingen opgebouwd in plain html5 met jquery of op basis van tools als Sencha animator maar met de release van een volwaardig Adobe Edge product in september 2012 werd animatie een stuk toegankelijker voor de klassieke timeline animator die altijd al bekend was met Flash. Sinds die tijd is Edge al meerdere malen verbeterd en de laatste versie leverde ook nog een besparing op van 55% op aan gewicht. Creatieve bureaus raken steeds meer vertrouwd met HTML5. Ook op het gebied van video integratie. Op dit moment wordt in Nederland al 40% van alle Rich Media in HTML5 geproduceerd en naar schatting zal dit deze zomer meer dan de helft zijn.
Wat is nu de stand van zaken rondom HTML5 productie en wat zijn de beschikbare methodes om dit te bouwen? Hieronder ga ik hier graag op in.
Adobe edge animatie
Adobe’s animator suite Edge is inmiddels een volwassen product en Weborama gebruikt dit als basis voor de diverse HTML5 templates. De reden hiervoor is de toegankelijkheid van het product voor ieder niveau en de voor Flash developers relatief makkelijke overgang naar dit product binnen de Adobe suite. Verder is het belangrijk dat Edge veel vrijheid biedt met betrekking tot de creatieve invulling en het kan gecombineerd worden met bekende libraries als dat gewenst is. Adobe zet ook vol in op de doorontwikkeling van dit product wat de toekomst ook veiligstelt.
Plain HTML5
Het is niet verplicht om je uitingen in Adobe Edge te maken. Ontwikkel je liever direct met een code editor dan is het mogelijk om bekende Rich Media formaten zoals de Billboard en Floorads in plain html te maken zoals jij het wilt. Gebruik makend van je eigen favoriete libraries zoals Jquery, Greensock of misschien wel Angular in combinatie met CSS3, sta je volledig vrij om je animatie te maken zoals jij wilt. Verrijk je uiting met Weborama’s ScreenAd library en maak gebruik van de mogelijkheden die deze biedt: mobile functies en componenten zoals sms-en, bellen, orientation switch, click-to-app, html5 videoplayer en meer. Check hier onze developer omgeving voor meer informatie over ScreenAdfuncties en haal de code op die je nodig hebt.
Export to HTML vanuit Adobe Flash CC
De export to HTML5 functie vanuit Adobe Flash CC is inmiddels heel stabiel en levert goede resultaten op. Heb je eenvoudige timeline animaties zonder al te veel interactie elementen of video? Probeer dan deze al wat langer bestaande functie eens. Het zal je verbazen.
Gebruik je andere animatie platformen zoals Google Webdesigner, Sencha of Tumult Hype, dan is dat geen probleem. Zorg ervoor dat je het combineert met de screenad library en dat alle assets, classes en CSS lokaal staat in dezelfde map en je kunt het gewoon testen in de previewomgeving zoals iedereen gewend is. Upload je ZIP en je bent klaar om te testen.
Heb je vragen over het ontwikkelen in HTML5 neem dan gerust contact met ons op.
sales@weborama.nl of: 020-5246690
