Flash to Html5 Conversion

What to expect with respect to output and performance

Converting Flash to Html5 : Why and where it all started.

In Jan 2021 Flash was officially declared dead. The usage of Flash already had started declining rapidly in it's last 5 years mainly because of the emergence and increase in usage of mobile phones and tablets. The problem was that Flash was unusable on mobile phones and tablets because of it's high battery consumption. In fact, Apple was one of the first companies that selectively disabled the Flash plugins on iPhone.

As the decline continued the only option for the owners of Flash based apps was converting their apps to other similar web technology. However because of the special nature of the content of the Flash based apps that is, being creative, interactive, filled with artistic graphics, cinematic animations, effects and audios selecting a web based technology like flash was not an easy task and not just any web technology could be chosen to make a shift.

Alternative technologies available

One of the common technology alternative that was available was simple HTML5. However this was not at all desirable in terms of retaining creative aspects of Flash content. As creative alternatives there was Microsoft Silverlight and JavaScript. Silverlight had it's own pitfalls in terms of performance while JavaScript was well known for it's compatibility issues with different browsers. Others like CSS and popular JavaScript libraries like Greensock could not replace each and every creative aspect and features that flash used to offer to create a complete application.

Html5 Canvas

Around the same time a new alternative technology that emerged was Html5 Canvas that looked quite promising. The technology makes use of canvas. Just like a real world canvas, the html5 canvas was capable of drawing any type of bitmap without worrying about the layout. Additionally Html5 Canvas can be used on any platform ( PC,Mac,Android,Iphone etc.) using the browser.

Flash To Html5 Conversion and Comparison.

I have been using Html5 Canvas API like Haxe (OpenFL), Create JS, Zim JS, PixiJs to convert Flash into Html5 since 2015 till now. Most times I notice that while asking for conversion so many clients expect a similar look and performance of their sprites and animation as it were in Flash. The bad news is that it may not always be possible to achieve it if the game or app is too complex in terms of using artistic graphics, vectors and bitmaps or contains fast tween or cell based animations. For example - action games like fight games, race games etc. that makes use of frequently changing frames and moving sprites.

However the good news is that browsers and canvas API are constantly developing. So with time you can always see Html5 output better than before.

As per my experience while developing applications in Flash and Html5, I observe these differences between the performance of Flash as compared to Html5:

1. Animations For the same animation running in Flash and one running on Html5 canvas , the movement looks smoother and cinematic for Flash. As the size of animation gets bigger Flash performance may lower a bit, but with html5 canvas it can become worse as one can notice some flickering, jerky movements or skipping of frames. With even bigger animation Flash performance may slow down, but for html5 the same animation can stop running or even crash the browser. However tween animations show less degradation in performance than cell animations. For now I avoid using complex animations especially frequently changing and moving, heavy artistic, cell-based animations when converting to html5.

2. Audios Audios mostly work fine on Flash. However with Html5, it's possible that audio may not work on old browsers and may show problems with some of the new browsers too. Also for html5, along with .mp3 an another format .ogg may be required on some devices and browsers. With time more and more browsers are adding support for html5 audio, so hopefully this problem should be solved soon. I used Howler.js an alternative library in case existing Html5 Canvas library did not provide proper output in terms of audios.

3. Loading Time For the same application, Html5 can take more time to load than Flash. This happens because html5 canvas makes use of bitmaps. And if the application is targeting bigger screens, then bitmaps too need to be bigger in size. Bigger bitmaps take longer time to load. Similarly, for the same application if the Flash is using a vector image, and html5 too is using a vector image (SVG) again there are chances that html5 make take longer time to load. Mainly because SVG is an xml format. It's uncompressed format, which may use a lot more codes to display the vector image as compared to the vector image in flash.

4. Vector Graphics When using SVG I saw response delays when clicking with mouse or tapping. So many times you may need to convert them into bitmaps. And bitmaps come with their own issues as explained in previous point.

5. Bitmaps Html5 output may look blurry or pixelated. This is more noticeable if the maximum size of the bitmap images used is lesser than the dimension of the app. And let's say a the bitmap is large enough to be used on larger screen size, then resizing them smaller dynamically for smaller screen sizes may result in the original bitmap loosing it's crispness and sharpness because of it's size change. The most commonly used solution for this is to create separate art work for different screen dimensions. You can often find asset folders with subfolders labelled as x, 2x, 3x containing artwork to be loaded for different screen size and resolution. This can add up a lot of extra work though.

Some other minor issues

1. At the development side the developer may need to handle a lot of file and assets. And then later compress it when creating a final output.

2. The pre loader sometimes disconnect in between. However in most cases refreshing the page and reloading is the solution.