How to add dropshadow to distorted hotspot in obj tour

andrew22222

Hi,

Inside a background image I have a table displayed (obj file) and on top I've place various distorted png hotspots that trigger popup windows. That works great.

The screenshot below looks distorted because of the viewing angle but I was trying to add a little dropshadow to each of the hotspots so they look more realistic sat on the tabletop and in the drawer.

The regular effect="dropshadow(10,45,0x000000,30,10);" doesn't appear to work.

Code

<hotspot name="fiftydmnote"	         url="%SWFPATH%/hotspots/fiftydmnote.png"	         distorted="true"	         enabled="true"	        ath="41.59113928554245" atv="83.85131869659411" scale="0.45590000000000" depth="1715.20000000000005" rx="-5.40000000000000" ry="8.65000000000000" rz="-23.75000000000000" ox="23.00000000000000" oy="-189.50000000000000" tx="5.90000000000000" ty="3.60000000000000" tz="627.60000000000002"	         alpha="1.0"		 effect="dropshadow(10,45,0x000000,30,10);"			 group="overlays"	         />

I know I can open each png file in affinity photo and brush in a dark shadow but is there any coding way to add a shadow that all face the correct direction?

Thanks for your time
Andrew

lastromantik

you can make a hotspot duplicate of each image on the table with the same coordinates, but move the image a little higher above the table so that the back hotspot is visible, and make the style of the lower one semi-transparent and gray with a blur - such a pseudo shadow. this technique is used in some games that do not use real live shadows.
but this is of course a solution ...)

indexofrefraction

Zitat

The regular effect="dropshadow(10,45,0x000000,30,10);" doesn't appear to work.

such an effect attribute doesn't exist, was this an old flash only thing?
flash is not supported anymore, so this was not working for years already unless you still made flash tours
(btw also better use %VIEWER% instead of the deprecated %SWFPATH%)

as for the "shadow"... if possible use bgshadow
or wait for the coming zFilter plugin update which supports dropshadow for css3d hotspots .-)

andrew22222

Thanks very much for the replies. I tried both methods.

The bgshadow unfortunately surrounds the entire square png so the actual coins just have a thin dark square around them. Hey atleast it works though for things withought transparent edges

Creating the second hotspot for each worked as well but was a lot to do so I ended up applying a drop shadow to each png in Affinity and used that. Will keep an eye out for the new plugin though.

I've also gone through and replaced %SWFPATH% with %VIEWER%. Thanks for the tip.

klaus.krpano

Zitat

Creating the second hotspot for each worked as well but was a lot to do so

Hi,

technically a second hotspot would be the best solution - you could use one general shadow image for all and the creation could be automatized by styles and actions.

Here an example:

Code

<style name="hotspot_shadow" zorder="1" url="shadow.png" enabled="false" />
<style name="add_hotspot_shadow" zorder="2" onloaded.addevent="add_hotspot_shadow();" />


<action name="add_hotspot_shadow" scope="local">
  callwhen(caller.loaded, 
    addhotspot(auto, hs);
    copyattributes(get(hs), get(caller));
    hs.loadstyle('hotspot_shadow');
    hs.ox += 10;        // add an offset for the shadow
    hs.oy += 10;
    hs.scale *= 1.05;   // and increase the scale a bit
  );
</action>

Alles anzeigen

Then to add a shadow, only add style="add_hotspot_shadow" to the related hotspots:

Code

<hotspot ...
    style="add_hotspot_shadow"
    />

Best regards,
Klaus

andrew22222

Thanks for the reply Klaus.

I tried your code and managed to make it work well with the coins that were visible straight down

Code

<style name="hotspotcirc_shadow" zorder="1" url="shadowcirc.png" alpha="0.3" enabled="false" />
<style name="add_hotspotcirc_shadow" zorder="2" onloaded.addevent="add_hotspotcirc_shadow();" />


<action name="add_hotspotcirc_shadow" scope="local">
 callwhen(caller.loaded, 
 addhotspot(auto, hs);
 copyattributes(get(hs), get(caller));
 hs.loadstyle('hotspotcirc_shadow');
 hs.ox += -1; // add an offset for the shadow
 hs.oy += -1;
 hs.scale *= 1.0; // and increase the scale a bit
 );
</action>

Alles anzeigen

(screenshot is a bit low res on this laptop)

Didn't work so well for the bank notes and some books that were up on the desk top as the shadow needed to be fine tuned for each hotspot and it wasn't really a one code fits all. I'll certainly keep it on the coins though

Cheers,
Andrew

klaus.krpano

Zitat von andrew22222

it wasn't really a one code fits all

You could add a kind of shadowoffset parameters to the hotspots and use these in the action.

E.g.

Code

<hotspot ... shadowx="-1" shadowy="-1" />
<hotspot ... shadowx="+10" shadowy="+3" />
...
hs.ox += Number(caller.shadowx);
hs.oy += Number(caller.shadowy);

How to add dropshadow to distorted hotspot in obj tour

Jetzt mitmachen!

Benutzer online in diesem Thema