We’re targeting HTML5 more and more at WeeWorld but doing so has always been a problem for us. You see our illustrators and animators rely heavily upon Flash Professional. With our previous HTML5 and JavaScript projects we’d been left in a bit of a pickle because it just wasn’t possible to take our Flash content and easily drop it in. It would often end up with animation being taken out of the hands of animators and instead taken care of by us developer types who are quite honestly hopeless at coding up such things.
A background is created in Flash before being exported to JavaScript.
A few months ago we started a new project at WeeWorld that would allow our users to create photos of their WeeMee and friends. One of the requirements was for the user to be able to scale and rotate certain elements within their photo. Vector graphics would be ideal for the job but that would require Flash. Thankfully Flash Professional now supports HTML5 export via the excellent CreateJS framework. We were able to create rich vector artwork within Flash that could easily be integrated into our JavaScript projects, allowing users to scale and rotate that content without a loss of fidelity.
Watch this video of me making a really awesome photo.
ActionScript unfortunately goes out the window with this workflow and we were instead forced to write any interaction for our Flash content using JavaScript. However, considering we were embedding our content into a larger HTML5 project it made more sense to use JavaScript anyway. Plus, with the CreateJS framework being loosely based on Flash’s display list API, coding in JavaScript actually felt fairly familiar.
Here's a speech bubble designed in Flash (left) and how it looks within the HTML5 webpage (right).
I was pretty damn impressed by the performance of our vector content. Given how detailed much of it was and considering everything was being rendered by a layer of JavaScript, I was expecting the frame rate to take a serious hit. In the end, everything actually ran really well. And to be honest, across the whole project, we didn’t run into that many cross-browser issues either.
So all in all it was really good fun and it was great being able to use Flash Professional CC in our HTML5 workflow. If you want to give our photo editor a try then head on over to weeworld.com and sign-up. Alternatively just watch the video that I’ve embedded above.