Hotspot Code to Open Still Photo, Help

[Cameleer]

I have been working on this piece of code when a hotspot is clicked the hotspot goes invisible and a still photo becomes visible, the reverse happens when you click on the photo.
I have that part working and now I'm trying to setup some transition effects like fade in and out or scale up and down when opening and closing the photo. Just not having any luck getting it to work so I would like to ask if anyone could help point me in the right direction.

Here is the code.

<spot id="head4" alt="Close-up Photo" url="images/green_button_l.png" pan="172" tilt="-32" alpha="1" depth="20" scale=".4" onOut="scale=.4,400"
onClick="head.visible+=1;visible=0" />
<spot id="head" url="images/suntemple_head.jpg" static="1" depth="30" visible="0" smoothing="0" glow="100" glowColor="#FFFFFF" glowBlur="2"
glowInner="1" shadow="1" shadowDistance="4" shadowAlpha="0.6" onClick="head4.visible+=1;visible=0" />

[Force]

This could be possible with an extension for FPP, but actually not (my grasp!).

We're using this way:
do not include the real image - include a SWF-file which is loading (dynamic from server by a variable on your "onClick"-event, the picture. within the SWF you build a small fade in, fade out to display the picture.

If you're not firm with Flash and AS3, try it yet ... i started from zero with flash, and got exactly this stuff above, within my first 2 days with flash.

[phberlin]

Have you tried to simply give it a transition time for becoming visible or invisible? Like:

<spot id="head4" alt="Close-up Photo" url="images/green_button_l.png" pan="172" tilt="-32" alpha="1" depth="20" scale=".4" onOut="scale=.4,400"
onClick="head.visible+=1,500;visible=0" />
<spot id="head" url="images/suntemple_head.jpg" static="1" depth="30" visible="0" smoothing="0" glow="100" glowColor="#FFFFFF" glowBlur="2"
glowInner="1" shadow="1" shadowDistance="4" shadowAlpha="0.6" onClick="head4.visible+=1,500;visible=0" />

This should be the fade effect you're looking for, no?

Regards, Ph.

[Cameleer]

Hi Phberlin,
Yes that was the first thing I tryed.

onClick="head.visible+=1,500;visible=0" />

I'm hoping that I can set this up with just a little code, have tryed it a few different ways but have not tryed timers yet.

[siesfor]

I think this is what you're looking for...

change "head4"'s onclick to =

onClick = "head4.visible=0; head.visible=1; head.alpha=0;head.alpha=1,300"

then for closing the image
replace "head"'s onClick with =

onClick = "head.alpha=1; head.alpha=0,300,,head4On"
head4On = "head.visible=0; head4.visible=1"

that's to just have the button go on and off, and the photo to fade in and out.

change the "300" if you want the fade to be longer or shorter, or if you'd prefer the scale option you mentioned, which would probably work well for static photos, just swap out your scale parameters for the alphas.

the information you're looking for is under the "assignments and motion tweens" section of the hotspots tutorial. it'll help you out a lot in your endeavour.

[Cameleer]

Hi Siesfor,
I tryed it like this but no luck. The hotspot shows but when clicked on nothing happend.

<spot id="head4" alt="Close-up Photo" url="images/green_button_l.png" pan="172" tilt="-32" alpha="1" scale=".4" onOut="scale=.4,400"
onClick = "head.alpha=1; head.alpha=0,300,,head4On"
/>
<spot id="head" url="images/suntemple_head.jpg" static="1" visible="0" smoothing="0" glow="100" glowColor="#FFFFFF" glowBlur="2" glowInner="1" shadow="1" shadowDistance="4" shadowAlpha="0.6"
onClick = "head4.visible=0; head.visible=1; head.alpha=0;head.alpha=1,300"
/>

[siesfor]

that's because the onClick's are under the wrong hotspots and it needs the head4On call as well.

try these.

<spot id="head4" alt="Close-up Photo" url="images/green_button_l.png" pan="172" tilt="-32" alpha="1" scale=".4" onOut="scale=.4,400"
onClick = "head4.visible=0; head.visible=1; head.alpha=0;head.alpha=1,300"
/>

<spot id="head" url="images/suntemple_head.jpg" static="1" visible="0" smoothing="0" glow="100" glowColor="#FFFFFF" glowBlur="2" glowInner="1" shadow="1" shadowDistance="4" shadowAlpha="0.6"
onClick = "head.alpha=1; head.alpha=0,300,,head4On"
head4On = "head.visible=0; head4.visible=1"
/>

and that should work.

[Cameleer]

Thanks Siesfor,
Your code works good. It was early morning before heading off to work when I tried it and I messed up.
One more question, any ides about this. My hotspots are set up where they get larger on mouse-over than back to normal.
For my control buttons I use blockMouse="1" to stop this from happening to them as you can see in the code below.

<spot id="zoomIn" static="1" salign="BC" staticX="62" staticY="-22" url="images/black_p.png" blockMouse="1"
onPress="pano.zoomKey=2,500"
onRelease="pano.zoomKey=0"
onLoad="brightness=.07,100; brightness=-0.3,4000; alpha=.6,5000"
onOver="brightness=.05,100; alpha=1,100"
onOut="brightness=.07,100; brightness=-0.3,1000; alpha=.6,1000"
/>

When I use the code the same way here to keep this photo from going larger/smaller it doesn't work, any ides?

<spot id="head4" alt="Close-up Photo" url="images/green_button_l.png"
pan="172" tilt="-32" alpha="1" scale=".4" onOut="scale=.4,400"
onClick = "head4.visible=0; head.visible=1;
head.alpha=0;head.alpha=1,300"
/>

<spot id="head" url="images/suntemple_head.jpg" blockMouse="1" static="1" visible="0"
smoothing="0" glow="100" glowColor="#FFFFFF" glowBlur="2" glowInner="1"
shadow="1" shadowDistance="4" shadowAlpha="0.6"
onClick = "head.alpha=1; head.alpha=0,300,,head4On"
head4On = "head.visible=0; head4.visible=1"
/>

[siesfor]

I believe it's because you used new onOver and onOut parameters for your "zoomIn" hotspot, which overrode the global commands.

you could do one of 2 things, which is either to remove the mouseover commands from global, and just add them to the hotspots you want to get larger.

or 2, you could add...

onOver = ""
onOut = ""

to the hotspots you don't want to get larger, and that you haven't already given new commands to, thereby zeroing out the previous commands.

I believe blockMouse only affects whether or not you can still move the pano around with your mouse, after having clicked on the hotspot's area, instead of the pano's non-hotspot areas.