Using XML

We recommend using the gridNavigation with an external XML file as this will allow for greater flexibility and updating options. By defining the images in an external XML file, you can publish the SWF file once and add or change the images whenever you wish. This option can be used instead of adding the images and parameters through the Component Inspector or through ActionScript.

1. Open your Flash file in which you are using the gridNavigation component, or create a new Actionscript 2 or Actionscript 3 Flash file depending on your intended publish settings and drag the gridNavigation component onto the stage. If you are creating a new Flash file, ensure that you save it now.

2. Open your favourite plain text editor (for example Notepad on Windows or TextEdit on Mac) and start a new file.

3. Begin your file with the following line:

<?xml version="1.0" encoding="utf-8"?>

This is the standard xml declaration.

4. Add the following lines to your xml file. (The bold lines are the new additions)

<?xml version="1.0" encoding="utf-8"?>    
<grid_navigation>
</grid_navigation>

5. Add configuration parameters

<?xml version="1.0" encoding="utf-8"?>    
<grid_navigation>

<config>
      <layout_style>Bottom Left</layout_style>
      <navigation_mode>Grid</navigation_mode>
      <rows>2</rows>
      <columns>2</columns>

      <thumbnail_size>
         <width>120</width>
         <height>90</height>
      </thumbnail_size>

      <image_size>
         <width>640</width>
         <height>480</height>
      </image_size>

       <easing>linear</easing>
       <zoom_speed>700</zoom_speed>

      <preloader>false</preloader>
</config>

<images>
</images>
</grid_navigation>

thumbnail_size XML tag contains the width and height of the thumbnail image. The image will be resized to theese dimensions.

image_size XML tag contains the width and height of the image. The image will be resized to theese dimensions.

thumbnail_size XML tag contains the width and height of the image size. The image will be resized to theese dimensions.

6. Add images tag to your XML file. (The addition is highlighted in bold.)

<?xml version="1.0" encoding="utf-8"?>    
<grid_navigation>

<config>
      <layout_style>Bottom Left</layout_style>
      <navigation_mode>Grid</navigation_mode>
      <rows>2</rows>
      <columns>2</columns>

<images>
  <image>
      <files>
         <thumbnail></thumbnail>
         <image>data/images/img/flashmovie.swf</image>
      </files>
   </image>
   <image>
      <files>
         <thumbnail>data/images/thm/1.jpg</thumbnail>
         <image></image>
      </files>
   </image>
   <image>
      <files>
         <thumbnail></thumbnail>
         <image>data/images/img/2.jpg</image>
      </files>
   </image>
   <image>
      <files>
         <thumbnail>data/images/thm/3.jpg</thumbnail>
         <image>data/images/img/3.jpg</image>
      </files>
   </image>
<images>

</grid_navigation>

The image element defines an image item.

The files element is a wrapper for thumbnail and image elements.

The thumbnail and image elements defines the image URL's.

If the URL contains XML special characters like &, <, >, ", ' enclose the URL in a <!CDATA[ ]]> element.

Example

7. Create a new directory named 'data' (without the quotes) inside the same folder as your Flash file. Save your xml file inside the 'data' folder as 'data.xml'. In this example, we have given the XML file the name: gridNavigation.xml

8. Return to your Flash file. Enter the name and path to the XML file that you just created in the XML file parameter of the gridNavigation that's on the stage.

Note: If your .swf file will be in a different folder to the HTML file in which it is embedded, you should enter the path to the XML file, relative to the location of the .swf file.

9. Press Ctrl+Enter (Win) or Cmnd+Enter (Mac) to test your movie.