Hotspot Active Area for a Boat

[Panomaker]

I created a hotspot with box object:
<box id="boat5" alt="Catboat" url="images/hotspot_boat5.png"
alpha="0" pan="-15.00" tilt="-28.00" orientation="sphere" rotationX="-1.00" rotationY="1.00" depth="0" scale="0.69" onClick="openUrl(http://www.worldofboats.org/collection/view/75/20, _self)"/>


on the blue boat by the window in the pano here:
http://www.visitearth.com/wob/wob1.htm

I would like the mouse hand to only become active when over the boat. I tried creating a png with the boat cut out and the rest transparent. I then used distortion to line it up before setting alpha to 0 but no joy.

What am I doing wrong?

Is there any way to fix this? Thanks David

[Panomaker]

http://www.visitearth.com/wob/images/hotspot_boat5.png

[Panomaker]

I have an idea to rotate the boat and slim down the PNG. It should help.

Am I right in thinking that even if the area is transparent the mouse will react to it in FPP?

Cheers David.

[Panomaker]

Tried that but the boat is much harder to match up with pano using distortion.

[Trausti Hraunfjord]

You are not doing anything wrong.... except assuming that the image (which is a square of 651px Ч 537px ) only reacting to the visible area, and not reacting to the invisible area.

The transparent parts of the image are also a part of the image... therefore the mouse reacts to those parts as well.

What you COULD do, is to make many (100 or so) small images that would be able to cover the boat itself, and not the surrounding area. Place the images in the correct positions. Hotspot link the images to the page you want it for. Make sure you have a copy of those images completely transparent, exchange the coloured ones for transparent ones... and a day later you have the area of the boat covered, and nothing else.

As it is now, the mouse reacts when it moves over the transparent area.... that's just how things work today.

Here is a little illustration of the (large) process you could use for covering only the boat. If someone else has a better solution, then I'm sure people will have a good time laughing at my suggestion. :)
http://flashpanoramas.com/forum/attachment.php?attachmentid=110&stc=1&d=1226693294

[Panomaker]

Hi Trausti

lol, I will be working on the project until next year for all the boats!

I came across 'hotspots by drawing' on the forum:
http://flashpanoramas.com/forum/showthread.php?t=1453&highlight=drawing+hotspots

Would be nice to know how Axecrazy managed? Maybe that is the answer?!

Cheers David

[nidrig]

Hi,

What if you put your png boat in a flash movie and load the newly created swf in the xml, instead of the png? It should do the trick.

cu

[Panomaker]

Thanks Nidrig, Tried the swf file with PNG. Not working unless I'm doing something stupid. I don't know Flash so well but FPP is still treating the swf file the same as a png.

Any more thoughts?!

[Trausti Hraunfjord]

In an earlier request to Denis, I understood that he would be changing the structure of the next version of FPP (2.4) in order to allow direct drawing onto the pano. That would allow for any form of irregular masking of an area to be clicked within the mask only.

For now... it's as it is.

[AxeCrazy]

Hi Trausti
Would be nice to know how Axecrazy managed? Maybe that is the answer?!

Cheers David

Yes i did manage to get he hotspot defined via drawing, but not within the pano.
I created an application for this, in which i can load an image, draw a hotspot area and save this as a XML file.
Next i created a swf component which reads this XML file and on which the user can interact. Al this has been used to create a game.
All scenes have been modelled in 3D.
see attachment

I needed to functionallity to create hotspot via a game editor for navigating between various localition within the game and create objects in the pano which you can pick-up (eg. a flashlight)
Only major drawback of this option is that such a swf caan only be loaded into a spot object and not into a box object and will therefore not be distorted very neatly. Curtenly not with obects the size of the boat.

So i am also waiting for version 2.4 in which probably also swf can be loaded into a box object and will get distorded in a neat way.

[nidrig]

Thanks Nidrig, Tried the swf file with PNG. Not working unless I'm doing something stupid. I don't know Flash so well but FPP is still treating the swf file the same as a png.

Any more thoughts?!

Did you add a mask on the boat?

[Scott Witte]

I would like the mouse hand to only become active when over the boat. I tried creating a png with the boat cut out and the rest transparent. I then used distortion to line it up before setting alpha to 0 but no joy.


David,

You were close in your approach. Try this: Create a rectangular png roughly the dimensions of the boat, say 200h x 500w px. Lay it down as a box object over the boat. Now distort that to closely cover only the boat. Make the box object transparent (alpha=0) and set your actions to occur with the box object. The fit won't be exact but it can be close and easier than the other solutions suggested until v2.4 comes out.

[Panomaker]

#Nidrig,
I tried learning some Flash and applying a mask. It did have an effect on the hover area, but I still couldn't line it up with the boat. I couldn't avoid having an active area outside the margins of the boat.

#AxeCrazy,
Wow... you have an amazing project there! It will be great to see the final project after 2.4.

#Scottie,
This is the best way for now. Thanks for the tip. It covers quite a lot of the boat without any overlap areas:
<box id="boat5" alt="Catboat" url="images/hotspot_boat.png" pan="1.00" tilt="-17.00" orientation="sphere" rotationX="72.00" rotationY="-37.00" depth="0" scaleX="1.35" scaleY="0.42" alpha="0" onClick="openUrl(http://www.worldofboats.org/collection/view/75/20, _self)"/>

I've updated http://www.visitearth.com/wob/wob1.htm.

Exciting times lie ahead with drawing hotspots in 2.4. I can't wait!

Cheers,
David.

[Trausti Hraunfjord]

Somehow this has to be possible. Have a look at the preview button here:

http://digitalurban.blogspot.com/2008/08/cloud-gate-chicago-flash-panorama.html

If you go with your mouse in the cleavage in the top of the button, the area does not react as a part of the button.

For me, this indicates that it has to be possible to mark an area precisely.

Anyone who understands code should be able to figure out how this is done by having a look at the preview plugin from FPP.