Adobe Flash Professional Team Blog

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

Category

HTML5

Nov 30, 2015/ActionScript, Animation, Creative Tools, Custom Platform Support, Custom Platform Support, Extensions, General, HTML5, Toolkit for CreateJS, Video/

Welcome Adobe Animate CC, a new era for Flash Professional

Adobe Animate CC
For nearly two decades, Flash Professional has been the standard for producing rich animations on the web. Because of the emergence of HTML5 and demand for animations that leverage web standards, we completely rewrote the tool over the past few years to incorporate native HTML5 Canvas and WebGL support. To more accurately represent its position as the premier animation tool for the web and beyond, Flash Professional will be renamed Adobe Animate CC, starting with the next release in early 2016.

Today, over a third of all content created in Flash Professional uses HTML5, reaching over one billion devices worldwide. It has also been recognized as an HTML5 ad solution that complies with the latest Interactive Advertising Bureau (IAB) standards, and is widely used in the cartoon industry by powerhouse studios like Nickelodeon and Titmouse Inc.

Animate CC will continue supporting Flash (SWF) and AIR formats as first-class citizens. In addition, it can output animations to virtually any format (including SVG), through its extensible architecture.

There’s much more than just a name change however. Our team is hard at work on a major update with significant new features to create animations for any platform. Here’s a sneak peek by Michael Chaize, Principal Creative Cloud Evangelist:

Here’s what you can expect in Animate CC:

  • Drawing, illustration and authoring
    • Vector art brushes – Modify the path of a stroke after it’s been drawn, and scale them to any resolution without losing quality. You can also make custom brushes and import brushes created with Adobe Capture CC.
    • 360° rotatable canvas – Rotate the canvas on any pivot point as you draw to get the perfect angle and strokes. You can even use this feature with a Wacom Cintiq!
    • Improved pencils and brushes – Draw smooth, precise vector outlines along a curve and get faster live previews.
    • Easier audio syncing – Control audio looping directly on the timeline, without having to code.
    • Faster color changing – Naming tagged colors lets you change one color and have it automatically update your entire project.
    • Colored onion skinning – Easily orchestrate complex animations now that adjacent frames can have different color and alpha values.
  • CreativeSync integration
    • Adobe Stock – Browse and license millions of high-quality photos, illustrations and vector graphics directly in Animate CC. You can even add life to static content by adding animations to them.
    • Creative Cloud Libraries – Access colors, vector graphics and brushes directly as you work.
  • Output capabilities
    • Multiplatform support: HTML5 Canvas, WebGL, Flash (SWF), AIR, video, and custom platforms (such as SVG) via extensions.
    • 4K+ video export – Export videos with custom resolutions for the latest Ultra HD and Hi-DPI displays.
    • Custom resolution export – Revitalize older content by resizing and optimizing them for any resolution, such as Ultra HD and Hi-DPI displays.
    • .OAM support – Export your project as an .OAM file for easy importing to Adobe Muse, InDesign, DPS and Dreamweaver.

Note: When the release becomes available in early 2016, it will be listed as “Adobe Animate CC” in the Creative Cloud desktop application. When you install or update Animate CC, it will be found on your computer as Adobe Animate CC 2015, not Adobe Flash CC 2015.

Previous versions of Flash Professional prior to the 2016 release will continue to be available.

Throughout the week, we will be giving a sneak peek of Adobe Animate on our Adobe live stream channel on Twitch, showing it both for animation and building games.

The entire team is thrilled about our upcoming release, and more importantly, beginning a new era with Animate CC. As we approach the 20th anniversary of Flash Professional, we invite animators and interactive designers around the world to join us for decades to come.

 

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

May 12, 2015/HTML5/

HTML5 Canvas: Building the Dragon Age Interactive Story Summary

Grant Skinner did an excellent presentation at FITC Toronto on how he used Flash Professional’s HTML5 Canvas Document to create the “Dragon Age Interactive Story Summary” – an end user online customized interactive overview of choices they’ve made in Dragon Age games.  He is the creator of CreateJS which powers the HTML5 Canvas document type in Flash Professional CC.

Here is the video of the talk –

Ajay Shukla, Sr. Product Manager, Flash Professional CC

May 4, 2015/General, HTML5, Retina Display/

HiDPI/Retina Screen Support for HTML5 Canvas Documents

Fluid and responsive content that scales according to the size of the device screen on which it is being viewed is critical for usability. Finding out the best way to do it has always been tricky, given the wide variety of screen sizes and devices in use and the solutions that exist. Kevin Newman of unFocus Projects recommends a method that he has successfully implemented using devicePixelRatio to match the width and height attributes of the HTML5 canvas element with the pixel ratio of the display device. Adding HiDPI and Retina screen support to an HTML5 Canvas document is as easy as just adding a piece of code once the stage is defined in your published HTML file. Read Kevin’s blog post to learn about how to do it!

To see how it works, check out this page where Kevin has applied this trick.