Open Exhibits Tutorials

Tutorials

  
  

Setting Up Flash

  

Configuring Development Environments, Part 1

Tutorial Series: Configuring Development Environments

Tutorial: How to configure Adobe Flash Professional CS5.5.

Introduction

In this series of tutorials we’re going to create template projects for three Integrated Development Environments (IDE) commonly used by ActionScript developers: Flash Professional, Flash Builder, and Flash Develop. We’ll target our templates for ActionScript development. This tutorial requires Adobe Flash CS5+ and Open Exhibits 2 (download the sdk ).

In this tutorial we’ll use Flash Professional CS5.5 to create a template project that we can use to create Open Exhibits applications using only ActionScript. You may also use Flash Professional CS5.0, though there might be some slight differences in the instruction.

Installation Folder

First, let’s open the Open Exhibits installation folder. Navigate to the user/OpenExhibits2 directory. There are several folders and files here:

apps folder – contains an example Open Exhibits application config folder – contains the licensing info lib folder – contains the Open Exhibits library files readme folder – contains getting started documents templates folder – contains getting started documents key.txt – contains your verification key

Creating a New Template Folder

Open up the installed template folder. You’ll see that Open Exhibits comes with a variety of templates. In this tutorial, we’ll go through the process of making our own template. We’ll print Hello World to the stage as a test.

First, we’ll create a new folder inside of the templates folder called: My Template. We’ll use this folder to store all the needed files that make up our project.

Next, let’s set up a couple of sub directories within this folder: src – stores the source code (ActionScript files) for the project bin – stores the binaries (swf files) and any other files that the application requests during run-time

Now that we have our project directory set up correctly, we can start setting up the project within the IDE.

Creating a Flash Professional Project

Let’s open up Flash Professional and create a new ActionScript 3.0 project: Create New -> ActionScript 3.0

Save the project file within the My Template folder we just created. We’ll give it the same name: My Template.fla

Next, we need to create a Main ActionScript source code file that we will use to make our initialization statements: File -> New -> ActionScript 3 Class

Fill in the the class name text field: Main

New Document

Save this document within our project’s src folder. The file name must be the same as the class name: Main

Next, we’re going to link the necessary files to our projects.

Linking Project Files

We can link the necessary project files through Flash Professional’s ActionScript Settings window: File -> ActionScript Settings

First, we’ll link the Main ActionScript file we just just created. Fill in the Document Class text field with the file we just made: Document Class: Main

We’ll tell Flash where to look for the file by add the src folder as a source path. Under the Source path tab click on the plus icon to add a new path. Type in: ./src

The dot represents the directory of the My Template.fla project file. The Source path tab should now look like this:

Source Path

Next, we’ll link the Open Exhibits library files to our project. Click on the Library path tab and click the swc icon which is to the right of the minus icon. It will open a Browse to SWC file prompt. Navigate to the user/OpenExhibits2/lib directory and double-click on the GestureWorksGML.swc file. This library file contains the required classes and assets for all GestureWorks and Open Exhibits applications. Repeat these last steps to additionally include the GestureWorksCML.swc library file. This file contains the CML classes and assets. This library is not a requirement for GesureWorks and Open Exhibits applications. The Library path tab should now contain the library files:

Library Path

Notice the file path: C:UsersCharlesOpenExhibits2lib

The first thing to note is that Charles will be replaced by your own user name. The second thing is that this file is linked though an absolute path. We could alternatively use a relative path, but using an absolute path allows us to move our project folder without worrying about the location of the library files.

The last link we’ll make is to the bin folder. This is where the compiled swf files will be created. We can do this under Flash Professional’s Publish Settings: File -> Publish Settings

In the Output file text field, prepend the bin directory to swf file name: ./bin/My Template.swf

Publish Settings

Setting Up the Main ActionScript Class

The last thing we’ll do is set up our Main ActionScript class. We’ll write a Hello World program just to verify that it’s compiling properly.

Open up the Main ActionScript file. Flash Professional will have already created some stub code. Replace it with the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 package
 {
    import com.gestureworks.core.GestureWorks;
    import flash.text.TextField;
    public class Main extends GestureWorks
    {
        public function Main():void
        {
            super();
            key = "VERFICATION KEY";
        }

        override protected function gestureworksInit():void
        {
            var txt:TextField = new TextField;
            txt.text ="Hello World";
            addChild(txt);
        }
    }
 }

Let’s look at the import statements one at a time:

3
import com.gestureworks.core.GestureWorks;

This a mandatory class for every Open Exhibits application.

The easiest way instantiate it is to to extend your Main ActionScript class:

5
public class Main extends GestureWorks

The other import statement:

4
import flash.text.TextField;

..allows us to create a text display object, which we use to print our Hello World message to the stage.

Our class has two methods: the constructor (Main) and the initialization callback (gestureworksInit). Let’s look at the constructor:

The other import statement:

7
8
9
10
11
public function Main():void
{
    super()
    key = "VERFICATION KEY";
}

First, it calls the superclasses’ constructor:

9
super();

Then, it provides the Open Exhibits license verification key:

10
key = "VERFICATION KEY";

Your must replace the string VERFICATION KEY with your own key. During installation, a verification key was created and stored in the installation directory within the file key.txt. If you have problems with your verification key contact us: [email protected]

Now let’s look at the initialization callback:

13
14
15
16
17
18
override protected function gestureworksInit():void
{
    var txt:TextField = new TextField;
    txt.text ="Hello World";
    addChild(txt);
}

gestureworksInit() is an abstract protected method of the GestureWorks class. An abstract method is one that is meant to be overridden by a subclass. This allows us to provide our own custom code for this method. It is called by the GestureWorks class when all the necessary files have been loaded and processed. This as our entry point into writing applications.

Let’s run the program and see if everything went well: Control -> Test Movie -> Test

Hello World