Automating tasks in Flash Professional CS6

Tips: For information on how to automate tasks in Flash Professional CS5, refer to this article.

Adobe Flash Professional CS6 provides a range of features that you can use to speed your graphic and visual effects production workflow.

Automation describes the use of prebuilt and saved functionality to facilitate routine processes and effects. For example, you could automate complex geometric graphics production using the decorative tools in Flash Professional as a shortcut for generating patterns. You could automate animation production by using saved and prebuilt tween effects in the Motion Presets panel. You could use saved and prebuilt commands in the Commands menu to automate common tasks, such as copying animations or configuring symbols.

Along with automation, this article provides an overview of the improved cross-product integration features available in Flash Professional CS6. By combining the workflow and automation features of Adobe Creative Suite 6, you can easily incorporate graphics and assets into your projects.

Flash Professional CS5 introduced an XML-based FLA format with improved support for cross-product workflows and better performance when working on large projects. You can save your project in compressed FLA format or uncompressed XFL format. The XFL format saves the project into a folder composed of XML files and graphic assets (JPEG, PNG, MP3, WAV, and so on). The assets can be edited directly by other applications and managed with source-control systems while working in teams.

Adobe InDesign CS5 and Adobe After Effects CS5 also introduced the ability to save projects to XFL format, allowing for new workflows. For example, you could start your project in After Effects, save it in XFL format, and then open the project in Flash Professional to continue building your user interface.

When it comes to creating and editing graphics, you can use the extensive features in Adobe Photoshop CS6, Adobe Illustrator CS6, and Adobe Fireworks CS6 to expand on the drawing tools provided in Flash Professional. Use Photoshop for sophisticated pixel-based image editing and then import your PSD file into Flash while maintaining your Photoshop file options (see Figure 1).

Use the advanced vector drawing and editing tools in Illustrator to create complex layouts and then import your AI file while maintaining your Illustrator options (see Figure 2).

Any vector graphics imported into Flash Professional are editable in the Flash workspace. You can launch Photoshop to edit bitmap graphics too; simply right-click the bitmap in the Library and select the option to Edit in Photoshop CS6. Alternatively, select the Edit option and choose Fireworks to launch it and begin making changes to the image.

For more information about working with assets created in Photoshop, Illustrator, Fireworks, and InDesign, see the Using imported artwork section of the Flash Professional online help.

You can automate graphics production and effects by using the range of tools and display object properties available in the Flash Professional workspace. For example, you can create complex geometric pattern effects using the Deco and Spray Brush tools. Or create drop shadows and bevel effects with filters or color effects with blend modes. You can specify a range of options in the Properties panel for each tool to achieve effects quickly that would be time-consuming to produce otherwise.

See the following sections of the Graphic Effects Learning Guide for more information:

• Filters
• Blend modes

The introduction of object-based motion tweening in Flash CS4 Professional opened the door for a handful of new automation features. Object-based motion tweens are represented in XML at their core, which means that their properties can easily be copied, saved, and reapplied to other objects. You can use your animations as templates whose attributes can be applied to other objects and then fine-tuned.

There are several options to copy motion XML: use the Copy Motion as XML command in the Commands menu or right-click the motion object and choose Save as Motion Preset from a list of animation automation options (see Figure 3).

Choosing the Copy Motion as XML option allows you to copy the animation's attributes and paste them on to another object using Paste Motion. The Copy Motion as ActionScript 3 option allows you to copy the animation and paste it as an AnimatorFactory object in ActionScript 3. The Save as Motion Preset option allows you to save the animation attributes to the Motion Preset panel for use across projects.

To save a tween as a motion preset:

1. Create a new ActionScript 3 FLA file and name it motion.fla.
2. Name the default layer shape. Draw a shape on Frame 1 and convert it to a symbol (Modify > Convert to Symbol).
3. Right-click the keyframe on Frame 1 of the shape1 layer and choose the Create Motion Tween option. Notice that 24 frames are automatically added to the Timeline.
4. Change the physical properties of the shape at Frame 20 by moving it on the Stage and distorting its shape with the Free Transform (Q) tool. Notice the motion guide line that connects the two instances on the Stage; you can select the line and drag the handles to bend it into a curve, if desired.
5. Right-click the keyframe and choose the Save as Motion Preset option.
6. Enter a name for the preset in the Save Preset As dialog box and click OK. Open the Motion Presets panel and notice that your custom preset is saved in the Custom Presets folder (see Figure 4).

7. To apply a saved preset, add an instance of a movie clip to the Stage on a frame that contains a keyframe. Select the instance on the Stage.
8. Right-click the desired preset listed in the Motion Presets panel and choose the Apply at current location option.
9. Export the SWF file (Control > Test Movie) to see the animations play.
10. Save the file.

For more information on working with motion presets, see the Applying motion presets section of the Flash Professional online help.

The Actions panel in Flash Professional includes many improvements designed to make it easier to add ActionScript code to projects. Features include context-sensitive help, automatic importing of classes while data typing, and Script Assist mode—which generates the syntax of ActionScript as you use the interface to add statements to your scripts.

In addition to the recent updates to the Actions panel, be sure to check out the automation features in the Code Snippets panel. Flash Professional CS5 introduced the Code Snippets panel as a utility to automate code production. A code snippet is a predefined ActionScript code block that provides a certain type of functionality (see Figure 5).

Code snippets can affect simple routines like controlling a timeline and adding event handlers to objects, or more complex routines, like animation and media playback. The general workflow includes selecting an object, naming its instance, and choosing a code snippet to apply to the object.

If you are new to working with ActionScript, the Code Snippets panel offers an easy way to learn the ActionScript syntax and start integrating code into your projects right away. The panel can also be used to save code snippets; if you write a lot of code, use this timesaving feature to save your custom scripts. Code snippets can be combined to create elaborate functionality to speed along development for all levels of projects and developers.

Code snippets for beginning ActionScript 3 programmers and designers by Yuki Shimizu gives a comprehensive overview of working with code snippets.

Flash Professional also offers integration features for Adobe Flash Builder and Adobe Flex. You can create Flash Professional projects in Flash Builder 4 and later, which allows you to roundtrip your code-editing workflow and take advantage of the Flash Builder workspace for code editing. You can also use the new Convert Symbol to Flex Component command in Flash Professional to convert a movie clip symbol into a Flex-ready component.

You can get an overview of the Flash Builder and Flex integration features in my article, Combining animation with ActionScript using Flash Professional CS5 and Flash Builder 4.

Try experimenting by creating and applying reusable animations in the Motion Presets panel and reusable code in the Code Snippets panel. Check out these resources for additional information on code snippets:

• Add interactivity with code snippets (Flash Professional online help)
• Code snippets (Flash Exchange)