Flash to HTML5 – CSS & The Art of Imitation

Flash mobile is dead and whether you love it or hate it we are now left with HTML5. Theoretically HTML5 can do everything flash can and is supported on nearly all web-devices, mobile and PC. HTML5 presents a much more universal platform than flash could have ever been, but before we even begin our conversion let’s take a look at what motivates it. If you’ve ever wondered why Flash never made it to mobile Techcrunch has a great article on Why Mobile Flash Died, but I’d like to focus on what we can do now with HTML5 instead of moping 🙂

In this article I’d like to go over the major changes that you’ll have to make as a developer to adjust yourself to the new HTML5 architechture.

HTML5 is here and if you want a version of your site on mobile it’s going to be in HTML5. Some important points to consider are the features that flash provided that you will not get with HTML5 right out of the box

  • Cross-Browser Compatibility
  • Scaling
  • Printable Templates
  • UI – Animation UI
  • Integrated Development Interface

And it is exactly because of these missing points that trouble begins and you start to miss flash. Remember…

“Imitation is an imprecise art”

For a web designer, options for replicating flash functionality include

  • Traditional HTML, this means graphic functionality is pretty much dropped
  • Hybrid, you combine HTML and use the HTML5 canvas to handle animation sequences
  • Canvas Only, this means drawing all your HTML elements into the canvas which tends to add complexity. Support isn’t very good for this so it’s not recommended.

Imitating a Form

Forms are much easier to manage in HTML/CSS, elements comprise of styling (color, font, etc) and images.

LoginPortal

On the left we have a website that uses Flash, and on the right an HTML5 website

While the user interface (UI) of a flash website can be difficult to imitate, the styles of a flash app can be imitated by using CMS CSS.

Images

Images are by far the easiest to duplicate and can be done in two steps:

  1. First go into flash and select the image resources and click export the file in any format you desire.
  2.  put it into the HTML. You can do this two ways:
  • Using Traditional HTML there is the tag and the background-image css property
  • Using CreateJS you can import the resource and draw it to the canvas

Styling and Fonts

To style a page similar to flash,  use screen captures of the flash app under a common predefined size (ie. 800 x 600) and follow these general guidelines:

  • For color, use the eye dropper to imitate colour and enter it in CSS with hex conversion
  • For size, most picture editors also allow you to measure the distance in pixels, that allows you to determine window sizes and border widths
  • For positioning, use the pixel measurements of each box relative to an origin point and use the values along with CSS absolute positioning
  • For font, check the default text font in adobe

Imitating Graphics

Probably the hardest part to build in HTML5 is graphics, things get especially tough without the Flash IDE (Integrated Developer Environment) tools . Though HTML5 has a new element to help you draw pictures, animations and vectors you aren’t going to be producing animations by defining colours pixel by pixel. Luckily there is createJS toolkit, this handles all the animations through tweens which fill the animation between a drawn object’s start and end point. Now with a lot of animations going on code written using createJS gets really complex really fast, so it can be a good idea to stick to flash animation and export it to createJS. The problem with exports however is that compatibility is not always guaranteed (sometimes there’ll be a graphic or two that just doesn’t play) so you will have to tweak around to make sure all your animations work. An additional setback is exported UI, forms and the like don’t have their full functionality. Solving these issues is a whole book on it’s own but if you want to dip your feet in the pool CreateJS is the place to look for graphics and audio exports from flash.

Hopefully this provides an idea of how to approach a flash to HTML5 conversion. It is not straightforward and there are many approaches, we took the hybrid HTML5 and Canvas with CreateJS approach to do our export, you can see the work at www.driveofyourlife.org. You could also take a pure HTML5 approach if you weren’t building from scratch or a pure CreateJS export to keep as consistent as possible, we found the hybrid approach gives you the flexibility for UI and forms a web developer can feel comfortable with while exposing the CreateJS animations which allow us to fully export the flash graphics. This should give you a starter on your project, Good Luck!

Colin

Posted in CSS, JavaScript, Technical

Leave a Reply