Converting animations from one platform to another

Introduction

Using Animate, it's a rather simple matter to convert a project from one document type to another.

We do this in order to target a variety of platforms using the same assets and animation.

As you see here, we have a basic web ad and if we go ahead and test this, Control, Test, we can see the animation occur inside of Flash player as a swift.

To convert this to HTML5 or some other platform,

Converting a document to a different platform

we can choose File, Convert To, and then choose the specific platform we want to convert it to.

In this case, I'm going to choose HTML5 Canvas.

In my save dialog, Animate gives it another name specific to the platform we're targeting, and it's going to be saved as an FLA document, just like the one that targets Flash Player.

Go ahead and hit Save and everything is converted for us.

We can see in the Output panel that Frame Scripts have been commented.

Handling ActionScript when converting to HTML5 Canvas

The reason for this is because Flash player uses action script, whereas, HTML 5 Canvas document types utilize JavaScript for interactivity.

Having a look at the Timeline, we can see that everything is really still intact.

And if we select the frame in the Actions layer that has our action script in it and choose Window, Actions we can see that indeed this has been commented out.

Let's convert this to JavaScript – this.stop to achieve the same effect.

Testing the converted project in a web browser

With this done, we can go ahead and choose Control, Test to test it in the browser.

And there we have it.

This is what was formerly Flash Player only content, now runs in a native web browser using each HTML 5 Canvas.