Personal tools

Embedding Radi into WordPress

From RadiWiki

Jump to: navigation, search

This short tutorial shows how to embed a Radi-created animation into a WordPress blog post so that the animation is displayed inline, similar to other embedded content such as images or videos.

For an example of what it looks like, you can take a look at this blog post I wrote recently: Why Radi uses Canvas. (The post is fairly long - scroll down to about two thirds of the page to see the embedded Radi animations.)


The easiest way to achieve this kind of embedding is to use an inline frame, or iframe for short. (This is actually one of several ways to embed Radi content into another web page. If you're interested in getting the full picture of embedding possibilities, see this page for all the details: Embedding Radi.)

WordPress doesn't support inline frames directly in the visual editor. To make iframe embedding more convenient, we'll install a WordPress plugin called Embed Iframe.

This plugin is very small. It simply adds an iframe shortcode that we can use for embedding. Installing the plugin is also simple - here for install instructions.

Placing an embed in WordPress

Once the plugin is installed, you can use it by entering a shortcode in the WordPress editor. Here's a screenshot:

 Radi wordpress iframe shortcode.png


The syntax of the iframe shortcode is as follows:

[iframe source-URL width height]


Uploading the animation

Now that we can embed content into a WordPress blog post, all that's left is to upload the Radi animation on the server.

When an animation is published from Radi, there are usually multiple files produced. The most important is the .html file that displays the animation. If you don't use any bitmap graphics or videos (i.e. there's only vector graphics and dynamic text in your Radi document), the .html file will be self-contained -- the whole animation is that one file.

More often, the published animation will also include some image or video files. Radi puts these in the same folder as the .html file.

You need to upload all of the published files into a folder on your web server. Similar to the way that images are usually placed in an /images folder, you could for example create a folder called "animations" and upload the files there.


Your WordPress embed shortcode would look like this, assuming your animation's size is 640 x 480 pixels:

[iframe http://example.com/animations/MyGreatAnimation.html 640 480]


Playback controls

One problem remains: what about playback controls? As it is, the embedded animation will start playing as soon as the page is loaded. This is often not desirable - it would be better to offer a play/stop button so that the reader can control animation playback.

We can make the playback controls directly in Radi. More precisely, you can modify the Radi document so that the animation is paused at the start, and add a button that starts playback when it's clicked.

To pause the animation initially, use a timeline event. There's one created by default that plays the animation, so you can just select that timeline event and change it to "Pause" instead:

Radi timeline event pause.png


Next, we need the button. This would usually be an Image element with any kind of content (text, a shape, perhaps a picture). Select the Image element and add the following line of code in the Inspector:

Radi button script play.png

This script command, rd.play(), makes the Radi document start playing when the image is clicked. (The name of the object targeted by this command is rd, which is short for 'Radi document'. This object is available within the Radi web scripting environment and it points to the current document. To stop the document, you could similarly enter rd.stop() in this field.)


If you don't want to (or can't) modify the original Radi document, you can also add playback controls directly into the HTML published by Radi. This requires some HTML programming, but nothing very complicated. This is already a bit too technical for this tutorial, but if you'd like to explore this avenue, have a look at the source for my Radi tutorial example that was embedded in the blog post I mentioned above: Peeking bird with custom HTML playback controls.