I just published a white paper on creating interactive HTML5 advertising using CreateJS and Flash Professional CC, written by myself and Cory Hudson. The document was also reviewed by subject experts from Adobe and PointRoll/CoFactor to ensure accuracy.
Cory is the Senior Director of Creative Technology at AOL, and has led his team in using CreateJS to successfully build numerous CreateJS based interactive advertising pieces. We brought together his applied experience, and my technical knowledge of the CreateJS libraries (for which I am the lead creator/maintainer) to develop a document that provides guidance and best practices for ad creators making the transition from SWF-based ads. Our goal was to let you leverage your existing experience with Flash Pro CC, and jump straight into web standards with minimal pain.
Accompanying it, I have released a new helper class called AdHelper, which provides a number of useful functions to ads, including high dpi support, sleep scheduling, background tab detection, performance monitoring, and alternative content. It is available on the GitHub repo.
Our plan is to maintain the white paper as a living document, updating it as standards evolve or we discover new best practices. We welcome your input or contributions via the GitHub repo.
Thanks for the insights on creating HTML5 banners with createJS. So relevant at the moment as Flash is blocked by Chrome.
At the moment of writing we already made two workflows for banner development. One based on svg and one based on the canvas. For an optimal workflow I decided to split the workflow in three parts.
Design, animation, and HTML almost the same as you described in your workflow. Whats crucial in the workflow is how quickly you are able to implement designs that have been changed or iterations without redeveloping HTML5 banner.
On this part, the Flash, HTML5 canvas has some disadvantages over the svg workflow. In our svg workflow we can easily convert our Sketch artboards to an svg. We prefer Sketch over Illustrator exported svg files as Illustrator has a weird way of nameing layers. Changing text or images in multiple banners can be done in one file and exported directly.
For both workflows we use GSAP for animation. One animation library for both workflows.
We have made a lot of banners with both workflows. We also created some dynamic retargeting (DoubleClick Studio) banners with createJS for example IKEA. Dynamic banners uncoverd an other big issue, fonts licences. No issue with IKEA as they use Verdana. When serving a campaign the amount of pageviews can be well over 100.000.000. Most companies have strict rules on how to use their corporate design and fonts. No issue with Flash as the font could be embeded but in HTML5 It can be bit more expensive. Haven’t heard the IAB on this issue…
Haven’t mentioned your issue on the number of http requests, file sizes, tinypng.org and much more :-)
Overall I’am happy to see createJS and also GSAP give us the support in the search for some good workflows.
hi，I have took over a Website （y.eovas.net）optimization task, the code is written by others, using the latest createjs library, there are hundreds of pictures（but the website is automatically adapt to different phones and rotation so its hard to use cache）, and then rely on fingers slide show from page to page, the problem is FPS is very low in some Android mobile native browser(eg: vivo 3xsw http://yukon12345.com/lag.mp4),I have try lots of ideas to optimiz this problem ,but seems not good enough 。can you give me some suggestions on the optimization （Especially on canvas animation）？thanks a lot！
Very helpful for me :) I even didn’t know about global variables. You should provide an example for global functions too.
Thanks!