Sie sind nicht angemeldet.

Html5 animations

coolman

Anfänger

  • »coolman« ist der Autor dieses Themas

Beiträge: 21

  • Nachricht senden

1

Montag, 9. April 2012, 16:55

Html5 animations

Hello, I want to know if there is a possibility to insert an animation made with html5 (like we can do with .swf animation) as a plugin or a hotspot to be displayed with idevices ?!

Thanks for any advices.

sachagriffin

Meister

Beiträge: 1 857

Beruf: Virtual Tours - Photography - Krpano developer

  • Nachricht senden

2

Montag, 9. April 2012, 19:20

KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

coolman

Anfänger

  • »coolman« ist der Autor dieses Themas

Beiträge: 21

  • Nachricht senden

3

Montag, 9. April 2012, 19:46

Thanks for your reply, but tweens actions can't do everything.. for exp a bird which moves its wings ! There are now a very beautiful ready-made animations in HTML5, and Im thinking if it could be possible to use such animations with krpano.js like we can do with swf animations and krpano.swf !

sachagriffin

Meister

Beiträge: 1 857

Beruf: Virtual Tours - Photography - Krpano developer

  • Nachricht senden

4

Montag, 9. April 2012, 22:24

In html5 you don't have the issue with wmode. So I think it would be pretty easy with some javascript calls and zorder set correctly. Show your animation in a div themed to place with css, and make it visible by using a javasciption call. Try it and let us know. And if you wanted a hotspot to be targeted, I think you could build your target by using a textfield hotspot.
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

5

Mittwoch, 11. April 2012, 12:38

Hi,

you can also make animations by dynamically changing the 'crop' setting:

e.g. like the hotspots in this example:
http://krpano.com/examples/10814/example…nihotspots.html

The hotspots are based on one large image which contains all animation frames:


To animate that the 'crop' area for the current frame will dynamically changed and looped by xml code,
e.g. in the above example by:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13

<style name="hotspot_ani_white" 
       url="hotspot_ani_white_64x64x20.png" 
       crop="0|0|64|64"
       framewidth="64" frameheight="64" frame="0" lastframe="19"
       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.03, if(loaded, hotspot_animate() ) );
</action>


And when doing animations that way they have the advantage to be usable identically in Flash AND HTML5.

Best regards,
Klaus

Ähnliche Themen