Multitouch Tutorials » Setting up your FlashDevelop Environment

Tutorial: Setting up your FlashDevelop Environment

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, FlashDevelop, and Flash Develop. We’ll target our templates for ActionScript development. This tutorial requires FlashDevelop 4.0+ and GestureWorks 3 (download a free trial).

Tutorial Series:Configuring Development Environments

Installation Folder

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

apps folder – contains an example GestureWorks application
config folder – contains the licensing info
lib folder – contains the GestureWorks 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 GestureWorks 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 FlashDevelop Project

Let’s open up FlashDevelop and create a new ActionScript 3 project:
Project -> New Project

In the dialog window, select the AS3Project.

Fill in the name text field:
My Template

Specify the project location:
user/GestureWorks3/templates/My Template

New Project

Note that Charles will be replaced by your own user name. Click the OKbutton.

Linking Project Files

Let’s link the GestureWorks library files to our project. There are several ways to do this in FlashDevelop. We’ll use Project Classpaths.

Open the Project Properties window:
Project -> Properties

Click on the Classpaths tab and click the Add Classpath button. A browse prompt will appear. Navigate to the GestureWorks install folder and select the lib sub-directory:
user/GestureWorks3/lib

The Project Classpaths should now include the lib folder:

Class Paths

Note that the Project Classpath is defined through a relative link. This is the default behavior of Flash Develop. The downside of this is you will have to re-link this library should you ever change the location of your template project. You may want to use a Global Classpath instead. See the Flash Develop documentation for more information on setting Global Classpaths.

Press OK. In the Projectwindow, our newly added libraries are present:

Project Window

The GestureWorks library is made up of two swc files. The GestureWorksGML.swc file contains the required classes and assets for all GestureWorks and GestureWorks applications. The GestureWorksCML.swc file contains the CML classes and assets. This library is not a requirement for GesureWorks and GestureWorks applications.

We have to explicitly add each swc to our project library. Right click on each swc and select Add To Library from the pop-up menu.

Project Window

We now have our project paths set up correctly.

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
21
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 GestureWorks application.

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

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

8
9
10
11
12
public function Main():void

{

    super()

    key = "VERFICATION KEY";

}

First, it calls the superclasses’ constructor:

10
super();

Then, it provides the GestureWorks license verification key:

11
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: support@gestureworks.com

Now let’s look at the initialization callback:

14
15
16
17
18
19
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:
Project -> Test Project

Hello World