FoxR is designed to be a fast and flexible development framework providing all the basic infrastructure so that you can get started coding your Rich internet Application or Flash Web site right away.
For the first FoxR tutorial, we’ll start with downloading and installing both the framework and the Quick Start Project Template using both to creating an advanced “Hello World” movie. I say advanced because the Project Template includes everything you’ll need to get a compiling project setup fast, including the standard “Hello World” message.
You can find links to download all the tools featured in this tutorial in the appendix section.
Step 1: Download FoxR and the Project Template
Download the latest release of the FoxR library and the accompanying Project Template.
Download FoxR
Download Project Template
Step 2: Extracting your files
I’m going to break this out into a separate step because I think it’s important to note that since FoxR is designed to be a generic, reusable framework, it is best to keep the main library files for FoxR separate from your individual projects. This way you can use FoxR over multiple projects.
As a matter of personal work flow, I always sub categorize my code libraries (AS3, JS, PHP, etc) into release folders. I.E. I create a FoxR directory then a “0.1 Alpha”, “0.2 Alpha”, etc. This allows me to safely upgrade code libraries without breaking legacy projects that might be tightly tied to specific features that may have changed, been removed or cause serious conflicts. For the purpose of this tutorial, I’m going to keep things simple and not do this, but a good matter of habit to get into.
Step 3: Setting up your first project
How you set up the project depends mainly on what IDE you will be using to develop your application in. For this tutorial, we will be demonstrating the setup in three of the most popular ActionScript IDE applications:
The steps to extract the FoxR files are predominately the same across all these IDE’s, but setting up the project itself is a little different.
Flash Develop 3
Since FlashDevlop 3 is the main tool that I used to build the FoxR library, this is the first of the tools we’ll review.
To set up a new FoxR project with Flash Develop 3:
- Choose a directory to place your FoxR work. For this demo I’ve created a new folder in my “My Documents” directory called “As3 Projects”.
- Extract the contents of the FoxR library Zip file into this directory. You should see a folder called “FoxR_Alpha_0.2” which contains the library and all supporting files.
- Extract the contents of the FoxR Project Template zip file into the “As3 Projects” folder as well. You will see a folder called “New FoxR Project”
- Open the “New FoxR Project” folder and you will see three folders (deploy, flash and obj) and a file called MyProject.as3proj.
- Double click MyProject.as3proj to launch the project in Flash Develop and open the Properties dialog (Project > Properties)
- In the Output tab, you’ll see that Flash Player 9 is the target player and that the movie compiles to deploy/foxr.swf.
- On the classpaths tab, assure that the classpaths box contains the “flash” and “..FoxR_Alpha_0.2” directories. See Figure 1.
- If you are going to compile and test your FoxR project within FlashDevelop and have not set FlashDevelop up to do so, see this article on setting up Flash Develop to compile your movie.
- Otherwise, click Project > Build Project (F8) to test the build. If you receive no compilation errors then click Project > Test Movie (F5) to see the default project SWF.
- You should see a screen similar to figure 2. If so, your ready to proceed to Step 4.
(Click for larger Image)
Eclipse (with Flex/Flash Builder plug-ins)
The following project setup is for Eclipse based editors such as Flex 3, Flash Builder 4 (still in Beta at the time of this writing) or the standalone Eclipse IDE with one of the aforementioned plug-ins (as opposed to the standalone editors themselves).
For this tutorial I am using the standalone Eclipse with the Flash Builder 4 Beta 2 plug-in, though the steps we’ll be performing are compatible with any Eclipse based Fox tool editor.
- Since Eclipse uses work spaces to organize projects, decide if you want your FoxR library within your Workspace directory. For this tutorial, I will be not be doing this, extracting the FoxR library to a folder in “My Documents” called “AS3 Projects”
- Open Eclipse and launch the Flash perspective (Window > Open Perspective > Other… and Choose Flash
- Click File > New…
- In the New dialog, choose Flash > ActionScript Project
- Name the project “FirstFoxRMovie”, under Project Contents, save it in the default or a custom workspace, under Flex SDK version select use default SDK and click Next >
- On the Source Path tab, add the FoxR AS library to your project by clicking Add Folder… and browsing to the location of the library (for me this is “My Documents > AS3 Projects > FoxR_alpha_0.2”. Click OK and OK
- Under the files box, set the Main source folder property to “flash”, Main Application File to “FoxR.as” and the Output folder property to “deploy”
- Click Finish.
- Eclipse should have now created your new project. (Figure 3)
Flash Builder creates extra files we don’t need so you can safely delete the content of the flash folder. Now using Windows Explorer (or Finder for the Mac folks), browse to the projects directory in the Eclipse workspace. Open the “New FoxR Project.zip” file and extract the contents of the flash and deploy directories into your Eclipse project directory. Overwrite any duplicates. Now, let’s finish the Eclipse set-up.
- Return to Eclipse, right click on the FirstFoxrMovie project and refresh it. Your new files
should appear. - Under Flash > (default package) delete FirstFoxrMovie.as if it is present.
- Right click on the FirstFoxrMovie project and choose Properties…
- Choose “ActionScript Application” and click Add…
- Select FoxR.as and click OK
- In the ActionScript Application screen, click FoxR.as and click the Set as default button. Click OK.
- The main project window, rename “FirstFoxRMovie.html” to “FoxR.html”, open it, search for “FirstFoxrMovie” and replace it with “FoxR”. Save and close the file.
- Right click FoxR.as and choose Run As… > Web Application. NOTE: If this option does not appear, consult the Flash Builder documentation for help in setting up compiling options for the Flash Perspective.
- If the Flash movie appears in your default browser, your ready for Step 4
Flash CS4
Must to my own personal chagrin, getting up and running in the Flash IDE is actually the easiest of all the paths. If you leave the defaults you need just extract the files, confirm the settings and compile.
To begin setting up the project:
- Follow Steps 1-3 of the Flash Develop 3 process.
- Open the “New FoxR Project” folder and you will see three folders (deploy, flash and obj). open the “flash” folder and you will see the file FoxR.fla.
- Double click to open this file in the Flash IDE. NOTE: This FLAis saved in Flash CS3 format so Flash CS4 users may receive an upgrade warning if saving this file.
- Confirm the output and compiler settings are correct by opening the Publish Setting dialog (File > Publish Settings…)
- Under the formats tab, the file path for the Flash format should be “../deploy/foxr.swf”
- Under the Flash tab, next to Script, assure “ActionScript 3,0” is selected and click Settings.
- Assure that “./” and “../../FoxR_Alpha_0.2” are listed on the classpaths tab. Click OK.
Flash Classpath Settings
- Click OK on the Publish Settings dialog.
- Test the movie (Control > Delete ASO Files and Test Movie).
Step 4: Changing the default movie text
Now that we have our FoxR project up and running, the next step will be to dive in and start customizing the default template. In Part two of lesson 1, we will look under the hood of the project template and see how FoxR handles copy, styles and movie settings. Stay tuned!
Appendix: Asset Downloads
Download the tools featured in this tutorial:
Flash Develop 3
Eclipse
Flash Builder 4 Beta
Flash CS4 Trial
