Convert Flash Ads to HTML5

With browsers beginning to block Flash ads, from automatically playing, now is a great time to look at the existing capabilities within Flash Professional, to convert and optimize content for HTML5 Canvas output.

Here we have a very short animation. And right now this is an ActionScript 3 based, FLA file. So, when we actually go and test, it outputs a SWF for playback in Flash Player.

Let's go ahead and convert this for HTML5 Canvas. We can just go to "Commands", "Convert To Other Document Formats". And choose HTML5 Canvas, and hit "OK".

This process creates a Canvas based document for us to work in. You'll notice in our output window, since we did have some action script, on our last frame, it lets us know that the frame scripts have been commented out, although everything in the timeline is exactly as it was inside of our ActionScript 3 document.

To have a look at the actions, we'll select that last frame, and open our actions to see that indeed our action script has been commented out. However, quick access to the code snippets panel. We'll have a look inside of "Actions", "Click to Go to Web Page." And then, inside here we can remove our action script. Instead of "stop", we will say "this.stop", and then I'll paste in everything I took from code snippets. You'll see here that we can modify our URL. So, I'm going to direct this to blogs.adobe.com/flashpro, change this to "this.stage".

When working in Canvas, sometimes Bitmap data is a lot more performant than the Vectors. One consideration you might have in preparing your document is actually, going in to some other Vector based material, and rendering that as a Bitmap. I'm simply selecting the shape group, here, right clicking, and choosing, "Convert to Bitmap". You'll see this is now a Bitmap that lives within our library, and we can do that to as many elements as we want.

Going into our "Publish Settings", there are few additional things to note. For one thing, if we create a lot of Bitmaps, the IAB draft specifies, only 15 server calls are allowed. Exporting all the Bitmaps as a single Spritesheet is going to reduce however many bitmaps we have to only two server calls. One for the Spritesheet itself, and the other for the data associated with that. Additionally, any text we have in the document can be converted to outlines, allowing us to use a number of fonts that aren't necessarily available across users' machines.

We'll hit "OK", and let's publish this. Everything animates and looks exactly the same across the Flash Player, and Canvas version of this document. You can see that we can use the same workflow we are already familiar with, to target the native web browser on desktop and mobile devices with ad content created in Flash Professional.