Adobe Flash Professional CC for HTML5 animation

Guest Post by Colin Holgate, senior programmer, Funny Garbage

titlescreen At Funny Garbage, we love working on projects that are both fun and that let us flex our development muscles. We recently worked on a mobile and Facebook app for the Aéropostale P.S. brand. Targeted to teens, the app lets them use their own headshots to personalize crazy dances comprised of complex animations. This is the kind of fun characterization that Adobe Flash Professional does so well.

The development time was short and the app had to be delivered on iOS, Android, and Facebook. We knew we had to have both a Facebook and mobile presence, and we wanted to easily replicate the functionality without building separate experiences. However, a major requirement of the job was that the animation had to be HTML5 compatible for desktop browsers. This would enable users on iOS and the latest Android OS to access and share the same playback links. The same links would also work for desktop users who had not installed Flash Player. We used Flash Professional CC (using Adobe AIR to deploy to iOS and Android mobile and SWF for Facebook) to create the app, here’s how we did it.

addingperson We conducted an early test of the HTML5 Canvas feature in Flash Professional CC while it was still in beta, and it was remarkably successful. We were able to proceed with all of the other features of the app knowing from the outset that the playback was going to work. Without that ability to port over to HTML5 with complete confidence, the only alternative was to develop this project natively in four separate environments—much too complex a process and not a realistic option within our production schedule. In fact, we actually beat the launch deadline and I was the only Flash developer working on the project.

Our artists, animators, and designers spent several weeks working with the client on style, animation, and music. They used Adobe Photoshop CC and Illustrator CC for all the graphical assets, as well as for the Flash Professional animation timeline. The files were then handed over to me to use in the Facebook and mobile apps, and also to create the HTML5 versions. We included placeholder headshots for seven different animations, featuring up to three people, which users can override with their own “selfies.”

flashproscreenshot The workflow of taking the regular Flash Professional animations and exporting them as HTML5 files is quick and as simple as choosing “convert to HTML5 Canvas from AS3 document formats” from the Commands menu. When the HTML5 Canvas document is published it exports all of the code, images and sounds needed to create the animation. We did further optimizations on the exported folders of images, so that the loading of the HTML5 pages is fast.

In the end, our client was happy with the outcome—a fun, creative app to showcase the P.S. brand. We’re excited to see where we go next with using Flash Professional CC as a development tool for code-driven HTML5 Canvas projects, not just for animations. We’re also keeping an eye on Adobe Edge Tools & Services, which will help us create more responsive designs. Having cutting edge tools encourages us to stretch our skill sets and our imaginations, while at the same time discover new ways to save time and money.

Creating HTML5 Canvas | Reusing ActionScript 3.0 assets | Flash Pro CC – Part 2

This post in the 2nd and last of the two-part series of Converting and reusing ActionScript 3.0 assets in an HTML5 Canvas document.

Recap

In my previous post, we learned how to run the JSFL script (Commands > Convert to HTML5 Canvas AS3 document formats) to convert legacy ActionScript 3.0 assets and reuse them in an HTML5 Canvas document. We also examined the conversions that were applied on each of layers and objects within the AS3.0 file.

Did you observe?

If you read through the previous post entirely, you must have wondered why the Tap to Jump button in the HTML5 animation wouldn’t work (unlike the SWF where it worked). Like I explained in my previous post, during the conversion ActionScript code is commented out. So, as a final step of the conversion process, we will replace the ActionScript code with equivalent JavaScript. You will be happy to know that Flash Pro CC fully supports JavaScript coding, with additional code-hinting and auto-format features.

Frames 114, 141, 142, & 278

These frames contained fully-functional ActionScript code in the original Banner.fla file, which was commented out during the conversion. Let us pick each of these frames individually and add equivalent JavaScript code for the same:

  1. Go to Frame 114, and select the keyframe on the Code layer.
  2. Press F9 or select Window > Actions to bring up the Actions Panel. You will see the ActionScript code is commented out.
  3. From the table below, copy the JavaScript code below copy the JavaScript code below the AS code and close the Actions Panel.
  4. Similarly, add JavaScript code for frames 141, 142, and 278, as well.
Frame number ActionScript Code Equivalent JavaScript Code
114

var self = this;this.btnJump.onClick = function() {self.gotoAndPlay(“endWait”);}

var self = this;this.stop();this.btnJump.addEventListener(‘click’, onClickJump);function onClickJump() {self.gotoAndPlay(“endWait”);

}

141

removeEventListener(MouseEvent.CLICK,onClickJump);gotoAndPlay(“startWait”);

removeEventListener(MouseEvent.CLICK,onClickJump);this.gotoAndPlay(“startWait”);

142

removeEventListener(MouseEvent.CLICK,onClickJump);

this.instance.removeEventListener(“click”, onClickJump);

278

import flash.events.MouseEvent;btnPlay.addEventListener(MouseEvent.CLICK, onClickEnd);function onClickEnd(pEvent : MouseEvent) : void {navigateToURL(new URLRequest(“http://www.adobe.com/”),”_blank”);}

stop();

this.stop();stage.onClick = function() {window.open(“http://www.adobe.com”, “_blank”);}

And finally…

Publish (Ctrl+Enter on Windows and Command + Enter on MAC) the HTML5 Canvas document again to see the fully functional animation running smoothly on your default browser.

Video tutorial

I created this video tutorial to make it easier for you to understand the conversion process:

Creating HTML5 Canvas | Reusing ActionScript 3.0 assets | Flash Pro CC – Part 1

Note: This is the first of the two part series I am writing for Converting AS3 to HTML5 Canvas.

Flash Professional CC allows native HTML5 Canvas authoring! Yes, you heard it right! With its latest update, you can create HTML5 Canvas content right from within Flash Professional CC using the new HTML5 Canvas document type. This means you can use Flash Professional CC to produce rich, interactive content that adapt to the modern web needs. Flash Pro CC also allows you to add interactivity using JavaScript, as well.

HelpQuestions_Flash-01

What about legacy ActionScript content?

If you have created SWFs and other ActionScript 3.0 content types in the past, it is certainly not the end of the road! Flash Pro CC allows you to migrate and reuse ActionScript 3.0 content within an HTML5 Canvas document type. When you want to migrate, you have two options:

  1. Manually copy layers, symbols, and other library items to a new HTML5 Canvas document.
  2. Automatically port all layers, symbols, library items, and code-snippets to a new HTML5 Canvas document using the Convert AS3 to HTML5 Canvas document.

In this article, I will explain the second option in detail. To get started, download and extract the contents of Banner.zip file, and open Banner.fla in Flash Professional CC.

Command

When you publish the file, here’s how the SWF output looks:

Converting ActionScript 3.0 assets to HTML5 Canvas

To convert the ActionScript assets and reuse them in an HTML5 Canvas document, do the following:

  1. In Flash Pro CC, select Commands > Convert to HTML5 Canvas from AS3 Document Formats option.
  2. Flash Pro CC creates a new document, and when prompted, provide a meaningful name (for example, Banner_HTML5.fla) and save the document. The new document contains all layers, symbols, library items, and code-snippets (absolutely)! You will observe that the layers and library items in the new HTML5 Canvas document are composited in just the same way as that of Banner.fla file. The Output panel shows warnings generated while copying/importing AS3 document assets into the HTML5 Canvas doc.

The effect of Conversion

  • The (Canvas) suffix besides the file name indicates that it is an HTML5 Canvas document.
  • Ensure that you study the warnings in the Output panel. These warnings help you understand all the content conversions that occurred during the migrations. Since not all ActionScript 3.0 features are supported by HTML5 Canvas, Flash Pro CC applies defaults to or removes all such unsupported content types. For information, see this article. In the Banner.fla, you can notice the following conversions:
    • Label (Layer) – this is a normal label layer, and is migrated without without any changes.
    • Code (Layer) – this layer has frame scripts (ActionScript code) in frames 114, 141, 142, and 278.
      • The layer is copied and the objects on stage are intact.
      • ActionScript code is commented out for all 4 frames (114, 141, 142, and 278).
    • Lines (Layer) – this layer contained a dashed stroke in the original ActionScript 3 document.
      • The layer is copied and the object on stage is intact.
      • Dashed stroke is not supported with HTML5 Canvas and hence, is converted to a solid stroke.
      • Txt (Layer) – this layer has 3 instances of Text symbols.
        • AntiAlias of text is not supported with HTML5 Canvas, and is converted to DeviceFonts.
        • AutoKern is not supported with HTML5 Canvas, and is removed.
        • LineType is not supported with HTML5 Canvas, and is converted to MultiLineNoWrap.
        • StaticText is not supported with HTML5 Canvas, and is converted to DynamicText.
      • All other layers are copied as is.
  • ActionScript code is preserved, but commented out. As a post-migration step, it is important that you write JavaScript code that substitutes functionality of ActionScript code. This will be explained in the next post, as part of this series.

Try publishing the HTML Canvas file by pressing Ctrl + Enter (Command +Enter for MAC) or go to File > Publish to launch the output in your default browser.

The output is a smoothly running HTML5 Canvas animation, with underlying standard compliant HTML and JavaScript code. Here’s how it looks:


In my next part, I am going to tell you how to convert the ActionScript bits in to JavaScript to build interactivity. Stay tuned!

Introducing Native HTML5 Canvas in Flash Pro CC

HTML5 Canvas workflow

Have you ever wondered what it would be like to create animated content using a familiar authoring environment, while being able to target a diverse set of platforms like HTML5 Canvas, in addition to Flash Player and AIR?

Great news – the latest version of Flash Professional CC, available now, includes native HTML5 Canvas support. As you may recall, Flash Professional CC was released in June, marking its rebirth as a modernized 64-bit authoring tool for multiple platforms. This update continues that theme, emphasizing its focus on HTML5.

The new HTML5 Canvas support lets you create interactive content leveraging well-established Flash Pro paradigms of timeline, frame-scripts and creation tools, all customized for the HTML5 Canvas platform. Add frame-script using native support for JavaScript including code-hinting, code-coloring, and more.

Check out more details here, or download the free trial.

Thanks and we hope you enjoy this update!

Rich Lee, Sr. Product Marketing Manager
Ajay Kumar Shukla, Sr. Product Manager