Transparent HTML5 Object Project

Fri Mar 07, 2014 5:12 pm

HI All,
Been ask about this a few times now and after an e-mail to support thought I would post for everyone.
Remember this is an HTML5 project.

In the zip:
Bunch or robot images for the main robot object and the robot.o2vr project file and oio.ggsk skin file.
The there is also the Reindeer transparent folder.
In this folder you will find tif's with transparency and the reaindeer.o2vr project file.
There is also a copy of the HTML page.

So to produce a transparent object:
Input images need to have a transparent background, example png, tif or psd.
In the Object2VR HTML5 output's settings tab deselect Background Visible.
As this is going in an iFrame set the HTML page to Fullscreen.

Once you have published you need to add some code to make the HTML page transparent. Add the following between the head tags of the HTML page:

Code: Select all

<style type="text/css">
    html,
    body {
      background-color: transparent;
    }
  </style>

Thats it, the project is ready, please note if you re-output you will overwrite the HTML page so best to rename it.

The main project that will display the transparent object has a point hotspot that uses the transparent object as an animated point hotspot graphic.
This is made by using a text box with the required iFrame code to display the object. Note, there is a rectangle that covers the text box called click_plate. This has the actions to open the larger object. I say larger object, it's the same object in a larger window.

The point Hotspot has the iFrame code in it's URL text field and this is called by a place holder in the skin $hu.
When the point hotspot is clicked this opens the larger text box and sets the text from the hotspot editor's URL text field.
I also have also used a rectangle to act as a screen tint, with white background with alpha. This fades out the main object when the popup is displayed.
To highlight the close button I have added a dark background to the close button.

Hope you ring it useful.
Of course this means you can make very cool animated point hotspots with Object2VR and this same method can be used in Pano2VR with object hotspots.
Regards,
Hopki