Setting Up visp in Adobe® Flex Builder™ 3

Updated Jan. 22, 2008: This tutorial is not yet compatible with the Flex Builder 3 Public Beta 3. If you’ve been working with Flex Builder 3 through its public beta releases, these instructions should still be pretty applicable.

Overview

This tutorial covers the basics of getting the source code of visp set up as a project in Adobe® Flex Builder™ 3 so that you can browse, edit, and compile. If you haven’t done so yet, download the source code from the Download page.

Please note that I actually use the Adobe Flex Builder 3 Plugin for Eclipse 3.2, so these instructions may vary a bit if you’re using the standalone Adobe Flex Builder 3 application.

Setting Up the Project

  1. Download the visp source code and extract its contents to a temporary folder.
  2. In Flex Builder, create a new Flex Project.
  3. Name the project “Visp”. For Project Location, put the project wherever you like. For Application Type choose “Desktop application”. Server type should be “None”. Click Next.
  4. Use the default Output Folder of “bin”. Click Next.
  5. Rename the Main Source Folder to be “flex_src”.
  6. Click Finish.

At this point, you will have a new AIR project with a bunch of files that we don’t want.

  1. Delete the Visp.mxml and Visp-app.xml files.
  2. Find the temp folder of assets that were in the source code ZIP file (in Finder on Mac or Explorer on Windows). Copy the contents of that temp folder into your Visp Flex project in Flex Builder simply by dragging them into the project folder within the UI of Flex Builder. It will prompt you with “Visp/flex_src exists, do you want to overwrite?” Choose Yes.
  3. Delete all files inside the bin folder.

At this point, we’ve imported the source code, but we still need to tell it what the main application is.

  1. Right-click / Ctrl-click on your Visp project folder and choose Properties.
  2. Choose Flex Applications from the left panel. Click Add….
  3. Choose Visp.mxml and click OK.
  4. Click on the Visp.mxml file in the Properties screen and click Set As Default on the right.
  5. Then click OK on the Properties screen.

At this point you will be able to compile visp, but there’s one more finishing touch. By default your project will have created a bin folder, where all the compiled binary files will be placed. We need to add the application icons that will be used by the OS when we create an AIR package.

  1. Find the assets folder inside your Visp project.
  2. Copy the appicon folder within the assets folder into the bin folder.

Compiling visp

This part’s really easy. Just right-click / Ctrl-click on the Visp project folder and choose Debug As > Adobe AIR Application. You can also choose Run As > Adobe AIR Application.

Please note that when you compile visp, the Alpha Trail filter, the Fade transition and the Blur Fade transition are not included. You will need to download each of their source code archives (or get them via SVN) from the visp Google Code Project. Included in the downloads are the precompiled modules as well.