I created a copy of the style skin_hotspotstyle -> skin_hotspotstyle2 and changed the url to an animated (3 frames) PNG image.
A hotspot with this style only displays the first frame of the image.
How can I get it displayed as animated?
I created a copy of the style skin_hotspotstyle -> skin_hotspotstyle2 and changed the url to an animated (3 frames) PNG image.
A hotspot with this style only displays the first frame of the image.
How can I get it displayed as animated?
Thanks Tuur for your answer.
That's an alternative to what I've asked.
I already had tried that with my own PNGs.
I started with a 3 scenes virtual tours and added a hotspot to the first scene the same as one of those examples
<hotspot name="spot4" url="circle.png" onloaded="do_crop_animation(102,102, 60)" ath="0" atv="0" enabled="false" />
Also added the action "do_crop_animation".
I tried with some of my own circle.png simple yellow circles with transparent background and also animated ones with 3 frames.
Once tour.xml loads circle.png only displays for a fraction of second.
cursor:default -> cursor:pointer over the area where circle.png should be displayed.
I don't know how krpano circle.png was created. I guess it is a simple circle but https://krpano.com/viewsource.htm…pots/circle.png ...
Thank you.
Just use the normal url instead of the viewsourcecode one
https://krpano.com/releases/1.21/viewer/examples/animated-hotspots/circle.png
The animation uses frames that are crops of the image that contains a row of frames in one single image.
Ok, now I see the actual PNGs. But how about using my own animated PNG without crop animation action?
Thank you.
This is one of my hotspots
<hotspot name="room2" style="skin_hotspotstyle2" ath="142.312" atv="36.293" distorted="false" zoom="false" linkedscene="room2" onclick="loadscene(get(linkedscene),null,MERGE,ZOOMBLEND(1))" />
where
<style name="skin_hotspotstyle2" url="circle6A.png"scale="0.6" edge="top" oy="0" distorted="false" tooltip="" onloaded="add_all_the_time_tooltip(); " />
add_all_the_time_tooltip is an action to display the name of the linked scene above the hotspot.
<action name="add_all_the_time_tooltip">
txtadd(tooltipname, 'tooltip_', get(name));
addplugin(get(tooltipname));
txtadd(plugin[get(tooltipname)].parent, 'hotspot[', get(name), ']');
set(plugin[get(tooltipname)].url,'%SWFPATH%/plugins/textfield.swf');
set(plugin[get(tooltipname)].align,top);
...
...
set(plugin[get(tooltipname)].textshadowangle,90);
copy(plugin[get(tooltipname)].html,scene[get(linkedscene)].title);
set(plugin[get(tooltipname)].enabled,false);
</action>
Display More
With this structure I get the animated PNG work as expected with. with the name of the linked scene.
But if I don't want the linked scene name displayed and delete onloaded="add_all_the_time_tooltip(); " from the style then animation brokes and a still image is displayed (first frame of png)
It sounds like your hotspot is only showing the first frame because it doesn't support animation. You might need to use CSS or JavaScript to handle the animation part. Try embedding the PNG as a sprite and using CSS @keyframes to animate it. If that's too complex, consider using a GIF or an SVG with built-in animation support instead.
Or just convert in the format krpano is using anyway
It sounds like your hotspot is only showing the first frame because it doesn't support animation.
"With this structure I get the animated PNG works as expected with the name of the linked scene."
Why don't you just place the 3 frames next to each other and use it with the animation action?
It would take like 2 minutes and everything works like you want it to.
Okay, thank you, I get that.
Anyway I solved what I was asking.
From post #6
<hotspot name="room2" style="skin_hotspotstyle2" ath="142.312" atv="36.293" distorted="false" zoom="false" linkedscene="room2" onclick="loadscene(get(linkedscene),null,MERGE,ZOOMBLEND(1))" />
where the default url style was changed to the animated PNG.
Changes in hotspot:
That way PNG is displayed correctly and tooltip is not displayed
Don’t have an account yet? Register yourself now and be a part of our community!