Open Source Flash Programming Tutorial

As a preface; this tutorial was written in February 2010. I have trudged through the wastelands of open source documentation in the past and often come across the wrinkly and burnt shells of extremely old documentation. My background is in building Flash applications that are used in visitor centers, the museum industry, and sometimes on the web. I do all of my personal, non-paid work with Flash using the methodology that I will describe in this article. If you regularly rely on the timeline when developing Flash applications, this methodology might be a bit rough for you.

Tutorial Goals

My goal in writing this tutorial is to cut through all the nonsense, acronyms, and misconceptions that go along with open source flash development in order to provide the methodology you need to get started. The first step in learning how to program Flash the open source way is to understand the technology landscape surrounding Flash. This methodology will probably not work for individuals focused on Flash frame by frame animation.

What is Lost When Using The Open Source Flash Methodology?

Before you have regrets about reading the rest of this article; we need to quickly compare the benefits and disadvantages of programming Flash the open source way. If you are still salivating about open source Flash after that, then this article is right for you.

Advantages
1. The development stack is completely free
2. It is easy to view the entire source code of a project
3. The Flash CS3/CS4 IDE is expensive

Disadvantages
1. The experience is extremely programmer oriented
2. It will take longer to get simple projects off the ground
3. Increased base swf file size (Adds about 200 - 300 Kb)
4. Graphical layout must all be done in code which takes a lot longer in some cases
5. Inability to use a graphical interface to draw shapes, gradients, and visually manipulate movie clips,buttons,etc.
6. All manipulation of the timeline would need to be done in code
7. Any tweening would need to be done in code

Definitions

Actionscript: This is the scripting language that goes along with Flash. Similar to C and C++ there are a few different versions of this language that have been improved over time. Code examples online will be in Actionscript 2 or Actionscript 3 and are often unmarked as to what version they are in. At the time of writing there is an excellent article at Wikipedia describing the history of Actionscript.

Actionscript 2: This is the previous version of Actionscript that in my opinion should be avoided at all costs. You are still able to compile code using Actionscript 2 in Swfmill, Flash CS4, and with the Flex SDK, but you should avoid this unless you are modifying legacy code. Actionscript 2 can be spotted from a mile away if you pay close attention to its event handling functions. You will often see anonymous functions dealing with mouse events.

Actionscript 3: This is the current version of Actionscript that is widely in use whether it be inside the Flash IDE in CS4, or encapsulated in special tags within Flex. Actionscript3's syntax has a very similar resemblance to Java. In my opinion if you are just getting started in Flash, this is the language you should learn because it can be utilized in all of the most recent forms of Flash development.

AIR: Adobe AIR is another set of libraries that gets stacked on top of Actionscript 3 that allows increased interaction with a native system. In order for an end user to utilize applications that include AIR classes, they must install the Adobe AIR framework. AIR provides non traditional functionality to Flash such as writing files, access to the webkit html browser in the form of it's htmlLoader class, limited access to a built in instance of the SQL Lite databse, functionality that allows multiple screen interaction, and a slew of other features specific to the native operating system. You can use the free Flex SDK to compile AIR applications. Flash Develop makes it even easier.

Debug Player: Adobe offers a set of stand alone flash players that will open on your desktop instead of inside a web browser. You can freely download "Debug" versions of these stand alone players that will help you spot errors that are thrown by your swf3's as you are developing them. The debug players will pop out a window when a script exception occurs so you can track it down.

Fla: A .fla file is a project file created by the Adobe Flash IDE. This file was probably created using Flash CS3 or CS4. You will run across tutorials that provide fla's for download. Unfortunately the open source way does not use the Flash IDE. There is no way that I currently know of to make use of a .fla file outside the IDE. These types of files should be avoided.

Flex: Contrary to what you might initially think about Flex you absolutely do not need Flex Builder. Flex is Adobes flagship in the open source realm. Anyone can freely download the Flex Source Development Kit(SDK) from their website. The SDK comes with a bunch of command line tools that may be tough for a beginner. Fear not, as there is an awesome free development tool that makes using the Flex SDK pretty simple. The tool is called FlashDevelop. In terms of the overall Flash development atmosphere, Flex works by adding a bunch of additional source code libraries on top of the core Flash development platform that you will natively use inside Flash CS3 or CS4. This will make your compiled Flash applications, or swf files about 200kb larger then they would be if you compiled them in the Flash IDE.

Flex SDK: The Flex SDK is a free collection of tools and files that can be downloaded from Adobe that will allow you to make swf files from your multimedia assets and code. Flash Develop and Flex Builder make use of the Flex SDK in order to alleviate the need to manually use a bunch of command line tools inside the Flex SDK.

Flash Develop: Flash Develop is in my limited opinion the tool to have if you are developing open source flash applications. I have used Flash Develop with the Flex SDK to develop my delayTest application as well as my current online Resume, as well as the user interface for my Flash Telepresence RC Car. The limitation with Flash Develop is that it is built on the Windows .Net 2.0 platform. However, as the website states, you can use it with virtualization tools on Linux or Mac OSX. You can start making Flex applications in a few minutes by downloading the Flex SDK, Flash Develop, the pointing Flash develop to where the Flex SDK is installed.

Flv: This is the dated flash video file container format. Older versions of the Flash Player had limited support for playback of other media types. Most of the high quality videos on the web you see today being played through the Flash Player are H264 endoced .mov, .f4v, or .mp4 files.

F4v: This is Adobes new flash video file container format. From what I have seen it's preformance is similar to mp4.

Java Script: This is an odd tutorial to mention Java Script in, but it has ramifications when looking at Flex tutorials on the web. You will find that along with MXML, the Flex SDK allows programmers to develop Flash applications using the popular web scripting language Java Script. I have not personally written any Flash applications using Java Script, so I am not sure what the complexities are that go along with using it in the Flex SDK.

MXML: MXML is a new programming paradigm that Adobe contrived that goes along with the Flex SDK. It is a form of graphical layout language with additional scripting features based on xml. You can embed chunks of actionscript 3 within mxml files. In my experience with mxml, you can layout graphical elements in mxml, but then their logic based interactions are handled in Actionscript 3. The delayTest source code can provide an example of this.

SWC: A swc is hard to understand if you are not coming from a programming background. A swc is similar to a dll in windows programming, and jar in java programming. It is basically a whole bunch of classes all packaged into one file that will allow you to use programming functionality without having to deal with several source code files. I think you can package media resources in a swc, but I honestly dont use them very often.

Swf: A swf file is the executable file that runs in the browser, or on your computer. When you use video players, neat websites, a wigit, or other application built on Flash, you are normally running a swf file using the Adobe Flash player or Adobe AIR framework.

Tutorial

Now that we have all the confusing terminology out of the way, I am going to show you how I currently develop open source flash applications. You will need Flash Deveolp and the Flex SDK in order to follow along. In the spirit of open source, these are both freely available.

Step 1 - Get the development software

Get the Flex SDK- At time of writing, the current SDK is 3.5. The SDK normally comes in a huge zip archive. Extract the archive to a permanent place on your machine. Take note that for the next step, I have put mine at: E:\Flash_Red5\flex_sdk_3.

Get Flash Develop - You need Windows for this. When installing Flash Develop I always ignore the registry entries. They have been troublesome in the past. The version I am taking screen shots of is 3.0.6 RTM.




Get Debug Flash Player(s) - The debug player will allow you to open your flash projects inside a self contained window, without having to open them in the browser. It will also show you runtime errors. This will save you time when you are working inside of Flash Develop. Put these in a permanent place as well. On Windows you want the "Projector content debuger".

Step 2 - Tell Flash Develop where the Flex SDK is

Once you have Flash Develop installed, open it and go to the Tools -> Program Settings option. A massive window will open with hundreds of settings. Go to the AS3 Context tab and you should find a "Flex SDK Location" option. Set that to the path that you have unzipped the SDK at. From the last step, you will recall that I put mine at: E:\Flash_Red5\flex_sdk_3

Step 3 - Tell Flash Develop where the Debug Flash Player is

Inside the same dialog window with hundreds of options under Tools -> Program Settings in Flash Develop you will find a section called "Flash Viewer". You can set Flash Develop to open your projects in the browser if you really want to, but I recommend pointing it to the debug player obtained in Step 1. Make sure to set the "Movie Display Style" to "External" as well.

There are several other settings in Flash Develop still available, but those are all you should need to get started. I‘ll now walk you through a simple program.

Step 4 - Start a New Flash Develop Project

You can start a new flash develop project by navigating to Project -> New Project in the main Flash Develop window. You will be presented with several template options. We are going to start a "Flex 3 Project" that mixes the use of Actionscript 3 and MXML.

If you are reading this tutorial, I realize that you may have not worked with MXML before. However, it is imperative that later on I show you how to embed resources inside of your project using MXML. It is easier then using a bunch of pure AS3 loaders to load all of your assets.

Name your project then pick a location for Flash Develop to create it. Several sub folders will be created in order to organize your assets, source code, and configuration files. I have named mine OpenSourceFlashExample and put it on my desktop.

Step 5 - What Have we Created?

After you create a new project, nothing will really happen except you will see on the right hand side a directory tree including the folders "bin", "lib", and "src". Your compiled code will be put in bin and your source code is stored in src. Look inside the src folder and open up the "Main.mxml" file.

Step 6 - Set the Usual Flash IDE Project Settings

When working with Flash CS4/CS3, there are options for frame-rate, window size, and background color along with compiler options and targeted Flash Player version. These can be set in your new project using the Flash Develop Project -> Properties settings. I am just going to leave them as they are.

Step 7 - First Get Hello World Working

Just like learning any method of programming, our first task is to get the iconic "Hello World" application working. Using this method of programming flash you can still use the well known "trace" functionality of Flash development. To achieve this, we need to insert some Actionscript 3 code into the "Main.mxml" file that will be executed when the program starts.

There are two tasks that we need to preform:
1. Insert a new line in the mx:Application mxml node that tells the application what actionscript 3 function to run when it first starts.

2. Insert a chunk of Actionscript 3 code containing that function. We insert our Actionscript 3 code using a mx:Script set of tags. You will notice I have already included the trace statement that will output our "Hello World!" message.

Step 8 - Compile and Run the Application

As long as you have configured the path to the Flex SDK and external debug player correctly, compiling your application should be relatively simple. You can either use the Flash Develop Project -> Test Project menu option, or simply hit F5.



If there were no compile errors in the Flash Develop Output window you should see output from the Flex compiler as it prepares your swf file.

This should be followed by the external Debug player popping a window open followed by the Flash Develop Output window showing your "Hello World!" trace statement.

If you did run into compiler errors, they will be shown to you in the Output window in red.

Take a look in the "bin" folder of your project. You will see a newly created swf file. Notice how big the file is even though it just traces "Hello World"? This is the overhead in file-size that I mentioned in the definitions section above when using Flex.

Step 9 - Adding External Assets

The ability to include external media assets into a Flash project is a major component of the Flash programming paradigm. There are a few different ways to include assets in this type of project. However, I am going to show you what I believe to be the most flexible way to load assets with the goal of being able to manipulate them in Actionscript 3, not MXML.

We will be including assets to be able to create a simple timer based slideshow that has background music of an mp3 file. Whenever someone clicks on the project, it will restart the slideshow + music. There are no transitions because I wanted to keep the code as basic as possible.

Bonus - Simple Pre-loading

There is a benefit with Flex in that it can automatically pre-load your Flash application using built in mechanisms. This only requires one line of code in the mx:Application node of the Main.mxml file.

You simply add: usePreloader="true".

I have already added this to the download for the source code of this tutorial.

Download The Entire Source Code

You can download the source code files for this project that will compile into the simple slideshow seen above.
Download the zip archive of the project here - 1.47Mb

The music is a public domain shortened version of "Diddie Wa Diddie" by Blind Blake. The song is available at Archive.org.