Popup image ideas

[Hopki]

Been asked about popups so I thought I would post some slightly different takes on them.
Unzip the attached project and hit the create all button. The Remap output will generate three images from the panoramas and put then in a sub directory of the output folder called pictures.

There are four skins, each has a different way of showing the popup. The Green hotspots are for navigation while the blue open the popups.
1) This has the popup open in the middle of the screen and has a screen tint that prevents further panorama interaction until the popup is closed.
2) This anchors the popup to the hotspot, as there is no screen tint this allows for interaction and opening further hotspots which may not be desirable. In this case just add the screen tint.
3) The Hotspot Templates have the 3D distortion selected so the hotspot image and popup appear to be pinned to the panorama. This skin also allows interaction and other popups to be selected.
4) In this version there is the action to hide the other popup hotspots until the open one is closed.

Hope it gives you some ideas
Regards,
Hopki

[kasenyee]

CHEERS THANKS!

[Hopki]

Obviously I have far to much time on my hands, anyhow here is another popup with slide show.

Open the project and click Create All to begin.
This is using node markers to load a different set of images depending on the panorama.
Actually all I am doing is swopping the order of images but you will get the idea. It is also loading .jpg and .png files as well as changing the text of the order of images and file type. This lends itself to many applications when having to displaying formation about a particular location.

The skin works just as well in Flash as it does in HTML5.
Couple of things that are noteworthy, the node markers node_01_images to node_03_images all have the actions to load the pictures in the external loaders, pic01 to pic03.

The node markers are responding to the Tour Node as this was made in Pro, however if you tag each pano in the user data this will then work with the non Pro version too.

The last two actions, Set Element Position, this ensures that when the panorama loads the slideshow is at the start position. The Deactivate Set Element Scale action will hide the popup slideshow when you leave the panorama. I am using Set Element Scale 0 and 1 to hide and show the popup, if you remove this action the popup will remain showing until it is closed manually.

The two Remap outputs put the pictures in the images folder, I just added thumb to the file name so they don’t get mixed up with any other images in the folder.

Because Flash will not allow the hand cursor on text boxes I have added a rectangle with the colour picker alpha set to 10, this makes it active but invisible and can have the hand cursor.

The funky rotating Point Hotspot is just using modifiers to rotate the element hs_ring when you move the panorama around. Its reacting to Pan, Tilt and FoV.

The slide show, to add more pictures, just make them 200 x 200px.
In the skin editor file tree expand the element, background. Then external loader pic03, copy it.
Then click on the element slider and paste, this will add a copy of pic03. Rename it to pic04 and change its position X: 822, in other words just add 200px from the last loader.

Now all you have to do to show the extra picture is open the text element scroll_left and change the Offset X/Y to move 200px more, so: -200/0/-600/0 => Target: Slider.

If you wanted to add another picture just repeat but adding another 200px to all the above.
You also need to add another node marker, just copy one of the existing in the skin and modify its actions, this is far quicker then placing a new one in.
Thats about it.
Until the next time the wife goes shopping and I'm left on my own for a few hours.
Regards,
Hopki

[jmcilvaine]

Good stuff Hopki!

[alphap24]

I went through just your first post Hopki so far.. Very useful without doubt!! thanks

[jmcilvaine]

Hopki should have a Pay Pal Donate button so we can send Mrs Hopki on more shopping trips....

[frodo]

Hi, Hopki!
Since a while now I´ve not being around and trying to put myself up to date, I´ve found this thread. When opening the project file it´s empty. Is it just for version 4 or am I missing something?
Thanks for your help as usual.
Regards, Martin

[Hopki]

Hi Martin,
It is a Pro project but the skin should work just as well with Pano2VR, it needs version 4.x as it is using node markers.

The only modifications you need to do is tag the panoramas in the user data and add your hotspot Skin-ID's in each individual p2vr file.
So for navigation point hotspots use the Skin-ID: hs and for the popups use the Skin-ID: hs_slideshow.
In the skin the node markers are set to activate with the nodes, pano_01 etc.
Without Pro you can enter a tag, so if you added a tag to each pano, example pano_01, pano_02 etc then it will then work.
Regards,
Hopki