Exciting Updates to Flash Professional CC
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The Rebirth of Flash Professional CC
With the release of Adobe Flash Professional CC earlier this year, the application has undergone a drastic rebirth. Built from the ground up to be lean, modern, and extensible the Flash Professional application has truly started a new life alongside the Adobe Creative Cloud. Originally released along with the full suite of CC branded applications in June 2013, the application included a number of exciting features; Creative Cloud Sync, 64-bit architecture, Dark UI (as shown in Figure 1), unlimited pasteboard, Timeline enhancements, HD video export, Mobile development enhancements, a new code editor, and the ability to perform real-time drawing upon the Stage.
)
Figure 1 The Flash Professional CC interface
Wait… Isn’t Flash Dead?
Although the Flash Professional application began life closely tied to Flash Player and the SWF file format, starting with the introduction of Flash Player 9 and ActionScript 3.0, this relationship became much more relaxed. Today, with web standard technologies taking on many of the responsibilities that Flash Player once served, there is a decline in the use of the SWF format across many areas and Flash Professional is adapting to these changes by enabling the creation and export of content to serve a multitude of new and emerging platforms. At the same time, Adobe continues to improve upon and release new versions of both the Flash Player web browser plugin, and the Adobe AIR runtime for desktop and mobile applications and games.
So… No. Flash is not dead at all. The Flash Player will continue to serve those project types that require it (mostly web games and rich video projects). Adobe AIR continues to shine on iOS and Android with some of the top apps and games on those platforms built on ActionScript and third-party Flash frameworks such as Starling, Feathers, Apache Flex, Away3D, and many others. Most important to this discussion, Flash Professional will continue to enable its time-tested tooling and robust workflow to target platforms such as Flash/AIR, HTML5 Canvas, Google Dart, HD Video, and additional functionality users will come to know and love. The future of Flash Professional has never been as promising as it is right now!
What’s New (December 2013)
In this recent update for Flash Professional CC, there are a number of enhancements that do much to extend the range of targets that can be published from the application. Among these new features include fully integrated HTML5 Canvas documents along with full JavaScript editor support in the Actions Panel.
The next sections covers four of the key enhancements in support of this new Canvas integration:
HTML5 Canvas Documents
HTML5 Canvas is a new document type added to Flash Professional CC that generates an .FLA file for authoring, and targets the canvas tag of HTML. This option enables the authoring of animation and interactivity for targeting web browsers without the need for Adobe Flash Player if those extended capabilities are not needed. The generated HTML file bundle is driven by the CreateJS JavaScript library, which was previously available as an extension for both CS6 and the previous version of CC. This functionality is now included as a prime target format within the application (as shown in Figure 2) and is no longer provided through the Toolkit for CreateJS as a separate extension.
)
Figure 2 HTML5 Canvas Document Type
Static artwork and full animation created using this new project type can be directly published to HTML canvas using the Publish Settings panel, similar to publishing an ActionScript 3.0 document targeting Flash Player. Because certain tools such as the 3D Rotation and Transform Tools are not applicable to the HTML canvas target, they will be disabled when this document type is selected. If you need that functionality, you will want to be sure to target Flash Player instead when creating a new project document.
Actions Panel JavaScript Editor
When using the new HTML5 Canvas document type, you will be able to use JavaScript natively within the Actions Panel (as shown in Figure 3). This is a vast improvement over previous versions of Flash Professional which required users to include any JavaScript within a set of specific comments in order for the Toolkit for CreateJS. This new integration allows for the same features when writing ActionScript.
)
Figure 3 Actions Panel Supports JavaScript
The one drawback of having a document specific to ActionScript or JavaScript is that you can no longer publish to both SWF and Canvas using the same FLA document. However, Adobe has built a workflow solution into this update (which will be discussed later) and the isolation of document types allows this sort of full JavaScript support within the Actions Panel and elsewhere.
JavaScript Code Snippets
A selection of new code snippets (as shown in Figure 4) come bundled with Flash Professional that are similar to the code snippets you may be used to when writing ActionScript. However, these are written in JavaScript for use with this new document type. Along with the expected mouse events and timeline navigation snippets, you can also find some which are particular to the CreateJS libraries such as the creation of gradients and various shapes.
)
Figure 4 Code Snippets Panel Includes JavaScript Snippets
Just as with ActionScript code snippets, these can be accessed from within the Code Snippets panel directly or by clicking upon the Code Snippets button within the Actions panel.
HTML5 Canvas Conversion Command
When converting assets from an AS3-based FLA to one which targets HTML5 Canvas, we now have two options. The first option is to open the AS3 document, then select and copy all the layers (using the Copy Layers contextual menu item) within the Timeline. When we create a new HTML Canvas FLA, all that is needed is to paste the copied layers (using the Paste Layers contextual menu item) within that fresh Timeline and all assets and animation will be copied over.
While this method works well, it involves a number of steps and can be confusing for newcomers. Adobe has made things a bit simpler by including a new Command (as shown in Figure 5) called “Convert to HTML5 Canvas from AS3 document formats”.
)
Figure 5 Easily Convert Document Types from AS3 to Canvas
This Command (accessible from the application menu under Commands) can be executed upon an open AS3-based FLA and will prompt the user to save a new HTML5 Canvas-based FLA which will automatically be populated with all assets and animation from the original AS3-based document.
Video Demonstration of New Features
Interested in seeing these enhancements in action? The following video will demonstrate these major new features of Flash Professional CC.
You need to upgrade your Flash Player. You need version 9 or above to view this video. You may download it here. You may also see this message if you have JavaScript turned off. If this is the case, please enable JavaScript and reload the page.
With all of these features currently in place alongside the expectation of continued growth and support in these areas, Flash Professional CC can truly be seen as the premiere modern asset creation and rendering platform, whether you are targeting the web through Flash Player, HTML5 Canvas, or even desktop and mobile via Adobe AIR and PhoneGap.