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

Flash Professional CC Update 1 – now available!

Hello everyone,

Firstly, a BIG thank you for providing feedback and reporting bugs. Your inputs have gone a long way in helping us investigate and fix these bugs. We are happy to announce that Flash Pro CC Update 1 (13.0.1) is now live! The update contains fixes for the following bugs:

  • The first curve, drawn using a Wacom tablet, is straightened out.
  • Flash Pro CC freezes when closing the application, intermittently.
  • Flash Pro CC crashes on setting some specific fonts in code editor preferences.
  • Flash Pro CC crashes on exporting images and SWF files on Mac 10.6.

For more information and full list of bugs fixes, see the release notes.

Cheers,

Suhas Yogin

Flash Professional CC | Publish Persistent Metadata

This feature allows you to create plug-ins by attaching arbitrary metadata to individual objects via JSAPI. The metadata is then published to either the stagPlaceObject4 SWF tag in Flash Player 11.6 or to an external metadata file (JSON, XML, etc.). This feature builds on the existing persistent data functionality already available with Flash Pro.

What is supported?

  • Supported Object Types: You can add metadata to Movie clips, Buttons, and Text. These objects must necessarily be placed on Stage.
  • Supported Data Types: Metadata can be of Integer, Double, or String datatypes.
  • Supported Publish Targets: Flash Player 11.6, SWF, JSON,

How does the feature work?

  1. Create a SWF panel UI or write JSFL commands.
  2. Call JSAPI to set, get, clear, and publish persistent data.
  3. Data is added to selected object in the fla and is available when the file is saved and re-opened.
  4. Use any of the two Publishing Options:
    • Publish to SWF with unique “EMBED_SWF” format key. This will embed the persistent data in the SWF in the object.metaData property when the FLA is published.
    • Custom publishing format (such as “EXTERN_JSON”) requires extension developer to write a SWF panel or JSFL file to traverse document at publish time and manually export persistent data to an external file.
  5. To access metadata embedded in SWF (“EMBED_SWF”) write AS to access the metaData property such as “myInstance.metadata…”. To access custom publishing format in external file, add code to SWF to load and parse the external file.

Try this demo:

  1. Download Blog Testfiles archive file.
  2. Extract the contents of the ZIP to an accessible location on your computer.
  3. Launch Flash Pro CC, and ensure that you have Adobe Extension Manager installed. For more information, see this help article.
  4. Install the Dynamic Layout.zxp file, a sample extension that showcases the feature (for more information, see this help article). This panel allows you to anchor your object at runtime.
  5. Relaunch Flash Pro CC.
  6. In Flash, go to Window > Extensions > Dynamic Layout.
  7. Create a new AS3 file targeting Flash Player 11.6.
  8. Create a symbol and place it to the left and toward the bottom of the stage, and select the symbol.
  9. In Dynamic Layout panel, select the Embed in SWF during Publish option. A new Dynamic Layout Actions layer is created.
  10. Check the Left and Bottom box.
  11. Test your Movie in Flash Professional.
  12. Resize your SWF window to see your object anchor to the spot.

Once you have installed the extension, you can see all the commands and source code to build the actual panel. Also available is the code it executes at runtime located inside Flash user config folder.

Flash User Config folder is located at:

  • Windows – C:\Users\<username>\AppData\Local\Adobe\Flash CC\en_US\Configuration\WindowSWF\Dynamic Layout
  • Mac - Volume/Users/<username>/Library/Application Support/Adobe/Flash CC/en_US/Configuration/WindowSWF/Dynamic Layout

 

Sample files include:

MetaDataUtilities (sample jsfl code)

  • PersistentDataClearAll.jsfl
  • PersistentDataInspect.jsfl,
  • PersistentDataSetExample.jsfl

PanelSource (actual fla that creates the dynamic layout panel)

  • Dynamic Layout.fla
  • DynamicLayout.as

RuntimeAndExampleCode

  • DynamicLayoutClient.as,
  • DynamicLayoutUtils.jsfl
  • ExportPersistantDataJSON.jsfl

 

Sample JSAPI:

You can make use of the following sample JSAPIs when adding persistent metadata:

// get the first selected element

var elem =

fl.getDocumentDOM().getTimeline().layers0.frames0.elements0;

// add persistent data “myAlign” of “left”

elem.setPersistentData( "myAlign", "string", "left" );

// mark persistent data as exported and embedded in SWF during

publish elem.setPublishPersistentData("myAlign", "EMBED_SWF", true);

// also mark data as exportable during a CUSTOM “EXTERN_JSON” JSFL

script elem.setPublishPersistentData("myAlign", "EXTERN_JSON", true);

 

// special key for enabling publishing of persistent data to SWF at

publish time fl.getDocumentDOM().setPublishDocumentData("EMBED_SWF", true);

 

// Also enable for custom “EXTERN_JSON” format

fl.getDocumentDOM().setPublishDocumentData("EXTERN_JSON", true);

The following APIs must be set with same publish format and passed “true” for persistent data to publish.This allows control at the individual item level as well as enabling / disabling for the entire document.

  • element.setPublishPersistentData()
  • document.setPublishDocumentData()

 JSAPIs

The following JSAPIs are needed for this feature. Those in blue are new to Flash CC.

Name Parameters Return Type Description Example

void element.setPersistentData(name:String, type:String, value);

name: name of the datatype “integer”, “double” etc none Stores data with an object. Data is written to .fla file and available toJavaScriptwhen the file is re-opened.

fl.getDocumentDOM().getTimeline().layers[0].frames[0].elements[0].setPersistentData( “myData”, “integer”, 12 );

variable element.getPersistentData(name:String);

name: name of the data variable – returns the stored data Returns the value of the specified data. The type returned depends on the type of data that was stored.

var data = fl.getDocumentDOM().getTimeline().layers[0].frames[0].elements[0].getPersistentData( “name” );

void element.removePersistentData(name:String);

name: name of the data None Removes any persistent data that has been attached to the object with the given name.

var elem = fl.getDocumentDOM().getTimeline().layers[0].frames[0].elements[0];elem.removePersistentData( “myData” );

void element.setPublishPersistentData(name:string, publishFormat:String, publish:Boolean);

name: name of the datapublishFormat: the format for which this data gets published*
publish: if true, this item gets published
false: do not publish this item
none Enable / disable publishing for single item of persistent data
 // get the first selected element
var elem = fl.getDocumentDOM().getTimeline().layers0.frames0.elements0;// add persistent data “myAlign” of “left”
elem.setPersistentData( “myAlign”, “string”, “left” );// mark persistent data as exported and embedded in SWF during publish
elem.setPublishPersistentData(“myAlign”, “EMBED_SWF“, true);// also mark data as exportable during a CUSTOM “EXTERN_JSON” JSFL script
elem.setPublishPersistentData(“myAlign”, “EXTERN_JSON“, true);// special key for enabling publishing of persistent data to SWF at publish time
fl.getDocumentDOM().setPublishDocumentData(“EMBED_SWF“, true);// Also enable for custom “EXTERN_JSON” format
fl.getDocumentDOM().setPublishDocumentData(“EXTERN_JSON“, true);Both

  • element.setPublishPersistentData()
  • document.setPublishDocumentData()
    must be set with same publish format and passed “true” for persistent data to publish.This allows control at the individual item level as well as enabling / disabling for the entire document. |

Boolean element.getPublishPersistentData(name:String,fl.getDocumentDOM().setPublishDocumentData(“EMBED_SWF“, true);

publishFormat: the format for which this data gets published* bool returns true if this data item will be published for the given publishing format Get whether the data is to be published  (see above)

fl.getDocumentDOM().setPublishDocumentData(publishFormat:String, publish:Boolean);

publiishFormat: the publishing format for which to enable/disable for entire documentpublish: enable/disable publsihing none enable or disable publishing of persistent data for the entire document  (see above)

Boolean fl.getDocumentDOM().getPublishDocumentData(publishFormat:String);

publiishFormat: the publishing format for which to enable/disable for entire document  true if publishing of persistent data is enabled in the document for the specified publishing format Returns true if publishing of persistent data has been enabled for the speciifed publishing format in this document  (see above)

void LibraryItem.setPublishData(name:string, publishFormat:String, publish:Boolean);

same as element.setPublishPersistentData()
“_EMBED_SWF” not supported on library items

BooleanLibraryItem.getPublishData(name:String,fl.getDocumentDOM().setPublishDocumentData(“MY_FORMAT“, true);

same as element.getPublishPersistentData()
“_EMBED_SWF” not supported on library items

About PublishFormat

A unique string which specifies the various publishing format for which this data gets published.

  • EMBED_SWF” is one special key which causes this data to be embedded inside a SWF file at publish time in the object.metaData property. Requires Flash Player 11.6 (SWF version 19) or above.
  • Any other tag may be used for custom output such as “EXTERN_JSON” if the developer also writes a corresponding JSFL script to the traverse the document and export to the new format.