Flash Professional CC | Avatar | Release Notes

Welcome to the Flash Professional CC (code named Avatar) Release Notes.

All information in this document is considered confidential and is covered under the nondisclosure agreement you signed before entering the prerelease program. Do not distribute or discuss the content of this document with anyone outside the prerelease program.

Pre Release Build Details

This Prerelease Software is a prerelease version, does not represent a final product from Adobe, and may contain bugs, errors, and other problems that could cause system or other failures and data loss. Adobe may never commercially release the Prerelease Software. If you received the Prerelease software under a separate written agreement, such as theAdobe Systems Incorporated Serial Agreement for Unreleased Products, your use of the software is also governed by such agreement. You will return or destroy all copies of Prerelease software upon request by Adobe or upon Adobe’s commercial release of such soft are. Because there may be bugs, please do not run this prerelease build in a production environment, and save your work frequently.

YOUR USE OF PRE-RELEASE SOFTWARE IS AT YOUR OWN RISK

Your feedback will help improve Flash Professional. Please share your feature requests and bug reports on the Flash Professional prerelease website (https://prerelease.adobe.com/).

Introduction

Adobe® Flash® Professional is the industry-leading authoring environment for producing expressive interactive content. The next release of Flash Professional is codenamed ‘‘Avatar’’.

Flash Pro has been the tool of choice for designers for a very long time and we are embarking on an exciting journey to make it even more compelling as a solution for animation on the web and beyond. Continuing on our recent efforts to add support for additional output formats like HTML5 Canvas (through Toolkit for CreateJS), Sprite Sheets and Google Dart, we intend to provide native support for Canvas, SVG, WebGL, and beyond. Your feedback in this endeavor is important and invaluable.

Installing Flash Professional

Installation considerations

If you have an existing creative cloud account for Flash Professional CC you can use the same account for the Avatar prerelease also. If you are using an existing creative cloud account, you can skip the below documentation and go to the “Install the prerelease build” section.

If you do not have a creative cloud subscription, you need to create a temporary Adobe Creative Cloud account and license the product with a prerelease Creative Cloud subscription. Once you have created a temporary Creative Cloud account, you require a redemption code to activate your subscription. You may join the Creative Cloud redemption code program via the link present in the left navigation bar of this site. Joining the program is a simple, two-click process. After you have access to the Creative Cloud redemption code program site, follow the instructions available there and Pick a redemption code applicable to you.

Activate your membership

1. Go to URL: http://creative.adobe.com/redeem.
2. Enter an Adobe ID suitable for testing. If you already have a subscription to Adobe’s Creative Suite or Creative Cloud products, it is highly recommended that you create a separate Adobe ID for prerelease testing purposes at this time. If you have no subscription purchases from Adobe, you can either create a new Adobe ID or use your existing Adobe ID. To create a new Adobe ID, go to https://creative.adobe.com/join/starter.
3. Enter the redemption code and click Activate Membership.
4. You now have a prerelease subscription associated with the Adobe ID, including online storage and access to other Creative Cloud features.

Deactivate your membership

1. Deactivate the current CC prerelease build on your computer by launching the product and selecting Help > Sign-Out. Follow the instructions on the dialog box to complete deactivation.
2. Ensure that you are signed out of any Adobe product subscription on your computer. To do so, launch the Adobe Application Manager from your Applications folder (Mac), or Start Menu (Windows). Select the drop down menu in the upper left corner of the Adobe Application Manager, and click Sign-Out.
3. Uninstall any prerelease build from your computer. CS6 and earlier Adobe products can coexist on the same computer without any issues.
   

Install the Prerelease Build

The M06 build of Flash Professional CC pre-release for October 2013 is a patch-installer and has to be applied on an existing build of Flash Professional CC (13.0.0.759 or 13.0.1.808). To install M06 build, do the following:

1. Uninstall M05 build and ensure that you delete preferences.
2. Ensure Flash Pro CC (13.0.0.759 or 13.0.1.808 - HellCat) GM Build is installed.
3. Dowload and install the M06 build.
4. Flash Pro CC will be updated to 13.1.0.211.

System Requirements

What's new with Pre-release drop 5

The M05 build contains fixes to bugs that were reported with M04 and earlier builds.

What's new with Pre-release drop 4

Author-time Sharing

Author-time sharing has been re-enabled with the M04 build of Flash Professional CC (Avatar). Author-time sharing was dropped from Flash Pro CC (HellCat), and has now been reinstated. For more information, see this help article.

However, the feature will be limited to workflows for options in Symbol Properties dialog and the manual Update option. Additional Sharing capabilities that were supported by Flash CS6 for Projects are not available as the Projects Panel has been dropped.

The basic workflows supported would be:

• Sharing of Symbols and assets (embedded within symbols) from a source fla file to multiple destination fla files while authoring.
• Ability to set Update-Automatically link, so, that any changes made to the Source Symbol are propagated simultaneously across all the fla files that may be sharing it.
• Copying or dragging a shared symbol across different doc-types will preserve its Authortime Sharing linkage. This allows you to maintain all symbols/assets in a single source file and target different publish formats easily. (Provided the symbol does not have any unsupported effect applied over it based on the doc-type where it is being used.)
• While editing any shared symbol in a destination file, you may choose and edit it directly in the source file or break the linkage as desired. You may also use the manual update option, later, to sync back the symbol from source file.
• Files created in Flash Pro CS6, which had Sharing enabled in them will continue to maintain their setting in Avatar as well.

What's new with Pre-release drop 3

Exporting to WebGL format

Flash Professional CC (Avatar) allows you to create and publish rich interactive content to the Web Graphics Library (WebGL) format. WebGL is an open web standard for rendering graphics on any compatible browser without the need for additional plug-ins.

WebGL is fully integrated in to browsers allowing Flash Professional to leverage GPU accelerated usage of graphics processing and rendering, as part of the web page canvas. Elements of a WebGL output can be seamlessly embedded within any HTML elements, used as parts of the page or the background. For more information on WebGL, see this wiki page.

The WebGL document type allows you to leverage powerful tools within Flash to create rich content, but render on a compatible browser. Most commonly used browsers support WebGL, there by, allowing Flash Pro to render content on any platform.

Creating a WebGL document

In Flash Professional CC (Avatar), a new document type targeting the WebGL format is readily available. To create a new WebGL document:

1. Launch Flash Professional CC (Avatar).
2. On the Welcome Screen, click the WebGL Document option.

Modifying publish settings for a WebGL document

If you want to modify publish settings for your WebGL document, do the following:

1. Select File > Publish Settings.
2. On the Publish Settings dialog, browse to or enter the output directory.
3. Leave the Publish HTML and Include Hidden Layers options selected.
4. Click OK to close the Publish Settings dialog and continue working on the content. Or, click Publish to publish your WebGL document.

Publishing content to the WebGL format

To publish your WebGL document, select File > Publish. This launches an instance of your default browser to render WebGL content.

Enhancements to HTML5 Canvas

• When working with multiple document types, Flash Pro CC (Avatar) visually indicates if a feature is not for a said document type. This applies for cases when you use an unsupported feature in a different document. For example, consider that you were working on an ActionScript 3.0 and HTML Canvas documents, parallely. You chose to draw a Dotted Line in the AS 3.0 document. When you switch to the HTML Canvas document, with the Line tool still selected to draw a dotted line, icons on the tool and Properties Inspector indicate that the feature is not supported. Also, after the first-click on stage, the Style value for the Line tool is reset to Solid.
  
  The behavior also applies for copy/paste of content between documents. In this case, document specific non-supported features are disabled or fallback to defaults.
  
  
• Importing sounds in to the Library is now enabled.

Enhancements to AIR Publish workflow

• AIR 3.8 applications targeting Android devices will use Captive Runtime option. The Shared Runtime Publishing option is disabled.
• The Emulator Release deployment type is disabled for AIR 3.8 applications that target Android devices.
• Flash Pro CC (Avatar) now supports xhdpi icons (96 x 96) for AIR 3.8 applications targeting Android devices.

Using HTML extensions with Flash Pro CC (Avatar)

You can now extend capabilities of Flash Pro CC (Avatar) with HTML extensions. The HTML extensions can be created using Extension Builder 3. You can download and install Extension Builder 3 from this location.

For more information about Extension Builder 3, see this article.

Enhancements and bug fixes for export Sprite Sheets workflow

• Issues related to the MaxRect algorithm are now fixed.
• Sprite Sheet export now default to the last-used values.
• Unexpected rotation of frames when exporting a group of MovieClips to a spritesheet.
  
• Two new properties (maxHeight and maxWidth) have been added to the SpriteSheetExporter API. When autoSize is set to True, the API allows you to control the size of the Sprite Sheet by setting height and width values.
  
• The XML encoding for Sprite Sheet export has now been changed to UTF - 8.

What's new with Pre-release drop 2

SVG

• Text is now supported when exporting to SVG
• Ability to export embedded or linked Bitmap files

HTMLCanvas

• The PSD and AI file import functionalities have been enabled for the HTMLCanvas document type.
  
• Any script added in the Actions panel will now be emitted directly to the JS/HTML files. This means that the hack of adding JS code in the comment block, tagged as /* js */, is not needed.
  
• The CreateJS 1.3 library is now integrated 

Width Tool

• Symbols can now be saved with variable width stroke

AIR 3.8

• AIR 3.8 is now integrated
  

What’s new with Flash Professional CC - Avatar

Using the new Width Tool

Avatar release introduces the new Width tool for Flash Professional CC. The Width tool allows you to create a variable width stroke, and save the variable width as a profile. The profile can then be applied to strokes created with other tools.

The Width tool is available from the Tools panel () or pressing the U key. When you mouse over a stroke with the Width tool, a hollow circle appears on the path with handles. You can adjust the stroke width, and move, duplicate, or delete the width point.

Using the Width tool

To create a discontinuous width point using the Width tool, do the following:

1. Create two width points on a stroke with different stroke widths.

2. Drag one width point on to the other width point to create a discontinuous width point for the stroke.

Width tool controls

The following table lists the keyboard modifiers to use while working with the Width tool:

Saving width profiles

After defining the stroke width, you can save the variable width profile from the Stroke panel or the Control panel.

Width profiles can then be applied to selected paths by choosing them from the Width Profile drop-down list in the Properties Panel. When a stroke with no variable width is selected, the list displays the Uniform option. To restore the default width profile set, click the Reset Profiles button. .

Save width profile is enabled only when variable width apart from default width profiles is selected on the stage. You can create your own stroke profiles using width tool and save them. Similarly, delete width profile icon is enabled when custom width profile is selected in the drop down. In case you want delete any custom profile, you can use this option.

Known Issues

• Width tool handles are not in sync with the direction of drag for curved paths.
• Profile keeps flipping while drawing, moving, after applying transform operation and in many other scenarios. Start point of each stroke profile keep changing while we draw the shapes with variable width strokes.
• Width tool is active even outside the scope of the stroke as it takes maximum thickness into account currently.

Feedback required on

• Current thickness of stroke is restricted to 200px, and hence, any modifications using the Width tool will restrict the width to 200px. Is this sufficient?
• Every time stroke intersects or breaks at any point or partially selected, the stroke profile is reapplied to partial selection or broken parts. Is this ok?

Attaching sample screen shots in order to illustrate how useful and beautiful variable strokes can prove to be:

New HTML Canvas Type for CreateJS publishing

HtmlCanvas is a new document type added in Flash. Artwork, animation capabilities of Flash Professional, including vectors, bitmaps, tweens, sounds can be directly published to Html. The generated HTML file is driven by the JavaScript code and this code is generated using the open source CreateJS framework. The generated html content can be run in any HTML5-compatible mobile or desktop browser. For more information, see this article.

Pre-release Build 2 onwards only

• The PSD and AI file import functionalities have been enabled for the HTMLCanvas document type.
• CreateJS 1.3 library is now integrated with Flash Professional CC (Avatar).

Publishing animations to HTML5

Artwork, animations created using the new project type “HtmlCanvas” can be directly published to HTML using the Publish Settings panel. The following are the options on Publish Settings dialog for HTML5 Canvas:

• Output: The directory the FLA will be 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.
• Publish HTML: If unchecked, the HTML file is not generated.
• 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. This can speed up publishing from an FLA with a lot of media assets, or avoid overwriting modified JavaScript libraries.
• JS Namespaces: the namespace in which symbols, images, and the CreateJS libraries will be placed into and referenced from.
• Hosted libs: If checked, this uses copies of the libraries hosted on the CreateJS CDN at code.createjs.com. This allows the libraries to be cached and shared between various sites.
• Include hidden layers: If unchecked, hidden layers are not included in the output.
• Compact Shapes: If checked, vector instructions are outputted in a compact form. Uncheck 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. Note that including multiframe bounds significantly increases publish time.
  

The following is a list of all features that are currently supported for conversion to HTML5.

Adding interactivity in HtmlCanvas document

Interactivity in Html document can be achieved through Frame script:

1. Select the frame, you want to add interactivity to.
2. Add the JavaScript code in the corresponding frame. Now JavaScript code can be written directly in the Actions panel, and  it supports the following features while writing the JavaScript code:
   • Syntax highlighting
   • Code hinting
   • Code coloring
   • Bracket

Published MovieClip symbols expose methods to control the timeline, similar to ActionScript.

JavaScript does not use this as an implicit scope like ActionScript 3, so you must specify the scope in any timeline scripts. For example:

Reference documentation to write JavaScript code:

http://createjs.com/Docs/EaselJS/modules/EaselJS.html

http://createjs.com/Docs/TweenJS/modules/TweenJS.html

http://createjs.com/Docs/SoundJS/modules/SoundJS.html

http://createjs.com/Docs/PreloadJS/modules/PreloadJS.html

Exporting artwork in SVG format

This feature enables exporting artwork created in Flash Professional CC as an SVG file. By selecting the appropriate frame or keyframe, you can export artwork to an SVG file. The SVG 1.1 specification is used when exporting.

The SVG format also allows you to embed artwork in HTML pages, seamlessly. Since SVG is an open web standard, you can create engaging artwork in Flash CC, and use the SVG format to export to, and embed the artwork in an HTML page.

(Pre-Release Build 2 and onwards only) The SVG export now supports the following features, as well:

• Text
• Embedded and Linked Bitmap Instances

Features not supported for SVG Export

• 3D properties
• Gradient Glow and Gradient Bevel filters
• Strength and Quality properties of filters
• Layer, Overlay, Hard Light, Add, Subtract, Difference, Invert, Alpha, Erase blend modes
• Audio, Video
• Components, Compiled Clip
• 9-Slice scaling

Exporting SVG

1. In Flash Professional CC, scrub or move the playhead to the appropriate frame.
2. Select File > Export > Export Image. or select File > Publish Settings (select the SVG Image option in the Other Formats section.)
3. Enter or browse to the location where you want to save the SVG file. Ensure that you select SVG as the Save As type.
4. Click Ok.
5. On the Export SVG dialog, choose to Embed or Link to your SVG file.
   • Embed: Embeds a bitmap in the SVG file.
   • Link: Provides a link to the path of a bitmap file.
   • Copy Images to /Images folder: Allows you to copy the bitmap to the /Images. The /Images folder, if it does not already exist, is created in the export location of the SVG.

Auto Format for AS3 and JS

ActionScript and JavaScript can now be formatted according to your preference using the auto-format feature in Avatar.

To Format code according to Auto Format settings

• Click Auto Format in the Actions panel or Script window toolbar.
• From the context menu in Actions Panel or Script Window, select ‘Format Code’.
• Press Control+Shift+F (Windows) or Command+Shift+F (Macintosh).
• With focus in Actions Panel or Script Window, select View > Format Code.

To set Auto Format options, there is separate preference for ActionScript and JavaScript . To set your preference

1. Select Edit > Preferences (Windows) or Flash > Preferences (Macintosh).
2. In the Preferences dialog box, select Code Editor.
3. In the bottom you will find ‘Format Code’ preference. Select the language and set your options.

After you set Auto Format options, you must apply your settings to existing code manually.

JavaScript Editor Support for HTML canvas Document Type

Interactivity for a HTML canvas document can be added using JavaScript. For ToolKit for CreateJS the java script code could be added to the Action script file but in a comment block. In Avatar JavaScript can now be added to the actions panel in the HTML Canvas document.

• Code Hinting for JS is also available. Hinting is supported for Java Script language and for CreateJS library.
• Code Coloring is available for Java Script Keywords.

Code hinting for JavaScript

When you work in the Actions panel of a HTML Canvas Document, the software can detect what action you are entering and display a code hint. There are two types of code hint: a tooltip that contains the complete signature of a function, and a pop-up menu that lists possible elements, such as function or property names (sometimes referred to as a form of code completion).

Code hints are enabled by default. By setting preferences, you can disable code hints.

Code hints are displayed for JavaScript language elements and Create JS library elements.

Specify preference settings for automatic code hints

In the Actions panel or Script window, select Edit > Preferences (Windows) or Flash > Preferences (Macintosh), click Code Editor in the Category list, and then enable or disable Code Hints.

Manually display a code hint

1. Click in a code location where code hints can appear, such as in the following locations:
   • After the dot (.) following a statement or command, where a property or method must be entered
   • Between parentheses [()] in a method name
2. Do one of the following:
   • To enable Code Hinting manually, select View > Show Code Hint.
   • Press Control+Spacebar 

Code Hinting for JSFL

Code Hinting for JSFL file is now available in Avatar.

Kuler Panel

Adobe Kuler is a web-based application used to experiment with, create, and share color themes that you use in a project. Capture a theme anywhere you are with the Adobe Kuler iPhone app. Or create one on the Kuler website. Once the theme is available in your Kuler account linked with Creative Cloud, you can sync your themes with the new Kuler panel in Avatar.

In Avatar, the Kuler panel (Window > Extensions > Kuler) displays:

• Themes you created, and are synced with your account on the Kuler website (kuler.adobe.com).
• Public themes that you have marked as a favorite themes on the Kuler website.

The Adobe ID used in Avatar is automatically used to sign in to the Kuler website, and the Kuler panel is refreshed.

Using the Kuler Panel

The swatches and themes available in the Kuler panel are read-only. You can use a swatch or theme in your artwork, directly from the Kuler panel. However, to modify or repurpose a swatch or theme, first add them to the Swatches panel.

1. Click Window > Extensions > Kuler, to open the Kuler panel.
2. All themes available in your Kuler account when Avatar was launched are displayed in the Kuler Panel.
3. If you have added a theme in Kuler after you started Avatar, click Refresh in the Kuler panel to include the latest theme.
4. You can add entire theme to your Swatches panel (Window > Swatches).To add
5. In the Kuler panel, select the entire theme by clicking the theme's folder/heart icon. The entire theme is added to the Swatches panel.
6. If you have an extensive list of themes, search the theme using the Find box .Searches are performed on the names of the themes.

Enhancements to Sync Preferences

Flash Professional is now fully integrated with Creative Cloud. It allows you to synchronize Preferences to Creative Cloud, first, and across multiple machines (a maximum of two). Besides maintaining a backup on Creative Cloud, the sync preferences feature allows you to restore and reuse preferences despite reinstalling Flash Pro.

In Flash Professional CC (13.0.0.759 - Avatar), the following set of preferences can be synced with the Creative Cloud and across multiple machines:

• Keyboard Shortcuts/custom presets
• Default Document Settings
• Application Preferences – General, Code Editor, Text, Drawing
• Sprite Sheet Preferences
• Grid, Guide, and Snapping Settings

In Avatar, the following set of preferences can be synced in addition to the above mentioned settings:

• Workspaces
• Variable width profiles

Syncing workspaces: In Avatar, you can now sync custom workspaces to cloud and across machines. Hence, you need not worry about re-creating a workspace, which you have already created on a different system. Simply sync the workspace to cloud and download it on the other machine. Any number of workspaces can be synced, including the active workspace.

Please note:

• If a workspace with the same name already exists on the receiving machine, then it will be overwritten with the downloaded workspace.
• Syncing supports merging workspaces. This means, if the same workspace co-exists on two machines, and is deleted from one of the machines and synced to cloud, then it will not be deleted from the receiving machine.

Syncing variable width profiles: In Avatar, you can sync custom width profiles to cloud and across machines. Hence, you can use a custom width profile on a different machine without the hassle of re-creating it.

Please note:

• If a profile with the same name already exists on the receiving machine, then it will be overwritten with the downloaded profile.
• Syncing width profiles does not support merging; it simply downloads and overwrites with the latest copy on the cloud.

For more information on Syncing Preferences with Creative Cloud, see this article.

Known Issues

Extension Manager and installing extension to Avatar is disabled. This requires support from Creative cloud and since this is a pre-release version installing extension via extension manager will not be supported until the release. You can however copy the installed files from the extension from the release version of Flash Pro CC and copy them to the appropriate folders in Avatar build if you need to work on extensions.