Compile FlowPlayer and add a simple button tutorial


First of you need to have the following:

ANT: http://ant.apache.org/bindownload.cgi

Flex SDK: http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3 (download the latest 3.+ build)

Java SDK: http://developers.sun.com/downloads/ (or google “java SDK”)

now you need to place all of them in a folder and extract

Next step is to add those as environmental variables, at PATH(if it doesn’t exist create it) add all the paths to the SDK bin folders separated by ;

to verify each installation go to command prompt and type:

ant -version

mxmlc -version

javac -version

if you see results to all 3 you’re good to go.

COMPILING CONTROLS SOURCE CODE (without any changes for now)

You need the flowplayer.devkit, and the controls plugin, as well as the flowplayer source code witch contains an example to test your builds.

All of these are provided by the flowplayer website, it might take a while searching for them but its worth it.

once you download all, extract them, and place the plugins.controls folder inside the flowplayer.devkit/flowplayer.devkit folder

next you’ll need to checkout some code from the svn, I use toirtoise svn: http://tortoisesvn.net/downloads once you install go to the above folder and check out:

http://flowplayer-plugins.googlecode.com/svn/flash/common/trunk/

http://flowplayer-plugins.googlecode.com/svn/flash/controls/trunk/ (if you don’t have flowplayer.controls yet).

Now on to the configuration (we’re getting there soon…)

go to the devkit folder which contains “plugin-build.properties”

# you need to adjust following to point to your Flex SDK
flex3dir=C:/SDK/flex_sdk_3.5.0.12683

# change this if you want the compiled plugin to be copied to some dir
deploy_dir=C:/SDK/TEST

# change following to point to .exe files when running on Windows

mxmlc_bin= ${flex3bindir}/mxmlc.exe

compc_bin= ${flex3bindir}/compc.exe

asdoc_bin= {flex3bindir}/asdoc.exe

# following can usually be left as they are

flex3bindir=${flex3dir}/bin

flex3libsdir=${flex3dir}/frameworks/libs

flashplayer_bin=

framerate=31

bgcolor=0xFFFFFF

width=500

height=350

next we go to the flowplayer.controls folder and edit the “build.xml” and change the following code block:

<!– location of the skin swd, anc swc –>
<property name=”library-path” value=”src/flash/air” />

<property name=”extra-sources” value=”../common/src/actionscript” />

<property file=”../plugin-build.properties” />
<import file=”../plugin-build.xml”/>
<property name=”flowplayer_lib” value=”../flowplayer.swc” />

<property name=”plugin-binary” value=”${basename}.swf” />
<property name=”plugin-binary-versioned” value=”${basename}-${version}.swf” />
<property name=”plugin-main-class” value=”org/flowplayer/controls/Controls.as” />
<property name=”compiler-define” value=”CONFIG::skin,’true’ -define=CONFIG::hasSlowMotion,’false'” />

on a side note if you want to compile the tube skin, it usually is missing the dragger component, so you’ll need to recompile the tube.fla adding the dragger icon.

go to command prompt and navigate to the flowplayer.controls folder, and type “ant” you should see some text and finaly “BUILD SUCCESSFUL” if not go up and try to identify the error, usually it tells you which line to look and which file.

Adding a button to the flowPlayer with ActionScript:

First of you’ll need to create the graphic for the button: go to Flash Professional and open one of the sample .fla in the flowplayer.controls/src/flash

add a new symbol and draw you graphic or simply add a picture (make sure the dimensions match the other graphics) name it and save it as a movieClip of the class fp.buttonName in the Skin Classes tree

now create the same graphic and save it as symbol with the name buttoNameIcon in the Symbols tree.

now export your build as a movie .swf and replace the old .swf

Now… some coding much occur…but fear not!

the files we are going to edit are:

Controls.as

SkinClasses.as


Tooltips.as


WidgetBooleanStates.as


and we will create the buttonName.as

first we create the class for our button, for showcase reasons I used a button named “gBtn” which when clicked opens a browser in the google home page (my idea of a Hello World)

package org.flowplayer.controls.button {

import flash.display.DisplayObjectContainer;

import org.flowplayer.controls.config.Config;

import org.flowplayer.controls.button.AbstractButton;

import org.flowplayer.view.AnimationEngine;

/**

* @author api

*/

public class gBtn extends AbstractButton {

public function gBtn(config:Config, animationEngine:AnimationEngine) {

super(config, animationEngine);

}

override public function get name():String {

return “google”;

}

override protected function createFace():DisplayObjectContainer {

return SkinClasses.getgBtn();

}

override protected function get tooltipLabel():String {

return config.tooltips.gBtn;

}

}

}

now lets change some source code!

SkinClasses.as:

private var gbtn:fp.gBtn; //buttonName for you if you havent named your button “gBtn” too…

public static function getgBtn():DisplayObjectContainer{

return getDisplayObject(“fp.gBtn”) as DisplayObjectContainer;} //at the end of the file

Controls.as:

import org.flowplayer.controls.button.gBtn;

//at createChildren add:

_gBtn = addChildWidget(createWidget(_gBtn,”google”,gBtn,_config,animationEngine),ButtonEvent.CLICK,goToUrl);

//launcher

//gbutton implementation

private function goToUrl(evt:ButtonEvent):void{

navigateToURL(new URLRequest (“http://www.google.com”),”_blank”);

}

//at lastOnRight function add:

if (_gBtn) return _gBtn; //first, yes we are adding it at the right place of the controlBar

//finally at arrageRightEdgeControls(leftEdge:Number) edit:

rightControls = [_gBtn,_fullScreenButton, _volumeSlider, _muteVolumeButton, _timeView];

ToolTips.as

private var _gBtn:String = “google”;

public function get gBtn():String{

return label(_gBtn);}

public function set gBtn(gBtn:String):void{

_gBtn = gBtn;}

WidgetBooleanStates.as

private var _properties:Array = [“play”, “stop”, “mute”, “volume”, “time”, “scrubber”, “playlist”, “slowBackward”, “fastBackward”, “slowForward”, “fastForward” , “fullscreen”,”google”];

public function set google(google:Boolean):void {

_values[“google”] = google;

}

[Value]

public function get google():Boolean {

return value(“google”,true);

}

now you’re good to go! Recompile the code as you did before and place the producted .swf flowplayer.controls-3.2.1-dev.swf (name it:flowplayer.controls-3.2.1.swf) and replace the existing on the example.

you might also want to enable all controls to see your new button, or simple enable it:

<script>

flowplayer(“player”, “../flowplayer-3.2.2.swf”,

{

plugins:{

controls:

{

gBtn:true

}

}

});

I hope this will clear some things about the flowplayer which is an awesome player idd.

(if you notice any typos or general mistakes please let me know)

have fun!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin
Bookmark the permalink.

14 Responses to Compile FlowPlayer and add a simple button tutorial

  1. Rom says:

    Hi

    Was trying to follow this tutorial, did everything exactly the same.
    Added on Controls.as

    private var _gBtn:DisplayObject;// or _gBtn:gBtn;

    everything compiled but when adding as a plugin, it wont load.

    controls:{ url:"flowplayer.controls-3.2.1.swf",
    gBtn:true
    },

    Did i miss something?

    Great tutorial if it works.
    Thanks

  2. @Flex says:

    the way to add as a plugin is the following:
    flowplayer("player", "../flowplayer-3.2.2.swf",{plugins:{controls:{gBtn:true}}});

    it gets kinda complicated with the multiple {} i know. give it a try like this. Let me know if you need any more help.

  3. Rom says:

    I got this working.
    First of all the class name should be in capital.

    GBtn.as

    package org.flowplayer.controls.button {
    import flash.display.DisplayObjectContainer;
    import org.flowplayer.controls.config.Config;
    import org.flowplayer.controls.button.AbstractButton;
    import org.flowplayer.view.AnimationEngine;

    public class GBtn extends AbstractButton {

    public function GBtn(config:Config, animationEngine:AnimationEngine) {

    super(config, animationEngine);

    }

    override public function get name():String {

    return "bitrates";

    }

    override protected function createFace():DisplayObjectContainer {

    return SkinClasses.getGBtn();

    }

    override protected function get tooltipLabel():String {

    return config.tooltips.gBtn;

    }

    }

    }

    Thank you so much…

    This is the only tutorial that i found and works..

    Now i just need to make figure out how to play different bitrates upon clicking this button. 🙂

  4. elbjoern says:

    Can you may be upload a zip-file with the complete source you are using?
    That would help a lot. Thanks and cheers,
    elbjoern

  5. @Flex says:

    Ok then here it is, you can find a working example here: http://www.netgfx.com/testing/player/
    (with viral controls and custom skin)

    and the source files here:
    http://www.netgfx.com/testing/player/flowplayer.devkit-3.2.0-FINAL.rar
    and Release Files here:
    http://www.netgfx.com/testing/player/releaseFiles.rar

  6. elbjoern says:

    Thanks, that was pretty fast.
    Unfortunately I thought that it would compile the flowplayer.swf as well. But it is not right? Do you know how I can do that?
    Cheers,
    elbjoern

  7. @Flex says:

    If you unzip the source files in a folder and then open command prompt or terminal, navigate to that folder into the flowplayer.controls folder and run "ant" command it will compile.
    Unzip the source and follow the tutorial 😉

  8. elbjoern says:

    I did that and as you can see it is compiling the flowplayer.controls.swf but not the flowplayer.swf / the player itself.

    C:\flowplayer.devkit\flowplayer.controls>ant
    Buildfile: C:\flowplayer.devkit\flowplayer.controls\build.xml

    build:
    [echo] ++ flowplayer.controls.swf +++
    [echo]

    prepare:
    [unzip] Expanding: C:\flowplayer.devkit\flowplayer.swc into C:\flowplayer.de
    vkit\flowplayer.controls\build

    compile:
    [echo] compiling with src/flash/air
    [echo] compiling with -define=CONFIG::skin,'true' -define=CONFIG::hasSlowM
    otion,'false'
    [exec] Loading configuration file C:\flex_sdk\frameworks\flex-config.xml
    [exec] Failed to match the compile target with C:\flowplayer.devkit\flowpla
    yer.controls\build\flowplayer.controls.swf.cache. The cache file will not be reu
    sed.
    [exec] C:\flowplayer.devkit\flowplayer.controls\build\flowplayer.controls.s
    wf (37871 bytes)
    [copy] Copying 1 file to C:\flowplayer.devkit\flowplayer.controls\build

    deploy:

    _deploy:
    [echo] deploying plugin to C:/flex_sdk/DEPLOY
    [copy] Copying 1 file to C:\flex_sdk\DEPLOY\build
    [copy] Copying 1 file to C:\flex_sdk\DEPLOY\build
    [copy] Copying 1 file to C:\flex_sdk\DEPLOY\dist

    BUILD SUCCESSFUL
    Total time: 4 seconds

    Is that possible?

  9. @Flex says:

    oh so you want to compile the core .swf…
    well i think it is possible ofc but you might wanna take a look at flowplayer.devkit i think it is there or at the core .zip file. I just played with the default for my examples, and only did modifications to the plugins.

  10. Laura says:

    Hello
    I get this error and i dont know how to solve it

    BUILD FAILED
    C:\flowplayer.devkit-3.2.0\flowplayer.devkit\plugin-build.xml:207: The following
    error occurred while executing this line:
    C:\flowplayer.devkit-3.2.0\flowplayer.devkit\plugin-build.xml:31: The following
    error occurred while executing this line:
    C:\flowplayer.devkit-3.2.0\flowplayer.devkit\plugin-build.xml:198: The following
    error occurred while executing this line:
    C:\flowplayer.devkit-3.2.0\flowplayer.devkit\plugin-build.xml:80: exec returned:
    1

  11. Hm… This is a rather old tutorial and I’m sure that Flowplayer has made many changes since this was written. But I might help if you can show a bit more about the error. Does it print anything else?

  12. Laura says:

    Im using the files that flex provided it was because of the version of sdk, i changed the version and i downloaded the devkit provided by flex, and i managed to compile without any errors. after that i deteleted this 2 files buttons_modern.swf buttons_modern.swc and exported as a movie clip the buttons_modern.fla without any modifications made by me.. and tryed to recompele it again and i get this error now
    otion,’true’
    [exec] Loading configuration file C:\sdk\frameworks\flex-config.xml
    [exec] C:\modern\flowplayer.devkit\flowplayer.controls\src\actionscript\org
    \flowplayer\controls\button\SkinClasses.as(33): col: 24 Error: Type was not foun
    d or was not a compile-time constant: gBtn.
    [exec]
    [exec] private var gbtn:fp.gBtn;
    [exec] ^
    [exec]

    BUILD FAILED
    c:\modern\flowplayer.devkit\plugin-build.xml:207: The following error occurred w
    hile executing this line:
    c:\modern\flowplayer.devkit\plugin-build.xml:31: The following error occurred wh
    ile executing this line:
    c:\modern\flowplayer.devkit\plugin-build.xml:198: The following error occurred w
    hile executing this line:
    c:\modern\flowplayer.devkit\plugin-build.xml:80: exec returned: 1

    Total time: 4 seconds

    Can you help me on this please? Again i didnt not made any modifications to buttons_modern.fla i have just deleted .swf, .swc and i have opened .fla with flash professional cs5 exported the .fla as a movie clip and tryed to recompile again

  13. Laura says:

    Maybe i export it wrong?
    Or?

  14. Laura says:

    On the air theme is working, just on the modern i get this error 🙁

Leave a Reply

Your email address will not be published. Required fields are marked *