I have mentioned the free open source flash video player FlowPlayer before in my post about adding cuepoints and create flash videos. It is a great free flash video player that you can modify yourself. After writing about adding metadata to your flash videos I decided to add support for calling javascript from FlowPlayer one cue events. The first step to modifying the FlowPlayer source is to be able to build FlowPlayer from source.
FlowPlayer is created using a number of different open source Flash tools. Here is a list of the tools you will need:
- Ant – This is used to build the source. It along with a few of the other packages require java to run.
- AS2Ant – An AS2Lib build tool.
- AS2Lib – An ActionScript 2.0 application framework.
- SWFMill – Creates SWF files from XML definitions.
- MTASC – An open source Actionscript compiler.
- luminicbox.log – A logging framework for Actionscript.
If you want to find out more about these tools you can use osflash.org as a great open source flash resource.
Now that you know what you need it is time to get the source. You can either check it out from the FlowPlayer CVS repo or download the FlowPlayer source distribution.
The following shows how I went about gather all the tools and source for the build. I assume here that you have java already installed.
[code lang=”text”]
cd /tmp/
mkdir flowplayer
cd flowplayer
wget http://apache.mirrors.tds.net/ant/binaries/apache-ant-1.7.0-bin.tar.gz
tar xvzf apache-ant-1.7.0-bin.tar.gz
export ANT_HOME=/tmp/flowplayer/apache-ant-1.7.0/
mkdir aux
cd aux
wget http://umn.dl.sourceforge.net/sourceforge/as2lib/as2ant_2.2.zip
mkdir as2ant
cd as2ant
unzip ../as2ant_2.2.zip
cd ..
wget http://umn.dl.sourceforge.net/sourceforge/as2lib/as2lib_0.9.3_with_dependencies.zip
mkdir as2lib
cd as2lib
unzip ../as2lib_0.9.3_with_dependencies.zip
cd ..
wget http://swfmill.org/releases/swfmill-0.2.11.tar.gz
tar xvzf swfmill-0.2.11.tar.gz
cd swfmill-0.2.11
./configure
make
cd ..
wget http://www.mtasc.org/zip/mtasc-1.12-linux.tgz
mkdir mtasc
cd mtasc
tar xvzf ../mtasc-1.12-linux.tgz
sed -i ‘/function onStatus/ i\ function onCuePoint(info:Object):Void;’ std/NetStream.as
cd ..
wget http://www.luminicbox.com/dev/flash/log/luminicbox.log.zip
unzip luminicbox.log.zip
cd ..
cvs -d:pserver:anonymous@flowplayer.cvs.sourceforge.net:/cvsroot/flowplayer login
cvs -z3 -d:pserver:anonymous@flowplayer.cvs.sourceforge.net:/cvsroot/flowplayer co -P flowplayer
cd flowplayer
[/code]
Now you have everything you need to build FlowPlayer and you are in the flowplayer source directory. The next step is to change the build.properties file to point to your build tools. If you have followed the above procedure here is a build.properties file that will work:
[code lang=”text”]
AS2ANT_LIB=../aux/as2ant/as2ant.jar
LUMINICBOX_DIR=../aux/LB.Log
AS2LIB_SRC_DIR=../aux/as2lib/src
// plug-in classes for as2lib unit test and asunit to be used with the unit test task
AS2ANT_UNITTEST_DIR=../aux/as2ant/flash
ASUNIT_DIR=../aux/asunit/as25
UNITTEST_FLASHPLAYER=
STD_LIB=../aux/mtasc/std
STD8_LIB=../aux/mtasc/std8
MTASC_BIN=../aux/mtasc/mtasc
SWFMILL_BIN=../aux/swfmill-0.2.11/src/swfmill
// Uncomment following if you want to copy the files to some dir after building
//DEPLOY_DIR=../flowplayer-web/video
[/code]
After modifying the build.properties file you are ready to build.
[code lang=”text”]
/tmp/flowplayer/apache-ant-1.7.0/bin/ant
[/code]
After the build is complete you will find FlowPlayer in the build directory ready to be used.
Now that you can build FlowPlayer lets modify it so a javascript function gets called when a cuepoint is hit. To do that you will need to edit the file:
src/actionscript/org/flowplayer/FLVController.as
Add the following to the import section:
[code lang=”text”]
import flash.external.ExternalInterface;
[/code]
Now find the line in the same file that defines the cuePointCallback function, search for “function cuePointCallback” and add the following line after the function definition:
[code lang=”text”]
ExternalInterface.call(“fpCuePoint”, cuePointInfo.parameters.mydata);
[/code]
The above assumes the parameter you want to pass to your function is called “mydata” in your cuepoint. You can then define the javascript function in the page and retreive the data as each cuepoint is hit.
[code lang=”javascript”]
function fpCuePoint(data)
{
alert(data);
}
[/code]
[tags]FlowPlayer, flash, flash video[/tags]
This is really good information.
Note that currently the CVS HEAD branch contains sources that are being ported to ActionScript 3.0. This effort is currently in progress and you need different tools for building it.
The sources that correspond to the insctructions presented here must be checked out from fixes_1_11 branch:
cvs -d:pserver:anonymous@flowplayer.cvs.sourceforge.net:/cvsroot/flowplayer co -r fixes_1_11 -P flowplayer
// Anssi
As of june 2007, swfmill has released 0.2.12 which will lead to a successfull build but to a broken swf as well. Stick to swfmill 0.2.11.
Very good instruction. I tried to digg it, but the site tells me “topic is invalid”. Ain’t getting it. Maybe I just can’t dig a thing.
On the subject of swfmill version, the readme file from flowplayer said the same thing, that swfmill 0.2.12 does not work. But I am NOT able to build it at all with swfmill 0.2.11, but only with 0.2.12; with the rest following exactly as above. I am wondering if it has to do with libxlt version. Here are mine:
libxslt.i386 1.1.21-1.fc6 installed
libxslt-devel.i386 1.1.21-1.fc6 installed
Getting an error aroung “alert” for the function function fpCuePoint(data)
{
alert(data);
}
while building. Could you please let me know the reason?
Pingback: 2fkd » Blog Archive » Building FlowPlayer from Source on Mac OS X
Answering “deb” at February 19th, 2008 at 4:17 am:
this function is a sample javascript callback, it should be in your webpage, not in Flowplayer
Could you guide me build FlowPlayer 3.0.0 from source?
I use cygwin, java 6, apache ant 1.7.0 and Flex SDK 3 on Window
I encountered these errors, one can point me in the right direction?
$ant
Buildfile: build.xml
check-uptodate:
[echo] main up-to-date: ${uptodate.main}
[echo] main up-to-date: ${uptodate.commercial}
[echo] lib up-to-date: ${uptodate.lib}
build-lib:
prepare:
compile-lib:
[exec] Loading configuration file C:\flowplayer\flex_sdk_3\frameworks\flexconfig.xml
[copy] Copying 1 file to C:\flowplayer\bild
[copy] Copying 1 file to C:\flowplayer.devkit
plugins:
[subant] No sub-builds to iterate on
build:
prepare:
compile:
[echo] Building binary flowplayer.swf
[exec] command line: Error: configuration variable ‘compiler.define’ expected 2 argument(s), got 1
[exec] Adobe Compc (Flex Component Compiler)
[exec]
[exec] Use ‘mxmlc -help’ for information about using the command line.
[exec] Result: 1
BUILD FAILED
C:\flowplayer\build.xml:64: The following error occurred while executing this line:
C:\flowplayer\build.xml:78: Warning: Could not find file C:\flowplayer\build\flowplayer.swf to copy.
Total time: 25 second
Thanks for all the help!
Build succeeded. Thanks. I had to download asunit and flowplayer.devkit but there was no problem.
These instructions are working 12/09. Grab latest files from SVN. Works better than trying to use files from src zip files.
http://flowplayer.org/documentation/developer/development-environment.html
(Note on this tutorial, you’ll need to check out the extra control, content, etc, subfolders from SVN as well)