Sie sind nicht angemeldet.

VTour change hotspot arrows to animated hotspots

jeffk

Anfänger

  • »jeffk« ist der Autor dieses Themas

Beiträge: 2

  • Nachricht senden

1

Sonntag, 10. Januar 2016, 20:55

VTour change hotspot arrows to animated hotspots

I've spent around 12-14 hours trying to change the hotspot arrows in a tour made from the VTour Normal droplet.

i have had no success. and YES i have seen the xml-usage example for animated hot spots. am i editing the vtourskin.xml? or the tour.xml?

is there a step by step instruction anywhere? while i grasp the basics of krpano, I'm completely lost here. any help is appreciated

jeffk

Anfänger

  • »jeffk« ist der Autor dieses Themas

Beiträge: 2

  • Nachricht senden

2

Sonntag, 10. Januar 2016, 23:42

is it even possible to switch them? id like to make it easy to add the animated hotspots from the tour_editor.html just like the arrow hotspots

Umalo

Profi

Beiträge: 1 051

Wohnort: Osijek, Croatia, EU

  • Nachricht senden

3

Montag, 11. Januar 2016, 16:05

should be pretty simple. Change style of your hotspots to style of the animated hotspots. No need to change anything in vtourskin.xml. Just add new animated styles e.g. in your tour.xml and that's it.
See links to Klaus code

Your hotspots before/after:

Quellcode

 
1

<hotspot name="spot1" style="skin_hotspotstyle" ath="40.584" atv="14.293" linkedscene="scene_1" />

After:

Quellcode

 
1

<hotspot name="spot1" style="hotspot_ani_black" ath="40.584" atv="14.293" linkedscene="scene_1" />


add this lines outside any scene:

Quellcode

 
1
2
3
4
5

<style name="hotspot_ani_black" url="hotspot_ani_black_64x64x20.png" crop="0|0|64|64" framewidth="64" frameheight="64" frame="0" lastframe="19" onloaded="hotspot_animate();" onclick="if(linkedscene, loadscene(get(linkedscene),null,get(skin_settings.loadscene_flags),get(skin_settings.loadscene_blend)); ); );"/>

<action name="hotspot_animate">
inc(frame,1,get(lastframe),0); mul(ypos,frame,frameheight); txtadd(crop,'0|',get(ypos),'|',get(framewidth),'|',get(frameheight)); delayedcall(0.03, if(loaded, hotspot_animate() ) );
</action>


Just typed the code without syntax checking, but should give you good guidelines....even there are some bugs in the code ;( Copy images for animation to right place and that should work. Let us know or even share online code to be able to help you more....

panorama07

Schüler

Beiträge: 63

  • Nachricht senden

4

Mittwoch, 13. Januar 2016, 14:52

animation png from ferst frame

Hello! How to make the animation stop on the final frame crop? And then it begins again with only the first frame. I tried to do the condition, but each time the animation begins - uncontrollably (no ferst frame)
Here is my code:


<action name="tigr_play" keep="true" >
inc(frame,1,get(lastframe),19);
mul(ypos,frame,frameheight);
txtadd(crop,'0|',get(ypos),'|',get(framewidth),'|',get(frameheight));
delayedcall(0.05, tigr_play(););
if(frame === 19, stopdelayedcall(frame, 19); set(visible, false); set(frame, 0););
</action>
Here is my example . Animation takes place on the linkedscene

Umalo

Profi

Beiträge: 1 051

Wohnort: Osijek, Croatia, EU

  • Nachricht senden

5

Mittwoch, 13. Januar 2016, 17:12

Try with something like this (outside scene definition):

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

  <style name="tigrlapa" crop="0|0|500|500" framewidth="500" frameheight="500" frame="0" lastframe="19" distorted="true" visible="true" onclick="tigr_play2();"/>
  
  <action name="start_animation" keep="true">        
    set(frame,19);    
    tigr_play();  
  </action>
  
  <action name="tigr_play" keep="true">      
    dec(frame,1); 
    trace(get(frame));
    mul(ypos,frame,layer[tigr_hotspot_r].frameheight); 
    txtadd(layer[tigr_hotspot_l].crop,'0|',get(ypos),'|',get(layer[tigr_hotspot_r].framewidth),'|',get(layer[tigr_hotspot_r].frameheight)); 
    txtadd(layer[tigr_hotspot_r].crop,'0|',get(ypos),'|',get(layer[tigr_hotspot_r].framewidth),'|',get(layer[tigr_hotspot_r].frameheight)); 
    delayedcall(tigroimage, 0.05, tigr_play());     
    if(frame LT 0, stopdelayedcall(tigroimage);tigr_play2(););
  </action>

  <action name="tigr_play2" keep="true">    
    inc(frame,1); mul(ypos,frame,layer[tigr_hotspot_r].frameheight); 
    txtadd(layer[tigr_hotspot_l].crop,'0|',get(ypos),'|',get(layer[tigr_hotspot_r].framewidth),'|',get(layer[tigr_hotspot_r].frameheight)); 
    txtadd(layer[tigr_hotspot_r].crop,'0|',get(ypos),'|',get(layer[tigr_hotspot_r].framewidth),'|',get(layer[tigr_hotspot_r].frameheight));     
    delayedcall(tigroimage, 0.05, tigr_play2());     
    if(frame GE 20, stopdelayedcall(tigroimage););
  </action>

  <layer name="tigr_hotspot_r"  keep="true"  url="zzz.png"      style="tigrlapa" align="center" edge="left" zorder="8" keep="true" height="100%" width="50%"  />  
  <layer name="tigr_hotspot_l"  keep="true"  url="zzz_left.png" style="tigrlapa" align="center" edge="right" zorder="8" keep="true" height="100%" width="50%"   />

extend your arrow onclick to start also animation:

Quellcode

 
1

onclick="....loadscene(...); ...start_animation(); ); );"

add fliped image for left side: Can't attach image as >1mb but take any graphic program and flip your png verticaly and store under zzz_left.png

panorama07

Schüler

Beiträge: 63

  • Nachricht senden

6

Donnerstag, 14. Januar 2016, 12:05

Umalo, thanks a lot. That was exactly what I needed! But there is a problem with html5: my example : animation is triggered and immediately returned. (curtain opens and immediately closes) . on the flash player - okay

Umalo

Profi

Beiträge: 1 051

Wohnort: Osijek, Croatia, EU

  • Nachricht senden

7

Donnerstag, 14. Januar 2016, 12:21

I made it to close immediately when open. If you want to control open and close than you separate actions and call them separately.
See call for tigr_play2 in tigr_play action -> remove it. Than curtain will just open. As i left onclick action to close them you can also leave it as it is but than user would need to click every time new scene is loaded which is I think not user friendly.

panorama07

Schüler

Beiträge: 63

  • Nachricht senden

8

Donnerstag, 14. Januar 2016, 12:37

Zitat von »Umalo«

I made it to close immediately when open. If you want to control open and close than you separate actions and call them separately.
See call for tigr_play2 in tigr_play action -> remove it. Than curtain will just open. As i left onclick action to close them you can also leave it as it is but than user would need to click every time new scene is loaded which is I think not user friendly.
Sorry. my poor English prevents me to understand. The problem is that flash everything is working properly, but html5 - incorrect. Please see my example on html5. (the curtains once opened, but immediately closed)

panorama07

Schüler

Beiträge: 63

  • Nachricht senden

9

Donnerstag, 14. Januar 2016, 15:13

Everything worked out. Thank you! Here is my code:

Quellcode

 
1

<action name="tigr_play" keep="true">      set(layer[tigr_hotspot_r].visible, true); set(layer[tigr_hotspot_l].visible, true);      dec(frame,1);     trace(get(frame));    mul(ypos,frame,layer[tigr_hotspot_r].frameheight);     txtadd(layer[tigr_hotspot_l].crop,'0|',get(ypos),'|',get(layer[tigr_hotspot_r].framewidth),'|',get(layer[tigr_hotspot_r].frameheight));     txtadd(layer[tigr_hotspot_r].crop,'0|',get(ypos),'|',get(layer[tigr_hotspot_r].framewidth),'|',get(layer[tigr_hotspot_r].frameheight));     delayedcall(tigroimage, 0.02, tigr_play(););         if(frame LT 0, stopdelayedcall(tigroimage);tigr_play2();  );  </action>  <action name="tigr_play2" keep="true">      set(layer[tigr_hotspot_r].visible, true);     set(layer[tigr_hotspot_l].visible, true);	    inc(frame,1); mul(ypos,frame,layer[tigr_hotspot_r].frameheight);     txtadd(layer[tigr_hotspot_l].crop,'0|',get(ypos),'|',get(layer[tigr_hotspot_r].framewidth),'|',get(layer[tigr_hotspot_r].frameheight));     txtadd(layer[tigr_hotspot_r].crop,'0|',get(ypos),'|',get(layer[tigr_hotspot_r].framewidth),'|',get(layer[tigr_hotspot_r].frameheight));         delayedcall(tigroimage, 0.02, tigr_play2(););         if(frame GE 20, stopdelayedcall(tigroimage); set(layer[tigr_hotspot_r].visible, false); set(layer[tigr_hotspot_l].visible, false););  </action>

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

10

Donnerstag, 14. Januar 2016, 16:46

Nice effect!
Like it!
Tuur *thumbsup*
https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

panorama07

Schüler

Beiträge: 63

  • Nachricht senden

11

Sonntag, 27. März 2016, 13:57

animated png actions

Hello. I have a problem. there hotspot:

Quellcode

 
1

<hotspot name="skul_hotspot_r"    url.desktop="sp.png" url.tablet="sp.png"  url.mobile="sp.png"       style="skullapa" ath="-9.234609" atv="-11.380844"  rx="-7.0" ry="9.75" rz="0.150374" zorder="39"  scale="0.935758"   keep="true"  enabled="false"/>
and style:

Quellcode

 
1

   <style name="skullapa"   crop.desktop="0|0|500|500"  crop.mobile="0|0|150|150"  crop.tablet="0|0|150|150"   framewidth.desktop="500"  frameheight.desktop="500"   framewidth.tablet="150"  frameheight.tablet="150"  framewidth.mobile="150"  frameheight.mobile="150"   frame="0" lastframe="24" distorted="true" visible="true"    onclick="myaction();"  />

There are two action, animation:

Quellcode

 
1
2

<action name="skul_play" keep="true">      set(hotspot[skul_hotspot_r].visible, true);      dec(frame,1);     trace(get(frame));    mul(ypos,frame,hotspot[skul_hotspot_r].frameheight);      txtadd(hotspot[skul_hotspot_r].crop,'0|',get(ypos),'|',get(hotspot[skul_hotspot_r].framewidth),'|',get(hotspot[skul_hotspot_r].frameheight));     delayedcall(skuloimage, 0.01, skul_play(););         if(frame LT 1, stopdelayedcall(skuloimage); set(hotspot[skul_hotspot_r].visible, true); );  </action>
  <action name="skul_play2" keep="true">      set(hotspot[skul_hotspot_r].visible, true); 	    inc(frame,1); mul(ypos,frame,hotspot[skul_hotspot_r].frameheight);     trace(get(frame));    txtadd(hotspot[skul_hotspot_r].crop,'0|',get(ypos),'|',get(hotspot[skul_hotspot_r].framewidth),'|',get(hotspot[skul_hotspot_r].frameheight));         delayedcall(skuloimage, 0.05, skul_play2(););         if(frame GE 25, stopdelayedcall(skuloimage); set(hotspot[skul_hotspot_r].visible, true););  </action>


there is action on the Onclick:

Quellcode

 
1

<action name="myaction" keep="true"	> if (skul_hotspot_r!= 1, set(skul_hotspot_r,1); skul_play2(); , set(skul_hotspot_r,0); skul_play(); ); </action>


if I write the action in the hotspot "skul_hotspot_r" , everything works fine - the animation reaches the last frame and the next time you click again returns to the first. But if I prescribe "myaction" in another hotspot:

Quellcode

 
1

 <hotspot name="str"     url="str.png"  enabled="true"      style="str"   ath="-9.174924"  atv="20.802309"   zorder="1"  keep="true"  />  <style name="str"  onclick="myaction();" visible="true" />
, then there is something strange....
How to write a code: The first click - the animation goes to the last frame and stops.Second click - the animation back to the first frame and stops

Umalo

Profi

Beiträge: 1 051

Wohnort: Osijek, Croatia, EU

  • Nachricht senden

12

Sonntag, 27. März 2016, 14:16

Can you shere link to see your version online? Or send me small package on my mail to see the code

panorama07

Schüler

Beiträge: 63

  • Nachricht senden

13

Montag, 28. März 2016, 20:01

thanks

many thanks Umalo

Quellcode

 
1
2
3

 <style name="skullapa" 	  crop.desktop="0|0|500|500"  crop.mobile="0|0|150|150"  crop.tablet="0|0|150|150" 	  framewidth.desktop="500"  frameheight.desktop="500" 	  framewidth.tablet="150"  frameheight.tablet="150"	  framewidth.mobile="150"  frameheight.mobile="150" 	  frame="0" firstframe="1" lastframe="24" distorted="true" visible="true"  	  onclick="myaction(skul_hotspot_r);"  />    <action name="myaction" keep="true"	>		if(layer[%1].animation_up EQ true, 		skul_play(%1); 			set(layer[%1].animation_up,false);		, 			skul_play2(%1); 			set(layer[%1].animation_up,true);	); 	</action>      <action name="skul_play" keep="true">      set(hotspot[skul_hotspot_r].visible, true);      sub(hotspot[%1].frame,1);     trace(get(hotspot[%1].frame));    mul(ypos,hotspot[%1].frame,hotspot[skul_hotspot_r].frameheight);      txtadd(hotspot[skul_hotspot_r].crop,'0|',get(ypos),'|',get(hotspot[skul_hotspot_r].framewidth),'|',get(hotspot[skul_hotspot_r].frameheight));     delayedcall(skuloimage, 0.01, skul_play(%1););         if(hotspot[%1].frame LT hotspot[%1].firstframe, stopdelayedcall(skuloimage); set(hotspot[skul_hotspot_r].visible, true); );  </action>
  <action name="skul_play2" keep="true">      trace(get(hotspot[%1].frame));    set(hotspot[skul_hotspot_r].visible, true); 	    inc(hotspot[%1].frame,1); mul(ypos,hotspot[%1].frame,hotspot[skul_hotspot_r].frameheight);         txtadd(hotspot[skul_hotspot_r].crop,'0|',get(ypos),'|',get(hotspot[skul_hotspot_r].framewidth),'|',get(hotspot[skul_hotspot_r].frameheight));         delayedcall(skuloimage, 0.05, skul_play2(%1););         if(hotspot[%1].frame GT hotspot[%1].lastframe, wait(0.01);stopdelayedcall(skuloimage); set(hotspot[skul_hotspot_r].visible, true););  </action>
 <hotspot name="skul_hotspot_r"    url.desktop="sp.png" url.tablet="sp.png"  url.mobile="sp.png"       style="skullapa" ath="-9.234609" atv="-11.380844"  rx="-7.0" ry="9.75" rz="0.150374" zorder="39"  scale="0.935758"   keep="true"  enabled="false" 	animation_up="true" 	/>   <hotspot name="str"     url="stra.png"   enabled="true"      style="str"  alpha="0.4" scale="0.7"  ath="-28.009311"  atv="-20.016952"  rz="125.363029" zorder="1"  keep="true"  distorted="true" crop="0|0|200|200"	       framewidth="200" frameheight="200" frame="0" lastframe="9"	       onloaded="hotspot_animate();"   />    	<action name="hotspot_animate">		inc(frame,1,get(lastframe),0);		mul(ypos,frame,frameheight);		txtadd(crop,'0|',get(ypos),'|',get(framewidth),'|',get(frameheight));		delayedcall(0.07, if(loaded, hotspot_animate() ) );	</action>  <style name="str"  onclick="myaction(skul_hotspot_r);" visible="true" />

Ähnliche Themen