Examples

All examples are adapted to work online, there can be some problems with examples offline (Javascript/ActiveX security restrictions, try to change your security settings in this case or try another browser).

All examples should look and behave the same for all modern browsers for Windows, Mac and Linux.

Examples are using SWFObject 1.5 to embed Flash movies.

  1. Panorama with Navigation bar
  2. Panoramas exhibition with previews
  3. Panoramas with low-resolution preview
  4. Panoramas with low-resolution preview and Flash version detection
  5. Panorama with distorted hotspots
  6. Panorama with controller written in Flash 7
  7. Panorama with ExternalInterface controller
  8. Panorama player inside other Flash movie

Panorama with Navigation bar

navigation.html

This example provides ready template to create panorama with navigation bar and about screen.

Used files:

  1. Panorama images: images/nature_f.jpg, images/nature_r.jpg, images/nature_b.jpg, images/nature_l.jpg, images/nature_u.jpg, images/nature_d.jpg (use your own panorama images).
  2. Navigation images: images/black_l.png, images/black_r.png, images/black_u.png, images/black_d.png, images/black_p.png, images/black_m.png, images/black_a.png, images/black_d.png, images/black_i.png, logoInfo.png (change them in any graphical editor to make your own buttons and about screen).
  3. Executive files: files/pano.swf, files/hotspots.swf, files/autorotator.swf (panorama player file, Hotspots plugin and Autorotator plugin).
  4. XML file: navigation.xml (contains parameters for the panorama player, parameters for Autorotator plugin and describes navigation functionality using Hotspots plugin script). Read tutorials to understand this file and have a possibility to make your own navigations.

Panoramas exhibition with previews

preview_pano.html

This example shows how to make HTML page with any number of panoramas. Panoramas can be loaded and demonstrated within this page. Has build-in Flash version updater.

Used files:

  1. Panorama images: images/snow_f.jpg, images/snow_r.jpg, images/snow_b.jpg, images/snow_l.jpg, images/snow_u.jpg, images/snow_d.jpg, images/nature_f.jpg, images/nature_r.jpg, images/nature_b.jpg, images/nature_l.jpg, images/nature_u.jpg, images/nature_d.jpg, images/nature_small_f.jpg, images/nature_small_r.jpg, images/nature_small_b.jpg, images/nature_small_l.jpg, images/nature_small_u.jpg, images/nature_d.jpg (use different panorama images for every item).
  2. Preview images: images/snow_preview.jpg, images/nature_preview.jpg, images/nature_small_preview.jpg.
  3. Executive files: files/pano.swf, files/preview_pano.swf, files/loadMeter.swf, files/openFullscreen.swf (panorama player file, plugin to show panorama preview, simple graphical preloader and simple fullscreen switcher plugin).
  4. XML files: preview_pano1.xml, preview_pano2.xml, preview_pano3.xml (contains parameters for every panorama item).

Remarks:

  1. When you will duplicate panorama items, be sure you have unique values for every panorama item:
    1. div identifier: <div id="flashcontent1">
    2. SWFObject identificator: new SWFObject("files/preview_pano.swf", "pano1");
    3. preview image path: so.addVariable("preview","images/preview_snow.jpg");
    4. XML file path: so.addVariable("xml_file","preview_pano1.xml");
    5. link to div identifier: so.write("flashcontent1");
  2. preview_pano.swf plugin has build-in Flash version detection. If user has Flash Player version less then 9.0.0 (but bigger then 6.0.65) Flash Express Install will start automatically. Express Install requires minimal size of Flash window to show the update dialog. Keep at least one Flash movie window bigger then 215x138 to have this functionality.
  3. You can use the single XML file for all panorama items or don't use XML at all. In this case be sure you pass correct panoName for every panorama item: so.addVariable("panoName","images/snow");
  4. Preview images in the example are panorama screenshots with +50% white. Another good way is to use spherical source of the panorama image as a preview.
  5. Do not use Autorotator plugin in panorama items (or enable it only for fullscreen mode). Autorotation for several panoramas on the same page looks nice, but can be terribly slow.

Panoramas with low-resolution preview

bw_preview.html

This example shows how to create low-resolution preview for the panorama and make smooth transition effects between states.

Used files:

  1. Panorama images: images/nature_f.jpg, images/nature_r.jpg, images/nature_b.jpg, images/nature_l.jpg, images/nature_u.jpg, images/nature_d.jpg, images/nature_small_f.jpg, images/nature_small_r.jpg, images/nature_small_b.jpg, images/nature_small_l.jpg, images/nature_small_u.jpg, images/nature_d.jpg.
  2. Executive files: files/pano.swf, files/loadMeter.swf.
  3. XML file: bw_preview.xml.

Remarks:

  1. How does it work (see the code in bw_preview.xml file):
    1. Hotspots plugin loads before any panorama image was loaded: disableLoading=1 in parameters,
    2. Hotspots run loadPreview function on start: <global onStart = "loadPreview();">
    3. loadPreview function starts the loading of panorama preview (small size panorama images about 24kb in total; optimized for fast loading): loadPano(?panoName=images/nature_small);
    4. loadPreview function sets onTransitionEnd function: onTransitionEnd=loadMain(); (onTransitionEnd is event, will fire when a panorama image is loaded and appeared on the screen),
    5. loadPreview function sets the current panorama quality to low to avoid antialiasing wrench between panoramas: pano.qualityStatic=low;
    6. loadMain function (fired with onTransitionEnd event) starts the loading of the main panorama image and sets the time for fade transition effect (2 seconds): loadPano(?panoName=images/nature,2000);
    7. loadMain function assigns onTransitionEnd function to empty string: onTransitionEnd=; to avoid the second call of loadMain function.
  2. Read Hotspots tutorial if you didn't understand the previous point.

Panoramas with low-resolution preview and Flash version detection

bw_preview_detection.html

This example is the same as the previous one, but adapted to work with Flash Player version 6.0.65 and higher (uses Flash Express Install if user has no Flash 9). You can make the same changes for any Flash Panorama Player application to add Flash detection support.

This line from the previous example (open HTML source):

var so = new SWFObject("files/pano.swf", "pano", "100%", "100%", "9", "#282828");

Replace it with:

var so = new SWFObject("files/show_pano.swf", "pano", "100%", "100%", "6.0.65", "#282828");
so.addVariable("movie","files/pano.swf");
so.addVariable("redirect", window.location);

Changes:

  1. Use show_pano.swf instead of pano.swf. show_pano.swf loads files/pano.swf at once if Flash 9 player is preset; it runs Flash Express Install if old Flash Player is detected (after .
  2. Use 6.0.65 for SWFObject player version.
  3. New line so.addVariable("movie","files/pano.swf"); creates a variable to pass the main file name for show_pano.swf application .
  4. New line so.addVariable("redirect", window.location); creates a variable to pass an URL to redirect after Flash Player successfully updated (used window.location, i.e. the current page in this example).

Panorama with distorted hotspots

distorted.html

This is a simple demonstration how to embed distorted hotspots to the panorama and how to manipulate them in 3D space.

This example was created from navigation example. Spot objects was replaced by box objects, initial positions for hotspots was found in Editor plugin.

Used files:

  1. Panorama images: images/nature_f.jpg, images/nature_r.jpg, images/nature_b.jpg, images/nature_l.jpg, images/nature_u.jpg, images/nature_d.jpg (use your own panorama images).
  2. Navigation images: images/black_l.png, images/black_r.png, images/black_u.png, images/black_d.png, images/black_p.png, images/black_m.png, images/black_d.png, images/black_i.png, logoInfo.png.
  3. Executive files: files/pano.swf, files/hotspots.swf, (panorama player file, Hotspots plugin and Autorotator plugin).
  4. XML file: distorted.xml (contains parameters for the panorama player and description of navigation functionality using Hotspots plugin script). Read tutorials to understand this file and have a possibility to make your own navigations.

Remarks:

  1. Scripts used in this example are simple enough: function showInfo() changes rotationY for navigation buttons (falling them down) and then it changes alignY to put the info box down as well. Function hideInfo() hides the info box, raises navigation buttons back and restores onClick event for info button. Read tutorials/hotspots.html if you didn't understand some code line, all commands and properties are described there.
  2. Load the Editor inside this example to understand more about hotspots placing (add layer_10=../plugins/editor.swf line to distorted.xml file). You can do this operation with any example in this document.

Panorama with controller written in Flash 7

controller.html

This is an example of simple virtual tour with navigation.

It demonstrates how to use LocalConnection in your Flash application to control Flash Panorama Player from old versions of Flash.

Also it gives a simple example how to organize automatic load/unload hotspots depends on current panorama image using linked parameter.

Used files:

  1. Panorama images: images/snow_f.jpg, images/snow_r.jpg, images/snow_b.jpg, images/snow_l.jpg, images/snow_u.jpg, images/snow_d.jpg, images/nature_f.jpg, images/nature_r.jpg, images/nature_b.jpg, images/nature_l.jpg, images/nature_u.jpg, images/nature_d.jpg.
  2. Hotspots: images/black_p.png, images/black_m.png.
  3. Executive files: files/pano.swf, files/hotspots.swf, controller.swf.
  4. XML file: controller.xml.

Remarks:

  1. Hotspots are used linked parameter to be linked to it's own panorama image (revise controller.xml file). Hotspot with navigation (controller.swf) has no linked parameter and therefore it is visible for all panorama images. Read Hotspots tutorial to understand XML file format and to get to know how to make your own panorama hotspots.
  2. Find the source of controller.swf here: controller.fla (Flash MX 2004 format). Add more panoramas in the combobox and you will get a simple virtual tour with navigation.
  3. controller.swf file can connect the Flash Panorama Player even it is outside of Flash Panorama Player movie (in another Flash movie on the same page or in another browser window).

Panorama with ExternalInterface controller

externalTest.html

This is another way to control Flash Panorama Player (using another Flash application or Javascript calls).

It uses Flash ExternalInterface connection.

ExternalInterface can be used for Flash 8 and for Flash 9 applications, but any other application or technology with possibility to call Javascript functions can send instructions to control Flash Panorama Player inside a HTML page if you indicated the ExternalIterfaceID parameter correctly (see externalTest.xml).

ExternalInterface allows synchronous communication (return values in function calls) and has no time lag as compared with LocalConnection.

Used files:

  1. Panorama images: images/snow_f.jpg, images/snow_r.jpg, images/snow_b.jpg, images/snow_l.jpg, images/snow_u.jpg, images/snow_d.jpg.
  2. Executive files: files/pano.swf, files/hotspots.swf, externalTest.swf.
  3. XML file: externalTest.xml.

Remarks:

  1. Find the source of externalTest.swf here: externalTest.fla (Flash 8 file format).
  2. You can address any value provided by Hotspot plugin (read Hotspots tutorial) and run any function, except fullscreen() command; for security restrictions Flash Player allows fullscreen mode switch only if user clicks the mouse inside the target Flash movie.
  3. ExternalInterface doesn't work without HTML environment (in standalone swf file or in a simple projector mode). But LocalConnection works (see the previous example).

Panorama player inside other Flash movie

embedPano.html

This example shows how you can include Flash Panorama Player inside another Flash site or Flash application.

Note, only Actionscript 3 applications can load Flash Panorama Player. Actionscript 3 uses new Flash virtual machine and can't work inside Actionscript 1/2 movies. Used files:

  1. Panorama images: images/snow_f.jpg, images/snow_r.jpg, images/snow_b.jpg, images/snow_l.jpg, images/snow_u.jpg, images/snow_d.jpg, images/nature_f.jpg, images/nature_r.jpg, images/nature_b.jpg, images/nature_l.jpg, images/nature_u.jpg, images/nature_d.jpg.
  2. Executive files: files/pano.swf, embedPano.swf.

Remarks:

  1. Find the source of embedPano.swf here: embedPano.fla (Flash CS3 file format). Revise this example to get to know how to load the panorama player and to control the panorama in a simple way (set redrawing area for the Flash Panorama Player, make navigation buttons and load new panorama images).
  2. You can load Hotspots plugin and other plugins as for standalone Flash Panorama Player (use external XML).
  3. Be careful with righ click menu. You can't remove the right click menu item with a link to flashpanoramas.com in accordance with License Agreement (read License.txt in your Flash Panorama Player package). Contact here to discuss the purchasing Embed license (without flashpanoramas.com link or with your own site link) for Flash Panorama Player: flashpanoramas@gmail.com.