Evolution from Flash to HTML5

Flash to HTML5 Review
0 Flares Twitter 0 Facebook 0 Google+ 0 StumbleUpon 0 Pin It Share 0 0 Flares ×

Up till 2010, flash used to be the most usable and preferable software for developers to work on. With an open letter named ‘Thoughts on Flash’, almost everybody agreed with Steve Jobs. With the advent of HTML5 and its roots strengthening very hard every year, the developers have started questioning – how to start with HTML5, leaving behind flash. Being a developer it is a tough task to begin with, and choosing the tools, libraries and framework made it easy for me. A lot of patience is required to learn the basics of HTML, JavaScript, jQuery and CSS. I personally experienced the same and therefore I am here to share some tools to help you switch over HTML5 from flash. There is nothing which is not possible to create in HTML5 that you could do in a flash project.
Keep scrolling to know more about the list.

PreloadJS for asset loading

Converting your assets into HTML5 can be done through various ways; PreloadJS created by Grant Skinner who has immense experience in working with flash has made it very easy for the developers to start working with HTML5. This tool is a part of CreateJS and includes special tools like animation as well.

Big custom fonts with Cufon

Creating custom fonts was quite easy in flash, but seems to be tricky in HTML5, especially when we talk about browser compatibilities. This task can be easily done with the help of a CSS property called font-face. But Cufon, a JavaScript-based solution helps you minimize all those issues you used to face while working with bigger fonts in fonts-face.
Reason why I am recommending Cufon over fonts-face is that the bigger-sized fonts would look way too smoother on windows and several other web browsers. Another advantage is that using Cufon makes your page load faster, as in this case you need not load the font file. Only loading specific characters can help you go, take a look at the tutorial to get started.

Tweening like a boss

Tweenlite has been a great tool for creating animation in the projects in old good days, but luckily we have got tweening tool created by Jack Doyle, creator of Greensock.

HTML5 Canvas drawing API

I wonder if any developer has not worked with actionscript for drawing stuff, in fact some developers find it interesting to create reusable visual components through code rather than depending upon the flash IDE. So here comes handy the Canvas drawing API, it is not exactly like the one in flash, but after working on the same, you would realize that there are a few correspondences to flash’s “graphics.drawRECT()…” approach. If you wish to have something easier than this, you can try EaselJS, which is a part of CreateJS. Check out the tutorial by Lee Brimelow to help you start with.

Events or Signals

Events are the basics of any flash application, which could be of less use in HTML5. But, as I already said there is nothing that is impossible in HTML5, you can use native events in HTML5 through JavaScript – JS-Signals is a custom event/messaging system created by Miller Medeiros to help you.

Crossroads for Routing/deep linking

Deep linking is of great importance in flash projects, Miller Medediros created a HTML5 tool to do the same and named Crossroads.
Though there are several tools/solutions available, but I would stick to these for ease of use. It would be great if you spend some time in exploring the above stated tools individually and realize that evolution from flash to HTML5 is not that tough, as it seems.

About author View all posts

Andrew Johnson

Andrew Johnson is founder of BestPSDtoHTML. He loves creative designs, photography, paintings and everything about innovation. As an Internet entrepreneur, he constantly tries to develop new ways to bring content faster and closer to the end users in a more streamlined way. His main focus lies in inspiring all the designers and developers with all new ideas through his blogs.

Leave a Reply

Your email address will not be published. Required fields are marked *