Accessibility

ActionScript Article

 

Building an image-viewing widget with ActionScript 3.0


Table of Contents

  1. Introduction
  2. Installing the sample files
  3. Moving from ActionScript 2.0 to ActionScript 3.0

Installing the sample files

I've created all the sample code for my upcoming book, tentatively titled Essential ActionScript 3.0, in Flex Builder 2, the new development tool from Adobe for authoring ActionScript and Flex applications. If you want to run the code examples in this article, you'll need to install either Flex Builder 2 or the free Flex SDK. However, if you're just curious to see the code, you can look at the class files in any text editor without installing Flex Builder 2.

Note: The examples are presented as-is, without detailed line-by-line explanations of how they work. However, points of interest are commented in the code.

Download and unzip the sample files that accompany this article. For the original ActionScript 2.0 samples from Essential ActionScript 2.0, go to my site. The file moock_eas3_imageviewer.zip contains two folders: eas3_imageviewer and eas3_imageviewer_demos. You'll find the source code for the various ImageViewer classes in the eas3_imageviewer folder. The demo applications that use the ImageViewer classes reside in the eas3_imageviewer_demos. Table 1 presents a quick rundown of the contents of the eas3_imageviewer folder.

Table 1. Contents of the eas3_imageviewer folder
Asset Description
/.settings/ Used by Flex Builder 2.0 for internal project management
/bin/ Project output (HTML files, exported SWF files)
/docs/ Some point-form descriptions of the examples
/take1port/ Contains version 1 of the ActionScript 2.0 ImageViewer class found in Essential ActionScript 2.0 converted to ActionScript 3.0 with the least possible number of required changes
/take2/ Contains version 2 of the ImageViewer class
/take3/ Contains version 3 of the ImageViewer class
/take4/ Contains version 4 of the ImageViewer class and the DragManager class.
.actionscriptProperties Used by Flex Builder 2 for internal project management
.project Used by Flex Builder 2 for internal project management

To load the examples in Flex Builder 2, follow these steps:

  1. Extract Moock-eas3-imageviewer.zip to the folder of your choice.
  2. Open Flex Builder 2.0 and choose File > Import. This opens the Import dialog box.
  3. In the Select an import source pop-up menu, choose Existing Projects into Workspace.
  4. For Select root directory, select the folder you chose in Step 1.
  5. Click Finish.

To run the demo applications, follow these steps:

  1. In the Flex Builder 2 Navigator panel, under the ImageViewerDemos project, select the file you want to run (Take1PortDemo.as, Take1RewriteDemo.as, Take2Demo.as, Take3Demo.as, or Take4Demo.as).
  2. Click the Run toolbar button (the white arrow in the green circle).
Page 2 of 3
Previous Page
Next Page