Putting My Coloring Book on your site

Okay, so you've installed My Coloring Book, and perhaps made some configuration changes, now you want to put the coloring book in amongst your other content.

Flash Application

My Coloring Book is a Flash application (mcb.swf), which you can embed directly into site content.

HTML wrapper

The install also includes and HTML wrapper (mcb.html).  The HTML wrapper makes it simple to put the coloring book on you site, and includes code that checks that the user has a compatible version of Flash (but most do).

Coloring Page or Coloring Book

You will need to tell My Coloring Book what to display.  You do this by passing parameters to the coloring book.

You can either tell it to show a single coloring page, or you can group pages together into a coloring book.

For a page you use p=... and for a book you use b=...

You can find out more about these and other parameters in URL parameters for My Coloring Book.

Ways to include My Coloring Book

There are three main ways to include My Coloring Book on your website...

  1. Embed the HTML wrapper, mcb.html, in an iframe.
  2. Open the HTML wrapper, mcb.html, in a pop-up window, using javascript.
  3. Embed the Flash file, mcb.swf, directly into a page.

Embedding with an iframe

This is one of the simplest ways to include the coloring book within content.  You insert an iframe into your content, give it a size, and set the source to the HTML wrapper, mcb.html (along with any parameters).  E.g...

<iframe width="700" height="600" src="/mcb.html#p=monkey.gif"/>

Warning: Although using an iframe is a quick and convenient way to include the coloring book you may find that add-on scripts may not work correctly.  If you want to use add-ons like the Gallery, Post to Facebook, Coloring Contest, etc - DON'T use iframes.

Open in new window

If you want My Coloring Book to open in its own window this is very easy to achieve with a little javascript.  You can do a lot of extra things with javascript, such as setting the window size, position, etc.  Here is a simple example...

<p><a href="#" onClick="window.open('mcb.html#b=book1.xml',
'coloring','width=800,height=600')">Open My Coloring Book</a>.</p>

Embedding SWF

This does away with the wrapper.  It is a little more complex, and has some traps for the unwary, but if you want more direct control over the SWF it is the way to go.  You need to copy the object for the SWF from HTML wrapper, and then adjust it to your needs.

Because of differences between browsers (notably IE vs Firefox) there are two places where you need to change the url to the SWF file. There are also two places where you must set the dimensions (width and height).

Also note that the separator between the SWF and the parameters is a question mark (?), not the hash (#) that is used with the html wrapper.

The first place to change is in the param node for the movie. E.g.

<param name="movie" value="mcb.swf?p=monkey.gif"/>

The second place is in the embed node. E.g...

<embed name="mcb"
    src="/mcb.swf?p=monkey.gif"

You also need to make sure that you set the width and height in the object node, and again in the embed node.

Here is an example...

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="mcb" 
    width="700" height="600">
    <param name="movie" value="mcb.swf?p=monkey.gif"/>
    <embed name="mcb"
        src="/mcb.swf?p=monkey.gif"
        width="700" height="600"
        type="application/x-shockwave-flash">
    </embed>
</object>

If you are using full-screen mode you need to tell Flash that this is allowed.  To do this include this extra line below param name="movie"...

    <param name="allowFullScreen" value="true"/>

Joomla, WordPress, Homestead, ...

My Coloring Book can be used on most types of websites.  Here are some instructions for specific website models...

Other options

You can essentially embed My Coloring Book, anywhere where you can add an iframe or Flash object.  For example you may want to have the coloring book appear in a lightbox / mediabox popup.