Embedding SimpleViewer-Pro

SimpleViewer-Pro can be embedded in a HTML document, a Flash movie or a Flex application.

Embedding in HTML

For full instructions on embedding SimpleViewer-Pro into a HTML page, view the SimpleViewer HTML Embed Guide.

Embedding in Flash

SimpleViewer-Pro can be embedded into a Flash container movie. This is useful if you want to integrate SimpleViewer into a full Flash website.

Embedding SimpleViewer-Pro in Flash requires the embedding movie to be ActionScript 3 and requires Adobe Flash CS3 (or later) authoring software. Embedding SimpleViewer-Pro in Flash requires a basic level of Flash authoring experience.

For an example of embedding SimpleViewer-Pro into a Flash container movie, check the examples/flash_embed/simpleviewer_flash_embed.fla file in the Pro download, or view the online demo. This example also show how to switch between multiple galleries and use of the API to control the galleries.

SimpleViewer uses StageScaleMode.NO_SCALE and StageAlign.TOP_LEFT. Check the resize code in the example FLA to see how to handle resizing with these parameters set.

The following steps describe how to load SimpleViewer into a container movie:

  1. Create a new gallery folder by using one of these methods or by making a copy of the 'web' folder in the Pro download.
  2. Create a new ActionScript 3 FLA in the gallery folder. This will be your container movie.
  3. Paste this code into the first frame of the FLA.

    var svAPI:Object; //svAPI is the object to call API methods on
    var svLoader:Loader = new Loader();
    addChild(svLoader);
    svLoader.contentLoaderInfo.addEventListener(Event.INIT, onViewerInit);
    svLoader.load(new URLRequest("simpleviewer.swf"));

    /**
    * Fired when preloader is available
    * Can set gallery flashvars at this point
    */
    function onViewerInit(e:Event):void{
    Object(svLoader.content).addEventListener("svComplete", onGalleryLoaded);
    var options:Object = Object(svLoader.content).embedOptions;
    options.galleryURL = "gallery.xml";
    }

    /**
    * Fired when gallery has completely loaded. API is now available.
    */
    function onGalleryLoaded(e:Event):void{
    svAPI = Object(svLoader.content).api;
    svAPI.setSize(640,480);
    }

  4. Test your Movie. You should see your gallery loaded into the container movie.
  5. For more sample code showing how to interact with the loaded gallery, check the example FLA.

Embedding in Flex

SimpleViewer-Pro can be embedded into a Flex application. For an example of embedding SimpleViewer-Pro into a Flex application and using the API to control it, check the examples/flex_embed/ folder in the Pro download. View Online Demo.

Embedding SimpleViewer-Pro in Flex requires ActionScript 3 and requires Adobe Flex Builder 3 (or later) authoring software. Embedding SimpleViewer-Pro in Flex requires a basic level of Flex experience.

To view and edit the code in this example do this:

  1. Open Adobe Flash Builder.
  2. Do File -> Import -> Other. Select 'Existing Projects into Workspace".
  3. Browse to the examples/flex_embed/ folder in the Pro download.
  4. Click Finish.
  5. The 'SimpleViewerFlexEmbed' project will now appear in the Flex Navigator Panel.