How to Use ActionScript Examples

Code snippet examples

A code snippet example looks like this:

var x:int = 5; 
trace(x); // 5

Code snippets only contain enough code to demonstrate a single idea. They do not normally contain package or class statements.

Class-based examples

Many examples show the source code for a complete ActionScript class. A class-based example looks like this:

package { 
    public class Example1 { 
        public function Example1():void { 
            var x:int = 5; 
            trace(x); //5 
        } 
    } 
}

The code for a class-based example includes a package statement, a class declaration, and a constructor function.

Practical examples containing multiple source files

Many of the topics in the ActionScript 3.0 Developer’s Guide conclude with practical examples that show how to use certain ActionScript features in a practical, real-world context. These examples usually contain multiple files including:

Practical examples are normally delivered as ZIP archive files.

List of Developer Guide examples in the ZIP file

The ZIP file for Flash Professional CS5 and Flex 4 (download from www.adobe.com/go/learn_programmingAS3samples_flash ) contains the following examples:

• AlarmClock ( Event handling example: Alarm Clock )

• AlgorithmicVisualGenerator ( Drawing API example: Algorithmic Visual Generator )

• ASCIIArt ( Strings example: ASCII art )

• CapabilitiesExplorer ( Capabilities example: Detecting system capabilities )

• CustomErrors ( Handling errors example: CustomErrors application )

• DisplayObjectTransformer ( Geometry example: Applying a matrix transformation to a display object )

• FilterWorkbench ( Filtering display objects example: Filter Workbench )

• GlobalStockTicker ( Example: Internationalizing a stock ticker application )

• IntrovertIM_HTML ( External API example: Communicating between ActionScript and JavaScript in a web browser )

• NewsLayout ( TextField Example: Newspaper-style text formatting )

• PlayList ( Arrays example: PlayList )

• PodcastPlayer ( Sound example: Podcast Player )

• ProjectionDragger ( Example: Perspective projection )

• ReorderByZ ( Using Matrix3D objects for reordering display )

• RSSViewer ( XML in ActionScript example: Loading RSS data from the Internet )

• RuntimeAssetsExplorer ( Movie clip example: RuntimeAssetsExplorer )

• SimpleClock ( Date and time example: Simple analog clock )

• SpinningMoon ( Bitmap example: Animated spinning moon )

• SpriteArranger ( Display object example: SpriteArranger )

• TelnetSocket ( TCP socket example: Building a Telnet client )

• VideoJukebox ( Video example: Video Jukebox )

• WikiEditor ( Regular expressions example: A Wiki parser )

• WordSearch ( Mouse input example: WordSearch )

Practical examples are also found with many of the Quick Start articles in the Flash Developer Center and Flex Developer Center.

Running a code snippet example in Flash Professional

To run a code snippet example in Flash Professional:

1. Select File > New.

2. In the New Document dialog box, select Flash Document, and click OK.

   A new Flash window is displayed.

3. Click on the first frame of the first layer in the Timeline panel.

4. In the Actions panel, type or paste the code snippet example.

5. Select File > Save. Give the file a name and click OK.

6. To test the example, select Control > Test Movie.

Running a class-based example in Flash Professional

To run a class-based example in Flash Professional:

Running a practical example in Flash Professional

Practical examples are normally delivered as ZIP archive files. To run a practical example using Flash Professional:

1. Unzip the archive file into a folder of your choice.

2. In Flash Professional select File > Open.

3. Browse to the folder where you unzipped the archive file. Select the FLA file in that folder and click Open.

4. To test the example, select Control > Test Movie.

Running a code snippet example in Flash Builder

To run a code snippet example in Flash Builder:

Running a class-based example in Flash Builder

To run a class-based example in Flash Builder:

1. Select File > New > ActionScript Project.

2. Enter the name of the primary class (such as ContextMenuExample) into the Project Name field. Use the default values for other fields (or change them according to your specific environment). Click Finish to create the project and the main ActionScript file.

3. Erase any generated content from the ActionScript file. Paste the example code, including package and import statements, into the ActionScript file and save the file.

   Note: Some of the class-based examples, such as the flashx.textLayout.container.ContainerController class example , include multiple levels in the package declaration ( package flashx.textLayout.container.examples { ). For these examples, save the file in a sub folder that matches the package declaration (flashx/textLayout/container/examples), or remove the package name (so the ActionScript starts with package { only) and you can test the file from any location.

4. To run the example, select the Run > Run menu option for the main ActionScript class name (such as Run > Run ContextMenuExample).

Running a practical example inFlash Builder

Practical examples are normally delivered as ZIP archive files. To run a practical example using Flash Builder:

Stage size

The stage size you use when running an example on a mobile device is much smaller than when you use a non-mobile device. Many examples do not require a particular Stage size. When creating the SWF file, specify a Stage size appropriate to your device. For example, specify 176 x 208 pixels.

The purpose of the practical examples in the ActionScript 3.0 Development Guide is to illustrate different ActionScript 3.0 concepts and classes. Their user interfaces are designed to look good and work well on a desktop or laptop computer. Although the examples work on mobile devices, the Stage size and user interface design is not suitable to the small screen. Adobe recommends that you run the practical examples on a computer to learn the ActionScript, and then use pertinent code snippets in your mobile applications.

Text fields instead of trace statements

When running an example on a mobile device, you cannot see the output from the example’s trace statements. To see the output, create an instance of the TextField class. Then, append the text from the trace statements to the text property of the text field.

You can use the following function to set up a text field to use for tracing:

function createTracingTextField(x:Number, y:Number, 
                                width:Number, height:Number):TextField { 
           
    var tracingTF:TextField = new TextField(); 
    tracingTF.x = x; 
    tracingTF.y = y; 
    tracingTF.width = width; 
    tracingTF.height = height; 
     
    // A border lets you more easily see the area the text field covers. 
    tracingTF.border = true; 
    // Left justifying means that the right side of the text field is automatically 
    // resized if a line of text is wider than the width of the text field. 
    // The bottom is also automatically resized if the number of lines of text 
    // exceed the length of the text field. 
    tracingTF.autoSize = TextFieldAutoSize.LEFT; 
     
    // Use a text size that works well on the device. 
    var myFormat:TextFormat = new TextFormat(); 
    myFormat.size = 18; 
    tracingTF.defaultTextFormat = myFormat; 
     
    addChild(tracingTF); 
    return tracingTF; 
}

For example, add this function to the document class as a private function. Then, in other methods of the document class, trace data with code like the following:

var traceField:TextField = createTracingTextField(10, 10, 150, 150); 
// Use the newline character "\n" to force the text to the next line. 
traceField.appendText("data to trace\n"); 
traceField.appendText("more data to trace\n"); 
// Use the following line to clear the text field. 
traceField.appendText("");

The appendText() method accepts only one value as a parameter. That value is a string (either a String instance or a string literal). To print the value of a non-string variable, first convert the value to a String. The easiest way to do that is to call the object’s toString() method:

var albumYear:int = 1999; 
traceField.appendText("albumYear = "); 
traceField.appendText(albumYear.toString());

Text size

Many examples use text fields to help illustrate a concept. Sometimes adjusting the size of the text in the text field provides better readability on a mobile device. For example, if an example uses a text field instance named myTextField , change the size of its text with the following code:

// Use a text size that works well on the device. 
var myFormat:TextFormat = new TextFormat(); 
myFormat.size = 18; 
myTextField.defaultTextFormat = myFormat

Capturing user input

The mobile operating system and browser capture some user input events that the SWF content does not receive. Specific behavior depends on the operating system and browser, but could result in unexpected behavior when you run the examples on a mobile device. For more information, see KeyboardEvent precedence .

Also, the user interfaces of many examples are designed for a desktop or laptop computer. For example, most of the practical examples in the ActionScript 3.0 Developer’s Guide are well-suited for desktop viewing. Therefore, the entire Stage is sometimes not visible on the mobile device’s screen. The ability to pan through the browser’s contents depends on the browser. Furthermore, the examples are not designed to catch and handle scrolling or panning events. Therefore, some examples’ user interfaces are not suitable for running on the small screen. Adobe recommends that you run the examples on a computer to learn the ActionScript, and then use pertinent code snippets in your mobile applications.

For more information, see Panning and scrolling display objects .

Handling focus

Some examples require you to give a field the focus. By giving a field the focus, you can, for example, enter text or select a button. To give a field focus, use the mobile device’s pointer device, such as a stylus or your finger. Or, use the mobile device’s navigation keys to give a field focus. To select a button that has the focus, use the mobile device’s Select key as you would use Enter on a computer. On some devices, tapping twice on a button selects it.

For more information about focus, see Managing focus .

Handling mouse events

Many examples listen for mouse events. On a computer, these mouse events can occur, for example, when a user rolls over a display object with the mouse, or clicks the mouse button on a display object. On mobile devices, events from using pointer devices such as a stylus or finger, are called touch events. Flash Player 10.1 maps touch events to mouse events. This mapping ensures that SWF content that was developed before Flash Player 10.1 continues to work. Therefore, examples work when using a pointer device to select or drag a display object.

Performance

Mobile devices have less processing power than desktop devices. Some CPU-intensive examples possibly perform slowly on mobile devices. For example, the example in Drawing API example: Algorithmic Visual Generator does extensive computations and drawing upon entering every frame. Running this example on a computer illustrates various drawing APIs. However, the example is not suitable on some mobile devices due to their performance limitations.

For more information about performance on mobile devices, see Optimizing Performance for the Flash Platform .

Best practices

The examples do not consider best practices in developing applications for mobile devices. Limitations in memory and processing power in mobile devices require special consideration. Similarly, the user interface for the small screen has different needs than a desktop display. For more information about developing applications for mobile devices, see Optimizing Performance for the Flash Platform .