Our latest brief for converting existing Flash content into usable HTML5 came from the Museum of London as part of their campaign to commemorate the 350th anniversary of the Great Fire of London.
In this blog post fish in a bottle’s Head of Educational Content and Co-founder, Drew Wilkins explains our approach to saving seemingly defunct existing assets.
A brief history
In its heyday a huge amount of content was created using Flash. This dynamic interactive content engaged web audiences in a way that static sites simply couldn’t. Flash games and interactive experiences became the cornerstone of many sites, drawing in large visitor numbers and increasing the time they spent on sites. The swift end of Flash came when Apple decided that they wouldn’t support Flash on their devices. With Flash’s increasing number of security issues and Google’s decision to also stop supporting it on Chrome, Flash was finished.
Reversioning in HTML5 and optimising for mobile reignites aging Flash content
But what does that mean for the world’s Flash content? Content that was once the heart of the visitor’s experience now gathers dust, hidden away or removed from sites completely. It’s time to start looking at these games and interactive experiences with fresh eyes. This content is incredibly valuable because it has a proven track record for engaging visitors. It used to generate high visitor numbers, prompt repeat visits and keep people on sites for longer. The only reason it’s not doing that any more is that it’s built using Flash. However, that’s a problem which is relatively easy to solve.
Flash content can be reversioned into HTML5 content, allowing for use on mobiles, tablets, and desktops. Having reversioned content for Nickelodeon, the BBC, the Museum of London, and Parliament, we’ve established 5 key principles that we follow when converting from Flash to HTML5
Among other things, you’re going to need to update tutorials, game mechanics, and consider screen sizes to get the best mobile game out of your Flash content. Think about menu buttons, screen ratios, and user interface, which typically need to be markedly different in HTML5 games.
Play the Flash version
There’s so much to consider when creating any game, so get prepared for development by playing the Flash game and use it as a point of reference throughout development. Although this is an obvious step, you really need to know the game inside out. Always be ruthless about cutting elements of the game that haven’t stood the test of time.
Export art assets correctly
If you’re not giving your game a new look, be sure to export your assets correctly. Use spritesheets if you’re developing with CreateJS, or Flump files if you’re using Flambé. You’ll be able to reuse a lot of assets and animations, but may need to recreate some background assets appropriate for device screen ratios.
Rewrite the existing code
There’s no one-click solution for a Flash to HTML5 conversion. Online tools can help, but leave a lot to be desired. Flash tween animations, ActionScript incompatibility, and mobile user experience are the big challenges you’ll face with these tools; rewriting means these issues simply don’t arise. Although rewriting the game seems like a larger investment of time, it isn’t. Remember you’re starting this process with all of the art assets in hand which is a huge saving.
Use the opportunity to make tweaks and changes
As well as being your chance to bring your Flash content to another generation, this is also a chance to make improvements to the game. When reversioning some Flash games, we’ve fixed bugs from the original game; and when reversioning the Great Fire game for the Museum of London, we gave it all new artwork that built on the existing style and drove the style of their website relaunch.
While Flash has been in decline the capabilities of HTML5 have improved, making it possible to produce games that are just as engaging on mobiles, without the need for Flash. This is really good news because an HTML5 game or interactive experience can reach a significantly larger audience than Flash ever could.
Side by side comparison of artwork from our HTML5 game (left) and the original Flash game (right)
The challenge comes with converting Flash to HTML5. Despite what the ads will tell you, at the moment there’s no way to successfully export Flash to HTML5. Even if there were, it’s unlikely that older Flash content will have a user interface which supports touch devices or screen resolutions appropriate for today’s desktop, mobile and tablet devices.
We have worked on reversioning flash games for Nickelodeon, the Museum of London, and the Parliament Education Service. In doing this we have developed processes to carry out well considered reversions of outdated Flash content.
A lot of brands, destinations, and companies are sitting on a gold-mine of Flash content that they are unable to capitalise on. We’re always available to discuss how reversioning these assets as HTML5 games can boost engagement and return these games to their former glory. If you have any questions about old Flash content we’re always ready for a chat, so get in touch.
About Drew Wilkins
Drew is one of our Co-founders and Head of Educational Content at fish in a bottle.