3D Distortion Hotspot Images
In this tip, we demonstrate how to create animated point hotspots using 3D distortion. In our example, when the mouse enters the hotspot area, the doors transition from closed to open. Below, we will outline how to do this.
Create the roll over effect
Create the panoramas
- Shoot the panorama. Shoot two versions of the panorama. Unless you will have hotspots in every direction, you only need to take one panorama with multiple versions of a direction. In our example, we have one image with the doors closed and another with the doors open.
- Stitch the panorama. We are using PTGui. To make this processes easier, you just need to replace an image:
- Save the stitched panorama and create it. Name it according to it's action, i.e. pano_mouse_enter.jpg.
- Go the Source Images tab and select the image to replace.
- Click, Replace. Add the alternative image.
- Output the panorama and save the project.
◊ TIP: When naming the panoramas include, mouse_enter (or the like) and the other mouse_up (or the like) to help distinguish between the two versions.
Extract a patch and a hotspot
- Open Pano2VR.
- Go the Settings/Preferences. Open the Advanced Tab Select, Add position to file name for the Patch setting.
- Close Pano2VR to restart it.
- Import the Mouse Enter or Roll Over panorama. In our example, this is the image with the doors open.
- Open the Patch Tool.
- Frame the patch of the roll-over area. Try to get the area of animation so that it fills the patch window.
- Extract the patch.
- Find the patch's center. An even number will work best. If your patch is not even, open the patch and adjust the FoV a few points to achieve the size you want. In our example, our patch is 344x344.
- Save and close this project.
- Open a new Pano2VR project and add the mouse up panorama. In our example, this is with the doors closed.
- Add a point hotspot. Anywhere on the pano is fine because in the next step, you'll add the pan, tilt and field of view values manually
- Find the patch you extracted. The file name includes it's position values. (p = pan; t = tilt, r = roll, f = field of view)
- Enter these values in the Hotspot List of the Hotspot Editor.
- Save the project.
- Add an HTML5 output.
- Open an existing skin or a new skin.
- Drag in the patch image to the Editor.
- Change it's position to X = 0; Y = 0, in the Position section of the Tree.
- Add a hotspot template.
- Place the template in the center of the patch image. Divide the patch image's width in half and enter this number for it's position. In our example, X = 172; Y = 172.
- Make the patch image a child of the hotspot template.
- Select the hotspot template and open it's properties.
- Enable 3D Distortion.
- Set the template's distance using this formula: panorama width / 2 / 3.1415. For example, 6000/2/3.1415 = 954.4 .
Create an active area
Because the image is a hotspot, you can't click and drag in this portion of the panorama. We also don't want the image to show all the time; only when the mouse rolls over the door. To fix this, we need to create a active area.
In the skin editor:
- Select the image and in it's Appearance section, Set Alpha to 0.
- Draw a rectangle over a portion of the hotspot image.
- Set the rectangle's Alpha to 0.005. This keeps the rectangle active in Flash while being invisible.
- Make the rectangle a child of the template and keep it above the hotspot image.
- Add the following actions to the rectangle:
- Source = Mouse Enter; Action = Change Element Alpha; Alpha = 1; Target = patch image
- Source = Mouse Leave; Action = Change Element Alpha; Alpha = 0; Target = patch image
Blend the patch image
The patch image might differ from the panorama and therefore needs to be blended to match. There are few ways to do this so we'll go over some.
- Open the patch in an image editing software (Photoshop).
- Add a layer mask.
- Blend out (erase) the edges using the brush tool.
- Save as PNG-24. (File > Save for Web).
- Open the Pano2VR project (from above).
- Open it's skin.
- Select the patch image.
- In the image properties, click Change... to replace the image. Select the updated patch image. Make sure Format is set to PNG.
- Save the project and re-output.
Unfortunately, using the PNG format will generate a large file size. This would not be ideal if the project already contains a lot of elements.
For a smaller file size, use JPG for the blended rollover image.
- Open the working project (from above).
- Open the patch editor.
- Enter the position details of the original patch (i.e. doors open image from above).
- Extract the patch.
There should now be two patch images. One for the mouse up and one for the roll over (or mouse enter).
- Open this new patch (mouse up) in Photoshop (or your favorite editor).
- Drag the roll over patch on top of the mouse up patch (the new one) and line it up.
- Mask out the edges of the upper later (mouse enter).
- Save as a JPEG.
- Replace the old patch in the skin using the same steps as above. Just make sure the image output is JPEG.
Load them externally
- Open the skin (same one that's been used in all previous steps).
- Add an External Loader.
- Change its position to X = 0; Y = 0.
- Change its size to match the patch image. (In our example it would be 344x344)
- Change its ID to match the patch image. (In our example, we used the default ID of Image 1.)
- Make the External Loader a child of the Hotspot Template
- Move the rectangle up the tree so it's above the external loader.
- Remove the patch image. The external loader is the taking the place of the patch image.
- Select the external loader and change its Alpha to 0 in the Appearance section.
- In the External loader section, define its URL. Enter the file name of the roll over (mouse enter) patch image. For example, rollover.jpg.
- Save the skin
- Output the project.