In this tutorial we will set up a Flowplayer Flash development environment. Flowplayer uses some “exotic” development tools that many Flash developers are not familiar with. For example, it uses Apache Ant for compilation and other build tasks. Here we will explain how to install all these tools and how to configure the build process. After reading this tutorial you should have all the required tools and libraries installed so that you can compile Flowplayer’s plugins, and also compile the player itself.
We need to install the following software in order to work on Flowplayer Flash plugins:
Flex 4.5 SDK
Java Development Kit (JDK)
In addition to these you will need a text editor or an IDE for editing ActionScript. Flowplayer does not force you to use any particular editor or IDE, you can choose your favorite. You can also use the Adobe Flash CS4 application for editing ActionScript, but that is not required. In fact, you will not find the typical .FLA files in any of the Flowplayer source packages because the compilation is done using the Flex SDK and Ant. Flash CS4 is not so good at editing ActionScript, but it’s good when authoring animation and Flash graphics, and we recommend it for those tasks.
One popular editor for ActionScript 3 is the Adobe Flash Builder. It has rich ActionScript editing features and does a much better job at it when compared to Flash CS4. It is a commercial product, but free evaluation versions are available. Other good IDEs are FDT and Intellij IDEA that both have support for Flex/Flash.
Note that Flowplayer is not a Flex application. The Flex compiler is used in compilation, but none of the Flex components or Flex classes are used in Flowplayer. Flowplayer is a Flash application implemented in ActionScript 3.
We'll next install the required software packages starting with the Adobe Flex SDK. The Flex SDK is a free Flex and Flash development kit and it contains the compilers that are used to compile the player and plugins.
Flex SDK Versions
The minimum Flex SDK version required is 4.5.1 which targets for Flash 10.1/10.2 and above with support for Stage Video features. For Flash 10.0 player targets, Flex 4.1 is required which provided support for Dynamic Switch Streaming features available in the Bitrate plugins and Streaming plugins. The newest version available is 4.6 for Flash 11 players.
You can download the Flex SDK from the following locations
- Flex 4.6 for Flash 11 and above
- Flex 4.5.1 for Flash 10.1 and above
- Flex 4.1 for Flash 10.0 and above with targeting
- Flex 3 for Flash 9 targeting
To specifically target for Flash 9 and 10.0 players using the specified SDK, two ant properties are available to disable Flash 10.1 specific features like Stage Video and in the rtmp plugin for specific version features.
After you have downloaded the zip file, unzip it to your desired
location. You will later need to reference this installation location
when you configure the Flowplayer build files. One good location for
it is your home directory, on my Mac I have it installed in
/users/api/flex_sdk and on my Windows machine it's in
E:\cygwin\home\Anssi\flexsdk. (Note that in this tutorial I'm not
working on Cygwin as the name of this Windows directory might
suggest. I can however recommend Cygwin because it makes the command
line experience in Windows much usable and efficient when compared to
the standard Windows command prompt.)
Let's verify that we installed Flex correctly. Open the command prompt (or terminal) and execute the following commands. I'm typing this on my Windows machine and the following goes to the Command Prompt:
I changed the working directory to the
bin subfolder contained in
the Flex installation folder. In that directory I ran the Flex
mxmlc. If you see similar output, you can be assured that
the installation was OK.
Note: Flex SDK by default omits traceback output. To enable its
omit-trace-statements setting to
true in the Flex
Java Development Kit (JDK)
We need a working Java Development Kit installation. You might already have it installed, and to verify this, type the following at your command prompt:
If you see similar output, the Java compiler has been found on your
system. If not, you need to download and install it. The Java SE SDK
is available here.
Download the installation program and run it. After the installation
is complete, verify the result by executing
javac again at the
command prompt. If
javac is not found, you will need to add the
bin folder to your
PATH) environment variable. I
have following included in my
Path on Windows:
The third and final tool that we need is Apache
Ant and also Ant
Contrib. Download the Ant binary
distribution and unzip it to your desired installation location. Next,
add Ant to your
PATH) environment variable, my Ant entry
E:\Program Files\apache-ant-1.7.1\bin. Next, verify the
Ant installation by running:
If you see similar output from Ant, you have it installed correctly. If not, follow the Ant installation instructions here.
To install Ant Contrib follow these instructions.
Obtaining the source code
The sources that are available in our repository in Github. To checkout the latest sources, run the following at your command prompt.
At this point, you should have a directory structure with
js-plugins located next to
each other in the
flash directory. It's time to
build.properties files to point to our Flex SDK
installation. Open up
core/build.properties or a global property file [userhome]/core.properties with your
favorite editor. Edit the
flexdir property that is found in the
beginning of the file so that it points to the location where you
installed Flex SDK:
As we are working on Windows, we need to also change the Flex executables to point to the Windows .exe files:
core/build.properties file contains references to
different plugins so that it's possible to build all the various
plugins into the player SWF. See this document for more information
about building plugins and configuration into the
player. Now we
need to make sure that we don't reference any plugins that we don't
have sources available in our workspace.
The final configuration is done to the
build.properties or a global property file [userhome]/plugin.properties that is used when building plugins. Open it in
your favorite editor and again change the
flexdir property to point
to your Flex SDK directory and
deploy_dir to point to the
Specifying which plugins to build
core/build.properties file contains a property
which plugins get compiled when you run ant in the
core directory. Change
this to suit your needs. Minimally you should have the controls plugin specified here
as the player needs the controlbar to work properly.
Running the build
Now that we have configured the player and plugins for compilation, it's time to
test how the compilation works. CD (change directory) to the
core and execute
ant at the command prompt:
The compilation produces lots of output to the console, and when it finishes we should see the following:
If you see "BUILD SUCCESSFUL", the build was successful and you have a
working player located at
you get "BUILD FAILED", something went wrong. It's possible that the
repository trunk contains a broken build and the compilation is
failing because of that. In that case, please send an email to support
To build the commercial version, run
ant build-biz. This resulting
Testing it out
The previous build also generates an example HTML file located at
core/build/example-free/index.html. You can open up that
file in your Web browser. It will load our freshly compiled
flowplayer.swf and open it up in the page.
Developing your own plugin
The easiest approach for implementing your own plugins is to follow
the same conventions and structure that is used by Flowplayer's
"official" plugins, one of which is the controlbar plugin that we just
compiled. These plugins all use the
compilation and other build tasks like building the distribution zip
files. Your plugin can also include graphical assets that you design
and create using the Adobe Flash CS application.
You should place your plugin into the
Let's take a look at the directory structure you should
have in your plugin folder - this structure should be followed so that
the devkit's Ant build file (
plugin-build.xml) knows where to look for the
different assets that are needed to build your plugin.
Here is the directory structure for plugins that use the
flowplayer.devkit/build.xml for compilation and other build tasks:
The root folder for different types of source files.
ActionScript source files.
Flash precompiled libraries to be included in the library path when compiling.
You can create the
build.xml file for your plugin by taking the
build.xml from the controlbar plugin and changing some of the
property values defined in it. The properties that you need to change
are all commented in the file shown below. Here are the relevant
parts of the controlbar plugin's