Accessibility

Migrating from Flash 8 to Flash CS3 Professional

Page 8 of 8
Previous Page

Table of Contents

  1. Introduction
  2. Updated Flash workspace and workflow
  3. New features and functionality in the Flash workspace
  4. File import and product integration improvements
  5. New drawing tools in Flash
  6. Enhancements to using video in Flash
  7. New ActionScript 3.0 components
  8. ActionScript and code editor changes

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).

hide code 1

 

hide code 2

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.

collapse and expand 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).

comment out code

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).

x and y coordinates

(+) 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).

compiler errors panel

(+) 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.

Target menu

(+) 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).

text box

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

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

  1. Create a new ActionScript 3.0 FLA file, and save it as docclass.fla.
  2. Create a new ActionScript (AS) file, and save it as MainMovie.as in the same folder as docclass.fla.
  3. 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);
                  
            }
      }
}
  4. Save your changes, and return to docclass.as.

  5. 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.

  6. 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.

  1. Create a new ActionScript 3.0 Flash document, and save it as draggable.fla.
  2. Create a new movie clip that has something graphical in it (such as a square or an image).

  3. 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).

    class and base class

    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.

  4. Locate DraggableClip.as in this tutorial's source files, and save the AS file in the same folder as draggable.fla.
  5. 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.

new 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.

  1. Create a new symbol or group, and place it on the Stage on Layer 1.
  2. Animate that instance on Layer 1 using a timeline animation, such as a simple motion tween on Layer 1.
  3. Create a new layer (Layer 2).
  4. Create a new symbol or group, or drag another instance of your existing symbol to the Stage on Layer 2.

  5. 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.

  1. 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.
  2. Select your second instance that you added to Layer 2, and type the instance name you entered into the Property inspector.
  3. 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.
  4. 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.
  5. 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.

  1. Create a simple button, as you would in Flash 8, or use one from the common library (Window > Common Libraries > Buttons).
  2. Select the instance, and type an instance name of myBtn in the Property inspector.
  3. Create a new layer, and rename it actions.
  4. 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/"));
}
  5. 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:

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 Creative Suite 3 Video Workshop.

Page 8 of 8
Previous Page