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.
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 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.
To create an HTML5 Canvas document, do the following:
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.
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:
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.
Displays code in different colors according to the syntax. This allows you to visually distinguish various parts of a syntax.
Code Samples on Github
In the Properties, enter the instance name.
Click Window and select Action.
In the Current Frame, select Add using Wizard.
To publish the content on stage to HTML5, do the following:
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 "...".
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.
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.
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.
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.
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.
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.
Export document as texture Export vector animation as textures to enhance the performance of the animations. For more information see Texture Publishing.
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.
Asset Export Options
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.
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.
If checked, vector instructions are outputted in a compact form. Deselect to export readable, verbose instructions (useful for learning purposes).
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.
An animation designed using nested timelines, with a single frame, cannot be looped.
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
|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
Following tokens from the previous versions are deprecated in the current version:
Placeholder for code to initialize CreateJS libraries, load media, create and update stage
These tokens are modularized and replaced by other tokens.
Following JSAPIs support import and export of HTML templates for canvas documents:
var pathURI ="file:///C|/Users/username/desktop/CanvasTemplate.html”
var exportFlag =fl.getDocumentDOM().exportCanvasPublishTemplate(pathURI);
fl.trace(“Template could not be exported”);
var pathURI= “file:///C|/Users/username/desktop/CanvasTemplate.html”;
var exportFlag =fl.getDocumentDOM().importCanvasPublishTemplate(pathURI);
fl.trace(“Template could not be imported”);
Animate introduces the capability to include JS file within the HTML file during canvas publishing.
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.
To add and use global scripts:
Select Window > Actions
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.
To add third-party scripts:
Select Window > Actions.
In the Actions panel, select Include within the Global hierarchy.
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.
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.
Animate optimizes HTML5 Canvas output size and performance by:
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.
You can also use the No Color Swatch option to make the canvas background as transparent:
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.
HTML canvas supports Static and Dynamic 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 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.
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.
The published HTML5 output contains the following files:
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).
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:
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.
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.
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.
For example, if you copied layers that contain buttons, they are removed.
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:
Content is modified to a supported default value
Content type or feature is supported, but a property of the feature is not. For example:
For a full list of features that are not supported and their fallback values during migration, see this article.
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
Animate provides a JSFL script to convert an AS3 document to HTML5 Canvas document. When run, the JSFL script does the following:
This is applicable only when Combine images into spritesheet option is unchecked.