Embedding Flash Movies

Tuzulo produces HTML codes for embedding Flash galleries directly onto web pages. This is great for those sites which allow HTML (which is risky because the page's layout can easily be broken) but leads to some problems when the site does not support direct HTML injection.

Sites which don't support HTML either use BBcode or some "writer friendly" language such as Markdown, Textile or ReStructured Text (ReST). The problem is that few of these higher-level languages normally support the use of object and embed tags which are necessary for inserting Flash content onto a web page. Some, like Markdown, pass these tags through to the final HTML unmodified which is great while others either rely on a special "raw" keyword or, in the worst case, filter away the raw HTML.

How to Embed Using HTML

Tuzulo produces an object/embed sequence of the following form:

<object type="application/x-shockwave-flash" width="730" height="500">
 <param name="movie"
        value="http://static.tuzulo.com/swf/play.swf">
 </param>
 <param name="flashvars"
        value="target=http://tuzulo.com/api/images/<key>/<resolution>">
 </param>
 <embed src="http://static.tuzulo.com/swf/play.swf"
        type="application/x-shockwave-flash"
        flashvars="target=http://tuzulo.com/api/images/<key>/<resolution>"
        width="730"
        height="500">
 </embed>
</object>

These are generated out when you choose a Flash preview.

The important parts of the sequence are the URL to the Flash movie itself, the dimensions and the flashvars parameter/attribute. This attribute tells the Flash player how to get the image data.

Youtube (and all others) produce similar tags for embedding. Tuzulo doesn't do anything different here although we do use SWFobject for generating these codes on upload pages to ensure the browser has Flash installed and is of the correct minimum version.

BBcode and Flash

Flash and BBcode generally don't mix. This is because BBcode is designed to be simple where embedding flash is not as simple and doesn't fit the single parameter model of BBcode.

To embed correctly using Flash remoting at least two parameters (the movie itself and the flashvars setting) need to be provided. Width and height are usually optional but this depends on how the Flash movie is authored as some movies will stretch to fill whatever they are placed inside.

Flash and Javascript

The other option is to use Javascript. Tuzulo produces SWFobject code within the Flash movies for embedding this way too. However, you must link to a copy (not ours) of SWFobject.js before you can insert the Javascript or it won't work. And while we allow hot linking to all the material you upload, we don't allow you to hot link to other assets within Tuzulo for obvious reasons.

We produce a swfobject call similar to:

// swfobject.js homepage:
// http://code.google.com/p/swfobject
// Note: Best practice is to put the <script> element containing
// the embedSWF() call inside the document's <head>, if possible.
//
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<div id="tuzulo_random_id">
 <script type="text/javascript">

swfobject.embedSWF(
// path to the flash player
  "http://static.tuzulo.com/swf/play_640x480.swf",
// containing div's id
  "tuzulo_random_id",
// dimensions (width, height)
  730, 500,
// minimum Flash player version allowed
  "9",
// Express Install
  null,
// script external variables:
  { target: "http://tuzulo.com/api/image/<hash>" },
// player parameters:
  { allowscriptaccess: "always" }
);

</script>
</div>

taking into account that the encapsulating gallery's div identifier will have a random code appended to avoid conflicts with other ids on the page.

The above is not optimal because SWFobject recommends placing the embedSWF call in the document's head, as in:

<html>

 <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
  <script type="text/javascript">

swfobject.embedSWF(
// path to the flash player
  "http://static.tuzulo.com/swf/play_640x480.swf",
// containing div's id
  "tuzulo_random_id",
// dimensions (width, height)
  730, 500,
// minimum Flash player version allowed
  "9",
// Express Install
  null,
// script external variables:
  { target: "http://tuzulo.com/api/image/<hash>" },
// player parameters:
  { allowscriptaccess: "always" }
);

   </script>
  </head>

  <body>
   <div id="tuzulo_random_id"></div>
  </body>

 </html>

See Also