Moving from Flash to HTML5

Blog November 2013

Flash is pretty awesome, there's little to argue about, it's been around for years and you can create rich animation and applications really quickly. The trouble with Flash is, it's a browser plugin and the last few years have seen a big increase in the move away from plugins to web standards. You can't use Flash on many mobile phones and even if you can it doesn't work very well. Tablets are becoming more popular that laptops and they don't support plugins. Even Windows 8 no longer supports any plugins in touch mode.

HTML5
This is where HTML5 comes in, a standard set of features in modern web browsers that allow web developers to create animation and applications a lot like Flash. It includes features for vector graphics, video, audio and rich input controls. It sounds like the perfect solution but there is a problem.

The Problem with HTML5
Unfortunately each web browser is different and they support slightly different features from HTML5. Some support video, some support vector graphics and some do not. Internet Explorer 8 still has 21% of the web browser market and is one of several web browsers that don't support any HTML5 at all. It would be foolish to create a web page in HTML5 that more than 1 in 4 people can't view.

The Solution to HTML5
The solution is called 'Cross Browser HTML'. It means to write HTML that can fall back on the old HTML4 standards when HTML5 is not available. For example, when vector graphics (SVG) is not available in Internet Explorer 8, another technology called vector markup (VML) can be used instead. Cross browser HTML is very complex and requires testing code in lots of different web browsers and on many different devices and operating systems that all function slightly differently. As you might be able to guess, this is a massive headache especially if you are a Flash developer and have little experience of HTML or JavaScript coding.

HTML Animators
HTML5 animators can help bridge the gap. They allow animation and applications to created using a development environment a lot like Flash. The difference is the exported file is all HTML instead of a SWF Flash file. Watch out though, many of these animators 'only' support HTML5, the animation might work in the latest version of Chrome but a lot of users will miss out.

Hippo Animator is a cross browser HTML animator. The HTML generated includes HTML5 and HTML4 so it will run on the most possible web browsers all the way back to Internet Explorer 6.

Hippo Animator vs Flash

Hippo Animator 3

When it comes to features and speed, Flash wins this hands down. Plugins have the power to do so much more than a web browser. On the other hand HTML created by Hippo Animator will work in over 99% of web browsers including smart phones and tablets which is a lot higher than the current Flash support.

HTML Restrictions
Any cross browser HTML animation needs to be able to support the least common denominator, in this case Internet Explorer 6 which still accounts for 5% of desktop web browsers. Internet Explorer 6 can do a surprising amount, it has support for DirectX and it's own vector graphics system, the problem has always been it's lack of standards and incompatibility with other web browsers. Another issue is audio and video on mobile devices which run differently from desktop web browsers. Firefox is a web browser that is often missing several key features such as support for MP3 and MP4.

Hippo Animator attempts to build in compatibility, sometimes however, there is just nothing that can be done. Here are a few restrictions a developer may need to consider when creating a HTML animation.

• Audio and video can only be played on Apple devices when the user touches the screen. Auto play is ignored. The only way to get background music on an Apple device is to make the user press a button to begin.

• Video cannot be shown below any other items. So no overlays can be created. This is because many mobile devices do not allow video to be embedded and always play it fullscreen.

• Most items can be rotated normally, however, some of the more complex HTML items can only be rotated 90 degrees or not at all. Text can only be rotated normally when converted to an image.

• Buttons cannot be pressed when placed under other items such as images as several web browsers cannot handle this.

• Some standard Flash transformations such as skew are unsupported for now.

So What Can I Do?
The answer is a lot. HTML can be used to create some amazing animations and applications. Give it a try and you might surprise yourself with how easy it is to create HTML just like Flash.

Flash to Hippo Animator Differences
There are a lot of similarities between Flash and Hippo Animator, Flash users will find a lot of familiarity.

Hippo Interface

Flash Interface

Here are some of the differences:

• The stage in Flash is called the editor in Hippo Animator.

• In Flash it is possible to draw directly on to the stage. In Hippo Animator images and drawings are created in separate windows just like Flash symbols and then added to the timeline.

• In Flash multiple items can be added to one layer, In Hippo Animator each item has it's own entry in the timeline.

• Flash tweens are called transitions in Hippo Animator. An item transitions from one frame to the next.

• Flash symbols are called items, objects and timelines in Hippo Animator.

• In Flash action script is used to add interactivity, in Hippo Animator standard JavaScript is used instead. JavaScript and action script are very similar and use much of the same syntax.

• There is only one layer allowed to have script in Hippo Animator. In Flash, any layer can be used.

• In Flash, symbol events are added as functions in the timeline. In Hippo Animator items have a property for each event.

• In Hippo movies are exported rather than published.

Adding your Animation to your Website
Flash creates one SWF Flash file that can be uploaded to a website and included in a web page using object or embed tags. An example is created when the Flash movie is published.

Hippo Animator is similar, a single HTML file is created with a folder of images. The file and the folder can be uploaded to a website and included in a web page using iframe tags. An example is created when the Hippo movie is exported.

Good Luck
Don't panic, Flash will still be around for years but support for HTML5 is building. So join in and best of luck with your with your future developments.

Download Hippo Animator: Download Free Trial

First Tutorial: Getting Started

Statistics: www.netmarketshare.com


 Learn more about creating HTML animation and mobile apps with Hippani Animator.
Learn More...