Posts in Category "General"

Tips & Tricks for the redesigned Motion Editor

As you already know, we’ve redesigned the Motion Editor and made it available with the latest release of Flash Professional CC.  More details on the new Motion Editor can be found here – https://helpx.adobe.com/flash/using/editing-motion-tween-using-motion.html?set=flash–whats-new–2014-06 .

A video of the Motion Editor can be accessed here – https://helpx.adobe.com/flash/how-to/create-animations-motion-editor.html

Here is a list of tips & tricks to help you while using the new Motion Editor –

Property curve editing:

  • <Double click> on curve to add new anchor point.
  • If anchor points and control points are collapsed (i.e. corner point), then mouse <drag> operation moves anchor point by default.
  • In order to use control points in above mentioned scenario, select the point & then <alt+drag> to bring out control point.
  • When control points are accessible, <dragging> control point always makes sure both control points are in straight line (180 degree angle)
  • Use <Alt + drag> on control point to move only selected control point, other control point stays stationary.
  • When control point handles are pulled out, <Alt+click> on anchor point to collapse them & make it a corner point. (as mentioned in point2)
  • Use <Shift+drag> anchor point for accurate linear movement either horizontally or vertically.
  • Select any anchor point & use <up/down arrow key> to move anchor point 1 unit up/down.
  • Select anchor point & <shift + up/down arrow key> to move anchor point 10 units up/down.
  • <Control/Command + click> on anchor point to delete anchor point (not applicable for first & last anchor point).  Alternatively press <Delete key> to delete the selected Anchor point(not applicable for first & last anchor point)
  • Copy curve : choose “copy” from right click context menu or make sure grid has focus and use <Control/cmd + C>
  • Paste curve : choose “paste” from right click context menu or make sure grid has focus and use <Control/cmd + V>
  • Reverse curve : choose “reverse” from right click context menu or make sure grid has focus and use <Control/cmd + R>

View options:

  • <Control/cmd + scroll> mousewheel to zoom-in/out curve
  • Just <scroll> mousewheel to scroll the curve
  • click on grid & use <Ctrl / CMD + D> : to disable / enable curves belonging to other groups. [ i.e. if you disable, only curves belonging to property group same as current property are colored, other curves are grayed out ]

Ease popup:

  • Use <arrow keys> to select next/prev property row (up, down, left, right). Behavior is same as library panel.
  • <ESC key> to dismiss ease popup.
  • <Double click> on ease row to select ease type & dismiss the ease popup.

You can try the latest version of Flash Professional here – http://www.adobe.com/products/flash.html

 

WebGL interactivity through JavaScript APIs

We are happy to announce the release of a patch for Flash Professional CC that enables you to add interactivity to your WebGL compositions through JavaScript APIs.

As you already know, we enabled support for WebGL in our latest Flash Professional CC release last month that allowed you to create animations for the WebGL enabled browsers.  While that was great, many of you reached out to us asking for scripting support so that you can add interactivity to your compositions.  Well, you don’t have to wait any longer!  The latest patch of Flash Professional allows you to add interactivity through JavaScript APIs.  We are still working on enabling frame-script for the WebGL target but that shouldn’t prevent you from adding interactivity through an external code editor.  Documentation for these WebGL APIs can be found here.

Finally, here is an excellent blog post about using WebGL APIs written by one of our greatest proponents and good friend – Christopher Caleb.

Look forward to hear about your experience and feedback.

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.

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!