Writing Flash plugins
they are written with ActionScript 3.0
they interact with Flowplayer ActionScript API
they are loaded into the player upon configuration or at runtime using
they are usually visible in the Flowplayer canvas, and they may be also hidden and berform their function in the background
all animation, configuration and styling capabilities are automatically set for the plugin without any coding
they may implement
org.flowplayer.model.Plugininterface to get access to Flowplayer internals. This is not required however and you can load any SWF object inside Flowplayer as long as it’s coded with AS3.
plugin’s methods can be marked as
Pluginobject meaning that you can use your method like this:
Example plugin: Hello world
We start by showing you an example plugin and how it's configured. Later in this document we will show you how it's done. Click on this player to see it in action.
This plugin can be animated and styled normally using Plugin object's animate and css methods. Here is an example.
The player above must be loaded first by clicking on it. You can see
the immediate results after clicking "Run". You can play around with
Firebug console if you have one and try any animations and style
There are four kinds of Flash plugins in Flowplayer:
display plugins that implement org.flowplayer.model.Plugin interface. These plugins have direct access to Flowplayer API and they are usually drawn on player's canvas but that is not a requirement since the can also stay hidden. This document focuses on these plugins.
streaming providers are used to load content to Flowplayer. For example video content from a Content Delivery Network, CDN. If you want to know how to make providers you should read this document.
font plugins that can be loaded into the player to provide your favorite font for each component inside Flowplayer.
After you have loaded the player by clicking on it you can run the following animation.
Flowplayer Plugin interface
org.flowplayer.model.Plugin interface opens up a door for Flowplayer plugin development. If your plugin implements this interface you'll get access to Flowplayer API and other crucial things at the right time. Here is its signature.
So the crucial classes for Plugin development are org.flowplayer.model.PluginModel and org.flowplayer.view.Flowplayer. The default config will just return an object of different properties. For example controlbar plugin has the following defaultConfig implementation:
If this method returns null value, the plugin will be placed on the panel centered and with 50% width and height values.
Working with Flowplayer
The primary tool for working with the player is
object that you'll recieve on
onLoad event. This object makes it
possible to do lots of powerfull stuff including
registering event listeners
invoking methods on other plugins
loading other plugins
animating plugins and other display objects
working with playlist clips
Here we talk about the most usefull things you can do with the API.
Your plugin can listen and react to different events. This is your primary tool for interacting with the player. To hook up with events related clips you can register an event listener to the Playlist. By registering your listener to the Playlist you are actually listening to all clips in the playlist. If the playlist changes (clips are replaced) your event listeners stay intact and will receive events happening to the new clips.
If you are interested in all events related to the first clip you can register a listener just for it:
You can animate plugins and other plugins using the animation engine that you can fetch from the Flowplayer object. You can use this engine to animate any Flash component that is displayable. This is how you can "tween" a button to a new position and at the same time change its opacity and width:
The animate() method can take relative values if you are animating plugins. The relative values are always calculated from the plugin's current position and percentages are relative to the player's dimensions. The following code will animate the Content plugin to move +10% horizontally and 50 pixels vertically:
External public methods
CSS styling support
The Flowplayer API has a method
css() that is used to affect the looks of certain
plugins. Currently the controls and content plugins and the special
"canvas" plugin support styling of their background area via the
css() method. For these plugins it's possible to change the
following properties using
See this skinning demo in this page to see how changing these properties affect the looks of the control bar.
If your plugin implements the
interface it becomes styleable via the css() method. This interface
css(styleProps:Object) method that takes in an object
containing CSS style properties. You can implement this method as you
like and support CSS properties as you see fit. To easily support the
background properties listed above just inherit your plugin from the
that is part of the Flowplayer library. This is how the controls and
the content plugins get their styling support. Next we'll take a look
at a simple "hello world" plugin that supports CSS styling.
The player takes care of placing the plugin into the display list and
the plugin should not do that by itself using
plugins are shown on the player's Panel and the Panel takes care of
their placement and resizing. For example, when the player goes to
fullscreen the player resizes the affected plugins by setting their
width and height properties. If you need to rearrange your plugin's
child objects when resizing happens (you usually need to) you should
override the width and height property accessors that are inherited
from DisplayObject. For example:
The Flowplayer library contains a convenient superclass that that
provides some support for handing the size changes. It's called
When using it you need to override its
onResize() method that gets
called when the plugin's size is changed:
Code example: Hello world
Here is the complete source code of our "hello world" plugin at the beginning of this page.
Another Hello world example
This example includes a centered TextField with the "Hello World!" text in it. This time it implements org.flowplayer.view.Styleable interface thus providing support for styling properties that user's can give in the configuration. The Flowplayer library has one implementation for it called StyleableSprite. You can use it to implement any Sprite including a Sprite that is used as a plugin. Here is the previous example enhanced to support styling:
backgroundGradient properties returned
defaultConfig accessor method. These settings makes our
plugin to have a glossy gradient color and nice round corners. Its
default opacity (alpha) is 0.9 making it slightly transparent. The
plugin can be manipulated and animated using the
animate() methods just like the default Flowplayer plugins.
To enhance this class you can add it with support for the Flowplayer's
animate() methods. You may support any property to
you want to do with your custom methods.
Example external method
To make it possible to change the text shown in our plugin we can add one method to this class:
Source code repositories
We encourage you to checkout the sources and study them. This will make it easier for you to get started with coding your own plugins. If you are willing to share your plugin in our Github repository, please contact us. We are happy to host it there and can also feature it in this site.
To compile your plugin you need to include the
library into the compiler classpath. Our own plugins use
Ant for building and this library is
included there in the classpath. This library and previous "hello
world" example plugins are included in our plugin development kit
(devkit) that you can download here.
Please right-click and choose "save link as ..." (or similar)
The devkit is built from the core sources. If you want to build your plugin against the latest SVN trunk version, please checkout the core from SVN (see above) and build it.
Devkit's version history is available here.
Developing with the Flash authoring tool
The example in the devkit also contains a FLA file for Flash developers that use the Adobe's Flash authoring tool. You need to make sure that you have flowplayer.swc in the FLA's classpath so that the plugin compiles. You can change the classpath in the publish settings. After publishing you can test the plugin by running it in Flowplayer.
You cannot run it in the Flash authoring tool because it does not have
the classes of the Flowplayer library (the ones in flowplayer.swc)
available at runtime. To make them available to during runtime in the
Flash tool, you need to add flowplayer.swc to the component library by
copying in into
[flash install dir]/Configuration/Components/Flowplayer.
Create the Flowplayer directory under Components before copying. After
that the Flowplayer classes are available in the components list (select
Window/Components) - you might need to select "Reload" in the
component list menu to make them appear. Once you have the Flowplayer
components showing, copy them over to the plugin's Library and you are
done. NOTE: If you do this the classes in the Library, plus other
dependent classes, will be compiled into the plugin SWF. That makes it
big! It's also completely unnecessary to have them in the plugin SWF
because the player has them included and there is no need to have them
in both places. For this reason make sure you remove the classes from
the library before publishing the plugin for deployment.
Note that the [External] annotation is not supported by the Flash authoring tool.
Forum post: How to compile a flash-based plugin