Adobe Flash Professional CC 2014 v.13.0 - Manual (Page 23)

Creating and publishing an HTML5 Canvas document
To the top
To the top
To the top
What is HTML5 Canvas?
The new HTML5 Canvas document-type
Example for HTML5 Canvas animation
Creating an HTML5 Canvas document
Adding interactivity in HTML5 Canvas document
Publishing animations to HTML5
Understanding the HTML5 Canvas output
Migrating existing content to HTML5 Canvas
Converting ActionScript 3 to HTML5 Canvas document using JSFL script
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 tag. These elements can then be enhanced using JavaScript to build
interactivity. For more information, see this link .
The new HTML5 Canvas document-type
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 Professional and the Canvas API
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.
Example for HTML5 Canvas animation
Attached below is an example of HTML5 animation created using the HTML5 Canvas document type within Flash Professional. The advertisement
is a collection of artwork, filter effects, and tweens.
16