Neil Petrick

This tutorial is aimed at beginners and those who use Adobe's IDE to develop. If you already use FlashDevelop, or are confident enough in your IDE of choice to use my source code, feel free to skip this tutotorial. My development environment of choice is FlashDevelop for a variety of reasons. Its free, it is well documented and it has many plugins available. Additionaly, it has many useful features such as:

• Auto-Completion
• Jump to declaration
• Configurable short-cut keys
• ASDoc Support for both generation and code hinting
• Project exploration and management panes
• Configurable viewports( able to have documents side by side )
• Comment block folding including ability to specify regions
• Extensive template and snippet support

And these are just some of the things I use on a daily basis. There are other reasons I like FlashDevelop as well but ultimately the reason for this (hopefully) short tutorial is not to convert others but simply to provide a common place to start for those who don't know, as well as a way for me to only have to support one development toolchain. With that in mind, lets get started!

Prerequisites

• FlashDevelop - Of course, get it here.
• Debug Flash Player - After downloading you'll need to run it at least once to associate .swf files with it. I reccomend getting both the projector and web plugin( AX for IE, and Adobe classes Firefox as a netscape compatible browser. ) Get it here.
• Flex SDK - My advice, just get a stable build unless you know what you are doing. Get it here.
• Java SDK 1.6+ - Sun has a lot of different versions available which can get confusing. Just download the JDK(Java Development Kit) SE, at time of writing version 6 update 18 is the most current. Get it here.
• TIME!!! Sorry, don't have a download link for this one yet...

Ok, now that you are all set you'd think the next thing to do is start a new Project. You're almost right, a quick word about folder structure is in order first. Folder structure is very important in any work flow and any programmer will tell you this. However, even though I'm a flash programmer I don't follow Adobe's best practices for flash package/folder structure. Instead I follow the approach I used when developing for C++. My folder structure runs something like this.

• Personal Projects
  • Flash
    • Specific Project
      • bin
      • src
      • assets
    • Shared
      • Core
      • External Libraries

This allows a clear seperation of core code from project specific code, and an easy way to switch between projects too since the project file lives in my Flash folder.

Now, onto the project itself. A picture is worth a bunch of words so I'll lead with that.

I know, its hard to read and its small... but you have FlashDevelop open right? No? If you seriously don't then please open it. The start page greats you with its abundance of information, just look for the 'create project' link. Or alternatively create a project from the 'Project' menu option, you're call. Once the project wizard opens up though, you should have something like the image above. Select AS3 Project, name it something you can live with( I chose to call it DynamicShadowTutorial? but that's just so I have something for the screenshots, ) and navigate to your folder structure we set up earlier. Make sure you check 'Create directory for project' or else you'll have files in wierd places. Of course, if you already set up the project directory then you can skip this step and just select that in the browse window.

Once the project is created you should have something similar to what I listed above. You still have to create an assets folder but that can wait if you are feeling lazy. What can't wait is the moving of the project file itself... There are other ways to do this but in this case it is easier to explain the moving of one file as opposed to a directory structure. To accomplish this with the minimum of fuss, close the project in FlashDevelop( via the 'Project' menu option. ) Then copy/paste, cut/paste or just plain drag between 2 windows to get the project from out of the 'DynamicShadowTutorial' directory and into the one above it... which if you've been following should be the 'Flash' directory. Now, reopen this in ))FlashDevelop and you should see your project directory open in the Project pane. The reason for doing this is really simple... you can now create additional projects using the same method and your .as3proj files will all show up in the project pane. Double click on one and you have now just switched projects without having to close anything down. Plus, you now have access to the Core files from within all your projects and can share common code very easily.

If all is set up correctly you should be able to put a simple

trace( "Hello World" );

and then hit either F5, ctrl-Enter or the run button on the menu bar. You'll know it worked and that you have the debug version running if you see a nice trace statement in the output window. If not, I direct you to the FlashDevelop? forums for the answer, or comment here with your problems and I'll see what I can do.

That's it for now. I'll cover blend modes in the next tutorial and how these can apply to lighting.