subtangent.com - Flash

Example 1
Using wordsearch.swf on your own pages
Making wordsearch files.
Example 2
Changing the appearance
Bugs and updates

Example 1

Using wordsearch.swf in your own pages.

The word list is stored in a separarate file from the flash movie, this lets you reuse the same movie with different word lists. You will need these files in the same directory on your web server:

wordsearch.swf (the main flash movie)
ws-animals1.xml (or another word list)
boxes.js (contains the javascript to insert the flash movie)
mypage.html (the page that the wordsearch will appear in)

Download these files

In mypage.html you will need to load the javascript by putting this line in the <head> section:


		<script type="text/javascript" src="boxes.js"></script>

In the <body> of the page put this section of code where you want the movie to appear.


		<script type="text/javascript">

putFlash6(600, 450, 'wordsearch.swf?xmlFile=ws-animals1.xml', 'ws', '#cccccc');

	  </script>

Click for more detail on the javascript function

In general:


		<script type="text/javascript">

		putFlash6(width, height, filename, id, colour);

		</script>

The first two parameters width and height are mandatory. The original size of the movie is 400×300 so you should try to keep width and height in a 4:3 ratio.

The third parameter filename is also mandatory. You can leave it as 'wordsearch.swf' in which case the file ws-default.xml will be used as the wordsearch. If you want to use a different wordsearch then append a query string to the filename. In the example above the wordsearch ws-animals1.xml will be used.

The fourth parameter id is the id of the movie in the DOM. If you don't care about this then just use something like 'movie1' or leave it out completely.

The fifth parameter colour is the background colour of the movie in the usual HTML format. You can miss this out in which case #DDDDDD will be used.

Making Wordsearches

The words lists are stored in an XML file.

You can generate new wordsearches by using this online generator. Make sure you select the 'XML' option and save the file to the same directory as wordsearch.swf.

If you made a wordsearch named ws-mywordsearch.xml then you would change the code in your web page to look like this:


		<script type="text/javascript">

putFlash6(600, 450, 'wordsearch.swf?xmlFile=ws-mywordsearch.xml', 'ws', '#cccccc');

	  </script>

Click for more detail on the XML file format

This is just a plain text file with a particular structure. The ws-default.xml file looks like this:


<?xml version="1.0" encoding="iso-8859-1"?>

<wordsearch>

<title>Maths Words</title>

<!-- the title is mandatory -->

<grid width="12" height="12">

<!-- the width and height attributes are mandatory -->

<gridline>WELPITLUMBLO</gridline>

<gridline>EVITISOPIGAO</gridline>

<gridline>WEVITAGENARA</gridline>

<gridline>DCENTIMETREF</gridline>

<gridline>INPRIMEUEDTA</gridline>

<gridline>AOALITREGEAC</gridline>

<gridline>MIRADIUSEGLT</gridline>

<gridline>ETEYPLOARRIO</gridline>

<gridline>TAAANGLEKEUR</gridline>

<gridline>EUDECIMALEQC</gridline>

<gridline>RQUOTIENTSEP</gridline>

<gridline>JEISOSCELESC</gridline>

</grid>

<words>

<!-- You need at least one! -->

<!-- Coordinates are measured from top-left (0,0) -->

<!-- all attributes are mandatory. dir is compass direction -->

<word x="3" y="8" dir="E">angle</word>

<word x="2" y="5" dir="S">area</word>

<word x="1" y="3" dir="E">centimetre</word>

<word x="2" y="9" dir="E">decimal</word>

<word x="9" y="4" dir="S">degrees</word>

<word x="0" y="3" dir="S">diameter</word>

<word x="1" y="11" dir="N">equation</word>

<word x="10" y="10" dir="N">equilateral</word>

<word x="11" y="3" dir="S">factor</word>

<word x="8" y="1" dir="S">integer</word>

<word x="2" y="11" dir="E">isosceles</word>

<word x="3" y="5" dir="E">litre</word>

<word x="8" y="0" dir="W">multiple</word>

<word x="8" y="2" dir="W">negative</word>

<word x="7" y="1" dir="W">positive</word>

<word x="2" y="4" dir="E">prime</word>

<word x="1" y="10" dir="E">quotient</word>

<word x="2" y="6" dir="E">radius</word>

</words>

</wordsearch>

It should be pretty obvious how this works. Note that there is no validation -- any typos in your file will probably cause the wordsearch to fail.

If you want to make wordsearches offline you will need the wordsrch program. You can get the latest version here.

Example 2

Here's a movie controlled by javascript. I chose to reload the whole movie since fscommand is unreliable with some versions of the Flash 6 plugin.

Click for more detail on Example 2

The HTML for this is...


	  <form name="ws2form">

<select name="wordListPicker" size="0" onchange="reloadExample(this.value);">

<option value="ws-maths1.xml" name="opt1" selected="selected">Maths
Words</option>

<option value="ws-animals1.xml" name="opt2">Animal
Names</option>

</select>

</form>

...and the javascript in the <head> is


	<script type="text/javascript">

function reloadExample(xmlFile) {

document.getElementById('secondFlashContainer').innerHTML = getFlash6HTML(400, 300, 'wordsearch.swf?xmlFile=' + xmlFile, 'ws2', '#BBBBDD')

}

</script>

This should work on IE6 and Mozilla/Firefox.

Changing the appearance.

If you want to change the appearance of the wordsearch then you will need the flash source files (and a flash authoring toolcapable of dealing with Flash 6 files). You can get the flash source files here.

Bugs and Updates

You can find the latest version at subtangent.com. If you find this useful, have any improvements or put it on a web site I'd be grateful if you could let me know

Duncan Keith 2004-02-13
Documentation updated: 2005-03-13