This is a message.

Flash components on the canvas

Ultimate interactivity with flash components

standalone demo

We are using a SWF (Flash) file on the canvas background. Press the play button to see how video screen is placed on top of it.

You might want to make a "living" logo or some cool organisms behind the movie. Whatever comes to your mind.

HTML coding

This part is simple. Just the player container.

<!-- player container-->
<a href="" class="player"
style="display:block;width:425px;height:300px;margin:10px auto"



The container is styled using the following CSS snippet. The most notable thing here is the background color that is tuned with a gradient PNG image.

/ wrapper defines canvas size by the aid of padding property /
#player {
padding:20px 100px;
background:#123 url(/media/img/global/gradient/h600.png) repeat-x;


JavaScript coding

Here comes the interesting part. We use a normal background property for the canvas. Only this time we reference to a SWF file instead of a JPG or PNG file. Very simple.

flowplayer("player", "", {
// stop at first frame
clip: {
scaling: 'fit',
autoPlay: false,
autoBuffering: true
// "hello world" canvas background
canvas: {
// configure background properties
background: '#000000 url(/media/swf/hello2.swf) no-repeat 30 10',
// remove default canvas gradient
backgroundGradient: 'none',
// set up a light-blue border
border:'2px solid #778899'
// a little opacity so that the text is shown trough
screen: {
opacity: 0.8
// disable plugins. not our focus to learn here.
plugins: {
controls: null