User Guide Cancel

Create and publish HTML5 Canvas documents in Animate

  1. Adobe Animate User Guide
  2. Introduction to Animate
    1. What's New in Animate
    2. Visual Glossary
    3. Animate system requirements
    4. Animate keyboard shortcuts
    5. Work with Multiple File Types in Animate
  3. Animation
    1. Animation basics in Animate
    2. How to use frames and keyframes in Animate
    3. Frame-by-frame animation in Animate
    4. How to work with classic tween animation in Animate
    5. Brush Tool
    6. Motion Guide
    7. Motion tween and ActionScript 3.0
    8. About Motion Tween Animation
    9. Motion tween animations
    10. Creating a Motion tween animation
    11. Using property keyframes
    12. Animate position with a tween
    13. How to edit motion tweens using Motion Editor
    14. Editing the motion path of a tween animation
    15. Manipulating motion tweens
    16. Adding custom eases
    17. Creating and applying Motion presets
    18. Setting up animation tween spans
    19. Working with Motion tweens saved as XML files
    20. Motion tweens vs Classic tweens
    21. Shape tweening
    22. Using Bone tool animation in Animate
    23. Work with character rigging in Animate
    24. How to use mask layers in Adobe Animate
    25. How to work with scenes in Animate
  4. Interactivity
    1. How to create buttons with Animate
    2. Convert Animate projects to other document type formats
    3. Create and publish HTML5 Canvas documents in Animate
    4. Add interactivity with code snippets in Animate
    5. Creating custom HTML5 Components
    6. Using Components in HTML5 Canvas
    7. Creating custom Components: Examples
    8. Code Snippets for custom Components
    9. Best practices - Advertising with Animate
    10. Virtual Reality authoring and publishing
  5. Workspace and workflow
    1. Creating and managing Paint brushes
    2. Using Google fonts in HTML5 Canvas documents
    3. Using Creative Cloud Libraries and Adobe Animate
    4. Use the Stage and Tools panel for Animate
    5. Animate workflow and workspace
    6. Using web fonts in HTML5 Canvas documents
    7. Timelines and ActionScript
    8. Working with multiple timelines
    9. Set preferences
    10. Using Animate authoring panels
    11. Create timeline layers with Animate
    12. Export animations for mobile apps and game engines
    13. Moving and copying objects
    14. Templates
    15. Find and Replace in Animate
    16. Undo, redo, and the History panel
    17. Keyboard shortcuts
    18. How to use the timeline in Animate
    19. Creating HTML extensions
    20. Optimization options for Images and Animated GIFs
    21. Export settings for Images and GIFs
    22. Assets Panel in Animate
  6. Multimedia and Video
    1. Transforming and combining graphic objects in Animate
    2. Creating and working with symbol instances in Animate
    3. Image Trace
    4. How to use sound in Adobe Animate
    5. Exporting SVG files
    6. Create video files for use in Animate
    7. How to add a video in Animate
    8. Draw and create objects with Animate
    9. Reshape lines and shapes
    10. Strokes, fills, and gradients with Animate CC
    11. Working with Adobe Premiere Pro and After Effects
    12. Color Panels in Animate CC
    13. Opening Flash CS6 files with Animate
    14. Work with classic text in Animate
    15. Placing artwork into Animate
    16. Imported bitmaps in Animate
    17. 3D graphics
    18. Working with symbols in Animate
    19. Draw lines & shapes with Adobe Animate
    20. Work with the libraries in Animate
    21. Exporting Sounds
    22. Selecting objects in Animate CC
    23. Working with Illustrator AI files in Animate
    24. Applying blend modes
    25. Arranging objects
    26. Automating tasks with the Commands menu
    27. Multilanguage text
    28. Using camera in Animate
    29. Graphic filters
    30. Sound and ActionScript
    31. Drawing preferences
    32. Drawing with the Pen tool
  7. Platforms
    1. Convert Animate projects to other document type formats
    2. Custom Platform Support
    3. Create and publish HTML5 Canvas documents in Animate
    4. Creating and publishing a WebGL document
    5. How to package applications for AIR for iOS
    6. Publishing AIR for Android applications
    7. Publishing for Adobe AIR for desktop
    8. ActionScript publish settings
    9. Best practices - Organizing ActionScript in an application
    10. How to use ActionScript with Animate
    11. Accessibility in the Animate workspace
    12. Writing and managing scripts
    13. Enabling Support for Custom Platforms
    14. Custom Platform Support Overview
    15. Working with Custom Platform Support Plug-in
    16. Debugging ActionScript 3.0
    17. Enabling Support for Custom Platforms
  8. Exporting and Publishing
    1. How to export files from Animate CC
    2. OAM publishing
    3. Exporting SVG files
    4. Export graphics and videos with Animate
    5. Publishing AS3 documents
    6. Export animations for mobile apps and game engines
    7. Exporting Sounds
    8. Best practices - Tips for creating content for mobile devices
    9. Best practices - Video conventions
    10. Best practices - SWF application authoring guidelines
    11. Best practices - Structuring FLA files
    12. Best Practices to optimize FLA files for Animate
    13. ActionScript publish settings
    14. Specify publish settings for Animate
    15. Exporting projector files
    16. Export Images and Animated GIFs
    17. HTML publishing templates
    18. Working with Adobe Premiere Pro and After Effects
    19. Quick share and publish your animations
  9. Troubleshooting
    1. Fixed issues
    2. Known issues

 

What is HTML5 Canvas?

Canvas is a new element in HTML5, which provides APIs that allow you to dynamically generate and render graphics, charts, images, and animation. The presence of the Canvas API for HTML5, strengthens the HTML5 platform by providing two-dimensional drawing capabilities. These capabilities are supported on most modern operating systems and browsers.

Essentially, Canvas is a bitmap rendering engine, and the drawings are final and cannot be resized. Furthermore, objects drawn on Canvas are not part of the web page's DOM.

Within a web page, you can add Canvas elements using the <Canvas> tag. These elements can then be enhanced using JavaScript to build interactivity. For more information, see this link.

The new HTML5 Canvas document-type

Animate enables you to create an HTML5 Canvas document with rich artwork, graphics, animations, and so on. A new document type (HTML5 Canvas) has been added to Animate that provides native support for creating rich and interactive HTML5 content. It means that you can use the traditional Animate timeline, workspace, and tools to create content, but produce HTML5 output. With a few simple clicks, you are ready to create an HTML5 Canvas doc and generate a fully functional output. To its end, within Animate, the document and publish options are preset to generate HTML5 output.

Animate is integrated with CreateJS, which enables rich interactive content on open web technologies via HTML5. Animate generates HTML and JavaScript for content (includes bitmaps, vectors, shapes, sounds, tweens, and so on) created on stage. The output can be run on any device or browser that supports HTML5 Canvas.

Animate and the Canvas API

Animate publishes to HTML5 by leveraging the Canvas API. Animate seamlessly translates objects created on stage in to their Canvas counterparts. By providing a 1-to-1 mapping of Animate features with the APIs within Canvas, Animate enables you to publish complex content to HTML5.

Creating an HTML5 Canvas document

To create an HTML5 Canvas document, do the following:

  1. Select File > New to display the New Document dialog. Select the Advanced tab from the top of the screen and click the HTML5 Canvas option. This opens a new FLA with Publish Settings modified to produce HTML5 output.

You can now begin creating HTML5 content using the tools within Animate. As you begin working with the HTML5 Canvas document, you notice that certain features and tools are not supported and are disabled. This is because, Animate supports those features that are in-turn supported by the Canvas element within HTML5. For example, 3D transformations, dotted lines, bevel effects are not supported.

Adding interactivity in HTML5 Canvas document

Animate publishes HTML5 content using the CreateJS libraries. CreateJS is a suite of modular libraries and tools which enable rich interactive content on open web technologies via HTML5. The CreateJS suite comprises of: EaselJS, TweenJS, SoundJS, and PreloadJS. CreateJS converts content created on stage to HTML5 using these individual libraries to produce HTML and JavaScript output files. You can also manipulate this JavaScript file to enhance your content.

However, Animate allows you to add interactivity to objects on stage created for HTML5 Canvas from within. It means that you can actually add JavaScript code to individual objects on stage from within Animate and preview at author-time. In turn, Animate provides native support for JavaScript with useful features within the code-editor to help improve workflow efficiency of programmers.

You can choose individual frames and keyframes on the Timeline to add interactivity to your content. For an HTML5 Canvas document, you can add interactivity using JavaScript. For more information about writing JavaScript code, see this link.

JavaScript code can be written directly in the Actions panel, and it supports the following features while writing the JavaScript code:

Code Hinting

Allows you to quickly insert and edit JavaScript code and without mistakes. As you type characters in the Actions Panel, you can see a list of candidates that possibly complete your entry.

Additionally, Animate also supports some features inherent to Actions Panel when working with HTML5 Canvas. These features help improve workflow efficiency when adding interactivity to objects on stage. They are:

Syntax Highlighting

Displays code in different fonts or colors according to the syntax. This feature allows you to write code in a structured manner, helping you visually distinguish correct code and syntax errors.

Code Coloring

Displays code in different colors according to the syntax. This allows you to visually distinguish various parts of a syntax.

Bracket

Automatically adds closing brackets and parentheses for open when writing JavaScript code.

(A) Syntax Highlighting (B) Code Coloring (C) Brackets

You can add interactivity to shapes or objects on stage using JavaScript. You can add JavaScript to individual frames and keyframes.

  1. Select the frame you want to add JavaScript to.
  2. Select Window > Actions to open the Actions Panel.

Using JavaScript Code Snippets

You can add interactivity using JavaScript code snippets available within Animate. To access and use Code Snippets, select Windows > Code Snippets. For more information about adding JavaScript code snippets, see this article.

References to CreateJS documentation

Codes to induce Interactivity

Javascript gives you varieties of options to make the animation interactive. Want to learn how to add interactive movements to your character? Watch the tutorial at the end of this example and follow these steps.

  1. In the Properties, enter the instance name.

  2. Click Window and select Action.

  3. In the Current Frame, select Add using Wizard.

How to make your content interactive with HTML5

Watch the video to learn how to modify codes to make your character do as you want.

Publishing animations to HTML5

To publish the content on stage to HTML5, do the following:

  1. Select File > Publish Settings.
  2. In the Publish Settings dialog, specify the following settings:

Basic settings

Basic Publish settings

Output

The directory the FLA is published to. This defaults to the same directory as the FLA, but can be changed by clicking the browse button "...".

Loop Timeline

If checked the timeline loops, if not it stops when it plays to the end.

Include Hidden Layers

If deselected, hidden layers are not included in the output.

Center Stage

Allows users to select if the stage should be centered Horizontally, Vertically or Both. The HTML canvas/stage is displayed at the center of the browser window by default.

Make Responsive

Allows users to select if the animation should be responsive with reference to Width, Height, or both and resizes the published output based on various form factors. The result is a responsive, sharper and a crisper HiDPI compliant output.

The output also stretches to cover the entire screen area with no borders, and yet maintains the original aspect ratio, though some part of the canvas may not fit in view.

  • Width, Height or Both options ensures that the entire content is scaled down to the canvas size and is visible even when you view on a small screen (such as mobile devices or tablets). If the screen size is larger than the authored stage size, canvas is displayed in the original size.

Enable Scale to Fill Visible Area

Allows users to select if the animation should fit to view the output in full screen mode or should stretch to fit. By default, this option is disabled.

Fit in view: Displays the output in Full screen mode with the entire screen space and yet maintains the aspect ratio.

Stretch to fit: Stretches such that there are no border spaces in the output.

Include Preloader:

Allows users to select if they want the default Preloader or select a Preloader of their choice from the document library.

Preloader is a visual indicator in the form of an animated GIF that is displayed when the scripts and assets required to render an animation is loading. Once the assets are loaded, the preloader is hidden and the actual animation is displayed.

By default, the Preloader option is not selected.

  • Default option to use the default preloader or the
  • Browse option to use the preloader GIF of your choice. The preloader GIF is copied to the configured images folder in the Export Image assets.
  • Use the Preview option to preview the selected GIF.
Publish settings

Use the toggle options to opt for publishing at the root or the sub-folder level. This button is toggled ON by default. Toggling OFF disables the folder field and exports assets to the same folder as the output file.

Publish canvas assets to root folder

Export document as texture  Export vector animation as  textures to enhance the performance of the animations. For more information see Texture Publishing.

Export document as texture
Export document as texture

 This is applicable only when Combine images into spritesheet option is unchecked.

 You can choose to export all imported images (including compressed ones) from canvas document by retaining its size. Uncheck Export document as texture and Combine images into sprite sheet options in the Basic tab. Images are exported without any size change.

Export image assets

The folder in which images assets are placed into and referenced from.

Combine into spritesheets: Select this to combine all the image assets into a spritesheet. For more  spritesheet options, see Export bitmaps as spritesheets.

Export Sound assets

The folder in which the sound assets in your document are placed into and referenced from.

Export CreateJS assets

The folder in which the CreateJS libraries are placed into and referenced from.

 The default setting continues to publish files segregated into logical sub folders.

Advanced settings

Asset Export Options

The relative URLs to export images, sounds, and supporting CreateJS JavaScript libraries to. If the check box to the right is not checked, those assets are not exported from the FLA, but the specified path is still used to assemble their URLs. It expedites publishing from an FLA with many media assets, or avoid overwriting modified JavaScript libraries.

The Export all bitmaps as Spritesheets option allows you to pack all the bitmaps in canvas document in to a sprite sheet, which reduces the number of server requests and improves performance. You can specify the maximum size of the sprite sheet by giving the height and width values.

Template for publishing HTML:

 

Use Default: Publish your HTML5 output using the default template.

Import New: Import a new template for your HTML5 document.

Export: Export your HTML5 document as a template.

Hosted Libraries:

If checked, it uses copies of the libraries hosted on the CreateJS CDN at code.createjs.com. It allows the libraries to be cached and shared between various sites.

Include Hidden Layers:

If deselected, hidden layers are not included in the output.

Compact Shapes:

If checked, vector instructions are outputted in a compact form. Deselect to export readable, verbose instructions (useful for learning purposes).

Multiframe bounds:

If checked, timeline symbols include a frameBounds property containing an array of Rectangles corresponding to the bounds of each frame in the timeline. Multiframe bounds significantly increases publish time.

Overwrite HTML file on publish and include JavaScript In HTML:

If include JavaScript In HTML is selected, the Overwrite HTML file on Publish check box is checked and disabled. If you uncheck the Overwrite HTML file on Publish check box, then include JavaScript in HTML is unchecked and disabled.

  1. Click Publish to publish your content to the specified location.

 An animation designed using nested timelines, with a single frame, cannot be looped.

HTML template variables

When you import a new custom HTML template, during publishing, the default variables are replaced with customized code snippets based on the components of your FLA file. 

The following table lists the current template variables that Animate recognizes and replaces:

Attribute Parameter Template Variable
Title of the HTML document   $TITLE
Placeholder for including CreateJS scripts $CREATEJS_LIBRARY_SCRIPTS
Placeholder for including generated scripts (including web font scripts) $ANIMATE_CC_SCRIPTS
HTML Tag to start a client-side script                                                                                                               $SCRIPT_START
Placeholder for code to create loader (CreateJS LoadQueue) $CREATE_LOADER
Placeholder for code to load assets present in the manifest $LOAD_MANIFEST
Placeholder for code defining the method to load files $HANDLE_FILE_LOAD_START
Placeholder for code to handle file load event $HANDLE_FILE_LOAD_BODY
Placeholder for code concluding the method to load files $HANDLE_FILE_LOAD_END
Placeholder for code defining the method handle Complete, called after assets are loaded $HANDLE_COMPLETE_START
Placeholder for code to create the stage $CREATE_STAGE
Placeholder for code to register for tick event, after which animation starts $START_ANIMATION
Placeholder for code to support responsive scaling and hidpi displays $RESP_HIDPI
Placeholder for code concluding the method handle Complete $HANDLE_COMPLETE_END
Placeholder for a function to handle content with
sounds                                                                            
$PLAYSOUND
Placeholder for styling section to support centering the canvas $CENTER_STYLE
Placeholder for canvas display style property to support Preloader $CANVAS_DISP
Placeholder for code to display Preloader $PRELOADER_DIV
HTML Tag for end of client-side script                                                                                                                $SCRIPT_END
Canvas element ID                                                                                                                                                  $CANVAS_ID
Width of the stage or canvas element                                                                                                              $WT
Height of the stage or canvas element                                                                                                                 $HT
Background color of the stage or canvas element                                                                                          $BG
Version of Animate used to generate
content                                                                                     
$VERSION

Following tokens from the previous versions are deprecated in the current version:

Attribute Parameter

Template Variable

Placeholder to include scripts (CreateJS and generated Javascript)

$CREATEJS_SCRIPTS

Placeholder for code to initialize CreateJS libraries, load media, create and update stage

$CJS_INIT*

 These tokens are modularized and replaced by other tokens.

JSAPI support to import and export HTML templates for Canvas documents

Following JSAPIs support import and export of HTML templates for canvas documents:

  • Exports the HTML5 Canvas Publishing Template for given document,at the specified location:

bool document::exportCanvasPublishTemplate(pathURI)

  • Example:

var pathURI ="file:///C|/Users/username/desktop/CanvasTemplate.html” 

var exportFlag =fl.getDocumentDOM().exportCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“Template could not be exported”);

  • Imports and sets the HTML5 Canvas Publishing Template for given document, from the specified location pathURI:

bool document::importCanvasPublishTemplate(pathURI)

  • Example: 

var pathURI= “file:///C|/Users/username/desktop/CanvasTemplate.html”;

var exportFlag =fl.getDocumentDOM().importCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“Template could not be imported”);

Embed JavaScript into HTML

Animate introduces the capability to include JS file within the HTML file during canvas publishing.

  1. In the Publish Settings menu, switch to Advanced tab and select Include JavaScript In HTML
  2. Select OK in the Include JavaScript in HTML on Publish dialog box to republish the content overwriting HTML.
  3. This disables the Overwrite HTML file on Publish check box, and during any publishing event, HTML is generated, but overwritten.
  4. In the Select Stop including JavaScript in HTML, select OK to exclude the JavaScript and republish the HTML file.
  5. When the  Overwrite HTML file on Publish is not selected, the Include JavaScript In HTML option is automatically disabled. 

 If you do not want the HTML to be overwritten, the options Overwrite HTML file on Publish and Embed JS in HTML option cannot coexist.

Adding Global and Third-party scripts

Animators often utilize JavaScript code that is applicable to the entire animation. With this feature, you can add non-frame specific global and third-party scripts that can be applied to the whole animation from within Animate. 

To add and use global scripts: 

  1. Select Window > Actions

  2. In the Actions panel, select Script within the Global hierarchy.

    The Global Script section allows you to write scripts applicable across documents either within Animate or as an external script.

    As an external script:  In the Include screen, select the specific script for inclusion as described in the next section.

Adding third-party scripts

Animators often incorporate third-party JavaScript libraries but have to manually modify the code that Animate generates. With this feature, animators have greater flexibility to utilize the latest JavaScript libraries or code for animation.

To add third-party scripts: 

  1. Select Window > Actions.

  2. In the Actions panel, select Include within the Global hierarchy.

  3. Click the + button to add a script from an externally hosted URL or add a file by browsing to a local library.

    You can also reorder the scripts based on their inter-dependencies, as some objects are dependent on other pre-existing libraries.

Merging JSON data into JS

Based on customer feedback and JSON files being inherently insecure, we have merged the relevant data with the JS file and hence a separate JSON file is not created.

Optimizing HTML5 Canvas output

Animate optimizes HTML5 Canvas output size and performance by:

  • Exporting bitmaps as sprite sheet using the options in the Spritesheet tab in Publish Settings.
  • Excluding hidden layers (by deselecting the Include hidden layers check box) from published output.
  • Excluding all unused assets such as sounds and bitmaps, and all assets on unused frames (default).
  • Specifying not to export the assets from the FLA by deselecting the asset export options for images, sounds, and supporting CreateJS JavaScript libraries and using the relative URLs to export.
  • HiDPI compatible HTML5 Canvas output: Animate scales the output based on the pixel ratio of the device on which you view the content. This compatibility delivers a sharper output with zoom and also fixes the pixelation issues for canvas documents when you view the HTML canvas output on a High DPI machine. 

Setting a transparent canvas background

You can customize the canvas to various colors and also modify its display transparency. When you create a transparent canvas, you can view the underlying HTML content during publishing.

Note: This setting also makes the background transparent during OAM publishing.

  1. Select the canvas you wish to modify.
  2. In the Properties pane, select Stage.
  3. In Stage, set the percentage values for Alpha.

"No color" swatch support

You can also use the No Color Swatch option to make the canvas background as transparent:

  1. Select Modify>Document>Stage Color or in the Property Inspector, select Advanced Settings.
  2. In the Stage Color swatch, select No Color.

 

Canvas Transperancy: Advanced Settings

Export bitmaps as sprite sheet

Exporting a number of bitmaps that you have used in your HTML5 Canvas document as a single sprite sheet reduces the number of server requests, reduces the output size, and improves performance. You can export spritesheet either as PNG (default), JPEG, or both.

  1. In the Spritesheet tab, select the Combine image and assets into spritesheets check box.
  2. Select the Format as PNG, JPEG, or Both.
  3. If you have selected PNG or Both, specify the following options under PNG Settings:
    • Quality: set the spritesheet quality as 8-Bit (default), 24-Bit, or 32-Bit.
    • Max Size: specify the maximum height and width of the sprite sheet in pixels.
    • Background: click and set the background color for the spritesheet.   
  4. If you have selected JPEG or Both, specify the following options under JPEG Settings:
    • Quality: set the spritesheet quality.
    • Max Size: specify the maximum height and width of the sprite sheet in pixels.
    • Background: click and set the background color for the spritesheet.   

Working with text in HTML5 Canvas document

HTML canvas supports Static and Dynamic text.

Static Text

Static text is a richer option where all the assets are converted to outlines during publish time and provides excellent WSYWIG user experience. Since the text is published as vector outlines, you cannot edit them at runtime.

Note: Too much of static text usage may lead to bloated file size.

Dynamic text

Dynamic text allows modification of text at runtime and does not add too much to the file size. It supports lesser options than Static text. It also supports web fonts via Adobe Fonts.

If you are using dynamic text with fonts unavailable on end user machines, the output uses the default font for display and thus skews user experience. Such issues are resolved through web fonts.

Add web fonts to your HTML5 Canvas document

Animate offers Web fonts for Dynamic Text type in HTML5 Canvas document. Adobe Fonts provides direct access to thousands of quality, premium fonts from top foundry partners. You can access and use Adobe Fonts seamlessly in your HTML5 output for modern browsers and mobile devices, using your Creative Cloud membership.

To know more about using web fonts from Adobe Fonts in Animate, see Using Webfonts in HTML5 Canvas documents

Animate release 2015.2 enhances the visual experience for dynamic text in a canvas document so that the stage and published appearances are in sync.

Note: Adobe Fonts are not available for Static text type.

Understanding the HTML5 Canvas output

The published HTML5 output contains the following files:

HTML file

Contains definitions for all shapes, objects, and artwork within the Canvas element. It also invokes the CreateJS namespace to convert Animate to HTML5 and the corresponding JavaScript file that contains interactive elements. 

JavaScript file

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 Animate to generate an HTML5 output. To its end, Animate 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 Animate, you can notice that certain Animate features are not supported. This is because, the features within Animate 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:

Copy

content (layers or library symbols) from a traditional Animate 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.

Import

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. Animate removes the effect.

Work

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, Animate 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 Properties Inspector, they display icons to indicate that dotted line is not supported within HTML5 Canvas.

Scripts

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 Animate 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 is removed

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 is modified to a supported default value

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

  • Overlay Blendmode is not supported; is modified to Normal.
  • Dotted Line is not supported; is modified to Solid.

For a full list of features that are not supported and their fallback values during migration, see this article.

Converting other document types to HTML5 Canvas documents

The universal document type converter enables conversion of your existing FLA projects (of any type) to any other document type such as HTML5 Canvas, ActionScript/AIR, WebGL, or a custom document type. When you convert to a format, you can take advantage of the authoring features that Animate offers for that document type. 

For more information, see Convert to other document formats

Converting ActionScript 3 to HTML5 Canvas document using JSFL script

Animate provides a JSFL script to convert an AS3 document to HTML5 Canvas document. When run, the JSFL script does the following:

  • Creates a new HTML5 Canvas document.
  • Copies all layers, symbols, and library items to the new HTML5 Canvas document.
  • Applies defaults to unsupported features, subfeatures, or feature-properties.
  • Creates separate FLA files for each scene, because HTML5 Canvas document does not support multiple scenes.
To convert an AS3 document to HTML5 Canvas document, do the following:
  1. Open the ActionScript 3 document in Animate.
  2. Select Commands > Convert AS3 to HTML5 Canvas document.

 This is applicable only when Combine images into spritesheet option is unchecked.

More like this

 Adobe

Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX 2024

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online