Adobe Flash Professional Team Blog

The latest news, tips and insights directly from the Flash team

Aug 11, 2015/General/

New course on HTML5 Canvas and WebGL project types in Flash Professional

A new course on HTML5 Canvas and WebGL project types in Flash Professional went live on Lynda.com yesterday.  Here is a brief description and link to the course –

 

HTML5 Canvas and WebGL in Flash Professional CC with Joseph Labrecque
http://www.lynda.com/Flash-Professional-tutorials/HTML5-Canvas-WebGL-Flash-Professional-CC/383037-2.html 

Create a shared pool of content for a set of related projects—an HTML5 video, a WebGL-rendered interactive ad, and an HTML5 Canvas game—using Flash Professional CC.

No longer restricted to only ActionScript and Flash Player, Flash Professional CC offers more publishing possibilities than ever before. Developers can now use Flash to build assets and animation that target platforms such as HTML5 Canvas and WebGL. And adding JavaScript allows for playback on just about any modern desktop or mobile device.

This course focuses on using Flash Professional CC to create a shared pool of content for a set of related projects: an HTML5 video, an interactive ad, and a simple web-based game. Author Joseph Labrecque shows how to use Flash’s familiar toolset to build and manage assets that fit into a modern web publishing workflow.

Topics include:
• Using code snippets and actions
• Assembling and animating a scene for video
• Rendering the video
• Laying out an ad with WebGL and JavaScript
• Programming a game in HTML5 Canvas

Thanks,

Ajay Shukla, Sr. Product Manager, Flash CC

 

Jul 29, 2015/Extensions, General/

Installing ZXP extensions using the Manage Extensions utility

You can use the free Manage Extensions utility to install and uninstall Flash CC extensions. With Manage Extensions, you can install multiple Flash CC 2015 extensions (multiple .zxp files stored in the same directory) at the same time.

On Windows:

  1. Exit Flash CC 2015 if it is running.
  2. Download the Manage Extensions (Windows) utility to your desktop.
  3. Extract the .zip file to a location on your Desktop eg: C:\Users\<your user name>\Desktop\WinUtility
  4. Double-click the ManageExtensions.exe file. The Manage Extension interface appears.

ExMan

  1. Click Install an Extension and select the extension (.zxp file) that you want to install.
  2. To install multiple extensions, click Install multiple extensions and select the directory that contains the .zxp files.

On Mac OS:

  1. Exit Flash CC 2015 if it is running.
  2. Download the Manage Extensions (Mac) utility to your desktop.
  3. Extract the .zip file to a location on your Desktop: /Users/<your username>/Desktop/
  4. Double-click the ManageExtensions.app file. The Manage Extension interface appears.
  5. Click Install an Extension and select the extension (.zxp file) that you want to install.
  6. To install multiple extensions, click Install multiple extensions and select the directory that contains the .zxp files.

To learn about how you can install Flash extensions using the ExManCmd command line utility, see the blog post Installing Extensions for Flash Professional CC 2015.

Jul 14, 2015/ActionScript, General, HTML5/

Converting your Flash Ads to HTML5 Canvas

The HTML5 Canvas document type and the associated design and performance capabilities in Flash Professional CC helps you create performance-optimized HTML5 creatives with ease. You can obviously create new ads targeting the HTML5 platform using Flash Professional CC, but you may also have have some existing Flash ads that you want to convert to HTML5 Canvas for targeting them for multiple platforms, especially mobile devices.  Here is how you do it:

  1. Convert your ActionScript document to HTML5 Canvas document using the document type converter.
  2. Replace the ActionScript code commented out as reference in the actions panel with their HTML5 Canvas equivalents. You can use the HTML5 Canvas code snippets panel (Window > Code Snippets) in Flash CC 2015 to get started.

Now, let’s see this in action.  We are going to convert a Flash ad to HTML5 Canvas.

Here is the ActionScript example:

Get Adobe Flash player





The converted HTML5 Canvas file should look like this:


Converting an ActionScript document and assets to HTML5 Canvas

  1. Download the BannerNewFeatures_AS3.zip file, extract the files, and open the BannerNewFeatures_AS3.fla file. You can preview the contents by opening BannerNewFeatures_AS3.swf.
  2. Click Commands > Convert to other document formats to convert the document to HTML5 Canvas document.
    Convert-menu-option
  3. In the Document Type Converter dialog box, select HTML5 Canvas and click Browse to select a location to save the converted FLA.
    Doctype-converter
  4. Click OK. The ad has now been converted in to HTML5 Canvas. Open the .html file in the output directory you specified in the previous step to check the converted output. You can see that all your art assets have been converted in to HTML5 Canvas. However, the ad runs in a continuous loop.  This change happened because we do not automatically convert the ActionScript code to the equivalent JavaScript code.

Note: Flash Professional does not auto-convert any ActionScript code to JavaScript code because there is no foolproof way to get it completely right. However, our HTML5 Canvas (CreateJS) JavaScript APIs mimic ActionScript code fairly closely. We also have some built-in Code Snippets in Flash CC to help you get started with some commonly used actions.

Converting ActionScript code to JavaScript in your HTML5 Canvas document

  1. Click Window > Actions to open the Actions panel. All your ActionScript code in FrameScript are displayed as commented out to help you convert them to HTML5 Canvas.

    ActionScript code commented out

    ActionScript code commented out

  2. In the Actions panel, click the ActionScript code that you want to replace and type in the JavaScript equivalent (if an equivalent code snippet is available in the the HTML5 Canvas section of the Code Snippets panel, you can just double-click on it) For example, the following image shows that the stop () ; function that is commented out in ActionScript has been replaced with its HTML5 equivalent, this.stop () ;
    Replace-code
  3. Press Shift+Alt+F12 to publish and check your output.
  4. To see how all the ActionScript code in the example document were converted in to HTML5 Canvas, download BannerNewFeatures_Canvas.zip and open the BannerNewFeatures_Canvas.fla file. To view the final output in HTML5, download Published-Banner-HTML5.zip. and open the BannerNewFeatures_Canvas.html file.

Codes for commonly used actions

The following are some of the commonly used ActionScript codes and their equivalent JavaScript codes:

  • Symbol Instances are referenced as this.instanceName instead of directly using the instanceName:
    ActionScript HTML5
    mySymbol.x = 100;
    mySymbol.visible=true;
    this.mySymbol.x = 100;
    this.mySymbol.visible=true;

     

  • Variable types and function return types should not be specified in JS:
    ActionScript HTML5
    var myVariable:String
    var myVariable;
    function onClick (event:MouseEvent) :void {
    //body
    
    }
    function onClick (event) {
    //body
    
    }

     

  • trace() is not supported and should be replaced by console.log() or alert():
    ActionScript HTML5
    trace(“Message to display”);
    console.log(“Message to display”);

     

  • Commonly used events in ActionScript and JavaScript:
    ActionScript HTML5
    MouseEvent.CLICK
    "click"
    MouseEvent.MOUSE_DOWN
    "mousedown"
    MouseEvent.MOUSE_UP
    "mouseup"
    MouseEvent.ENTER_FRAME
    "tick"
    MouseEvent.ADDED
    "added"

     

  • Commonly used timeline actions in ActionScript and JavaScript:
    ActionScript HTML5
    stop();
    this.stop();
    <InstanceName>.stop();
    this.<InstanceName>.stop();
    gotoAndStop(5);
    gotoAndStop("label");
    this.gotoAndStop(5);
    this.gotoAndStop("label");

    Refer the EaselJS documentation for more information about other events. Check out the mapping of ActionScript codes and their equivalent JavaScript codes for HTML5 Canvas platform for a comprehensive list of actions.

View and use JavaScript code snippets

  1. Click Window > Code Snippets.
    Code-Snippets-menu
  2. In the Code Snippets panel, expand HTML5 Canvas to see the HTML5 equivalents of your ActionScript codes under different categories.

    Code snippets panel

    Code snippets panel

Useful links

Jul 13, 2015/Errors, Extensions/

Installing Extensions for Flash Professional CC 2015

You have been using Adobe Extension Manager to install your Flash Professional extensions. The Extension Manger CC UI has been phased out as a standalone product due to its integration with the Creative Cloud application. For more information about this change, read Announcement: Extension Manager End of Life Notification.

This post helps you install Flash CC 2015 extensions using the new ExManCmd command line utility. To learn about installing Flash CC 2015 extensions using the Manage Extensions desktop utility, see the blog post Installing ZXP extensions using the Manage Extensions utility.

Installing ZXP extensions using Command Line

If you are a designer or a developer and have .zxp files of a Flash CC 2015 extension, follow these steps to install the extension:

On Windows:

  1. Quit Flash CC 2015 if it is running.
  2. Download the ExManCmd command line tool for Windows.
  3. Extract the .zip file to a location on your Desktop eg: C:\Users\<your user name>\Desktop\ExManCmd_win
  4. Copy and paste the extension (.zxp file) that you want to install to the same folder(C:\Users\<your user name>\Desktop\ExManCmd_win\) for convenience.
  5. Open the command prompt by selecting Start > All Programs > Accessories > Command Prompt.
  6. Type cd and provide the path to navigate to the extracted folder:
    • cd C:\Users\<your user name>\Desktop\ExManCmd_win
  7. Once you are in the ExManCmd_win directory, type the following command in Command Prompt and press Enter:
    • ExManCmd.exe /install <nameoftheExtension say “AnimSlider Pro.zxp”>

Please note that if the extension name has space in between please specify them within quotes (“”).

On Mac OS:

  1. Quit Flash CC 2015 if it is running.
  2. Download the ExManCmd command line tool for Mac OS.
  3. Extract the .zip file to a location on your desktop: /Users/<your username>/Desktop/
  4. Copy and paste the extension (.zxp file) that you want to install to the folder in which ExManCmd is available: /Users/<your username>/Desktop/Contents/MacOS/
  5. Open Terminal by double-clicking its icon under Applications > Utilities > Terminal.
  6. Type cd and provide the path to go to the directory in which ExManCmd is available:
    • cd /Users/<your username>/Desktop/Contents/MacOS
  7. Once you are in the MacOS folder, type the following command and press Enter:
    • ./ExManCmd ––install <nameoftheExtension say “AnimSlider Pro.zxp”>

Please note that if the extension name has space in between please specify them within quotes (“”).

You can refer to Extension Manager Command line basics to know more about all the available commands and its syntax. If you encounter any error, refer to the error codes and their descriptions.

Installing Extensions available through Add-ons

If you are a designer or a developer and you have the required extensions for Flash CC 2015 available at Adobe Add-ons website as add-ons, follow the below steps to acquire them:

  1. Launch Adobe Create Cloud application and sign-in with your Adobe ID.
  2. Ensure File Sync is turned ON under Assets > Files.
  3. Launch Flash CC 2015 and click Window > Browse Add-ons.
  4. Click on the add-on name that you want to acquire on the Adobe Add-ons page (you can also search by the add-on that you are looking for).
  5. Click Acquire/Install.
  6. Wait for the notification from Adobe Creative Cloud application regarding the installation of the add-on that you have acquired.

Making your extensions available as an Extension Developer

If you are a developer or producer of Flash Professional add-ons, Adobe provides you the following alternatives to distribute your Flash add-ons:

  1. Adobe recommends that you distribute your products through the Adobe Add-Ons website. You can distribute add-ons publicly (free or paid) or privately (free to named users). Learn more about sharing products privately.
  2. If you still want to sell extensions through your own websites or via other channels, you can build your own installer or provide instructions to your users on how to use the Extension Manager command line to install your extension. Refer the section Installing ZXP extensions using Command Line in this blog post for details.

Please reach out to us in case you have any issues or feedback.