Skip to main content

Pop-up with Narration

This is the documentation for Pano2VR 4. You can find the new documentation for Pano2VR 5 here.

In this example, clicking one of the point hotspots with the image will open a pop-up information box. Clicking the speaker button will start the narration.

The skin can dynamically change the title and body text as well as the image. Because the skin is using the external image/SWF loader to show images, it is also possible to use SWF outputs from both Object2VR and Pano2VR as images for the pop-up. Go to the second node of the tour and click the soft toy to open a pop-up with an interactive 360ยบ object made with Object2VR.

This project was built using version 3.1.0. and is Flash-only

How the Popup with Narration Skin was made[edit]

Download the project

Download Video

You can just copy and paste the elements of the skin in to your own project, however please follow this tip to see how it was put together.

  1. Open the Sound Editor of the node that will have the pop-up.
    • Add the narration MP3 file to the Panoramic Sound section, give it an ID that can easily be used with regular expressions such as narration_01.
      Set the Mode to Static, set the Level of the MP3 file (make sure all narration is at the same level) and then set the Loop to -1, this will stop the MP3 file playing when the panorama opens. You can also see I have checked External Don't embed. This means the MP3 will not be embedded in the SWF file and will need to be uploaded to the server.
      Narration 01.png
  2. Open the Hotspot Editor and place a point hotspot where you want the pop-up to be located in the panorama, do this by double clicking in the image.
    You will see we are using the ID pop01. Each hotspot ID has to be unique, so the next will be pop02. This needs to happen throughout the tour so in node two there will be pop03. There should be a dedicated hotspot template in the Skin Editor which has a picture image denoting a pop-up, so we are using the Skin-ID popup which corresponds to the hotspot template with the ID popup in the skin.
    Narration 02.png
  3. Open the Skin Editor, the main elements are the hotspot template, popup. The screen tint, pic_frame and the containers popup_01, popup_02 and popup_03.
    The hotspot template only has an image and has no actions. The screen tint is just a rectangle with alpha and is used to stop user interaction with the panorama when a pop-up is open, it is set to alpha 0 so not visible in its default state and also has no actions.
    The pic_frame is the base of the pop-up and has a few more elements as children of it to make the pop-up element. This has no actions, but is also set to alpha 0.
    The text box popup_title will be used to show the title text of the pop-up and has no actions or text set. The popup_pic is the external image/SWF loader and has no actions set. The popup_text text box element is used to display the body text of the pop-up.
    Narration 03.png

The close element has the following actions.

The play_narration_01 element will play the required MP3 but there needs to be one for each MP3 narration file. The element has the following action:

If you have another narration MP3 file then you will need another play_narrtaion element, so play_narration_02, this will have the action:

Popup_01 container, this is what controls what the pop-up displays. It is linked to the relevant point hotspot by using a Hotspot Proxy ID. Below you can see in the Hotspot Proxy ID text field pop01, this is the ID of the first Point Hotspot in the Hotspot Editor. Please see step 2 above.
Narration 06.png

This makes a link between the point hotspot and the container. Clicking the hotspot will execute all the actions in the container which are listed below:

Pop-ups using Point Hotspots with Narration[edit]

The following video will show you how to add more Point Hotspots to your project.

Pop-ups using Area Hotspot with Narration[edit]

This video shows you how to use Area Hotspots to open the pop-up.

Pop-ups using SWF files[edit]

The following video will show you how to add interactivity to the pop-up using the output from Object2VR.

When making an Object2VR or Pano2VR project to be used in a pop-up you are advised to follow some simple rules. You may also only want the SWF to be viewed and have no viewer interaction, this is also covered below.

  1. Make the project window size the same size of the external image/SWF loader element in your pop-up.
  2. Set Scaling to None, this will stop the SWF trying to scale if the project is set to fullscreen.
  3. To stop interaction with a SWF file from Pano2VR or Object2VR, open the Advanced Settings tab found in the Flash Output and disable mouse, mouse wheel and keyboard.

See also[edit]

Using regular expressions to address multiple elements
Skin Editor