beautypg.com

Understanding the html5 canvas output, Migrating existing content to html5 canvas – Adobe Flash Professional CC 2014 v.13.0 User Manual

Page 239

background image

To the top

HTML file

JavaScript file

To the top

Copy

Import

Work

Scripts

Content is removed

Content is modified to a supported default value

Understanding the HTML5 Canvas output

The published HTML5 output contains the following files:

Contains definitions for all shapes, objects, and artwork within the Canvas element. It also invokes the CreateJS namespace to convert

Flash to HTML5 and the corresponding JavaScript file that contains interactive elements.

Contains dedicated definitions and code for all interactive elements of the animation. Also defined within the JavaScript file are,

code for all types of tweens.

These files are copied to the same location as that of the FLA by default. You can change the location by providing the output path on the Publish
Settings dialog (File > Publish Settings).

Migrating existing content to HTML5 Canvas

You can migrate existing content within Flash Pro to generate an HTML5 output. To its end, Flash Pro allows you to migrate content by manually
copying or importing individual layers, symbols, and other library items. Alternatively, you could run the Convert AS3 to HTML5 Canvas document
command to automatically port existing ActionScript content to a new HTML5 Canvas document. For more information, see

this link

.

However, when working the HTML5 document type in Flash Professional CC, you can notice that certain Flash features are not supported. This is
because, the features within Flash do not have corresponding features within the Canvas API. And hence, these features cannot be used within
the HTML5 Canvas document type. This may affect you during content migration, when you attempt to:

content (layers or library symbols) from a traditional Flash document type (such as ActionScript 3.0, AIR for Android, AIR for Desktop, and

so on) into an HTML5 document. In this case, an unsupported content-type is either removed or converted to supported defaults.

For example, copying 3D animation will remove all 3D transformations applied to objects on stage.

a PSD or AI file that contain unsupported content. In this case, the content is either removed or converted to supported defaults.

For example, import a PSD file that has Gradient Bevel effect applied. Flash Pro removes the effect.

with multiple document types (for example, ActionScript 3.0 and HTML5 Canvas) simultaneously, you switch documents with an

unsupported tool or option selected. In this case, Flash Pro CC visually indicates that the feature is not supported.

For example, you created a dotted line in an ActionScript 3.0 document and switch to HTML5 Canvas with the Line tool still selected. Observe the
pointer and the the Properties Inspector, they display icons to indicate that dotted line is not supported within HTML5 Canvas.

ActionScript components are removed and the code is commented out. And also, if you have JavaScript written within the comment block

(for Toolkit for CreateJS with Flash Professional CC 13.0), ensure that you manually uncomment the code.

For example, if you copied layers that contain buttons, they are removed.

Changes applied to content after migrating

The following are the types of changes that are applied when you migrate legacy content to an HTML5 Canvas document.

Content types that are not supported in HTML5 Canvas are removed. For example:

3D Transformations are removed

ActionScript code is commented out

Videos are removed

Content type or feature is supported, but a property of the feature is not. For example:

232