Adobe Flash Professional CC 2014 is here!

It has been sometime in the making, but there’s good reason for that. The newest update is packed with stunning new features that makes Flash Professional CC 2014 an absolute must-have. Here’s what’s new:

New and improved Motion Editor

We promised to reinstate the Motion Editor when you told us that you really missed having it. And, yes! The Motion Editor is back in a slicker, smoother, and more powerful form. For more information, see Editing Motion Tweens using Motion Editor.

 

MotionEditorForBlog - resize - 1

Leveraging modern web standards – take 1 – WebGL

Last December, we added native support for HTML5 Canvas in Flash Professional, and now, it’s time for WebGL or Web Graphics Library format. You can create and publish WebGL content from within Flash Professional CC 2014 using the WebGL (preview) document type. Work with the familiar Timeline, Workspace, Tools, and other functionalities of Flash Pro, and produce WebGL content. Flash Professional leverages the GPU accelerated usage of processing and rendering of WebGL content, which is integrated with most modern-day browsers. For more information, see Creating and publishing a WebGL document.

HelpQuestions_Flash-04

 Leveraging modern web standards – take 2 – SVG

You can now export fully scalable, superior quality, and high resolution SVG images using Flash Professional. Supporting the SVG export format is a giant stride towards Flash Professional embracing open web standards. SVG images can be easily integrated with most modern web content. For more information, see Export SVG files.

HelpQuestions_Flash-02

Beautify artwork using Variable-Width Tool

The Variable-Width Tool allows you to embellish artwork. You can easily enhance uniform and standard strokes to create beautiful strokes and shapes using the Variable-Width Tool. You could also save such enhancements as width profiles and reuse at a later point. These strokes can also be shape-tweened to produce rich animation. For more information, see Enhance Strokes and Shapes using Variable-width tool.

HelpQuestions_Flash-03

 

Create, store, and manage color themes using Adobe Kuler

Flash Professional CC is now integrated with Kuler panel, a cloud-based application to create color themes using iPhone or desktop browser. With Kuler panel, you can sync your color inspirations right to Flash Professional CC via Creative Cloud. To create color themes using Kuler, visit this link. For more information about using Kuler to create color themes and managing them within Flash Professional, see Using the Kuler panel.

MyKuler

Create HTML5 Panels and Extensions

You can extend Flash Professional CC using HTML extensions. Earlier, Flash Professional CC could only be integrated with SWF extensions packaged using Adobe Extension Builder. However, with Adobe Extension Builder 3 you can create and package HTML extensions that can be submitted to Adobe Exchange. Flash Professional CC has been enhanced to leverage HTML extensions packaged using Extension Builder 3. These extensions can be downloaded using Adobe Exchange and managed using Adobe Extension Manager from within Flash Professional. For more information, see Creating HTML extensions.

Synchronizing Workspaces with Adobe Creative Cloud

You can now sync the Flash Professional CC Workspace settings with Creative Cloud. You can customize the workspace to suit your design needs, and via Creative Cloud, you can replicate the customizations across multiple machines. For more information, see Sync Flash Professional Preferences with Creative Cloud.

SyncSettings_fl

Other enhancements

  • The Object-level undo option has been re-enabled and can be accessed on the Preferences dialog. For more information, see Undo, redo, and the History panel.
  • Exporting projector files has now been re-enabled, as well. Note that the option to export projector files is available within the Commands menu. For more information, see Exporting Projector Files.

Adobe Flash Professional CC for HTML5 animation

Guest Post by Colin Holgate, senior programmer, Funny Garbage

titlescreen At Funny Garbage, we love working on projects that are both fun and that let us flex our development muscles. We recently worked on a mobile and Facebook app for the Aéropostale P.S. brand. Targeted to teens, the app lets them use their own headshots to personalize crazy dances comprised of complex animations. This is the kind of fun characterization that Adobe Flash Professional does so well.

The development time was short and the app had to be delivered on iOS, Android, and Facebook. We knew we had to have both a Facebook and mobile presence, and we wanted to easily replicate the functionality without building separate experiences. However, a major requirement of the job was that the animation had to be HTML5 compatible for desktop browsers. This would enable users on iOS and the latest Android OS to access and share the same playback links. The same links would also work for desktop users who had not installed Flash Player. We used Flash Professional CC (using Adobe AIR to deploy to iOS and Android mobile and SWF for Facebook) to create the app, here’s how we did it.

addingperson We conducted an early test of the HTML5 Canvas feature in Flash Professional CC while it was still in beta, and it was remarkably successful. We were able to proceed with all of the other features of the app knowing from the outset that the playback was going to work. Without that ability to port over to HTML5 with complete confidence, the only alternative was to develop this project natively in four separate environments—much too complex a process and not a realistic option within our production schedule. In fact, we actually beat the launch deadline and I was the only Flash developer working on the project.

Our artists, animators, and designers spent several weeks working with the client on style, animation, and music. They used Adobe Photoshop CC and Illustrator CC for all the graphical assets, as well as for the Flash Professional animation timeline. The files were then handed over to me to use in the Facebook and mobile apps, and also to create the HTML5 versions. We included placeholder headshots for seven different animations, featuring up to three people, which users can override with their own “selfies.”

flashproscreenshot The workflow of taking the regular Flash Professional animations and exporting them as HTML5 files is quick and as simple as choosing “convert to HTML5 Canvas from AS3 document formats” from the Commands menu. When the HTML5 Canvas document is published it exports all of the code, images and sounds needed to create the animation. We did further optimizations on the exported folders of images, so that the loading of the HTML5 pages is fast.

In the end, our client was happy with the outcome—a fun, creative app to showcase the P.S. brand. We’re excited to see where we go next with using Flash Professional CC as a development tool for code-driven HTML5 Canvas projects, not just for animations. We’re also keeping an eye on Adobe Edge Tools & Services, which will help us create more responsive designs. Having cutting edge tools encourages us to stretch our skill sets and our imaginations, while at the same time discover new ways to save time and money.

Creating HTML5 Canvas | Reusing ActionScript 3.0 assets | Flash Pro CC – Part 2

This post in the 2nd and last of the two-part series of Converting and reusing ActionScript 3.0 assets in an HTML5 Canvas document.

Recap

In my previous post, we learned how to run the JSFL script (Commands > Convert to HTML5 Canvas AS3 document formats) to convert legacy ActionScript 3.0 assets and reuse them in an HTML5 Canvas document. We also examined the conversions that were applied on each of layers and objects within the AS3.0 file.

Did you observe?

If you read through the previous post entirely, you must have wondered why the Tap to Jump button in the HTML5 animation wouldn’t work (unlike the SWF where it worked). Like I explained in my previous post, during the conversion ActionScript code is commented out. So, as a final step of the conversion process, we will replace the ActionScript code with equivalent JavaScript. You will be happy to know that Flash Pro CC fully supports JavaScript coding, with additional code-hinting and auto-format features.

Frames 114, 141, 142, & 278

These frames contained fully-functional ActionScript code in the original Banner.fla file, which was commented out during the conversion. Let us pick each of these frames individually and add equivalent JavaScript code for the same:

  1. Go to Frame 114, and select the keyframe on the Code layer.
  2. Press F9 or select Window > Actions to bring up the Actions Panel. You will see the ActionScript code is commented out.
  3. From the table below, copy the JavaScript code below copy the JavaScript code below the AS code and close the Actions Panel.
  4. Similarly, add JavaScript code for frames 141, 142, and 278, as well.
Frame number ActionScript Code Equivalent JavaScript Code
114

var self = this;this.btnJump.onClick = function() {self.gotoAndPlay(“endWait”);}

var self = this;this.stop();this.btnJump.addEventListener(‘click’, onClickJump);function onClickJump() {self.gotoAndPlay(“endWait”);

}

141

removeEventListener(MouseEvent.CLICK,onClickJump);gotoAndPlay(“startWait”);

removeEventListener(MouseEvent.CLICK,onClickJump);this.gotoAndPlay(“startWait”);

142

removeEventListener(MouseEvent.CLICK,onClickJump);

this.instance.removeEventListener(“click”, onClickJump);

278

import flash.events.MouseEvent;btnPlay.addEventListener(MouseEvent.CLICK, onClickEnd);function onClickEnd(pEvent : MouseEvent) : void {navigateToURL(new URLRequest(“http://www.adobe.com/”),”_blank”);}

stop();

this.stop();stage.onClick = function() {window.open(“http://www.adobe.com”, “_blank”);}

And finally…

Publish (Ctrl+Enter on Windows and Command + Enter on MAC) the HTML5 Canvas document again to see the fully functional animation running smoothly on your default browser.

Video tutorial

I created this video tutorial to make it easier for you to understand the conversion process:

Creating HTML5 Canvas | Reusing ActionScript 3.0 assets | Flash Pro CC – Part 1

Note: This is the first of the two part series I am writing for Converting AS3 to HTML5 Canvas.

Flash Professional CC allows native HTML5 Canvas authoring! Yes, you heard it right! With its latest update, you can create HTML5 Canvas content right from within Flash Professional CC using the new HTML5 Canvas document type. This means you can use Flash Professional CC to produce rich, interactive content that adapt to the modern web needs. Flash Pro CC also allows you to add interactivity using JavaScript, as well.

HelpQuestions_Flash-01

What about legacy ActionScript content?

If you have created SWFs and other ActionScript 3.0 content types in the past, it is certainly not the end of the road! Flash Pro CC allows you to migrate and reuse ActionScript 3.0 content within an HTML5 Canvas document type. When you want to migrate, you have two options:

  1. Manually copy layers, symbols, and other library items to a new HTML5 Canvas document.
  2. Automatically port all layers, symbols, library items, and code-snippets to a new HTML5 Canvas document using the Convert AS3 to HTML5 Canvas document.

In this article, I will explain the second option in detail. To get started, download and extract the contents of Banner.zip file, and open Banner.fla in Flash Professional CC.

Command

When you publish the file, here’s how the SWF output looks:

Converting ActionScript 3.0 assets to HTML5 Canvas

To convert the ActionScript assets and reuse them in an HTML5 Canvas document, do the following:

  1. In Flash Pro CC, select Commands > Convert to HTML5 Canvas from AS3 Document Formats option.
  2. Flash Pro CC creates a new document, and when prompted, provide a meaningful name (for example, Banner_HTML5.fla) and save the document. The new document contains all layers, symbols, library items, and code-snippets (absolutely)! You will observe that the layers and library items in the new HTML5 Canvas document are composited in just the same way as that of Banner.fla file. The Output panel shows warnings generated while copying/importing AS3 document assets into the HTML5 Canvas doc.

The effect of Conversion

  • The (Canvas) suffix besides the file name indicates that it is an HTML5 Canvas document.
  • Ensure that you study the warnings in the Output panel. These warnings help you understand all the content conversions that occurred during the migrations. Since not all ActionScript 3.0 features are supported by HTML5 Canvas, Flash Pro CC applies defaults to or removes all such unsupported content types. For information, see this article. In the Banner.fla, you can notice the following conversions:
    • Label (Layer) – this is a normal label layer, and is migrated without without any changes.
    • Code (Layer) – this layer has frame scripts (ActionScript code) in frames 114, 141, 142, and 278.
      • The layer is copied and the objects on stage are intact.
      • ActionScript code is commented out for all 4 frames (114, 141, 142, and 278).
    • Lines (Layer) – this layer contained a dashed stroke in the original ActionScript 3 document.
      • The layer is copied and the object on stage is intact.
      • Dashed stroke is not supported with HTML5 Canvas and hence, is converted to a solid stroke.
      • Txt (Layer) – this layer has 3 instances of Text symbols.
        • AntiAlias of text is not supported with HTML5 Canvas, and is converted to DeviceFonts.
        • AutoKern is not supported with HTML5 Canvas, and is removed.
        • LineType is not supported with HTML5 Canvas, and is converted to MultiLineNoWrap.
        • StaticText is not supported with HTML5 Canvas, and is converted to DynamicText.
      • All other layers are copied as is.
  • ActionScript code is preserved, but commented out. As a post-migration step, it is important that you write JavaScript code that substitutes functionality of ActionScript code. This will be explained in the next post, as part of this series.

Try publishing the HTML Canvas file by pressing Ctrl + Enter (Command +Enter for MAC) or go to File > Publish to launch the output in your default browser.

The output is a smoothly running HTML5 Canvas animation, with underlying standard compliant HTML and JavaScript code. Here’s how it looks:


In my next part, I am going to tell you how to convert the ActionScript bits in to JavaScript to build interactivity. Stay tuned!