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

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.

  • Mouse Click => Set Element Alpha => Alpha: 0 => Target: pic_frame (this hides the popup by setting its alpha to 0)
  • Mouse Click => Play Sound => Loop: 1 => Target: click_close (this plays the button click sound which is in the Skin Editor)
  • Mouse Click => Stop Sound => Target: #narration_.* (this is a regular expression with a wild card. It will stop any sounds that start with narration_. This is why it is so important to use a naming scheme in the Sound Editor that can be used with regular expressions)
  • Mouse Click => Hide Element => Target: #play_narration_.* (again this is a regular expression with a wild card to hide all elements that start with play_narration_)
  • Mouse Click => Set Element Alpha => Alpha: 0 => Target: screen_tint (this action sets the screen tint to invisible by setting its alpha to 0, not to be confused with the hide and show actions)
  • Mouse Click => Hide Element => Target: popup_pic (this action is required to hide the external image/SWF loader to unload any Flash content)
    Narration 04.png

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:

  • Mouse Click => Play Sound => Loop: 1 => Target: narration_01

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

  • Mouse Click => Play Sound => Loop: 1 => Target: narration_02
    The element is set to not visible.
    Narration 07.png

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:

  • Mouse Click => Change Element Alpha => Alpha: 1 => Target: pic_frame (this will fade in the popup)
  • Mouse Click => Set Text => Text: <b>Johann Strauss</b> => Target: popup_title (this writes the title of the pop-up, using HTML bold tags)
  • Mouse Click => Set Text => Text: popup_images/johann_strauss.jpg => Target: popup_pic (this is setting which picture the external loader will display, in this case a picture called johann_strauss.jpg in a folder called popup_images)
  • Mouse Click => Set Text => Text: xxxxxxxxx => Target: popup_text (this is the body text displayed in the popup, as there is a lot of text I have replaced it with xxxxxxxxx)
  • Mouse Click => Show Element => Target: play_narration_01 (this actions displays the play button that when clicked will play the narration with an ID of narration_01 in the sound editor)
  • Mouse Click => Play Sound => Loop: 1 => Target: camera (this will play a camera shutter sound when the popup opens)
  • Mouse Click => Change Element Alpha => Alpha: 1 => Target: screen_tint (this will fade in the screen tint with the pop-up)
  • Mouse Click => Show Element => Target: popup_pic (this shows the external image/SWF loader. The external image/SWF loader needs an action to hide it to unload SWF files and as this pop-up can use SWf files from both Pano2VR and Object2VR I have made sure that the element is hidden on pop-up close and shown on pop-up open)
    Narration 05.png

Pop-ups using Point Hotspots with Narration

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

Pop-ups using Area Hotspot with Narration

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

Pop-ups using SWF files

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

Using regular expressions to address multiple elements
Skin Editor