Moving from Flash to HTML5 the easy way

Categories Articles

It has been an epic debate since April 2010, when Steve Jobs published a open letter entitled Thoughts on Flash. Many expressive developers shared their opinions. Some said he was wrong, others, partially or fully, have agreed with him. Almost three years later, we see that HTML5 is getting stronger and we, as smart people, should definitely take a look at it. The question is: how to start?

As a Flash Developer, it was pretty difficult for me, at the beginning, to choose what to look first in this whole mess of HTML5 tools, libraries and frameworks out there. But after some headache learning the basics of HTML, getting started with Javascript, jQuery and CSS, plus a good dose of patience, I picked out some tools which I think are fundamental to ease the transition from Flash to HTML5. My approach was try to build in HTML5 all those things I used to have in every Flash project. Here is the list

PreloadJS for asset loading

There are lots of different and interesting ways to get your assets into an HTML5 page. PreloadJS, made by Grant Skinner, who has a long and successful story working with Flash, seems like a great start. PreloadJS is part of CreateJS, a library that includes many other tools, such as animation.

Big custom fonts with Cufón

Custom fonts are widely used in Flash, but it might be tricky to do that in HTML5, mostly due browser inconsistencies, which currently are some of the worst problems you face when you start working with HTML. You may embed a font fairly easily by using a CSS property called @font-face. But for now Cufón, a Javascript-based solution, can help you minimize some of those tough issues, that may still be present when you choose using @font-face, especially when you are working with bigger fonts.

The main advantage of Cufón over @font-size is that bigger size fonts will be a lot smoother on Windows and your fonts will, very likely, look exactly the same across different browsers.

Another advantage is that Cufón can also, in some cases, make your page load faster, because you don’t need to load the whole font file. You can instead, load only the specific characters you will need. Here is a great tutorial to help you get started.

Tweening like a boss

Animations can make your projects look way better, and it has been great to have tools such as Tweenlite in the old days. Luckily, Jack Doyle, creator of Greensock and his partners, decided to port Greensock Tweening tools to Javascript.

HTML5 Canvas drawing API

Who has not drawn stuff in Actionscript using its drawing API? In fact, some developers love to create reusable visual components entirely through code, rather than relying on the Flash IDE. Here comes handy the Canvas API. It is not exactly the same as in Flash, but after drawing some objects on the screen you will see that it has a quite a few similarities to Flash’s “graphics.drawRect()…” approach. If you want an even easier (and Flash-like) way to work with it, check out EaselJS, which is part of CreateJS, mentioned previously. Lee Brimelow has a great tutorial to help you get started with that.

Events, or much better, signals

Events are at the core of pretty much any Flash application, and they couldn’t be less useful in HTML5. But, although you can use native Events in HTML5 through Javascript, I found that JS-Signals, a custom event/messaging system created by Miller Medeiros, might be a much easier alternative.

Routing, aka deep linking. Try Crossroads

It’s not required on every project, but the use of deep linking in Flash projects to enhance usability has become very popular with Flash. Miller Medeiros has build a great HTML5 tool for that as well. There are many other solutions available, but I will stick with that for easy of use.

For the sake of brevity, I have omitted a few other important stuff such as audio, video, 3D, physics, geolocation and local storage, as well as some more advanced techniques. But I encourage you to take one day or two to explore individually each of the tools I mentioned. It will be a great warm up and you will soon realize that it’s much easier than it seems to transition from Flash to HTML5. Hope that’s helpful.

Author bioIzaias is a front end developer, founding partner at iuqo, a group of award winning interactive developers with a passion for emerging technologies, and partner at UNIT9, a well known digital production studio with offices in London, San Francisco, Stockholm, Florence, Poland and Brazil.

Catalin is the founder of Mostash - a social marketing boutique - and he's always happy to share his passion for graphic design & social media.