In this tutorial we'll use FlashDevelop 4.0 to create a template
project that we can use to create GestureWorks 3 applications. You may
also use Flash Professional CS5.0, though there might be some slight
differences in the instruction.
First, let's open the GestureWorks3 installation folder. Navigate to the "user/GestureWorks3" directory. There are several folders here:
Open up the template folder. GestureWorks3 comes with pre-defined templates, but in this tutorial we'll go through the process of making our own custom template.
Create a new folder inside of the "Templates" folder called: "my_flash_template". We'll use this folder to store all the needed files that make up our project. Let's set up a couple of sub directories within this folder before we actually create our project in Flash Professional. The first folder we need is for storing our ActionScript code. Let's call it "src", which is short for 'source code'. The second one we'll make will be called "bin", which is short for 'binaries'. This folder will store our compiled application and any needed files that the application requests during runtime.
Compiled application folders or "bin" folders often contain many files, so let's organize it. First we'll add a folder called "library". This folder will contain any needed files which the application requests during runtime, such as images, videos, etc. It will also store our CML file (GestureWorks' own Content Markup Language) and our GML file (GestureWorks' own Gesture Markup Language).
Rather than recreate the "library" folder, let's download the files associated with this tutorial. The download package includes a "library" folder. We'll copy this folder and all of it contents into the "bin" folder.
Let's investigate what's inside of the "library" folder. There are three folders entitled: "assets", "cml", and "gml". The "assets" folder stores any external media such as images and videos. Open up this folder and we'll see that it contains an image of the GestureWorks logo. The "cml" folder stores our application's cml files, and the "gml" folder stores our application's gml files. There exists one of each to get us started.
The "cml" folder contains a file called "my_application.cml". Open it up with notepad or some other text editor:
You'll see that CML is based on the XML standard. You can use this file to create and style display objects. NOTE: one CML file is required for every GestureWorks3 project.
The markup code you see here represents the required minimum needed for the CML to be valid and work correctly. Actually it contains one extra bit of information, a path to our application's gml file (we'll get to this next):
The "gml" folder contains the "my_gestures.gml" file. Open it up with notepad or some other text editor. Yes, there is a lot to this, but we don't have to worry about it now. For now just realize that it too is based on the XML standard and that it contains all the possible gestures and their settings which we can include in our application. NOTE: The GML file is not a requirement for GestureWorks 3 applications, but it is good practice to include one.
Now that we have our project directories set up correctly, we can get started setting up the project within the IDE.
Let's open up FlashDevelop 4.0 and create a new project:
File ? New ? Project
We'll need to adjust some of the settings within this dialog box.
First, click on the "AIR AS3 Projector" project type.
NOTE: You must create an AIR project for GestureWorks 3 projects in order to pass licensing verification. You can still embed the swf file that is generated from the AIR project into an HTML file and publish on the web.
Now, let's set the name of the project. We'll name it the same as the project folder that we created earlier:
Name: my_flashdevelop_template
We'll also set the "project location" to the project folder we created earlier:
Location: user/GestureWorks3/my_flashdevelop_template
The dialog window should now look like this:
Note that "fog" will be replaced by your own username.
Click "OK" to create the project.
Next, we'll need to link our project to the GestureWorks3.swc library file. Though there are several ways this can be accomplished, we'll cover just one. We'll link the GestureWorks3.swc library file through a project classpath.
Open up the "Project Properties" window:
Project ? Properties
Click on the "Classpaths" tab:
Click the "Add Classpath" button, and a browse prompt will appear. Navigate to the GestureWorks3 install folder and select the "lib" sub-directory.
The Project Classpaths should now include the Gesture Works 3 lib folder:
Note that the Project Classpath is defined through a relative link. This is the default behavior of FlashDevelop. The downside of this is you will have to re-link this library should you ever change the location of your template project. If this becomes tiresome, then you may want to use a Global Classpath instead. See the FlashDevelop documentation for more information on setting Global Classpaths.
If you haven't already, confirm the updates and close the "Project Properties" window. In the "Project" window, our newly added library is now shown:
Once we have added the Project Classpath, we have to formally add it our project library. Right click on the GestureWorks3.swc icon and select "Add To Library" from the pop-up menu. The "Add To Library" option should now be checked:
The last thing we have to do is set up our "Main" class file. The last thing we have to do is set up our Main.as file. We'll write a classic "Hello World" program just to verify that it's compiling properly.
Let's open the "Main.as" file using FlashDevelop 4.0 by double clicking on it in the "Project" window.
FlashDevelop 4.0 will have already created some stub code for us. Replace it with the following:
package
{
� � import com.gestureworks.core.GestureWorks;
� � import com.gestureworks.cml.element.TextElement;
� � public class Main extends GestureWorks
� � {
� � � � public function Main():void
� � � � {
� � � � � � super();
� � � � � � settingsPath = "library/cml/my_application.cml";
� � � � }
Ã? Ã? Ã? Ã? Ã?ÂÂ
� � � � override protected function gestureworksInit():void
� � � � {
� � � � � � var txt:TextElement = new TextElement;
� � � � � � txt.text = "Hello World";
� � � � � � addChild(txt);
� � � � }
� � }
} Let's look at the import statements one at a time:
Our class has two methods: the constructor (Main) and the initialization callback (gestureworksInit).
Let's look at the constructor:
We've decided to print "hello world" to the stage, so we have the following body for the gestureworksInit method:
We added the display object to the stage:
Project ? Test Project
First, let's open the GestureWorks3 installation folder. Navigate to the "user/GestureWorks3" directory. There are several folders here:
- API_Docs (contains the AS3 class documentation)
- Config (contains the licensing info)
- lib (contains the GestureWorks.swc library file)
- Templates (contains the GestureWorks3 template projects)
Open up the template folder. GestureWorks3 comes with pre-defined templates, but in this tutorial we'll go through the process of making our own custom template.
Create a new folder inside of the "Templates" folder called: "my_flash_template". We'll use this folder to store all the needed files that make up our project. Let's set up a couple of sub directories within this folder before we actually create our project in Flash Professional. The first folder we need is for storing our ActionScript code. Let's call it "src", which is short for 'source code'. The second one we'll make will be called "bin", which is short for 'binaries'. This folder will store our compiled application and any needed files that the application requests during runtime.
Compiled application folders or "bin" folders often contain many files, so let's organize it. First we'll add a folder called "library". This folder will contain any needed files which the application requests during runtime, such as images, videos, etc. It will also store our CML file (GestureWorks' own Content Markup Language) and our GML file (GestureWorks' own Gesture Markup Language).
Rather than recreate the "library" folder, let's download the files associated with this tutorial. The download package includes a "library" folder. We'll copy this folder and all of it contents into the "bin" folder.
Let's investigate what's inside of the "library" folder. There are three folders entitled: "assets", "cml", and "gml". The "assets" folder stores any external media such as images and videos. Open up this folder and we'll see that it contains an image of the GestureWorks logo. The "cml" folder stores our application's cml files, and the "gml" folder stores our application's gml files. There exists one of each to get us started.
The "cml" folder contains a file called "my_application.cml". Open it up with notepad or some other text editor:
<?xml version="1.0" encoding="UTF-8"?>
<GestureWorksApplication version="1.0.0" gml="library/gml/my_gestures.gml" />
<GestureWorksApplication version="1.0.0" gml="library/gml/my_gestures.gml" />
The markup code you see here represents the required minimum needed for the CML to be valid and work correctly. Actually it contains one extra bit of information, a path to our application's gml file (we'll get to this next):
gml="library/gml/my_gestures.gml"
Notice that the file path is relative to our application's compiled directory, the "bin" folder.The "gml" folder contains the "my_gestures.gml" file. Open it up with notepad or some other text editor. Yes, there is a lot to this, but we don't have to worry about it now. For now just realize that it too is based on the XML standard and that it contains all the possible gestures and their settings which we can include in our application. NOTE: The GML file is not a requirement for GestureWorks 3 applications, but it is good practice to include one.
Now that we have our project directories set up correctly, we can get started setting up the project within the IDE.
Let's open up FlashDevelop 4.0 and create a new project:
File ? New ? Project
We'll need to adjust some of the settings within this dialog box.
First, click on the "AIR AS3 Projector" project type.
NOTE: You must create an AIR project for GestureWorks 3 projects in order to pass licensing verification. You can still embed the swf file that is generated from the AIR project into an HTML file and publish on the web.
Now, let's set the name of the project. We'll name it the same as the project folder that we created earlier:
Name: my_flashdevelop_template
We'll also set the "project location" to the project folder we created earlier:
Location: user/GestureWorks3/my_flashdevelop_template
The dialog window should now look like this:
Note that "fog" will be replaced by your own username.
Click "OK" to create the project.
Next, we'll need to link our project to the GestureWorks3.swc library file. Though there are several ways this can be accomplished, we'll cover just one. We'll link the GestureWorks3.swc library file through a project classpath.
Open up the "Project Properties" window:
Project ? Properties
Click on the "Classpaths" tab:
Click the "Add Classpath" button, and a browse prompt will appear. Navigate to the GestureWorks3 install folder and select the "lib" sub-directory.
The Project Classpaths should now include the Gesture Works 3 lib folder:
Note that the Project Classpath is defined through a relative link. This is the default behavior of FlashDevelop. The downside of this is you will have to re-link this library should you ever change the location of your template project. If this becomes tiresome, then you may want to use a Global Classpath instead. See the FlashDevelop documentation for more information on setting Global Classpaths.
If you haven't already, confirm the updates and close the "Project Properties" window. In the "Project" window, our newly added library is now shown:
Once we have added the Project Classpath, we have to formally add it our project library. Right click on the GestureWorks3.swc icon and select "Add To Library" from the pop-up menu. The "Add To Library" option should now be checked:
The last thing we have to do is set up our "Main" class file. The last thing we have to do is set up our Main.as file. We'll write a classic "Hello World" program just to verify that it's compiling properly.
Let's open the "Main.as" file using FlashDevelop 4.0 by double clicking on it in the "Project" window.
FlashDevelop 4.0 will have already created some stub code for us. Replace it with the following:
package
{
� � import com.gestureworks.core.GestureWorks;
� � import com.gestureworks.cml.element.TextElement;
� � public class Main extends GestureWorks
� � {
� � � � public function Main():void
� � � � {
� � � � � � super();
� � � � � � settingsPath = "library/cml/my_application.cml";
� � � � }
Ã? Ã? Ã? Ã? Ã?ÂÂ
� � � � override protected function gestureworksInit():void
� � � � {
� � � � � � var txt:TextElement = new TextElement;
� � � � � � txt.text = "Hello World";
� � � � � � addChild(txt);
� � � � }
� � }
} Let's look at the import statements one at a time:
import com.gestureworks.core.GestureWorks;
This is the superclass for every GestureWorks application. It is mandatory, and your main class must extend it like this:
public class Main extends GestureWorks
Lets return to the other import statement:
import com.gestureworks.cml.element.TextElement;
This 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:
public function Main():void
{
super();
settingsPath = "library/cml/my_application.cml";
}
First, it calls the superclasses' constructor:{
super();
settingsPath = "library/cml/my_application.cml";
}
super();
Then, it provides the path of the CML file by providing a value for its own settingsPath property:
settingsPath = "library/cml/my_application.cml";
Now let's look at the initialization callback:
override protected function gestureworksInit():void
{
var txt:TextElement = new TextElement;
txt.text = "Hello World";
addChild(txt);
}
Now, 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 the method. It is called by the GestureWorks class when
all the necessary files have been loaded and processed. In other words,
this is the callback that indicates when GestureWorks has been
initialized and is ready. We can think of this as our entry point.{
var txt:TextElement = new TextElement;
txt.text = "Hello World";
addChild(txt);
}
We've decided to print "hello world" to the stage, so we have the following body for the gestureworksInit method:
var txt:TextElement = new TextElement;
txt.text = "Hello World";
addChild(txt);
First, we created a text element called "txt":txt.text = "Hello World";
addChild(txt);
var txt:TextElement = new TextElement;
Then, we added the "Hello World" string to the text element's "text" property.
txt.text = "Hello World";
Finally,We added the display object to the stage:
addChild(txt);
We can compile our application in FlashDevelop 4.0 by clicking on "Test Project":Project ? Test Project