Getting started

1. Having installed the gridNavigation using the Adobe/Macromedia Extension Manager, open Flash, start a new file and save it. If you are using CS3 and you intend to publish for Actionscript 3, ensure that you start a new Actionscript 3 file, otherwise start a new Actionscript 2 file.

2. (If you are not loading an external image, please skip this step and proceed with step 3.) Create a folder called images in the same location that you saved your file. Copy all of the images that you will be displaying through the gridNavigation, to the images folder.

3. Press Ctrl+F7 (Win) or Cmnd+F7 (Mac) to open the Component panel. Open the gridNavigation folder or the gridNavigation AS3 folder and drag a copy of the gridNavigation component onto the stage.

If you leave the gridNavigation component at its original size, the grid/pyramid will be aligned to borders of the stage. In this case, you should place the gridNavigation in the top-left corner of the stage (at an X,Y of 0,0). You can resize the gridNavigation component in order to specify an exact area and location for the grid/pyramid. Note: If you resize the component, the size of the images and thumbnails will adjust accordingly to fit within the specified component area.

4. Select the gridNavigation component that's on the stage and press Shift+F7 to open the Component Inspector.

5. Click on the Images parameter to open the values panel, where you can enter the details of the images to load. Press the "+" button to add a new image.

6. Click on the Thumbnails parameter to open the values panel, where you can enter the details of the thumbnails images to load. Press the "+" button to add a new thumbnail image.

An image item can be a URL of a SWF, GIF, PNG, JPG or a linkageID movieclip (if the movie is published for Actionscript 2) or a className (if the movie is published for Actionscript 3).

Press the "+" button to add more images in the same manner.

7. Set the thumbnail dimensions

8. Set the image dimensions

9. You can optionally also set the following additional parameters:

Easing parameter controls how animation starts or ends. Possible values are
easenone,linear,easeinquad,easeoutquad,easeinoutquad,easeoutinquad,easeincubic,easeoutcubic,easeinoutcubic,easeoutincubic,
easeinquart,easeoutquart,easeinoutquart,easeoutinquart,easeinquint,easeoutquint,easeinoutquint,easeoutinquint,
easeinsine,easeoutsine,easeinoutsine,easeoutinsine,easeincirc,easeoutcirc,easeinoutcirc,easeoutincirc,easeinexpo,easeoutexpo,easeinoutexpo,
easeoutinexpo,easeinelastic,easeoutelastic,easeinoutelastic,easeoutinelastic,easeinback,easeoutback,easeinoutback,easeoutinback,
easeinbounce,easeoutbounce,easeinoutbounce,easeoutinbounce
Layout Style controls how the items are arranged on the stage. Possible values are Top Right, Top Left, Bottom Right, Bottom Left. The default value is Top Left
Zoom Speed controls the animation speed when items are opened and closed. The value is in miliseconds. The default value is 500.
Preloader variable controls the preloader animation for thumbnail and image.

10. Press Ctrl+Enter (win) or Cmnd+Enter (mac) to test your movie.

Note: In order for the movement to be smooth, we recommend that you set your movie speed to a minimum of 31fps.

The component parameters and image items can be specified with an XML file. If the XML file is defined, the variables in the component inspector are ignored.

Here is an example:

<?xml version="1.0" encoding="utf-8"?>
<grid_navigation>
   <config>
      <layout_style>Bottom Left</layout_style>
      <items_type>Images</items_type>
      <navigation_mode>Pyramid</navigation_mode>

      <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>
      <image>
         <files>
            <thumbnail></thumbnail>
            <image>data/images/img/flashmovie.swf</image>
         </files>
      </image>

      <image>
         <files>
            <thumbnail>data/images/img/2.jpg</thumbnail>
            <image></image>
         </files>
      </image>

      <image>
         <files>
            <thumbnail>data/images/thm/3.jpg</thumbnail>
            <image>data/images/img/3.jpg</image>
      </files>
   </image>
</images>

</grid_navigation>

If an image item does not have a thumbnail specified, the large image is used for the thumbnail and vice versa.