Migrating from Flash 8 to Flash CS3 Professional

Adobe® Flash® CS3 Professional introduces many new and changed elements in the workspace that improve the way you work with Flash. It also features new tools you can use to create exciting new applications, or integrate with other components of Adobe Creative Suite 3.

This article discusses the new features in Flash CS3 Professional and how they compare to similar features in Flash 8, or how they have changed. Therefore, it's written with the assumption that you're already somewhat familiar with Flash. If you are a Flashthusiast ready to update to Flash CS3, read on. You will learn about the changes you need to know about when starting out with the latest version of Flash, whether you want to draw with the enhanced Pen tool or write ActionScript™ 3.0 code. Specifically, this article covers:

Changes made to the Flash workspace, such as new ways to manipulate panels and great new interface features. You also learn how to optimize your workspace to make working with Flash easier.
New features in the Flash authoring tool, such as control over the color of your bounding boxes, new copy-and-paste functionality, and changes to 9-slice scaling.
Improvements made to file import, such as support for PSD and AI files. You also learn about new ways to integrate products, such as the enhanced workflow between Flash and Adobe® Device Central CS3.
Improvements to the drawing tools in Flash, such as enhancements to the Pen tool, and the brand new primitive drawing tools that let you create shapes easier.
Improvements to the video components and cue points in Flash and Flash Video Encoder.
The new ActionScript 3.0 components, including how they compare to the V2 Components found in Flash 8. You will also see a side-by-side comparison of how to create the same components application in ActionScript 2.0 and ActionScript 3.0.
Improvements to the debugger and coding tools in Flash, and changes to ActionScript. You will find a side-by-side comparison of ActionScript 2.0 code and ActionScript 3.0 code. You'll also learn about, and how to use, a document class in an ActionScript 3.0 application.

Requirements

To follow along with this article, you will need the following software:

Flash CS3 Professional

Source files:

flashcs3_migration.zip (ZIP, 659K)

Updated Flash workspace and workflow

The updated Flash workspace shares a common interface with other Adobe Creative Suite 3 components. The consistent appearance across all Creative Suite 3 components helps you work easily with multiple applications. There are notable improvements to the Flash workspace that will improve your day-to-day workflow.

There are many obvious changes to the Flash workspace, perhaps most notably the updated appearance of panels and tabs. You can't miss them when you open Flash CS3 for the first time.

The Tools panel

The Tools panel has changed to a single column of tools by default (see Figure 1). This new Tools panel layout saves a considerable amount of screen real estate.

Figure 1: By default, the Tools panel is a single column of tools.

You can change the Tools panel layout easily. Simply click the double arrow above the Tools panel to change it between a single and double-column layout (see Figure 2).

Figure 2: Click the double arrow to change the Tools panel layout. After you click the icon, the Tools panel changes to a double-column layout.

There are some new tools in the Tools panel. You can find more information about these new tools later in this article, in the section called New drawing tools in Flash.

Docking and undocking panels

Docking panels has changed in Flash CS3, and offers more flexibility than in previous versions of Flash. You can easily change the location of any tabbed panel by clicking and dragging it (sometimes called "tearable panels")—something you might have expected to see in Adobe Flash! For example, you can rearrange the default locations of the panels grouped with the Property inspector at the bottom of the workspace (Window > Properties > Properties)—just click and drag to rearrange the three default tabs. Or, you might want to move one of those panels to the right of the Stage. All you need to do is click the tab and drag it to a new location, which is a lot faster and easier than in Flash 8.

To undock a panel, drag it by its tab away from the docked location to elsewhere in the workspace. To redock the floating panel, drag the tab to a panel to group it with other panels, or above or below other panels. Watch for the blue "drop zone" that indicates where the panel will be placed (for example, docked above, below, or grouped with other panels). The drop zone looks like a line if you place it above or below panels in a column. You can place a panel within another panel by dragging its tab into that panel. When panel title bar highlights blue, release the mouse button.

Note: The column of panels to the right of the Stage is called the dock in Flash CS3.

You can create a new column by dragging the panel over the dock. Stop when you see a blue drop zone, this indicates the panel will be docked to the left of the current column of panels (see Figures 3 and 4).

Figure 3: Create a second column of docked panels. Release the mouse button when you see a blue drop zone like this one.

Figure 4: Now the Library is in a second docked column.

Tip: If you want to undock a panel, click and drag its tab away from other panels. Make sure you do not see a drop-zone indicator, and release the mouse button.

Changing Timeline placement

If you want to maximize on screen real estate, try moving the Timeline to this column of panels, and expanding the Stage to fill the main area of the Stage, as illustrated in Figure 5. There is a lot more flexibility in Flash CS3 for Timeline placement. This section shows you how to manipulate the timeline to change your workspace and enhance your workflow, especially if you are an animator.

(+) view larger
Figure 5: Let the Stage fill your workspace, while still quickly accessing the Timeline.

Follow these steps to undock the Timeline and redock it with other panels.

Choose Placement > Undock from document from the Frame View menu. Find this menu in the upper right corner of the Timeline (see Figure 6).

Figure 6: Undock the Timeline using the Frame View menu.

Drag the panel by its tab to dock it with other panels to the right of the Stage. Release the mouse button when you see the blue drop-zone indicator.
If you want to put the Timeline back where it was, choose Placement > Above Document from the panel menu. The panel menu opens from the upper-right side of each panel.
To achieve even more room for the Stage, click the double-arrow icon in the upper-right corner of the workspace, labeled Collapse to Icons.

You collapse the dock so each panel appears as an icon, which leaves even more room for the Stage. By now, you should have achieved the same workspace as shown in Figure 5.

You can finally let the Stage fill your monitor (see Figure 5), and still access your most-used tools. Even if you leave the Timeline in its default location, you still save a lot of real estate by minimizing the panels to icons.

Stacking panels

You can also stack undocked, or free-floating, panels, which is a feature that's new to Flash. To stack free-floating panels, follow these steps:

Drag a panel over the Stage, and release the mouse button making sure you do not see a blue drop-zone indicator.
Drag a second panel directly underneath the first panel you dragged over the Stage. Watch for a blue drop-zone indicator to appear at the bottom of the first panel (see Figure 7).

Figure 7: Watch for a blue drop-zone under the first panel, and then release the mouse button when you see it.
Release the mouse button when you see the drop zone. The two panels are now stacked, so you can drag them around the workspace together.

Panel icons and buttons

You can now close panels using the “X” button located on the panel's tab (see Figure 8). And just like Flash 8, you can reopen closed panels using the Window menu.

Figure 8: Close panels using the “X” button in the panel's tab.

In Flash 8, there were arrows next to the panel name used to expand and collapse the panel. Now, there is a minimize button in the upper right of panels, which you can use to minimize (or maximize) the panel. Use the “X” button next to it to close a panel group (see Figure 9).

Figure 9: Minimize panels or close a panel group using these two buttons.

You can also double-click the panel's tab to expand or collapse the panel. You can click a panel's icon when it’s in icon mode to expand or collapse the panel as well (for more info on icon mode, keep reading).

Tip: The Options menu (Flash 8) is now called the panel menu in Flash CS3. Find the panel menu in the upper-right corner of each panel (where the pointer is located in Figure 9).

In Flash 8 and earlier, you could change the height of the Property inspector (Window > Properties > Properties) using a triangle in the lower right of the panel. Now, you can expand and collapse the Property inspector using a small dual-sided expander arrow to the left of its name (see Figure 10). You can rotate between the fully expanded panel, the half-size panel, and the fully minimized panel.

Figure 10: Expand and minimize the Property inspector.

Changing panel appearance

Exhausted yet? Wait, there's more. One of the greatest new workspace enhancements to Flash CS3 is the ability to collapse panels in the dock to icons and text, or just icons. Try it yourself.

Click the Workspace button in the edit bar (see Figure 11).
Select Icons And Text Default from the menu.
The workspace changes so the panels down the right side only appear with icons and text.

Figure 11: Select Icons And Text Default from the Workspace menu in the edit bar.
Click one of the panel icons in the dock to open the panel (see Figure 12).

Figure 12: Click a panel's icon to open it.
Click the Workspace button in the edit bar again, and select Icons Only Default from the menu.

The workspace changes so there are only icons for each open panel down the right column. You can click icons to open each panel as you did previously.

You can also change the size of the dock two other ways. You can click the double-arrow icon at the top of the dock (see Figure 13) to toggle between views.

Figure 13: Click the double arrow at the top of the dock.

Another way to resize the dock is to click and drag the gripper at the top left of the dock (see Figure 14). You can resize using the gripper when the dock appears in the Icons And Text or Icons Only view.

Figure 14: Click and drag the gripper to resize the dock between Icons Only and Icons And Text views.

The dock lets you save a lot of screen real estate, which was always a problem with Flash. You will probably find that this feature can vastly improve your workflow. Maybe you can get rid of that second monitor? OK, maybe not.

Saving and changing your workspace

As always, you can save your favorite workspace and quickly change between saved workspaces. New in Flash CS3, you can save and open workspaces directly from the edit bar (see Figure 15).

Figure 15: Save and open workspaces from the edit bar.

Once you have saved a workspace, it appears at the top of the Workspace menu. You can also save new workspaces from this menu, manage workspaces (such as remove or rename them), choose a default dock view, and select Maximize mode. Maximize mode removes the title bar and fills in the workspace (below the dock and Tools panel) in Mac OS.

This feature is fairly self-explanatory if you have ever worked with saved or pre-defined workspaces.

Enhancements in Flash for Mac OS

Finally, Macintosh users can now enjoy an application window with docked panels instead of floating panels (see Figure 16). You now have the option of using Flash with docked panels, or floating panels if you prefer. You can dock and undock panels just like you would on Windows (see above for details).

You can also toggle to Maximize mode, which removes the title bar at the top of the workspace, and fills in the interface (compare Figures 16 and 17).

(+) view larger
Figure 16: No more floating panels!

(+) view larger
Figure 17: Use Maximize mode to fill in the gaps.

Remember, these interface elements are available in many Creative Suite 3 components (applications, no relation to the Components panel), so you are also able to use these features in Adobe Photoshop®, Adobe Illustrator®, and Adobe InDesign®. For a video tutorial on using these shared interface elements, see Using shared elements of the Photoshop, Illustrator, InDesign, and Flash workspace.

New features and functionality in the Flash workspace

In addition to new workspace features, such as that great new dock, new functionality has been added to the Flash workspace. This first section covers some new additions and changes to dialog boxes. Following sections discuss large new functionality changes like the changes to drawing in Flash, integration with other products, video, new components, and (always a fun one) ActionScript.

Bitmap Symbol Library Item dialog box

When you view import a bitmap image, you can double-click that image in the Library to view information about it. The dialog box has now changed—there is now a much larger preview of the bitmap (see Figure 18).

(+) view larger

Figure 18: The Bitmap Symbol Library Item dialog box in Flash 8 (left) and Flash CS3 (right).

You might notice another change under the Linkage heading, where you can specify a base class for a symbol. I will discuss the new capabilities for setting a symbol's base class later on in the ActionScript 3.0 section of this article.

Control the color of bounding boxes

In Flash CS3, you can change the color for selections, which lets you easily see the type of element that is on the Stage. It's a subtle improvement, but nevertheless very useful. You can change the selection colors for Drawing objects, Drawing primitives, Groups, Symbols, and one color for all other elements (see Figure 19).

Figure 19: Different bounding box colors indicate the type of element selected. The default color settings have been modified for visibility.

To change the colors of your bounding boxes, choose Edit > Preferences (Windows) or Flash > Preferences (Mac OS), and then modify the current color selections under Highlight Color.

Templates for detecting active content

When you publish an FLA file, a new file exports with your SWF file by default. You upload the new file, AC_RunActiveContent.js, to your server along with your SWF and HTML files, so users can interact with the application in Internet Explorer without activating it first (typically using an initial mouse click).

For a video tutorial that explains this updated functionality, see Publishing FLA files.

Preview 9-slice scaling on the Stage

You can now preview 9-slice scaling on the Stage, so if you make adjustments to movie clips with 9-slice scaling applied, you can see your changes right away. To see this improvement, create a new symbol and make sure that you enable 9-slice scaling (at the bottom of the dialog box). Double-click the symbol to enter symbol-editing mode, and notice that you now see 9-slice scaling grid within the symbol (see Figure 20).

Figure 20: Now you can access the 9-slice scaling grid when you enter symbol-editing mode. It would make no sense to apply 9-slice scaling on this drawing of a groundhog, but I'm sure you get the idea.

Copy and paste motion and filters

There is quite a bit of new functionality when it comes to copy and paste in Flash. First of all, the Copy And Paste Motion command lets you apply a motion tween to another object. You can paste the frames, tween, and other information to the object, choosing to paste all or a selection of the properties of the copied motion tween.

To copy and paste motion from one object to another object, follow these steps. You can find an example with assets to use in this article's source files called copypastemotion.fla.

Create a new symbol or group, and place it on the Stage on Layer 1.
Animate that instance on Layer 1 using a timeline animation. In the example, we added a simple motion tween on Layer 1.
Create a new layer (Layer 2).
Create a new symbol or group, or drag another instance of your existing symbol to the Stage on Layer 2.
Select the entire animation that you want to copy on Layer 1 of the timeline, right-click the animation, and then choose Copy Motion from the context menu (see Figure 21).

Figure 21: Select the entire animation, and then select Copy Motion from the context menu.

Tip: Click the first frame of the animation, press the Shift key, and then click the last frame of the animation to select a span of frames.
Go to Layer 2 and select the frame with the instance you want to “paste” the animation onto. Using Figure 21 as a reference, you would select frame 1 of Layer 2.
With the frame selected, right-click and choose Paste Motion from the context menu.

You successfully applied the motion tween from Layer 1 to the instance on Layer 2.

Note: You can also copy the motion as ActionScript 3.0 in Flash CS3. See the ActionScript and code editor changes page for information.

You can also copy and paste filter settings from one symbol instance to a different symbol instance, which makes working with filters much easier in Flash CS3. To copy and paste filter settings in Flash, follow these quick and easy steps.

Add two new symbol instances to the Stage (you can use the assets from copypastemotion.fla file, included with this article's source files).
Open the Filters panel (Window > Filters).
Select one of the instances on the Stage, and then apply a filter to it using the Add filter button in the Filters panel. Choose any filter from the menu, and adjust its settings as necessary.
After you apply the filter, select the instance with the filter applied and click the Copy Filters button in the Filters panel. Choose Copy Selected from the menu.
Select the second instance, and then click the Paste Filters button in the Filters panel. The filter from the first instance applies to the second instance.

Note: If you apply multiple filters, and you want to copy and paste all of those filters to other instances, select Copy All from the Copy Filters menu instead of Copy Selected.

There have also been many improvements to how Flash integrates with other products, such as Photoshop and Illustrator. To learn more about these enhancements, keep reading.

File import and product integration improvements

There are many improvements in Flash CS3 when it comes to integrating with other products, and importing file formats like Illustrator (AI) and Photoshop (PSD) files. The following sections show you how to import AI and PSD files, and then outlines how the various Creative Suite 3 products integrate.

Importing Photoshop and Illustrator files into Flash

One of the greatest improvements when working with multiple Creative Suite 3 components is when you need to import a PSD or AI file into Flash CS3. You can now directly import PSD and AI files into Flash, and know that most of the data types from those documents are supported. You will see many import options in Flash, allowing you to specifically control how each file imports. For example, you can retain, create, and rename layers, create symbol instances, add instance names, and so on.

When you import a PSD file into Flash, using File > Import > Import to Stage or Import to Library, you see the following dialog box.

Figure 22: Importing a Photoshop PSD file into Flash.

Notice how all of the layers and layer names are retained. After you import the Photoshop file, you can still edit the content that's contained within that file using Flash. However, if you do not need to modify the content, you can flatten the PSD content to a bitmap image.

The importer lets you convert all of those layers to either Flash layers (individual layers on the timeline), or keyframes. You also have the option to import a layer as a movie clip. The importer contains an option to place layers at their original position, which means that the PSD content imports retaining its Photoshop positioning. Otherwise, the content centers on the Stage after you import it.

If you import your content to the Stage, you also have the option to resize the Stage to match the PSD canvas size. I'm sure many of you will be excited to hear that!

You can also import Illustrator files into Flash, which is a lot like importing PSD files. When you import an AI file into Flash, using File > Import > Import to Stage or Import to Library, you see the following dialog box.

(+) view larger
Figure 23: Importing an Illustrator AI file into Flash.

Much like importing a Photoshop file, you can choose to convert layers to Flash layers, or keyframes. You also have an option to add all content to a Flash single layer, create a movie clip with a layer's content, and you have the option to import each layer as a bitmap or sometimes as an editable path.

Many of you will choose to copy and paste Illustrator content into Flash, often a lot quicker and easier than importing an entire file. It also makes sense when you're creating assets like characters or buttons, as opposed to a web site layout that you might need to import. When you copy and paste, you'll notice attributes like paths, strokes, shapes, gradients, text, symbols, masks, and blend modes are all retained in Flash.

Not only can you tightly control how your AI and PSD files import, but you can also change preferences for the import dialog box. Choose Edit > Preferences (Windows) or Flash > Preferences (Mac OS) to open the Preferences dialog box. There are two new options at the bottom of the Category list: PSD File Importer, and AI File Importer. Here, you can change the default preferences for how Flash imports Photoshop or Illustrator files (see Figures 24 and 25).

Figure 24: Change the default preferences for the Photoshop document importer.

Figure 25: Change the default preferences for the Illustrator document importer.

There is a lot of flexibility when you import AI and PSD documents into Flash, much more than can be covered in this article. For video tutorials about integration between Flash and Illustrator, see Importing Illustrator files into Flash, Using symbols effectively between Illustrator and Flash, and Using text effectively between Illustrator and Flash. For a video tutorial about integration between Flash and Photoshop, see Designing websites with Photoshop and Flash. Of course, also consult product documentation for more details.

Integrating Flash with Illustrator and Fireworks

Not only can you import Illustrator files and retain layers, there are new features within Illustrator to help integrate with Flash. For example, you can create symbols, manipulate their registration points, and assign names to instances of those symbols right in Illustrator. Then you can import symbols and instances into Flash, while retaining all of that information. You can also create static, dynamic, and input text fields in Illustrator. For a video tutorial on creating Flash text fields in Illustrator, see Using text effectively between Illustrator and Flash. For a video tutorial on creating symbols in Illustrator for use in Flash, see Using symbols effectively between Illustrator and Flash.

Illustrator, Flash, and Adobe Fireworks® all support for 9-slice scaling. You can create symbols in any of these three products, and enable 9-slice scaling to avoid distortion when you scale your symbols. For example, you might create some interface elements with 9-slice scaling, such as buttons, in Illustrator. Then you can create a website prototype in Fireworks that uses the buttons, and finally animate those buttons in Flash.

You can continue to roundtrip edit between Fireworks and Flash. In Flash CS3, you will notice a tidier import dialog box when you take PNG files from Fireworks to Flash (see Figure 26). In this new dialog box, you can import content onto specified pages, which is a great new feature found in Fireworks CS3.

Figure 26: A fresh new import dialog (right) when you import a Fireworks PNG file into Flash CS3. The previous import dialog (in Flash 8) is on the left.

For a video tutorial that includes several different ways you can integrate Flash and Fireworks, see Understanding the Fireworks and Flash workflow, by the smart and dapper Adobe expert Alan Musselman.

Integrating Flash with Device Central

The workflow for creating content for devices is different in Flash CS3. You will find yourself working more outside the Flash authoring environment in a new tool called Device Central CS3. This new tool lets you emulate mobile devices, and even select a target device right at the beginning of your development workflow. Using Device Central helps you know the abilities—and limitations—of your target device right away.

In Flash 8, you primarily worked with templates, the Device Settings window, and the Publish Settings dialog box when you created content for a mobile device (see Figure 27).

Figure 27: Creating content for a device in Flash 8.

Now, you can create a new FLA file with a target device in Device Central. Choose File > New Document In > Flash. A new window opens, where you can set up your target device, make appropriate settings, and click Create (see Figure 28).

(+) view larger
Figure 28: Creating a new Flash document in Device Central.

After you click Create, a new document with all the correct settings for your target device(s) opens in Flash CS3. You then work in the Flash authoring environment to create and modify your content for the device. When you're ready to emulate your animation, you return to Device Central instead of using the Flash test environment as you would in Flash 8.

(+) view larger
Figure 29: Emulating Flash content in Device Central.

Naturally, there are many new features in Device Central for emulation, such as reflections, backlight, and time of day (see Figure 29, above).

For video tutorials about creating mobile content in Flash, see Creating mobile content in Flash, and Creating interactive content for mobile devices. For a video tutorial about using Device Central in general, see Using the Device Central workspace.

Integration with Adobe Bridge and Version Cue

Flash CS3 now integrates well with Adobe Bridge CS3 and Adobe Version Cue® CS3. Organize your files and assets using Adobe Bridge, which is a tool to help you manage, browse, and preview files. Adobe Bridge can also help you automate certain procedures, apply color settings, and even purchase stock photos. Version Cue is useful for version control of your files, which is essential in a teamwork environment.

To quickly access Adobe Bridge, choose File > Browse. Adobe Bridge opens a file browsing system that lets you click through your files and view information about them. You can filter the files you want to see, and select a way to view your files (such as focus on metadata, or previewing the content). A nice advantage of using Adobe Bridge to browse your files is that it lets you preview SWF files (see Figure 30), and automatically test a selected file in Device Central (choose File > Test In Device Central).

Figure 30: Use Adobe Bridge to preview your work.

You can both label and rate files that you select using Adobe Bridge, which is useful if you have several versions of a document, many image assets, or several with similar names. Labels include star ratings, or labels such as Approved, Review, and so on (see Figure 31).

Figure 31: This SWF file was rated two stars and labeled as To Do.

One of the neat features of Bridge Home is that it contains links out to useful resources, and video tutorials from the Adobe Video Workshop (part of Adobe Design Center). For a video tutorial about using Adobe Bridge with Dreamweaver and Flash, see Using Bridge in a web design workflow.

Version Cue lets you apply version control to your projects, helping you manage assets. This is particularly useful in large projects, or projects involving a team of people. Bridge and Version Cue work together: You can use Bridge to browse Version Cue projects, files, and servers. You can also search for information about assets managed by Version Cue and compare information about the controlled files.

You install Version Cue when you install Flash. Consult product documentation to learn about turning on Version Cue server and making settings.

Choose Tools > New Project from Adobe Bridge to create a new Version Cue project (see Figure 32).
After you type a name for your project (in this case, I called the new project Groundhog), click OK to create the new project.

Now you can add any existing files to that project, which essentially moves those files into that project.
Right-click a file that you want to add to the Version Cue project, and then choose Move To > Groundhog (or whatever you named your project). Enter any comments about the file that you're adding to the project (see Figure 32), and then click OK to move the file.

Figure 32: Moving a file into a Version Cue project.
A handy way to view your files is to click the Folders tab in the upper-right corner of the default workspace, and drill down to your project (see Figure 33).

Figure 33: Viewing your new project file. Right-click the file, or use the buttons above the project files, to check it out.

For a video tutorial about using Version Cue, see Using Version Cue in a workgroup environment. For a video tutorial about using Version Cue in a project with designers and developers, see Setting up a Version Cue server.

New drawing tools in Flash

Flash 8 introduced new ways to create strokes and fills, and a new drawing model. Now in Flash CS3, you have several new drawing tools and an enhanced Pen tool that works a lot more like the Pen tool in Illustrator (while retaining some of the legacy features that made the Flash Pen tool so useful). However, the new consistency between the two Pen tools will be appreciated by everyone who uses Illustrator and Flash together.

Using the enhanced Pen tool

In Flash CS3, the Pen tool has been improved to behave more like the Pen tool in Illustrator, making for a more consistent user experience between the two programs. You will also experience better accuracy and fewer vector points when drawing with the Pen tool, because the cubic-to-quadratic conversion is more efficient.

You can access new Add, Delete, and Convert Anchor Point tools in the Tools panel. Choose the Pen tool and then select one of these tools from the menu (see Figure 34).

Figure 34: New Pen tool submenu in the Tools panel.

What you use each of these tools for is rather self-explanatory. You use the Add Anchor Point tool to add anchor points to paths. You use the Delete Anchor Point tool to remove points from paths. You use the Convert Anchor Point tool to change smooth points to corner points (or vice versa).

To learn about the various pointers related to the Pen tool, see Interacting with the Pen tool in Flash LiveDocs.

You can now access the free transform element using the Control (Windows) or Command (Mac OS) key while using either the Pen tool or the Subselection tool. Now you can quickly modify the selected segments without needing to switch tools or ending your in-progress drawing to switch to the Free Transform tool (see Figure 35). This is an excellent improvement to Flash, because it will help speed up and simplify the vector drawing process.

Figure 35: Press the Control or Command key with vectors selected to quickly access the free transform element.

For a video tutorial about using the Pen tool, see Drawing with the Pen tool.

Primitive Rectangle and Oval drawing tools

Flash CS3 introduces a couple of new drawing tools that let you create rectangles and ovals, and then edit their properties in the Property inspector. You access the new drawing tools in the Tools panel. Click the Rectangle tool to open a submenu that contains these tools (see Figure 36).

Figure 36: Access the new primitive drawing tools from a menu in the Tools panel.

You can create interesting shapes using the Primitive Rectangle tool. For example, you can make the following modifications to the four corners of your rectangle, constrained or independently (see Figure 37). When you draw the shape, they're created as separate objects much like when you create shapes using the object drawing mode.

Figure 37: Change settings in the Property inspector to modify primitive rectangles. Change the corner radius using the controls in the Property inspector, shown here.

To get started, select one of the primitive shape tools in the Tools panel (see Figure 36). After you create some shapes, open the Property inspector (Window > Properties > Properties). You can alter the corner radius of each corner of the rectangle using the corner controls in the Property inspector, as shown in Figure 37.

Select the primitive shape and return to the Property inspector at any time to make further modifications to the selected shape.

Tip: You can also choose to modify the four corners independently. To do so, click the constrain corner radius (lock) icon, located between the four corner radius controls in the Property inspector (see Figure 37).

Oval primitives let you set a start angle, end angle and set an optional inner radius. The inner radius setting lets you specify an oval within the oval (essentially turns the oval into a donut). The start and end angle lets you cut a "pie shape" out of the circle, or you can create a half-circle this way. Close path lets you control whether a fill is applied to the shape.

Figure 38: Change settings in the Property inspector to modify primitive ovals.

For a video tutorial about using drawing tools, including primitive drawing tools, see Using the drawing tools.

Enhancements to using video in Flash

There are a number of improvements to the video workflow in Flash CS3. Now there is an easy way to add captions to video that plays in Flash, and an easy way to save cue points from an FLV file, or load cue points to apply to a new FLV file. And finally, exporting to QuickTime just made animation for broadcast video much easier—now you can export any kind of animation to an MOV file.

Enhanced support for QuickTime video

In previous versions of Flash, QuickTime export was limited in that you couldn't export animations that contained movie clip animation or scripted animation. This was a problem for those of you who wanted to export to a video format in order to create animations intended for playback on a television (broadcast or DVD), or if you wanted to further edit your animations using a video-editing tool. Flash CS3 has improved export to QuickTime format, so you can now export code-based animations, movie clip animations, and more. This affords you the flexibility of creating an animation however you prefer, and then exporting it to the QuickTime format.

For a video tutorial about exporting QuickTime files, see Exporting QuickTime files.

Save and load cue points and the FLVPlaybackCaptioning component

Now, you can save cue points from an FLV file or load cue points to apply to a new FLV file. The new Cue Points tab in the Flash Video Encoder lets you save any cue points that exist in an FLV file, which you can then apply to a different FLV File. Additionally, you can create a cue points XML file that's based on timecode, and then import that document into Flash Video Encoder before you encode the FLV file. This makes it much easier to add cue points to an FLV file, because you don’t need to manually add each one using Flash Video Encoder. Simply click the button shown in Figure 39 to load captions into Flash Video Encoder, then you can apply them to the FLV file that you're encoding.

Figure 39: Add cue points to your FLV files using Flash Video Encoder, either by loading them in, or using the Cue Points tab.

You use the FLVPlayback component, new in Flash 8, to play back FLV files in an application. You can use the FLVPlaybackCaptioning component to add closed captioning support to a video file that plays in FLVPlayback. The component adds a toggle button control, which lets the user turn captions on or off. You can also add several videos with several captioning instances to a single application. You can choose to either use a Timed Text XML file to add captions (which is a W3C standard XML format), or you can add captions using embedded event cue points.

Figure 40: A new video component in Flash CS3.

You can learn about how to use the FLVPlaybackCaptioning component in product documentation. See Using the FLVPlayback Captioning Component for more information.

The FLVPlayback component has been updated to ActionScript 3.0. The primary change in Flash CS3, however, is the FLVPlaybackCaptioning component addition. For more information on the update of the FLVPlayback component to ActionScript 3.0, see Using the FLVPlayback Component.

New ActionScript 3.0 components

Flash 8 had what were called the V2 components. These were largely the same as the V2 components in Flash MX 2004, and both sets of components used ActionScript 2.0. Flash CS3 introduces support for ActionScript 3.0, and with that comes a new set of components called the ActionScript 3.0 components.

Note: For information on new FLVPlaybackCaptioning component, see Enhancements to using video in Flash.

If you're using ActionScript 2.0, the V2 components are still available. You must create an ActionScript 2.0 FLA file, and then you'll find the V2 components in the Components panel.

You also find the new ActionScript 3.0 components in the Components panel (as usual). Create a new ActionScript 3.0 Flash document, and then choose Window > Components, and open the User Interface folder (see Figure 41).

Figure 41: A brand-new set of components that use ActionScript 3.0.

These components were entirely rebuilt to be more lightweight and easier to skin than the V2 components in Flash 8. You might notice some new components, and that some components from the previous set are unavailable. New components include the ColorPicker, Slider, and TileList components. You won't find some of the UI components from the V2 set in ActionScript 3.0, but the V2 components are still available when you create an ActionScript 2.0 document.

Note: The Loader component has been renamed UILoader in the ActionScript 3.0 set. This component was changed to help avoid confusion, because the flash.display package now has a Loader class. The component functionality has not changed.

The main difference that you will initially experience is using ActionScript 3.0 to make the components work. The following example shows you the difference between using the V2 components and using the ActionScript 3.0 components. You create exactly the same application in both examples, so you can directly compare the ActionScript 2.0 and ActionScript 3.0 code.

Create a new ActionScript 2.0 FLA file in Flash 8 or Flash CS3.
Drag a Button component and a ScrollPane component from the Components panel (Window > Components) to the Library.
You're adding instances of the V2 Button and V2 ScrollPane to your document.

Select frame 1 on the timeline and open the Actions panel (Window > Actions), and then type the following code into the Script pane.

import mx.containers.ScrollPane;
import mx.controls.Button;

System.security.allowDomain("http://www.helpexamples.com");

this.createClassObject(Button, "myButton", 10, {label:"Load", _x:10, _y:10});
myButton.addEventListener("click", clickHandler);

var myScrollPane:ScrollPane = this.createClassObject(ScrollPane, "myScrollPane", 20, {_x:10, _y:40});

function clickHandler(eventObject:Object):Void {
       myScrollPane.contentPath = "http://www.helpexamples.com/flash/images/image2.jpg";
}

Select Control > Test movie to test your file.

An image loads into the ScrollPane when you click the button.

Now, lets build the same thing using ActionScript 3.0 code and the ActionScript 3.0 components.

Create a new ActionScript 3.0 FLA file in Flash CS3.
Drag a Button component and a ScrollPane component from the Components panel to the Library.
You're adding instances of the ActionScript 3.0 Button and ScrollPane to your document.

Select frame 1 on the timeline and open the Actions panel (Window > Actions), and then type the following code into the Script pane.

             
import fl.containers.ScrollPane;
import fl.controls.Button;

var myButton:Button = new Button();
myButton.label = "Load";
myButton.x = 10;
myButton.y = 10;
myButton.addEventListener(MouseEvent.CLICK, clickHandler);
addChild(myButton);

var myScrollPane:ScrollPane = new ScrollPane();
myScrollPane.move(10, 40);
addChild(myScrollPane);

function clickHandler(event:MouseEvent):void {
       myScrollPane.source = "http://www.helpexamples.com/flash/images/image2.jpg";
}

Select Control > Test movie to test your file.
An image loads into the ScrollPane when you click the button.

So now that you know the difference between components in Flash 8 and Flash CS3, you are ready to get started using them. To learn more about how to use components, use the Using ActionScript 3.0 Components book in Flash Help.

For video tutorials about using the new ActionScript 3.0 UI components, see Using Components, Writing ActionScript for components, and Creating a simple application with components, all by the talented and stylish Buck DeFore of Adobe. There are also Flash Quick Starts available on the new components in the Flash Developer Center.

ActionScript and code editor changes

Support for a new version of ActionScript, ActionScript 3.0, is one of the most significant changes in Flash CS3. In addition to this support, you can take advantage of new coding tools in the Actions panel or Script window, and a new debugging tool.

These features were created to reduce the time it takes to write ActionScript code, and to add support for ActionScript 3.0. Notably, Script Assist now supports ActionScript 3.0, and Flash uses the same compiler as Flex Builder. The following section covers how to use some of these new features.

New features for coding and testing ActionScript

You can now collapse code selections in the Actions panel and Script window, to temporarily hide the code when you do not need to edit it. To use this feature, highlight the code that you want to hide or collapse. In the gutter to the left of the code (between your code and the line numbers if you have them turned on), you'll see two triangles with a line between them. Click a triangle to hide your code (see Figure 42).

Figure 42: Hide code that you do not need to see.

Click the arrow again to make your code appear.

Tip: You can also use the buttons at the top of the Script window or Actions panel to collapse the code between braces. What code collapses depends on where your cursor is, or what has already been collapsed. You can use the Expand all button to expand all code.

Figure 43: Collapse and expand code using these buttons.

You can also quickly comment sections of code using the buttons at the top of the Script window or Actions panel. To do so, select the code that you want to comment, and then click Apply block comment or Apply line comment (see Figure 44).

Figure 44: Comment out sections of code.

To remove the comment, use the Remove comment button.

Perhaps the neatest new feature is the ability to double-click an error in the new Compiler Errors panel. Flash both describes what the problem is in greater detail than earlier versions of Flash, and automatically takes you to the troublesome code in the Actions panel or Script window, highlighting the code so you can fix the problem. For example, perhaps I have a typo in my code from the previous component example:

import fl.containers.ScrollPane;
import fl.controls.Button;

var myButton:Button = new Button();
myButton.label = "Load";
myButton.x = pelicans;
myButton.y = cat;
myButton.addEventListener(MouseEvent.CLICK, clickHandler);
addChild(myButton);

var myScrollPane:ScrollPane = new ScrollPane();
myScrollPane.move(10, 40);
addChild(myScrollPane);

function clickHandler(event:MouseEvent):void {
       myScrollPane.source = "http://www.helpexamples.com/flash/images/image2.jpg";
}

Well, that code is just crazy and will only cause heartache. So Flash tells you about mistakes such as these in the Compiler Errors panel (see Figure 45).

(+) view larger
Figure 45: Flash says you can't use pelicans or cats for x and y coordinates. What gives?

When you double-click the error you created, Flash takes you to that exact location in the code (see Figure 46).

(+) view larger
Figure 46: Double-click an error in the Compiler Errors panel, and you're taken to the problematic spot in your ActionScript code.

Related to this, you can now associate a FLA file to an ActionScript file using a new menu in the Script window. The advantage of specifying a target FLA is that you can test your Flash application from the Script window.

(+) view larger
Figure 47: Specify a target FLA file for your ActionScript file using the Target menu.

You still have to have the FLA document open, but this feature saves the need to always flip back to the FLA document before testing the application. This will save you both time and clicks!

These coding features are, altogether, a significantly improved workflow over previous versions of Flash, in which you have to hunt for mistakes in your code. Another significant new feature in Flash is the addition of a document class. The following section tells you about that.

Creating a document class for your FLA file

In Flash CS3, you can now create a document class for your FLA file. A document class is a class definition that associates with the main timeline. When the timeline initializes, your document class is constructed. You set a document class using the Property inspector. You type the name of the document class in the Document Class text box (see Figure 48).

Figure 48: Type the name of your document class in this text box.

The following example shows you how this can improve your workflow.

Create a new ActionScript 3.0 FLA file, and save it as docclass.fla.
Create a new ActionScript (AS) file, and save it as MainMovie.as in the same folder as docclass.fla.

Type the following code in MainMovie.as:

package {
      import flash.display.MovieClip;
      import flash.system.Capabilities;
      
      public class MainMovie extends MovieClip {
            // Constructor
            public function MainMovie() {
                  traceCapabilities();
            }
            
            public function traceCapabilities():void {
                  trace(Capabilities);
                  trace("hasAccessibility:", Capabilities.hasAccessibility);
                  trace("isDebugger:", Capabilities.isDebugger);
                  trace("language:", Capabilities.language);
                  trace("manufacturer:", Capabilities.manufacturer);
                  trace("os:", Capabilities.os);
                  trace("playerType:", Capabilities.playerType);
                  trace("version:", Capabilities.version);
                  
            }
      }
}

Save your changes, and return to docclass.as.
In docclass.as, make sure that nothing is selected, open the Property inspector, and then type MainMovie into the Document class text box.

Note: Do not add the AS extension in the Document class box.
Save your changes to the FLA file and select Control > Test Movie.

For a video tutorial about creating a document class, see Creating a document class using ActionScript 3.0.

Specifying a base class for symbols

You can now specify a class and base class for a symbol in the library. The advantage of this new feature is that you can then dynamically instantiate instances of that symbol throughout your application. The following example shows you how.

Create a new ActionScript 3.0 Flash document, and save it as draggable.fla.
Create a new movie clip that has something graphical in it (such as a square or an image).
Select the movie clip in the library, and then select Linkage from the panel menu (or right-click the symbol and choose Linkage from the context menu). The Linkage Properties dialog box opens (see Figure 49). Type flash.display.MovieClip into the Base class text box, and DraggableClip into the Class text box (see Figure 49).

Figure 49: Enter a class and base class for your symbol.

You specified the DraggableClip class for the symbol in your library. Now you need to create (or in this case, find and save) the DraggableClip class to use with your Flash file.

Note: The Base class text box is also available in the Create New Symbol and Convert to Symbol dialog boxes.
Locate DraggableClip.as in this tutorial's source files, and save the AS file in the same folder as draggable.fla.
Back in Flash CS3, make sure that an instance of your symbol is on the Stage, and then select Control > Test Movie to test the SWF file.

When the SWF file plays, you can drag the movie clip around the Stage.

Using the enhanced debugger in Flash

Flash CS3 has a new debugging tool, which you can use with ActionScript 3.0 documents. This new debugger tool makes working with and testing ActionScript 3.0 code easier. When you start a new session, the new debugger takes over the entire Flash workspace (which opens into what's called the debug workspace), and opens the SWF file in the debug version of Flash Player. You have several different panels open in a debug session: the Actions panel or Script window, the Variables panel, and the Debug console (see Figure 50). This is a lot better than Flash 8, which opened into a single panel. You use these panels as you would in previous versions of Flash, but you will notice greater flexibility and more feedback than in the old debugger.

Figure 50: The new and improved debugger in Flash CS3. Now you can enjoy debugging in the new “debug workspace.”

Note: The debugger in Flash CS3 is the same one you find in Flex Builder 2, so you can expect consistent behavior between the two tools.

To use the new debugger in Flash CS3, simply choose Debug > Debug Movie from an open FLA or AS file. If you choose this option from an open AS file, make sure that you have a target FLA selected in the Target menu (see Figure 47).

Note: The FLA file needs to be open in order to select it from the Target menu.

To exit from the debug workspace, choose Debug > End Debug Session from the main menu.

You can also debug a remote ActionScript 3.0 SWF file. For more information, see Debug a remote ActionScript 3.0 file in Flash Help. For more information on using the debugger, see Introducing the ActionScript 3.0 debugger in the Flash Developer Center.

Copy motion as ActionScript 3.0

If you are a developer, you might have been tasked with changing timeline animation to code. This can be a challenging task, because you need to replicate complex animation using complex code. Making the timeline animation and your code match might be both challenging and time-consuming.

Your work just got easier: Now you only need to select a menu option, and your code is automatically written for you in Flash CS3. Flash copies the properties that define a motion tween that resides on a timeline and writes the ActionScript 3.0 code for you to apply to a symbol. You can choose to apply the code as timeline code or in class files for the FLA file.

Here's how you copy motion as ActionScript 3.0, and apply it to a second symbol.

Create a new symbol or group, and place it on the Stage on Layer 1.
Animate that instance on Layer 1 using a timeline animation, such as a simple motion tween on Layer 1.
Create a new layer (Layer 2).
Create a new symbol or group, or drag another instance of your existing symbol to the Stage on Layer 2.
Select the entire animation that you want to copy on Layer 1 of the timeline, right-click the animation, and then choose Copy Motion as ActionScript 3.0 from the context menu. The ActionScript code copies to the clipboard.

Tip: Click the first frame of the animation, press the Shift key, and then click the last frame of the animation to select a span of frames.

Type an instance name to use in the ActionScript code. You want to enter the instance name of the instance you will apply the ActionScript code to.
Select your second instance that you added to Layer 2, and type the instance name you entered into the Property inspector.
Create a new layer (Layer 3), and select the first frame of that layer. Open the Actions panel and paste (Control + V or Command + V) the code into the Script pane.
Before you test your animation, you need to make sure that Layer 2 has the same number of frames (so the symbol doesn't disappear when the animation plays). Select a frame and press F5 to insert frames on the Timeline.
Select Control > Test Movie to play the animation. You successfully applied the motion tween from Layer 1 to the instance on Layer 2 using ActionScript code. The scripted animation, and the one using timeline animation, should match.

For video tutorials about copying motion as ActionScript 3.0 code, see Copying and pasting ActionScript from an animation and Creating an effective workflow between design and development.

Using a new version of ActionScript

Flash CS3 adds support for ActionScript 3.0, which is a more consistent and robust programming language. If you understand object-oriented programming languages like Java, ActionScript 3.0 will feel familiar to you. This new version of ActionScript is less quirky than earlier versions, and lets you create very complex applications with large amounts of data. You can also reuse more of your code, and take advantage of significant performance improvements thanks to the updated ActionScript Virtual Machine (AVM2) in Flash Player.

Note: You can still use ActionScript 2.0 or even ActionScript 1.0 in Flash CS3 and Flash Player 9. Simply change the ActionScript version in your Publish Settings.

When you start working with ActionScript 3.0, you will notice a change in the syntax, a significant addition of many new classes, and updates to the existing classes you know (such as the Tween classes, and more). There are even new symbol types if you create instances with code; for example, you can now create timeline-less movie clips called sprites.

Note: Script Assist now supports ActionScript 3.0. For a video tutorial about writing ActionScript 3.0 code using Script Assist, see Using Script Assist to add interactivity.

While the changes are too considerable to cover in the scope of this article (it would take a whole book), I'll show you the basics. Let's take a quick look at the difference between ActionScript 2.0 and ActionScript 3.0 with a core piece of code everyone needs to do at one point or other—a button.

In ActionScript 2.0, you would write code (on the main Timeline) for a button on the Stage with the instance name myBtn as follows:

myBtn.onRelease = function(){
	getURL("http://www.adobe.com");
};

In ActionScript 3.0 it looks a bit different. Here are the steps you'd take to create an interactive button in Flash CS3.

Create a simple button, as you would in Flash 8, or use one from the common library (Window > Common Libraries > Buttons).
Select the instance, and type an instance name of myBtn in the Property inspector.
Create a new layer, and rename it actions.

Open the Actions panel (Window > Actions), select frame 1 of the actions layer, and add the following ActionScript in the Script pane.

myBtn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

function mouseDownHandler(event:MouseEvent):void {
      navigateToURL(new URLRequest("http://www.adobe.com/"));
}

Choose Control > Test Movie to test your document.

And as an added bonus, for comparison purposes, the following ActionScript 3.0 code creates a button from scratch. Create a new ActionScript 3.0 document, and place the following code on Frame 1 of the Timeline:

var spr:Sprite = new Sprite();
spr.graphics.beginFill(0xFF0000, 1);
spr.graphics.drawRect(0,0, 100, 22);
spr.graphics.endFill();

var btn:SimpleButton = new SimpleButton();
btn.upState = spr;
btn.overState = spr;
btn.downState = spr;
btn.hitTestState = spr;
btn.useHandCursor = true;
btn.x = 20;
btn.y = 20;
btn.addEventListener(MouseEvent.CLICK, clickHandler);
addChild(btn);

function clickHandler(event:MouseEvent):void {
      navigateToURL(new URLRequest("http://www.adobe.com/"));
      trace("clicked the button at (" + event.localX + "," + event.localY + ")");
}

There are many changes to the ActionScript language, from syntax to performance to available classes. There are too many changes to even start covering them here. To learn about ActionScript 3.0, see Programming ActionScript 3.0 in Flash Help (F1) or on LiveDocs. For a video tutorial about getting started with ActionScript 3.0, see Getting Started with ActionScript 3.0. For a video tutorial about creating a document class, see Creating a document class using ActionScript 3.0.

Where to go from here

This article has hopefully shown you the main new features in Flash CS3, and outlined some of the differences in the latest version of Flash from Flash 8.

To learn more about Flash CS3 Professional, see these articles and tutorials on the Flash Design Center and Flash Developer Center. Articles on Flash CS3 will be added frequently, so check back often.

To learn more about ActionScript 3.0, a significant change between Flash 8 and Flash CS3, see the following pages on ActionScript 3.0 and components:

ActionScript 3.0 Cookbook excerpts: From custom classes to the rendering model (by Joey Lott, Darron Schall, and Keith Peters)
Creating, populating, and resizing a DataGrid (by Peter deHaan)
Programming animations (by Buck DeFore)
(Video tutorial) Using Script Assist to add interactivity (by Lee Brimelow)
(Video tutorial) Getting Started with ActionScript 3.0 (by Justin Everett-Church)
(Video tutorial) Creating a document class using ActionScript 3.0 (by Justin Everett-Church)

Also, as time goes on, expect many new resources to become available on migrating to ActionScript 3.0, and ActionScript 3.0 for designers. And, don't forget, you can see numerous video tutorials on new features in Flash CS3 Professional (and other Creative Suite 3 components) in the Adobe Video Workshop.