How to create and publish an HTML5 Canvas document
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.
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.
Flash Professional CC 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 Flash Pro that provides native support for creating rich and interactive HTML5 content. It means that you can use the traditional Flash Professional 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 Flash Pro, the document and publish options are preset to generate HTML5 output.
Flash Professional CC is integrated with CreateJS, which enables rich interactive content on open web technologies via HTML5. Flash Pro CC 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.
Flash Pro publishes to HTML5 by leveraging the Canvas API. Flash Pro seamlessly translates objects created on stage in to their Canvas counterparts. By providing a 1-to-1 mapping of Flash features with the APIs within Canvas, Flash Pro enables you to publish complex content to HTML5.
To create an HTML5 Canvas document, do the following:
- Launch Flash Professional CC.
- On the Welcome Screen, click the HTML5 Canvas option. This opens a new FLA with Publish Settings modified to produce HTML5 output.
- Alternatively, select File > New to display the New Document dialog. Click the HTML5 Canvasoption.
You can now begin creating HTML5 content using the tools within Flash Pro. As you begin working with the HTML5 Canvas document, you will notice that certain features and tools are not supported and are disabled. This is because, Flash Professional 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.
Flash Professional CC 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, PreloadJS, and Zoë. 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, Flash Professional CC 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 Flash Pro and preview at author-time. In turn, Flash Pro 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 interactvity 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, Flash Professional 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.
(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.
- Select the frame you want to add JavaScript to.
- Select Window > Actions to open the Actions Panel.
You can add interactivity using JavaScript code snippets available within Flash Professional CC. To access and use Code Snippets, select Windows > Code Snippets. For more information about adding JavaScript code snippets, see this article.
To publish the content on stage to HTML5, do the following:
- Select File > Publish Settings.
- On the Publish Settings dialog, specify the following 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 "...".
Asset Paths
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.
JavaScript Namespaces
The namespace in which symbols, images, and the CreateJS libraries are placed into and referenced from.
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.
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.
Note:
An animation designed using nested timelines, with a single frame, cannot be looped.
HTML file
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.
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).
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:
Copy
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.
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. Flash Pro 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, 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.
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 Flash Professional CC 13.0), ensure that you manually uncomment the code.
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:
- 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.
Flash Professional CC 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, sub-features, 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:
- Open the ActionScript 3 document in Flash Professional CC.
- Select Commands > Convert AS3 to HTML5 Canvas document.
Note:
Ensure that you read through Warnings in the Output panel. These warnings give you information about changes that were applied to content during the conversion.
It is Super Blog Thanks Kalamfaim
ReplyDeleteThanks For Visit My Blog
ReplyDeleteThanks and you
Delete