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.

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.