Customizing XML Files

The spinning menus on both sides of the applet are two instances of our custom SpinnerMenu class. Each time the user spins the menus each menu shows a 'column' of thumbnails - 'tiles'. In our applet, each menu has four different columns containing five tiles each. After that, the images start repeating. We clarify the 'column' - 'tile' terminology as each menu instance is constructed based on an XML file. In that file 'columns' correspond to the tag 'col', 'tiles' to the tag 'tile'. The tag 'tile' contains the address of a thumbnail, the address of the large image to be loaded when the user clicks on the thumbnail, and the text for the caption. The properties of both menus can be changed by simply editing the XML files menu1.xml and menu2.xml.

Below is the file menu1.xml. Our thumbnail images are named small1.jpg, small2.jpg etc. The larger images to be loaded are named pic1.jpg, pic2.jpg, and so on. All images reside in the same directory as the applet's html and swf files. Thus, the address to each image is simply, say, pic10.jpg. You can, of course, use different image names, images can reside in a different directory. You then simply edit the 'thumb' and 'pic' tags of the XML file to provide the correct files locations and names. Our captions are 'NASA Image 10' etc. You can enter your own captions by editing the content of 'cap' tags.

Each 'col' tag corresponds to a column of thumbnails displayed as the menu spins. There must be at least two columns which will give you basically a two-sided menu. You can create as many columns as you wish so it takes a long time before images start repeating. The number of images in every column is determined by the number of 'tile' tags nested in 'col' tags.

You can create a menu with one tile spinning by having just one 'tile' tag in each 'col' tag or a menu with ten tiles spinning by assigning ten 'tile' tags to each 'col'. The only requirement is that the number of 'tile' elements is the same for every 'col' element. (The applet will warn you if your XML file violates this condition.) So go ahead and experimet. Delete one or two 'tile' elements from each column or add one and a few and see what happens.

 

<menu>

<col>

<tile>

<thumb>small1.jpg</thumb>

<pic>pic1.jpg</pic>

<cap>NASA Image 1</cap>

</tile>

<tile>

<thumb>small2.jpg</thumb>

<pic>pic2.jpg</pic>

<cap>NASA Image 2</cap>

</tile>

<tile>

<thumb>small3.jpg</thumb>

<pic>pic3.jpg</pic>

<cap>NASA Image 3</cap>

</tile>

<tile>

<thumb>small4.jpg</thumb>

<pic>pic4.jpg</pic>

<cap>NASA Image 4</cap>

</tile>

<tile>

<thumb>small5.jpg</thumb>

<pic>pic5.jpg</pic>

<cap>NASA Image 5</cap>

</tile>

</col>

<col>

<tile>

<thumb>small6.jpg</thumb>

<pic>pic6.jpg</pic>

<cap>NASA Image 6</cap>

</tile>

<tile>

<thumb>small7.jpg</thumb>

<pic>pic7.jpg</pic>

<cap>NASA Image 7</cap>

</tile>

<tile>

<thumb>small8.jpg</thumb>

<pic>pic8.jpg</pic>

<cap>NASA Image 8</cap>

</tile>

<tile>

<thumb>small9.jpg</thumb>

<pic>pic9.jpg</pic>

<cap>NASA Image 9</cap>

</tile>

<tile>

<thumb>small10.jpg</thumb>

<pic>pic10.jpg</pic>

<cap>NASA Image 10</cap>

</tile>

</col>

<col>

<tile>

<thumb>small11.jpg</thumb>

<pic>pic11.jpg</pic>

<cap>NASA Image 11</cap>

</tile>

<tile>

<thumb>small12.jpg</thumb>

<pic>pic12.jpg</pic>

<cap>NASA Image 12</cap>

</tile>

<tile>

<thumb>small13.jpg</thumb>

<pic>pic13.jpg</pic>

<cap>NASA Image 13</cap>

</tile>

<tile>

<thumb>small14.jpg</thumb>

<pic>pic14.jpg</pic>

<cap>NASA Image 14</cap>

</tile>

<tile>

<thumb>small15.jpg</thumb>

<pic>pic15.jpg</pic>

<cap>NASA Image 15</cap>

</tile>

</col>

<col>

<tile>

<thumb>small16.jpg</thumb>

<pic>pic16.jpg</pic>

<cap>NASA Image 16</cap>

</tile>

<tile>

<thumb>small17.jpg</thumb>

<pic>pic17.jpg</pic>

<cap>NASA Image 17</cap>

</tile>

<tile>

<thumb>small18.jpg</thumb>

<pic>pic18.jpg</pic>

<cap>NASA Image 18</cap>

</tile>

<tile>

<thumb>small19.jpg</thumb>

<pic>pic19.jpg</pic>

<cap>NASA Image 19</cap>

</tile>

<tile>

<thumb>small20.jpg</thumb>

<pic>pic20.jpg</pic>

<cap>NASA Image 20</cap>

</tile>

</col>

</menu>

Download

On the next page, we discuss public methods of the SpinnerMenu class.

Back to Flash CS4 Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.