FlashDevelop: The Basics

Over the past couple weeks of research and practice, I’ve learned a few things about my workflows and how to improve them. When I was doing research on Box2D, I ran across an awesome set of video tutorials which introduced me to using FlashDevelop for more than just a basic code editor. FlashDevelop is an open source IDE designed specifically for the Flash platform (AS2/AS3), although it supports other languages, too. With FlashDevelop you are able to create and organize your Flash projects and easily import and use external libraries with some excellent code hinting and shortcuts.

Since FlashDevelop has helped me so much and I feel stupid for not realizing its true potential before, I thought I would share what I have learned through a quick tutorial on how to set up FlashDevelop to work with a Flash Professional project and how to link to an external library without having to make a copy of the library. In order to keep this brief, I will only cover these two simple but AWESOME topics.

First, starting FlashDevelop and creating a project. First, if you haven’t already, go and install FlashDevelop. It’s a quick, simple and pain free install, thankfully. When it’s done, open FlashDevelop up. To start, go to the Project menu in your main menu bar and select New Project. In the New Project window, give your project a name and make sure you have Flash IDE Project selected in the ActionScript 3 category. When your settings are good to go, hit OK.

FlashDevelop's New Project window

FlashDevelop's New Project window

What FlashDevelop creates in the directory is fairly simple. It creates a .as3proj file, which when double clicked in the Windows Explorer, will open up FlashDevelop with all your project’s files ready to go. Now, it’s not much of a Flash Professional project without an actual .fla file, so open up your version of Flash Professional, create file and save it in the same directory as the .as3proj file. When this is done, your FlashDevelop’s Project window will automatically update, showing your .fla file in your directory structure!

Now, to add a class to run our FLA, go to FlashDevelop, right click on the folder for your project in the Project window, go to the add menu selection, and select New Class. This will give you a window that allows you to do exactly that, add a new class!

Add File and Browse for Base Class

Add File Dialogue and Browse for Base Class

One really cool thing about this is you can not only define the package and name of the class, but the browse button will assist you in finding the exact path for a base class, if you need one. Since this is my base class for my FLA, I chose to extend MovieClip. When you are all done, hit OK and the class will be created and saved in your file structure. Make sure to go into Flash Professional and switch your stage’s Class before you forget.

Next, I am going to import TweenLite into my project so I can make a ball move, so in your FLA, make yourself something that you can animate, make it into a symbol and export it to Actionscript with a good name (I used Ball, with a base class of Sprite).

Now, an important step: Linking TweenLite to both your project and the FLA. This goes in two steps, because both FlashDevelop and Flash Professional need to know where the library is located. I could just copy my TweenLite directory and paste it into my project’s directory, however there is a much easier way of doing this that doesn’t involve keeping twelve copies of a library around your computer.

Adding Classpaths Windows

Adding Classpaths Windows in FlashDevelop

To start, create an easy to find folder that will store all of the libraries you use often, such as TweenLite, Papervision or Box2D. I called mine FlashUtilities and placed it inside of my Documents folder. When you have the folder created and you have your libraries inside of it, it’s time to link it to your project. To start, go into FlashDevelop and go to the Project menu and select Properties. Go into the Classpaths tab and select Add Classpath. In this window you want to select your FlashUtilities folder and not the library itself. You can also do this for global classpaths if you use these libraries often. When you’re done, hit OK until you’re back to your code!

Add Classhpath window in Flash Professional CS5

Add Classhpath window in Flash Professional CS5

Next, in order for the FLA to be able to see your libraries, you also have to link them from the FLA. To do this, go to Flash Professional, select the File menu and go into Publish Settings. Go to the Flash tab and hit the Actionscript 3 Settings button. Then in the Source path tab, select the folder icon and select your FlashUtilities folder, again. Hit OK until all the menus are closed, and you’re set! If you check your Project window in FlashDevelop, you should see a lego-block icon that is your FlashUtilities and inside of it should be any libraries you brought into the folder.

Next, write a bit of code to verify that your TweenLite works.

Oh, no! I forgot to import my classes! With FlashDevelop, I don’t have to worry, thankfully. With my libraries linked, I can put my cursor into the class name, TweenLite, anywhere in my file and hit CTRL+SHIFT+1. It will automatically import the proper class in my import statements. I can also do this for the easing function (Back), and select the Back class in the TweenLite library.

Thank you for reading!

Comments are closed.