Polygonal Hotspots

[3rw1n]

Hi everyone,

I'm a former PurePlayerPro user and used to create hotspots as invisible active area. It was called polygonal hotspot.

Code looked like that =>

<polygon>
<vertex pan="-60.139565" tilt="-1.037607"/>
<vertex pan="-69.241875" tilt="-0.984498"/>
<vertex pan="-71.933044" tilt="-1.212121"/>
<vertex pan="-76.638893" tilt="-2.921405"/>
<vertex pan="-76.540642" tilt="-4.918294"/>
<vertex pan="-55.563255" tilt="-4.607037"/>
<vertex pan="-55.584007" tilt="-3.468971"/>
</polygon>

Is there anyway to do something like that with FP?

[zleifr]

No, not directly. The work around would be to compose the shape using a few hotspots rectangular hotspots appropriately placed and/or rotated and put the same action on all of them, and alpha=0 to make it invisible and active.

So if you wanted a T shape, use two rectangles. If you want an X shape use two rectangle with rotation set appropriately. For a pyramid, set a bunch of rectangles on top of each other with decreasing widths.

It's the calculus approach.

[3rw1n]

Thank you for the tip, but I guess I'll have to figure out something else for some of my hotspots. ie gallo-roman path hotspot on this tour => http://visitimo.fr/clients/francmayne/relais_en/

Your technique is of course a good one, but maybe I can find another workaround, maybe a png with some transparence in it?

++
Erwin

[zleifr]

Nice tour!

It took me forever to find the gallo-roman paths. But replicating that hotspot seems very possible using the method I outlined. I would use box spots, so that they can be distorted. In fact, just make a 1 px png load it into 3 or 4 distorting box spots and set the orientation to down and move them on top of the path with pan tilt, depth, rotation, whatever, and you can use scalex and scaley to change the width and length of each spot.

The more work, and more spots you use, the closer to perfect you will get. I would guess that with 3 or 4 you could have it be as good as it is now.

Zephyr

[zleifr]

Use the editor plugin to place them. and when you've got them all placed change the alpha to 0.

[3rw1n]

Thank you a lot for helping, I will try your technique tonight.

++
Erwin

[3rw1n]

Thank you again, I managed to do this => http://visitimo.fr/clients/francmayne/FPP/bibi.html

I worked all night on it, it's not perfect at the time but I guess that with a little help of you guys I'll be able to make it look nice.

Any review is welcome, especially on how the hotspots(image growing) are managed. I think I coud have done it a lot easier.

By the way here's a piece of the xml file if it interests any of you =>

<?xml version="1.0"?>

<panorama>

<parameters>

panoName = pano_small
layer_1 = hotspots.swf
layer_4 = loadMeter.swf
layer_2 = autorotator.swf
layer_3 = editor.swf
loaderTextColor = #FFFFFF
loaderBackColor = #000000
loaderText =
zoomMax = 1.7
zoomMin = 0.3

</parameters>

<hotspots>

<global LocalConnectionID="lc_test" onStart="loadPreview();" loadPreview=" loadPano(?panoName=pano_small); onTransitionEnd=loadMain(); " loadMain="pano.leash=lock; loadPano(?panoName=pano,400); onTransitionEnd= " goUp=" pano.qualityStatic=low; saturation=0,1000; contrast=0,1000; blendMode=normal; depth=15; static=1; scaleable=0; staticX=0,1000; staticY=0,1000; scale=1,600; distance=1,800; rotationX=0,1000,elastic; rotationY=0,1000,elastic; rotationZ=0,100; global.timer=1,500; pano.qualityStatic=medium; " goDown=" pano.qualityStatic=low; saturation=-0.5,1000; contrast=-0.22,1000; depth=10; static=0; scaleable=1; scale=0.5,500; distance=1,600; rotationX=0,600; rotationY=0,600; global.timer=1,700; pano.qualityStatic=medium; " restoreQuality="pano.qualityStatic = medium;" hideInfo=" infoscreen.visible = 0; ">


<spot id="prefs" url="images2/prefs.png" smoothing="1" static="1" visible="1" onClick="visible=0;fullscreen(-);fs.visible=1" depth="5"/>

<spot id="fs" static="1" salign="RB" align="RB" smoothing="1" staticX="-15" staticY="-15" url="images2/fs.png" blendMode="lighten" onOver="fsinfo.visible+=1;scale=1.1,600,elastic;depth+=20" onOut="fsinfo.visible=0;scale=1,300;depth-=20" onClick="fullscreen(-)" visible="0"/>

<spot id="fsinfo" static="1" salign="RB" align="RB" staticX="-85" staticY="-15" url="images2/fsinfo.png" visible="0"/>



<box id="GR1" url="images2/spot.png" pan="-149.00" tilt=" -31.00" rotationX="44.00" align="RB" depth="1" scaleX="1000.00" scaleY="40.00" onOver="gallosmall.visible+=1" onOut="gallosmall.visible=0" onClick="gallo.openMe" alpha="0"/>

<box id="GR2" url="images2/spot.png" pan="-127.00" tilt=" -18.25" distance="1.12" rotationX="67.00" rotationY="-52.00" align="RB" depth="2" scaleX="500.00" scaleY="25.00" scaleable="0" onOver="gallosmall.visible+=1" onOut="gallosmall.visible=0" onClick="gallo.openMe" alpha="0"/>


...
...
...



<box id="gallo" saturation="-0.5" contrast="-0.25" static="1" sAlign="LT" align="LT" staticX="5" staticY="5" visible="0" depth="250" scaleX="0.4" scaleY="0.4" url="images2/gallo.jpg" openMe="hidePic(); global.hidePic=gallo.closeMe; goUp(); sAlign=CM ; align=CM ; staticX=0; staticY=0; gallo.visible+=1; gallosmall.visible=0 ; onClick=closeMe" closeMe="global.hidePic=; goDown(); visible=0; onClick=;"/>
<box id="gallosmall" static="1" sAlign="LT" align="LT" staticX="5" staticY="5" visible="0" depth="250" scaleX="0.4" scaleY="0.4" url="images2/gallo.jpg"/>

...
...
...

</global>

</hotspots>

</panorama>




++
Erwin

[zleifr]

You are definitely making progress. Now put some tooltips on all those spots.

And I never quite could figure out what brings up the little photo in the top left corner sometimes, and others it brings up the photo in the middle. maybe put a little close button on the photo.

And, you could pull up the little photos within a tooltip, so that they would be more connected to the mouse over the pano.

Just some thoughts.

[3rw1n]

You are definitely making progress. Now put some tooltips on all those spots.


And, you could pull up the little photos within a tooltip, so that they would be more connected to the mouse over the pano.

What are you calling tooltips?

And I never quite could figure out what brings up the little photo in the top left corner sometimes, and others it brings up the photo in the middle. maybe put a little close button on the photo.


You can see it in my xml file

<box id="GR1" url="images2/spot.png" pan="-149.00" tilt=" -31.00" rotationX="44.00" align="RB" depth="1" scaleX="1000.00" scaleY="40.00" onOver="gallosmall.visible+=1" onOut="gallosmall.visible=0" onClick="gallo.openMe" alpha="0"/>

<box id="GR2" url="images2/spot.png" pan="-127.00" tilt=" -18.25" distance="1.12" rotationX="67.00" rotationY="-52.00" align="RB" depth="2" scaleX="500.00" scaleY="25.00" scaleable="0" onOver="gallosmall.visible+=1" onOut="gallosmall.visible=0" onClick="gallo.openMe" alpha="0"/>




<box id="gallo" saturation="-0.5" contrast="-0.25" static="1" sAlign="LT" align="LT" staticX="5" staticY="5" visible="0" depth="250" scaleX="0.4" scaleY="0.4" url="images2/gallo.jpg" openMe="hidePic(); global.hidePic=gallo.closeMe; goUp(); sAlign=CM ; align=CM ; staticX=0; staticY=0; gallo.visible+=1; gallosmall.visible=0 ; onClick=closeMe" closeMe="global.hidePic=; goDown(); visible=0; onClick=;"/>
<box id="gallosmall" static="1" sAlign="LT" align="LT" staticX="5" staticY="5" visible="0" depth="250" scaleX="0.4" scaleY="0.4" url="images2/gallo.jpg"/>


I made 2 instances of the same image, but I guess I could have made only one with some special parameters.

++

[3rw1n]

You are definitely making progress. Now put some tooltips on all those spots.


And, you could pull up the little photos within a tooltip, so that they would be more connected to the mouse over the pano.

What are you calling tooltips?

EDIT : I got it, I found the tooltips tool, I guess i have to had a tooltip layer in <parameters> and to add alt params in my spots.

And I never quite could figure out what brings up the little photo in the top left corner sometimes, and others it brings up the photo in the middle. maybe put a little close button on the photo.


You can see it in my xml file (there was a huge space between some parameters on the above example. Maybe you missed some)

<box id="GR1" url="images2/spot.png" pan="-149.00" tilt=" -31.00" rotationX="44.00" align="RB" depth="1" scaleX="1000.00" scaleY="40.00" onOver="gallosmall.visible+=1" onOut="gallosmall.visible=0" onClick="gallo.openMe" alpha="0"/>

<box id="GR2" url="images2/spot.png" pan="-127.00" tilt=" -18.25" distance="1.12" rotationX="67.00" rotationY="-52.00" align="RB" depth="2" scaleX="500.00" scaleY="25.00" scaleable="0" onOver="gallosmall.visible+=1" onOut="gallosmall.visible=0" onClick="gallo.openMe" alpha="0"/>




<box id="gallo" saturation="-0.5" contrast="-0.25" static="1" sAlign="LT" align="LT" staticX="5" staticY="5" visible="0" depth="250" scaleX="0.4" scaleY="0.4" url="images2/gallo.jpg" openMe="hidePic(); global.hidePic=gallo.closeMe; goUp(); sAlign=CM ; align=CM ; staticX=0; staticY=0; gallo.visible+=1; gallosmall.visible=0 ; onClick=closeMe" closeMe="global.hidePic=; goDown(); visible=0; onClick=;"/>
<box id="gallosmall" static="1" sAlign="LT" align="LT" staticX="5" staticY="5" visible="0" depth="250" scaleX="0.4" scaleY="0.4" url="images2/gallo.jpg"/>


I made 2 instances of the same image, but I guess I could have made only one with some special parameters.

++

[3rw1n]

I managed to place tooltips.

And, you could pull up the little photos within a tooltip, so that they would be more connected to the mouse over the pano.

What should I add to the xml to do it your way?

<?xml version="1.0"?>

<panorama>

<parameters>

panoName = pano_small
layer_1 = hotspots.swf
layer_4 = loadMeter.swf
layer_2 = autorotator.swf
layer_3 = editor.swf
layer_5 = tooltips.swf
loaderTextColor = #FFFFFF
loaderBackColor = #000000
loaderText =
zoomMax = 1.7
zoomMin = 0.3

</parameters>


<tooltips>
altFont=Century Gothic
altSize=30
altColor=0x000000
altFill=0xFFFFFF
altStroke=0x999999
altAlpha=0.6
</tooltips>


<hotspots>

<global LocalConnectionID="lc_test" onStart="loadPreview();" loadPreview=" loadPano(?panoName=pano_small); onTransitionEnd=loadMain(); " loadMain="pano.leash=lock; loadPano(?panoName=pano,400); onTransitionEnd= " goUp=" pano.qualityStatic=low; saturation=0,1000; contrast=0,1000; blendMode=normal; depth=15; static=1; scaleable=0; staticX=0,1000; staticY=0,1000; scale=1,600; distance=1,800; rotationX=0,1000,elastic; rotationY=0,1000,elastic; rotationZ=0,100; global.timer=1,500; pano.qualityStatic=medium; " goDown=" pano.qualityStatic=low; saturation=-0.5,1000; contrast=-0.22,1000; depth=10; static=0; scaleable=1; scale=0.5,500; distance=1,600; rotationX=0,600; rotationY=0,600; global.timer=1,700; pano.qualityStatic=medium; " restoreQuality="pano.qualityStatic = medium;" hideInfo=" infoscreen.visible = 0; ">

//panneau d'entrйe
<spot id="prefs" url="images2/prefs.png" smoothing="1" static="1" visible="1" onClick="visible=0;fullscreen(-);fs.visible=1" depth="5"/>

//bouton plein-йcran
<spot id="fs" alt="plein-йcran" static="1" salign="RB" align="RB" smoothing="1" staticX="-15" staticY="-15" url="images2/fs.png" blendMode="lighten" onOver="scale=1.1,600,elastic;depth+=20" onOut="scale=1,300;depth-=20" onClick="fullscreen(-)" visible="0"/>

//chemin gallo-romain
<box id="GR1" alt="chemin gallo-romain" url="images2/spot.png" pan="-149.00" tilt=" -31.00" rotationX="44.00" align="RB" depth="1" scaleX="1000.00" scaleY="40.00" onOver="gallosmall.visible+=1" onOut="gallosmall.visible=0" onClick="gallo.openMe" alpha="0"/>
<box id="GR2" alt="chemin gallo-romain" url="images2/spot.png" pan="-127.00" tilt=" -18.25" distance="1.12" rotationX="67.00" rotationY="-52.00" align="RB" depth="2" scaleX="500.00" scaleY="25.00" scaleable="0" onOver="gallosmall.visible+=1" onOut="gallosmall.visible=0" onClick="gallo.openMe" alpha="0"/>
<box id="gallo" saturation="-0.5" contrast="-0.25" static="1" sAlign="LT" align="LT" staticX="5" staticY="5" visible="0" depth="250" scaleX="0.4" scaleY="0.4" url="images2/gallo.jpg" openMe="hidePic(); global.hidePic=gallo.closeMe; goUp(); sAlign=CM ; align=CM ; staticX=0; staticY=0; gallo.visible+=1; gallosmall.visible=0 ; onClick=closeMe" closeMe="global.hidePic=; goDown(); visible=0; onClick=;"/>
<box id="gallosmall" static="1" sAlign="LT" align="LT" staticX="5" staticY="5" visible="0" depth="250" scaleX="0.4" scaleY="0.4" url="images2/gallo.jpg"/>

...
...
...


</global>

</hotspots>

</panorama>

[zleifr]

Well, changing one word in the tooltips code will allow you to put html tags in the tooltips, including the <img> tag, and thereby you can put images in the tooltips by passing an alt value like this:
alt="&lt;img src='path/2/image'&gt;"

The only thing you have to remember is the use
&lt; in place of <
&gt; in place of >

And the one change that needs to be made to tooltips is the line that say tip_txt.text = ...
needs to say
tip_txt.htmlText = ...

If you have Flash you could do it, or I can do it later.

Zephyr

[zleifr]

Here is the updated file. I haven't had a chance to test it. So you are the guinea pig!

[3rw1n]

Hi,

Thanks for updating your plugin so fast.
I uploaded the updated tooltips.swf and did modify my xml

//chemin gallo-romain
<box id="GR1" alt="&lt;img src='images2/camp.jpg'&gt;" url="images2/spot.png" pan="-149.00" tilt=" -31.00" rotationX="44.00" align="RB" depth="1" scaleX="1000.00" scaleY="40.00" onOver="gallosmall.visible+=1" onOut="gallosmall.visible=0" onClick="gallo.openMe" alpha="0"/>
<box id="GR2" alt="chemin gallo-romain" url="images2/spot.png" pan="-127.00" tilt=" -18.25" distance="1.12" rotationX="67.00" rotationY="-52.00" align="RB" depth="2" scaleX="500.00" scaleY="25.00" scaleable="0" onOver="gallosmall.visible+=1" onOut="gallosmall.visible=0" onClick="gallo.openMe" alpha="0"/>
<box id="gallo" saturation="-0.5" contrast="-0.25" static="1" sAlign="LT" align="LT" staticX="5" staticY="5" visible="0" depth="250" scaleX="0.4" scaleY="0.4" url="images2/gallo.jpg" openMe="hidePic(); global.hidePic=gallo.closeMe; goUp(); sAlign=CM ; align=CM ; staticX=0; staticY=0; gallo.visible+=1; gallosmall.visible=0 ; onClick=closeMe" closeMe="global.hidePic=; goDown(); visible=0; onClick=;"/>
<box id="gallosmall" static="1" sAlign="LT" align="LT" staticX="5" staticY="5" visible="0" depth="250" scaleX="0.4" scaleY="0.4" url="images2/gallo.jpg"/>


It does'nt seem to work, I'm probably doing something wrong again.

result is here (left part of the gallo-roman path) http://visitimo.fr/clients/francmayne/FPP/bibi.html

I guess that if I manage to use it, I won't be able to use the text tooltip simultaneously, will I?

Thanks again for spending your time on this.

++
Erwin