Skip to main content

Hotspot Tutorial (Pano2VR)

Pano2VR - Help


ARCHIVED - 13 March 2013.

This tutorial has been updated. Please see Adding Hotspots (Pano2VR) for the latest information.


This tutorial will show you how to create hotspots, build hotspot templates, and ultimately create a simple panoramic tour (or VR tour). There are a total of six parts. The tutorial was built with version 2.2.2.

There are project files available (packed ZIP - 22MB) for you to follow along and practice with. To keep this tutorial consistent with the project files and the screencast, it will refer to the file names and images used in the screencast.

Part 1: Adding Hotspots and Linking to Websites[edit]

Video loading...

Watch this video on YouTube


Start by opening a project (using ring.jpg), then follow these steps:

  1. Choose, Modify, from the Hotspots area in the project window.
    A message asks if the hotspot file should be created. Click, Yes.

    HSmessage.png

  2. Now in the hotspot editor, select the Area Hotspots tab if it is not already selected.

  3. Select the checkbox labeled, Enable.
    This will enable the text fields and allow you to draw a hotspot.

  4. Zoom in to the image if you wish to get better detail for drawing your hotspot. Use the menu to choose how far to zoom in.

    Zoom.png

  5. Choose a shape from the tool section and drag over the area to be interactive.
    The area hotspot that you created will be red.

    Drawnarea.png

    If you are following along with the video tutorial, you can follow the example and draw a rounded rectangle over the entrance gate of the building.
  6. Enter the hotspot's title in the Title field.
    The title will be seen when the mouse hovers over the hotspot.

  7. Insert a web link in the URL field to send the user to your destination of choice.

Your area hotspot editor should look something like this:

Area1.png


Next, add a point hotspot:

  1. In the hotspot editor, select the Point Hotspots tab if it is not already selected.

  2. Select the checkbox labeled, Enable.
    This will enable the text fields and allow you to create a hotspot.

  3. Double-click on a point within the image to create a hotspot.
    A red bullseye Bullseye.png will represent this point.

  4. Enter the hotspot's title in the Title field.
    The title will be seen when the mouse hovers over the hotspot.

  5. Insert a web link in the URL field to send the user to your destination of choice.

  6. Click OK to exit the hotspot editor.

Output the movie:

  1. In the output section of the project window, choose Flash as the output format.

  2. Click Add.
    The Flash Output window will open. You can adjust the settings here or simply leave everything at their defaults.

  3. Click OK.
    A message will appear and asks to create the output file now.

  4. Click Yes.
    Pano2VR will build the movie and will open the created file.

Notice that the title for the area hotspot shows up along with a finger pointing to globe. This indicates that the hotspot links to a website. The point hotspot also displays a pointing finger.

Part 2: Using Hotspots to Link to Other Panoramas[edit]

Video loading...

Watch this video on YouTube


Begin by saving and closing the current project (ring.p2vr) and then open a new project with a different panorama image (library.jpg) for the second project.

  1. In the hotspot editor, select the Point Hotspots tab if it is not already selected.

  2. Add a point hotspot to the exit gate:
    Point1.png

  3. Enter the hotspot's title in the Title field. This time, try using some HTML within the field to format the text.
    Titlehtml.png

  4. In the URL field, add the file name here of the other panorama you just outputted (ring_out.swf).

  5. Click OK to exit the hotspot editor.

  6. Select Flash as the output format and click Add.
    You can adjust the settings here or simply leave everything at their defaults for now.

  7. Click OK.
    A message will appear and asks to create the output file now.

  8. Click Yes.
    Pano2VR will build the movie and will open the created file.

Check it to see if it functions as it should at this point. Meaning, the title should correctly display the text if you used HTML tags, and the hotspot should link to the correct panorama.

Note: The file must be located in the same directory as the starting panorama.

Go back to the previous project to finish the connections.

  1. Save the project (save as, library.p2vr).

  2. Open the previous project (ring.p2vr).

  3. In the hotspot editor, select the Point Hotspots tab if it is not already selected.

  4. In the URL field, replace the web url with the file name of the next panorama (the movie you just outputted: library_out.swf).

  5. Click OK to exit the hotspot editor.

  6. Create the output file by clicking this button, Createoutput.png, in the Output section.

  7. Click OK.
    A message will appear and asks to create the output file now.

  8. Click Yes.
    Pano2VR will build the movie and will open the created file.

You should now be able to move or link between the two panoramas.

Part 3: Building Hotspot Images in the Skin Editor and Adding Actions[edit]

Video loading...

Watch this video on YouTube


If you want to take your hotspots to the next level, you can create a skin for your hotspots and add custom hotspot images and then add actions to them.

  1. Using the project you finished with in part 2 (ring.p2vr), choose the pre-loaded skin, controller_new_popup.ggsk (or your custom skin).

  2. Click on the hotspot template button Hotspot.png to add a hotspot template.
    This template acts as a placeholder and affects only point hotspots. The crosshair image will not be visible in the skin.
    You can place the template anywhere, as it's placement on the skin is arbitrary.

  3. Add a hotspot image (hs image.png, found in the tutorial project files), as a button,Add button.png.
    Importing the image as a button will cause the cursor to change to a pointing finger when the mouse hovers over the image, indicating interactivity.
    Importing the image as an image, will result in the mouse pointer not changing when it enters the hotspot area.

  4. Place the image over (or on top of) the hotspot template (the crosshairs).

  5. Make the image a child of the template.

    Child.png

  6. Using the Add Text button Text.png, draw a text box.

  7. Place the text box above your hotspot image.

    Textover.png

  8. Make the text box a child of the hotspot template.

  9. Customize the text by double-clicking on the text box in the editor window or the tree.

  10. In the settings tab, give the text box an ID. This will help to identify it later. For this example, you can call it, HS Text.

  11. In the text field, enter: $hs.
    $hs is a placeholder that tells Pano2VR to find the information that has been entered in the title field in the hotspot editor and to display it in this text box.

  12. Customize the text box further by choosing the text color, it's text alignment, background color, and border color.

So far, your skin editor should look something like this:

Part3-1.png

Next, add actions to the hotspot template:

  1. Click OK to close the element editor for the text box.

  2. Open the element editor for the hotspot template and go to the Actions/Modifiers tab.

  3. Click on Add Action Addaction.png to bring up the source and action menus. Add the following action:
    Source = Mouse Click; Action = Go To URL

  4. Add the placeholder, $hu, in the URL field.
    This placeholder will call up the information already entered in the URL field in the hotspot editor.

  5. Add another placeholder, $ht, in the Target field.
    This placeholder will use the information found in the Target field in the hotspot editor.

  6. Click OK to exit the element editor.

Add actions to create a fade in/fade out effect to your hotspot image when the mouse enters the hotspot area:

  1. Open the element editor for the hotspot image.

  2. In the Settings tab, change the image's transparency by entering, 0.50, in the Alpha field. This will make the image 50% transparent.

  3. Go to the Actions tab and add the following action:
    Source = Mouse Enter; Action = Change Element Alpha. Enter the number, 1, in the Alpha Field.
    This action will cause the image to fade in to 100% transparency from 50% transparency when the mouse enters the hotspot area.

  4. Finish the action by adding the following action:
    Source = Mouse Leave; Action = Change Element Alpha; Alpha = .5.
    This action will cause the image to fade out to 50% transparency from 100% transparency when the mouse leaves the hotspot area.

  5. Click OK to exit the element editor.

  6. In the Skin Editor, click OK.

  7. Save the skin.

  8. Output the movie.

When you roll over the hotspot, it should have a fade in effect, and when then the mouse leaves, it should fade out.

Note: This fading effect will affect all point hotspots associated with this panorama. This makes it easy to apply actions and effects to all hotspots within your project.

Part 4: Creating Multiple Hotspot Templates[edit]

Video loading...

Watch this video on YouTube


If you wish to have multiple hotspot images, you just need to create multiple hotspot templates.

  1. In the skin editor of the project, ring.p2vr, add a new hotspot template.

  2. Draw a text box. This text box is going to act like an image.

  3. Open the element editor for the text box.

  4. In the text field in the settings tab, add a bold W (using HTML tags), which is going to stand for Wikipedia.org.
    The image here, W, will be connected with all hotspots that link to a wikipedia webpage. The first hotspot image from Part 3 will link to everything else.

  5. Select Autosize.

  6. In the editor window, place the text on the center of the hotspot template.

  7. Copy the text label that is above your previous hotspot template (from part 3) and then paste it in the editor.

  8. Drag the copied version over to the new hotspot template.
    Be careful that you drag the correct version. Check the tree to see which version is selected.

  9. Make the label a child of the template.

Your skin editor should now look something like this:

Part4-1.png

To have the text labels show up only when a mouse enters the hotspot area, do the following:

  1. Double-click the first hotspot image (from part 3) to open the element editor.
    Editing order is not important here.

  2. Go to the Actions/Modifiers tab and add the following action: Source = Mouse Enter; Action: Show Element; Target = HS Text.
    This action will cause the hotspot label to appear only when the mouse enters the hotspot area.

  3. Add the next action:
    Source = Mouse Leave; Action: Hide Element; Target = HS Text.
    This action will hide the label when the mouse leaves the hotpot area.

  4. Click OK to exit the element editor.

  5. Open the element editor for the hotspot image's label, HS Text.

  6. In the settings tab, deselect Alpha. This prevents the label from being initially visible.

  7. Click OK to exit the element editor.

  8. Follow these steps again for the other hotspot text label and image.


Next, add some actions to the new template:

  1. In the Actions/Modifiers tab of the new, wikipedia hotspot template, add the following action:
    Source = Mouse Click; Action = Go to URL; URL: $hu.
    This action says that when a mouse clicks on this hotspot, bring the user to the URL specified in the URL field in the hotspot editor.

  2. Click OK to exit the element editor.

Give the templates IDs:

  1. Give the templates more distinguishing labels for easy identification later by opening the template's element editor. In the ID field, give a descriptive ID. In this example, the W hotspot template is called wiki, while the first image is called, web.

  2. Click OK to exit the element editor.

Next, you need to tell the hotspots which skin to listen to:

  1. Click OK to exit the skin editor.
    A message will appear asking you if you would like to save your changes.

  2. Click yes to save your changes.

  3. Open the hotspot editor and go to the point hotspots tab.

  4. Activate the point hotspot by clicking on it once.

  5. In the Skin-ID field, enter the correct corresponding hotspot template (for the hotspot titled, Maria, use the skin-id, wiki.)

  6. Add a second point hotspot. Fill in it's title and URL - give it a non-wikipedia url. Give it the Skin-ID of, web.

  7. Click OK to exit the editor.

  8. Output the movie.

You should now have 2 different images (or two different hotspot templates) in your movie. They should should also be linking correctly.

Part 5: Building a Basic Map[edit]

Video loading...

Watch this video on YouTube


The next step in building hotspots is to create a map in the skin editor so your users know where they are within the panorama tour. This tutorial will be using two panoramas for the tour. The background will be built in the skin editor. The image that will represent the location of the two panoramas will be a pink dot. The map will be located in the upper left corner.


You can follow along using the map element, dot.png, found in the tutorial project files.

  1. In the skin editor, use the rectangle tool Rectangle.png to draw a rectangle. This will be the background for the map.
    The grey rectangle in upper left corner is the map background.

  2. Double-click on the shape in the editor window or in the tree to bring up the element editor and change its background color.

  3. Import the pink dot (dot.png) as an image.

  4. Move the pink dot to the lower left corner of the rectangle.

    Map2.png

  5. Make the pink dot a child of the rectangle.

    Map3.png

  6. In the pink dot's element editor, in the settings tab, give it the ID, ring.

Next, add actions to the location indicators (aka the pink dots) to make them scale up when the mouse enters and then scale down the mouse leaves:

  1. Still in the settings tab of the pink dot called, ring, adjust the Scaling property to 50% for both the x and y coordinates. (50% is represented as 0.50)

  2. Adjust the Alpha by also lowering it to 50% (0.50)

  3. In the actions tab add the following action:
    Source = Mouse Enter; Action = Change Element Scale; Scale X/Y = 1; Target = $self.
    This action says that when the mouse enters the pink dot, the pink dot ($self) will scale up to 100% (from 50%).

  4. Add the next action:
    Source = Mouse Leave; Action = Change Element Scale; Scale X/Y = .5; Target = $self.
    This action just reverses the previous action: When the mouse leaves the pink dot, the pink dot ($self) will scale down to 50% (from 100%).

  5. Now add the following actions to change the visibility at the same time:
    Source = Mouse Enter; Action = Change Element Alpha; Alpha = 1; Target = $self.
    When the mouse enters the pink dot, the pink dot's ($self) alpha channel (or visibility) will be changed to opaque or 100% (from 50%).

  6. Add the next action:
    Source = Mouse Leave; Action = Change Element Alpha; Alpha = .5; Target = $self. Again, this action reverses the previous action. When the mouse leaves the pink dot, the pink dot ($self) will return to 50% transparency.

  7. Click OK to exit the element editor.


Now, almost finished, add the second pink dot which will represent the other panorama location. In our example, the second pink dot represents the library panorama.

  1. Copy (CMD+C or CTRL+C) the pink dot, called ring, and paste (CMD+V or CTRL+V) it to the editor.
    This will add not only the second pink dot, but all of it's actions and parameters as well.

  2. Give the second pink dot the ID, library.

  3. Move the dot, called library, to the upper right corner of the rectangle.

    Map4.png

  4. Make the library dot a child of the rectangle.

    Map5.png

Finally, add the actions that will make these dots clickable and direct the user to their respective panorama:

  1. In the Actions/Modifiers tab of the ring dot, add the following action:
    Source = Mouse Click; Action = Open Next Panorama; URL = ring_out.swf

  2. In the In the Actions/Modifiers tab of the library dot, add the following action:
    Source = Mouse Click; Action = Open Next Panorama; URL = library_out.swf

  3. Click OK to exit the element editor.

  4. Click OK in the Skin Editor.

  5. A message will appear asking if you would like to save the changes. Click, Save. This will save your changes to the skin.

  6. Click OK in the Flash settings panel.

  7. A message will appear asking if you would like to create the Flash movie. Click, Yes. Pano2VR will begin compiling your movie.

Your movie should have the rectangle in the upper left corner with two pink dots at 50% of their size and 50% of their transparency. When the mouse enters the pink dots, they should scale up in size and become fully visible. When the mouse leaves, they should return to their to their starting size and transparency. The buttons should also be interactive and take the user to the correct panoramas.

Part 6: Using Proxies & Indicating Location[edit]

Video loading...

Watch this video on YouTube


Integrating an interactive map in a tour is always a bonus. But wouldn't it be great if the map could indicate where the user is within the tour? Using hotspot proxies gives us the ability to connect the map (or any element in the skin) to other hotspots within the panorama.

In the hotspot editor, there are IDs. These IDs also act as the proxies. For area hotspots, the ID will always be a number. Point hotspot IDs are whatever you enter into the ID text field.

Area ID
Point ID


To begin (this set-up process is no longer necessary in version 3.0):

  1. Open the hotspot editor of the first panorama (ring.p2vr). Go to the Area Hotspot tab.

  2. In the URL field, replace whatever text is currently in this field with a pound symbol (#).
    The pound symbol tells Pano2VR to use the URL specified in the skin editor. You'll want to do this for every hotspot that will be calling a proxy. In our example, we are calling 2 proxies from 2 different hotspots.

  3. Click OK to exit the hotspot editor.

  4. Save the project.

  5. Open the second panorama project (library.png). From the menu, choose File > Open.

  6. Go to the hotspot editor. Open the point hotspot editor.

  7. Replace the current URL with the pound sign (#).

  8. Click OK to close the hotspot editor.

  9. Save and close the second panorama project.


To indicate where the user is within the tour, we will use a third image that will glide from the ring pink dot to the library pink dot, animating the movement between these 2 points in the tour.

  1. Open the skin editor of the ring project (ring.p2vr).

  2. Click the Add Image Add image.pngbutton and from the Part 6 project folder, choose dot2.png for the third image.
    Because this image will be floating between the locations of the two pink dot. This third image, or yellow dot, must start at the exact location of one of the pink dot's locations.
  3. First, give the yellow dot an ID. You can add the ID by making sure the image is selected and in the ID field in the editor panel, type the ID, yellow dot.

  4. Next, in the Actions/Modifier's tab of the pink dot ring, add the following action:
    Source = Init; Action = Set Element Position; Offset X/Y = $self; Target = yellow dot (ID of third image).
    This action sets the yellow dot to this pink dot's ($self) location.

  5. In the setting tab of the element editor, add the correct hotspot proxy ID. Since this pink dot (called ring) is associated with the point hotspot also called ring, it's Hotspot Proxy ID is the ID given to the point hotspot. In our example, this ID is ring.
    Now that there is a hotspot proxy for the pink dot called ring, it is possible to make the yellow dot react to interaction with either the hotspot itself or the pink dot.

  6. Back in the Actions/Modifiers tab of the pink dot, add the following action:
    Source = Mouse Click; Action = Change Element Position; Offset X/Y = $self; Target = yellow dot. #:This action will cause the yellow dot to move to the pink dot's position when the pink dot or the associated hotspot is clicked on.


Next, override the default view. This will correct the position of the panorama to reflect how the user enters the image:

  1. Still in the Actions/Modifiers tab of the pink dot, override the default field of view of the ring panorama by entering the Pan, Tilt, and Field of View parameters in the Pan/Tilt/FoV field of the Mouse Click-Open Next Panorama action.

    Ptf.png

    If you are following along with the demo project, you can enter: 140/5/92. These numbers came from the viewing parameters section.
  2. Click OK to exit the element editor.

  3. Open the element editor for the pink dot called, library.

  4. Enter the Hotspot Proxy ID: 1.
    This is the ID of the area hotspot that links to the library.

  5. In the Actions/Modifiers tab of the pink dot called library, add the following action:
    Source = Mouse Click; Action = Change Element Position; Offset X/Y = $self; Target = Yellow dot.
    This action will move the yellow dot to this pink dot's location when it or it's corresponding hotspot is clicked on.

  6. Add Pan, Tilt, and FoV parameters in the Pan/Tilt/FoV field of the Mouse Click-Open Next Panorama action. If you're following along with the demo project, you can enter: 41.5/11/70.


Finally, make sure the yellow dot starts at the position, 0,0, which is relative to it's parent, the rectangle:

  1. Make the yellow dot a child of the rectangle.
    When you do this, it's coordinates will change to reflect it's position relative to the rectangle. However, the position is not correct.

  2. In the editor panel for the yellow dot, enter the rectangle's coordinates in the Position x and y fields.
    In our example, the rectangle's coordinates are 9,8. Therefore, the yellow dot should have the same. When the coordinates, 9,8 are entered, the yellow dot's coordinates in the tree will change to 0,0, showing it's relative position to the rectangle.

    Coordinate.png

  3. Click OK to exit the skin editor.

  4. Click OK again to exit the Flash parameters.

  5. A message will appear asking if you would like to create the Flash movie. Click, Yes. Pano2VR will begin compiling your movie.

The yellow dot (or third map image) should be visible and when you interact with a hotspot or a map element (the pink dots) the dot should float to the corresponding position within the map. The perspectives should also be corrected.

See also[edit]

Pano2VR - Hotspot Editor

Skin Editor

Skin Actions

Skin Sources

Skin Modifiers