Embedding flash in a snipsnap page

So one of the requirements of my current project is to create a web-based tutorial with flash components. I haven’t seen this done before on a snip snap page, so I figured it would be a useful post.

4 steps to get this done:

  • A small HTML snippet for a flash movie.
  • A macro to render the flash HTML snippet via JTidy.
  • Adding the macro to the Radeox “.Macro” file
  • Hooking it up in a snip snap page.

HTML Snippet

Let’s say this is the HTML for a flash movie you’d like to render on a snip snap page.

<object width="480" height="360">
   <param name="movie" value="example.swf">
   <embed src="example.swf" width="480" height="360">
</object>

The Macro and JTidy

In the macro, before rendering you’ll want to validate that the height, width and flash name supplied for the macro are valid (ex. the file name ends with .swf, height and width are greater than zero, etc). In your macro, here’s how you use JTidy to render the above HTML.

private Node renderAsJTidyNode(String filename, String width, String height) {
		Node object = Node.createElement("object");
		object.setAttribute("width", width);
		object.setAttribute("height", height);

		Node param = Node.createElement("param");
		param.setAttribute("name", "movie");
		param.setAttribute("value", filename);
		object.appendChildNodeAtEnd(param);

		Node embed = Node.createElement("embed");
		embed.setAttribute("src", filename);
		embed.setAttribute("width", width);
		embed.setAttribute("height", height);
		object.appendChildNodeAtEnd(embed);

		return object;
}

The filename, height and with are supplied as parameters to the macro when the macro is called from the snip snap page (see part 4). Now here’s the code (in the execute method to make JTidy render the html…

public void execute(Writer writer, MacroParameter params) throws IllegalArgumentException, IOException {
...

    Node node = renderAsJTidyNode(filename, width, height);
    if (node != null) {
        getTidy().pprint(node, writer);
    }
}

The “.Macro” file

Find the appropriate Radeox “.Macro” file in your project and add your new macro to it.

ca.yourproject.content.macro.FlashContentMacro

Hook it up in snip snap

Now all you have to do is call the macro in a snip snap page like the following:

{flash:example.swf|480|360}

Where “flash” is the name you provided for the macro when you created it, “example.swf” is the name of the flash file, 480 is width and 360 is height.

That’s it!

If you’d like to see the full source of the macro, just drop by my room and I’ll direct you to the source.

It's only fair to share...
Share on FacebookGoogle+Tweet about this on TwitterShare on LinkedIn

Leave a Reply