Heavy Jumble < back to main site

You can embed the Heavy Jumble object onto your page in many ways, but the easiest way to get Heavy Jumble onto your page is to use SWFObject. You can download the latest version of SWFObject here.

Once SWFObject is downloaded, move the swfobject.js file to a location that can be referenced from your project (the example above has the swfobject.js file in the 'inc' directory).

Now that SWFObject is ready to go, there are a few parameters that need to be set up for Heavy Jumble to work properly. First, we need to pass along the path to the XML configuration file. This is being passed into SWFObject via the flashvars variable:

var flashvars = {configPath: 'themes/newspaper/config.xml'};

The value of the configPath variable is the relative path to the configuration XML file. For this example, the file, config.xml, is located in the 'themes/newspaper' directory. The path is relative to the web document that is loading the SWF file, and not the SWF file itself.

In addition to the default theme, a couple of example themes have been provided in the /themes folder. Feel free to use these examples as a starting point to create your own theme.

Next, we set the background color for the Heavy Jumble area, and make sure that Heavy Jumble can communicate with the web page. This is done using the params variable:

var params = {
            bgcolor: "cccccc",
            allowscriptaccess: "always"
        };

With that complete, we just need to enable SWFObject:

swfobject.embedSWF("swf/heavyjumble.swf", "flash", "600", "600", "9.0.0", "", flashvars, params, false);

The parameters passed into .embedSWF are broken down as follows:

• "swf/heavyjumble.swf" - the relative path to the Heavy Jumble SWF file
• "flash" - the ID of the <div> element that the SWFObject will be replacing
• "600" - the height of the Heavy Jumble area
• "500" - the width of the Heavy Jumble area
• "9.0.0" - the minimum required Flash version required to run Heavy Jumble
• "" - optional express install file (not used)
• flashvars - flashvars variable
• params - params variable
• false - attributes variable (not used)

<script type="text/javascript" src="inc/swfobject.js"></script>
        <script type="text/javascript">
            var flashvars = {configPath: 'themes/newspaper/config.xml'};
            var params = {
                bgcolor: "cccccc",
                allowscriptaccess: "always"
            };
            swfobject.embedSWF("swf/heavyjumble.swf", "flash", "600", "600", "9.0.0", "", flashvars, params, false);
        </script>

In the main configuration XML file, inside the data element, there is a words element with a src attribute. This attribute's value is the relative path to the XML file that contains the words. In the case of the image below, the words XML file is called 'words.xml' and is located in the 'inc' folder. The path is relative to the web document (.html, .asp, etc) that is loading the SWF file, and not the SWF file itself.

You could also point the src attribute to a dynamic file that returns random words in the XML format displayed below for the Words XML file. This would extend the replay value by providing a fresh set of words each time the user solved one set.

You can also implement leveling if you choose to have words generated. If the gameComplete option attribute is set to 'replay', each time that Heavy Jumble reads the src attribute, it will append the query string "timesPlayed" to the end. The first time the value is read, timesPlayed is equal to "1" and each time the user hits "Replay" that number will be incremented by one. Example: http://heavyrobot.com/generateWords.php?timesPlayed=1

<heavyjumble>
            <data>
                <words src="inc/words.xml" />
            </data>
            ...

The Words XML file contains a words element with word child elements. The value of each Word element is the word(s) that will be jumbled. To change the jumbled words, simply change the words in the word elements. Because of the limited display space, only the first five words in the XML file will be loaded. In the example below, the word "flash" would not be loaded.

<?xml version="1.0" encoding="utf-8" ?>
                <!-- The game supports a maximum of 5 words -->
                <words>
                    <word>heavy</word>
                    <word>jumble</word>
                    <word>by</word>
                    <word>heavy</word>
                    <word>robot</word>
                    <word>flash</word>
                </words>

When the user completes all of the word jumbles, Heavy Jumble will display a button.

The settings element of the main configuration XML file specifies whether that button will reset the game, or redirect the user to an external link.

To set the 'replay' scenario, make sure that the gameComplete option is set to "replay".

To redirect to an external link (like http://heavyrobot.com), set the gameComplete option to "link".

If you redirecting to an external link, set the gameCompleteLink url value to the fully qualified URL you wish to redirect the user to (i.e. "http://heavyrobot.com").

<heavyjumble>
            <settings>
                <!-- The options are:
                        replay: will load the words XML file above again and restart the game
                        link: game can only be played once and will
                    This option will determine what happens when the user clicks the skinnable "button" below.
                -->
                <gameComplete option="link" />
                <gameCompleteLink url="http://heavyrobot.com" />
            </settings>
            <skin>
                ...
                <button src="themes/newspaper/newspaper_congrats.png" />
                ...
            </skin>
            ...

The skin element contains a button element, that can be configured to display an optional button image. This image will be displayed when the user completes all of the word jumbles.

To use a button image, change the src attribute value to the relative path of the image you wish to display.

Heavy Jumble supports image background, with or without transparency, or solid color backgrounds. The settings for the background are located in the skin element

<heavyjumble>
            <skin>
                <background color="cccccc" src="themes/newspaper/newspaper_bg.png" />
                ...
            </skin>
            ...

To use an image for the background, set the src attribute's value to the image's relative path. The background image should be the same size as the Heavy Jumble area, which is 600x600 pixels.

To use a solid color background, simple enter the hex value for that color into the color attribute's value.

If you are using a background image with transparency, you will probably want to set both the color and the src attribute values since the background will be visible through the image.

You can choose to display some intro text above the word jumbles by including a copy inside of the heavyjumble element. This element can contain plain text, or basic HTML.

<heavyjumble>
        <copy>
            <!-- You can enter basic HTML text to format this copy -->
            <main><![CDATA[<b>This is the primary copy block of the game.</b>]]></main>
        </copy>
        <skin>
            ...
            <copy color="FFFFFF" padding="12" />
            ...
        </skin>

To change the way the intro text looks, you can alter the copy element inside of the skin element.

To change the color of the text, enter the hex code into the color attribute value. To change the amount of padding around the text, change the value of the padding attribute.

There are two groups of text that are displayed with each jumble: the label and the input text.

<heavyjumble>
                    ...
                    <skin>
                        ...
                        <labels baseColor="cc0000" matchColor="C0C0C0" />
                        <inputs>
                            <copy baseColor="333333" matchColor="C0C0C0" />
                            <!-- This fields are optional, and will work if left empty or removed -->
                            <options>
                                <background color="C0C0C0" src="themes/newspaper/newspaper_input.png" />
                                <border size="3" color="FFFF00" />
                            </options>
                        </inputs>
                        ...
                    </skin>

The label text is the jumbled text that displays above the text input boxes. This text is configured with the labels element, which is inside the skin element. The input text is the text that is displayed inside of the input boxes. This text is configured with the copy element inside of the inputs element.

Each of the text elements have two attributes: the baseColor and matchColor.

baseColor is the color the text will display as in its pre-solved state. To change this value, enter the hex value of the color into the baseColor value.

matchColor is the color the text will display as after the jumble is solved. To change this value, enter the hex value of the color into the matchColor value.

There are two optional values for the input text boxes: background and border.

background is used to specify an image or solid color to be used in the text input. To alter the text input's background color, change the color attribute value to the hex value of the color you wish to use. To alter the text input's background image, change the src attribute value to the relative path to the image you wish to use. If the background image has transparency, you should set both values.

border is used to specify a border that will encompass the text input. You can change the size and color of the border. To alter the text input's border size, change the size attribute value to a numeric value indicating the width of the border (i.e. "1" for 1px border). To alter the text input's border color, change the color attribute value to the hex value of the color you wish to use.

In addition to a background image, Heavy Jumble supports positionable, linkable images.

<heavyjumble>
            ...
            <skin>
                ...
                <images>
                    <!-- The link field can be left blank and the image will not be clickable -->
                    <image src="themes/newspaper/newspaper_logo.png" url="http://heavyrobot.com" x="20" y="12" />
                </images>
            </skin>

To add an image to Heavy Jumble, add an image element into the images element. The image element should have the following attributes:

• src - this is the relative path to the image you want to place
• url (optional) - this is the URL that you want to redirect the user to when the image is clicked. If you do not want the image to be linked, do not include this attribute.
• x - the x (horizontal) position you want the image displayed at. Example: x="40" will position the image 40 pixels from the left edge.
• y - the y (vertical) position you want the image displayed at. Example: y="20" will position the image 20 pixels from the top edge.

Below is an example of a complete configuration file.

<?xml version="1.0" encoding="utf-8" ?>
                <!-- Available image types are PNG|JPG|GIF -->
                <!-- Colors should be entered as HEX values, ie. FFFFFF or CC0000 -->
                <heavyjumble>
                    <data>
                        <words src="inc/words.xml" />
                    </data>
                    <settings>
                        <!-- The options are:
                                replay: will load the words XML file above again and restart the game
                                link: game can only be played once and will
                            This option will determine what happens when the user clicks the skinnable "button" below.
                        -->
                        <gameComplete option="replay" />
                        <gameCompleteLink url="http://heavyrobot.com" />
                    </settings>
                    <copy>
                        <!-- You can enter basic HTML text to format this copy -->
                        <main><![CDATA[Thanks for checking out Heavy Jumble.]]></main>
                    </copy>
                    <skin>
                        <background color="cccccc" src="themes/newspaper/newspaper_bg.png" />
                        <copy color="333333" padding="20" />
                        <labels baseColor="cc0000" matchColor="C0C0C0" />
                        <button src="themes/newspaper/newspaper_replay.png" />
                        <inputs>
                            <copy baseColor="333333" matchColor="C0C0C0" />
                            <!-- This fields are optional, and will work if left empty or removed -->
                            <options>
                                <background color="C0C0C0" src="themes/newspaper/newspaper_input.png" />
                                <border size="3" color="FFFF00" />
                            </options>
                        </inputs>
                        <images>
                            <!-- The link field can be left blank and the image will not be clickable -->
                            <image src="themes/newspaper/newspaper_logo.png" url="http://heavyrobot.com" x="20" y="16" />
                            <image src="themes/newspaper/by-hr.gif" url="http://heavyrobot.com" x="360" y="12" />
                        </images>
                    </skin>
                </heavyjumble>