My Coloring Book: General Configuration

In the mcb/config directory is a file called config.xml, which contains all the settings for the coloring book.

You can also configure alternate configuration files - which is especially useful on multi-language sites.


The <settings> node in the configuration has attributes for the application's settings.  E.g...

<settings zoomBase="fit" buttons="large" tool="mbrush" undoLevels="5" 
printCaption="Printed by My Coloring Book" printCaptionSize="9"
printCaptionAlign="C" printMargin="28"
    colorControlArea="0xC8D7DD" alphaControlArea="1.0"
    colorButtonArea="0xC8D7DD" alphaButtonArea="1.0"
    colorWorkArea="0xB2B2B2" alphaWorkArea="1.0"
    colorTextArea="0xFFFFEE" alphaTextArea="1.0"
saveImgType="jpeg" saveImgQual="80"

settings: zoomBase

The zoomBase attribute allows you to set a base level for zooming.  In other words this setting defines how much the image is zoomed when the zoom slider is at the 100% position.

You can set zoomBase to a number (the default is 1.0).  For example setting it to 0.5 will mean that the image will appear at half its actual size (when the slider is at the 100% position).  By combining a setting like this along with larger images will mean the image will look sharp even when zoomed in, rather than becoming pixelated.

The other value zoomBase can have is the word fit.   Setting zoomBase to fit tells the coloring book to make the image fit inside the available space, and that this becomes the new base level.  This allows you to have dynamically sized content with pictures that always fit nicely in the space provided.

settings: buttons

The buttons attribute lets you select the size of the tool buttons.  Set buttons="large" for large buttons, or buttons="small" for small buttons.

settings: tool

The tool attribute sets the default tool.  You can use any of "mbrush", "brush", "fill", or "text".

settings: undoLevels

The undoLevels attribute sets how many times you can undo (and redo).  Each saved state does take memory, so if you set this too high some users will experience problems.  5 is a good value to work with.  Setting it to "0" will automatically hide the Undo and Redo buttons.

settings: reloadUrl

The reloadUrl attribute is optional.  It is used when you are showing a coloring book, and want each page to cause a refresh in the browser.

Normally it is nicer just to let the coloring book load the new page, but this setting can be important if you are running advertising on your site (such as Google AdSense), and you want a page refresh for each new coloring page.

Set the reloadUrl to the full URL of your top level page.  The coloring book will automatically add "b=<book>&p=<page>" to the end.

settings: closeUrl

The closeUrl attribute can be used to define a Url to go to when the Close button is clicked.  If not set, the Close button can only be used to close a window if the coloring book has been opened in it's own window.

settings: saveUrl

The saveUrl attribute is used with custom add-ons.  It defines the Url of the script which is used to pre-save the picture.  If not set it uses the default script, "saveimage.php".

settings: pageDir

By default MyColoringBook expects to find coloring pages in the page folder. To use a different location you can specify the directory in the pageDir setting.

settings: printCaption

A caption (text) to show at the bottom of the printed page.

settings: printCaptionSize

The size (in points) of the caption shown at the bottom of the printed page.  Default = 10.

settings: printCaptionAlign

The alignment of the caption shown at the bottom of the printed page.

Valid values are "L"=left, "R"=right, "C"=centered.  Default = "L".

settings: printMargin

The minimum margin for the printed page (in pts).  Example: "28" = approx 1cm.  Default = 0.

settings: showChangeDlg

Whether or not to show a message when going to a new page and changes have been made. Setting this to "false" will prevent the dialog from appearing.  Default = "true".

settings: washAll

Whether the faucet washes all of the coloring page, or just the clicked area.  When set to "true" the faucet will wash the whole coloring page.  When "false" only the clicked area is cleaned. Holding the [shift] key reverses this.  Default = "false".

settings: colorControlArea & alphaControlArea

The RGB color and alpha (transparency) for the background of the control are (left-side of screen).

settings: colorButtonArea & alphaButtonArea

The RGB color and alpha (transparency) for the background of the button area (bottom of screen).

settings: colorWorkArea & alphaWorkArea

The RGB color and alpha (transparency) for the background of the main workarea - i.e. where the coloring page appears.

settings: colorTextArea & alphaTextArea

The RGB color and alpha (transparency) for the background of the text area (below the coloring page, if present).

settings: saveImgType

Determines the type of image produced when using the [Save] button. Options are "jpeg" or "png" (24-bit PNG).

(Note that saveImgType and saveImgQual ONLY apply to the Save button. Custom add-ons have their own settings.)

settings: saveImgQual

Only applies to saveImgType="jpeg", a value between 0 and 100, 100 being the maximum quality. Default is 80.

settings: debug

Set to "true" or "false". Default = "false".

When "true" additional error information returned by the server is displayed. This is useful when debugging add-ons, but should be turned off for production, as it may reveal information about your server side script.


You have the option to set the default setting for controls or remove them altogether.

The controls are defined in <control> nodes, and are identified by their id attribute.  You can set the default value, and change the visible attribute.

id="brushsize" .... Brush size slider. Set default to a value from 1 to 60.
id="textsize" .... Text size slider. Set default to a value from 6 to 200.
id="textfont" .... Drop down with font for text tool.
id="volume" .... Volume control. Set default to a value (%) from 0 to 100.
id="zoom" .... Label for the zoom slider. Set default to a value (%) from 50 to 800.

note: For volume and zoom just enter the number, not the "%" sign.

Each control also has an associated label (see below).  You can change the text, or set it to an empty string "", to hide the label altogether.


You can change or remove the labels that appear in My Coloring Book.  You might just want to make minor changes to the text or change the language for your site.

The labels are defined in <label> nodes, and are identified by their id attribute.  You can change the caption of each label. For some labels setting the caption to an empty value will hide the label altogether.

id="brushsize" .... Label for the brush size slider.
id="textsize" .... Label for the text size slider.
id="volume" .... Label for the volume control.
id="zoom" .... Label for the zoom slider.
id="btnYes" .... Label for "Yes" button.
id="btnNo" .... Label for "No" button.
id="dlgChanges" .... Title on the "coloring page changed" dialog.
id="promptChanges" .... Text message when changing to new page (next/prev).
id="promptClose" .... Text message when closing.
id="dlgSave" .... Ttitle on the Save dialog.
id="instructSave" .... Instruction text in the Save dialog.
id="progSave" .... Label on progress bar for saving dialog.
id="dlgSaveWrongType" .... Title on the warning for saved file has wrong or missing extension.
(Note: this was "dlgSaveNotJPEG" for versions < 2.4)
id="promptSaveWrongType" .... Warning text for saved file has wrong or missing extension.
(Note: this was "promptSaveNotJPEG" for versions < 2.4)
id="dlgNoTextFullscreen" .... Title on the warning. Text cannot be used in full-screen mode.
id="promptNoTextFullscreen" ... Text on the warning. Text cannot be used in full-screen mode.
id="dlgPrint" .... Title on the Print dialog.
id="instructPrint" .... Instruction text in the Print dialog.
id="sizeFP" .... Label for Full Page (in the Print dialog).
id="sizeHP" .... Label for Half Page (in the Print dialog).
id="sizeQP" .... Label for Quarter Page (in the Print dialog).
id="progPrint" .... Label on progress bar for printing dialog.
id="btnCancel" .... Label for Cancel button (in the Print and Save dialogs).
id="btnSave" .... Label for Save button (in the Save dialog).
id="btnPrint" .... Label for Print button (in the Print dialog).


<label id="brushsize" caption="Brush size:"/>
<label id="zoom" caption="Zoom:"/>


The Save dialog allows the user to save the image in different sizes.  You can specify the caption to appear for each, and the size in pixels of the longest side.  You can also determine which is selected by default.


  <size caption="Small" pixels="300" default="true"/>
  <size caption="Medium" pixels="600"/>
  <size caption="Large" pixels="1200"/>

In this example, "Small" is the default.  If the user saved with this selected, then the image would be scaled down so that it's longest side (width or height) was 300 pixels, and the other dimension is calculated so that the image is scaled proportionally.


The Text control allows the user to type text onto the coloring page.  You can specify the fonts to use.  You can list multiple fonts separated by commas, and the coloring book will use the first one available on the user's computer.


<font caption="Simple" font-family="Verdana,Tahoma,Arial,Helvetica,sans-serif"/>
<font caption="Newspaper" font-family="Times New Roman,Times,serif"/>
<font caption="Computer" font-family="Courier New,Courier,fixed"/>
<font caption="Comic" font-family="Comic Sans MS,Courier,fixed"/>

The first font in the list is selected by default.


You can choose which tool buttons appear in My Coloring Book, and you can also change the tip that displays when the user hovers over the button.  The buttons are defined in <button> nodes.

Each button is identified by its id attribute.  To hide a button set visible="false".  To change the tip, change the value of the tip attribute.

id="prev" .... Go to previous page (only shows when showing a coloring book, not just a page).
id="mbrush" .... Select the magic brush.
id="brush" .... Select the regular brush.
id="fill" .... Select the bucket fill.
id="wash" .... Select the washer.
id="print" .... Print the coloring page.
id="next" .... Go to next page (only shows when showing a coloring book, not just a page).
id="fullscr" .... Toggle Full Screen.
id="close" .... Close the window.  Should only be used when the coloring book has been opened in its own window.


<button id="prev" visible="false" tip="Previous Picture"/>
<button id="mbrush" visible="true" tip="Magic Brush"/>

There are also three custom buttons which can be used with the custom addons.

You can also use custom graphics for the button icons - though we recommend for faster load times you use the built in icons.  To use a custom icon, include icon="filename.png", where filename.png is the png file of the correct size (32x32 for large, 16x16 for small).  You need to specify the location relative to the page that the coloring book is on.

Full-screen Mode

To use full-screen mode, you must first enable the button (see above).

If you are using an iframe with "mcb.html", then that is all you need, but if you are embedding the SWF directly in your page, you need to tell Flash that FullScreen is allowed. 

To do this include this extra line below param name="movie"...

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

See Also