Knowledge blog

DART is one of the pioneer in providing the Flash to HTML5 conversion services. We have been in to this for more than 5 years now. DART have converted or migrated thousands of Flash files so far starting from simple Flash file to very complex Flash game. With this huge experience in Flash to HTML5 conversion, we are going to discuss about the challenges we faced and solutions for them. The main challenge is with the performance of Flash animations after converting to HTML5. Our conversion solution service caters wide range of browsers. Rather, I would say our solution supports all modern browsers on all devices irrespective of OS and screen resolution.

Over these years, the major problems or challenges we faced are with the below items broadly.

Quality Issue:

We all know that Flash renders Vector graphics in its own player known as Flash Player. The vector graphics look very crisp and can be scaled to a large dimension without having any quality issue like graphics getting pixelated.

But once the same graphics is converted to HTML5 from Flash, we can find the quality issue in mobile browsers and more easily in retina display devices like iPhones and iPads.

The issue will be like there will be thin line between the graphics elements.

Although, we have options in CreateJS library like “SnapToPixel” and “CacheAsBitmap” to improve the quality of graphics on the fly through code. But, it can only be used on still graphics to an extent. As far as the Flash animations are concerned, one need to work on each graphical item manually so that the quality does not get effected and the converted HTML5 Canvas graphics looks same as in Flash version.

Performance issue in HTML5 animations:

Another showstopper issue is performance lag issue on mobile browsers and even in some of the desktop browsers like Internet Explorer. Even the small animations like simple walk cycle will lag in the mobile browsers. No need to say about, character animations, lip sync with voice over animation and others.

There is no way to automate these kind of animations as each animation will be of different kind. These needs to be optimized with manual process so that the HTML5 animations can perform better in all browsers across devices flawlessly.

We would have to convert each object within a character to an image by keeping an eye on the scaling part. Otherwise, the converted images will get skewed and pixelated.

To view some of the optimized HTML5 animations, please visit our HTML5 demos here.

Flex Apps to HTML5:

This is one of the great challenges for a developer to work on. Because, he or she must be familiar with Flex architecture as it is entirely different. It follows MXML and component architecture. So, Flex Apps cannot be converted to HTML5 and can only be migrated to HTML5.

By saying that, we need to review the Flex app and then re-develop the same using modern JS frame works like Angular, React or others.

Many of the Flex Apps we migrated are data driven and use many components to display them. We would have to check how the data is parsed and data is displayed and follow the same in JavaScript.

It is not that easier as one has to have in-depth knowledge on both Flex and JavaScript frameworks and libraries. Hence selecting a team with clear demonstration of these expertises would reduce the challenge for you.