Flex audio player with Flowplayer core

I’ll present a simple task that allows to implement the power of the flex framework and flash graphics to a equally powerful core player such as the Flowplayer, bridged with JQuery.

First of all let’s create the graphics for the player, lets assume you have some basic images for the buttons and the background:

<s:Group width=”338″ height=”39″>
<s:Image source=”assets/playerBack.png” smooth=”true” width=”338″ height=”39″/>
<s:Image source=”assets/play.png” smooth=”true” left=”20″ top=”10″ click=”goPlay()” useHandCursor=”true” buttonMode=”true”/>
<s:Image source=”assets/pause.png” smooth=”true” left=”50″ top=”10″ click=”goStop();” useHandCursor=”true” buttonMode=”true”/>

<s:HSlider horizontalCenter=”20″ top=”10″ width=”178″ maximum=”1″ minimum=”0″ showDataTip=”false” stepSize=”0.1″ skinClass=”Skinz.VolumeSkinClass”/>
</s:Group>

!Note: make the <s:Application/> slightly bigger and opaque (height=”45″ width=”360″ backgroundAlpha=”0.0″)

!Note:make sure to include Jquery to your HTML file, I created this with JQuery.1.5.min.js

now a little bit of AS3 script to trigger the Javascript

private function goPlay()
{
ExternalInterface.call(“goPlay”);
}

private function goStop()
{
ExternalInterface.call(“goStop”);
}

Now export a release build and copy the .swf file in your HTML Project folder.

Our Flowplayer lives on a <div/>

<div id=”audiosecure” style=”display:block;” href=”http://releases.flowplayer.org/data/fake_empire.mp3″></div>

!Note: placing it on a div without size makes it invisible but still functional. cool huh!?

Create the flowplayer:

// install flowplayer into container
$f(“audiosecure”, “flowplayer/flowplayer.commercial-3.2.5.swf”, {

// fullscreen button not needed here
plugins: {
controls: {
fullscreen: false,
height: 30,
autoHide: false
}
},
clip: {
autoPlay: false,

// optional: when playback starts close the first audio playback
onBeforeBegin: function() {
$f(“audiosecure”).close();
}
}
});

Our SexyPlayer :

<div id=”sexyPlayer”>
<object width=”360″ height=”45″ wmode=”transparent”>
<param name=”movie” value=”css/assets/player/Action24Player.swf”>
<embed src=”css/assets/player/Action24Player.swf” wmode=”transparent” width=”360″ height=”45″>
</embed>
</object>
</div>

Some CSS:

#audiosecure
{
position:absolute;
left:150px;
top:100px;
}

#sexyPlayer
{
position:absolute;
left:150px;
top:10px;
z-index:9999;
}

!Note: make sure to place the Flowplayer lower than sexyPlayer

Throw in a couple of JS functions and you’re good to go:

function goPlay(){
$f(1).stop();
$f(0).play();
}

function goStop(){
$f(1).stop();
$f(0).stop();
}

Enjoy!

feel free to comment if you found this helpful.

Flowplayer auto focus with JS (FF too)

I was asked to find a way to enable auto focus on flowplayer without the user to click anything at all. After much search and thought… I figured out an easy way to do this using the Flowplayer API and JS.
In this example I give auto focus the moment the player is done loading in HTML and by pressing num-key: “2” it toggles FullScreen.

note: This works on Firefox too.

("player", "../flowplayer/flowplayer.commercial-3.2.5.swf", {
clip: {
url: 'SOMEURL',
provider: 'rtmp',
},
onLoad:function(){
window.document.playerElementID.focus();
},
onKeyPress:(function(e){
if(e == 50){
this.toggleFullscreen();
}
}),
plugins: {
rtmp: {
url: '../flowplayer/flowplayer.rtmp-3.2.3.swf',
netConnectionUrl: 'rtmp://SOMEURL'
}
}
});

Special thanks to @Havoc24k

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!