Sie sind nicht angemeldet.

1

Dienstag, 16. Juli 2013, 17:00

animated jpg with tranistion

Here you can find and be free to use and adapt to your needs: animated jpg with simple transition example:

Example you can find here: click here
Code you can see: here

Stripes are prepared in vector editing program cropping several pictures to same side and aligning them: download
Decided not to use png but jpg as here we don't need transition and are much smaller for download.

Solution is based on Klaus's animated PNG code, slightly adapted ;)
Regards
Umalo

2

Mittwoch, 17. Juli 2013, 02:30

Great solution!

Umalo! You best!)
Very simple solution (short code)!
*thumbsup*


PS, I have few questions:

But I don't understand how stop animation on last frame with control the animation (buttons replay/play)?
Here looped across the width of the frame shift: 1-2-1-2-…
And how we see crossfade translation frame by frame with transparency on background ( how did without transparency on bg) I will try to shift the time of tween alpha *confused*
Maybe you look my example in flash:
http://d.pr/f/b4YC

Sorry for my importunate! In any case, I'm very grateful to you already!

*love*
Panoreal — to make and see this wonderful world! *whistling*

3

Mittwoch, 17. Juli 2013, 16:19

Hi,

again other great one example!


Only one small tip - for the alpha blending a symmetric tweentype like 'linear' or 'easeInOutQuad' or a compintion of the 'easeOutQuad+easeInQuad' should be used. Otherwise the blending isn't fully correct and the blended image becomes partially transparent because the sum of both alpha values isn't 1.0 together.

See here for the the tweentypes and their curve:
http://krpano.com/docu/actions/#tweentypes
http://hosted.zeh.com.br/tweener/docs/en…ransitions.html

Best regards,
Klaus

4

Mittwoch, 17. Juli 2013, 17:42

Meanwhile played with it. What about now when tweening of the background image is delayed. Now you don't see pano anymore:
See: link

Plus now with replay button and animation stop at last frame.

5

Donnerstag, 18. Juli 2013, 13:14

Hi Umalo,

nice example ...
i've played a bit with your code to make speed change easier
#############################
<style name="animated_jpg" url="%FIRSTXML%/images/gfa_0070_458x600.jpg" visible="true" handcursor="false" zorder="15" keep="true" scale="1"
framewidth="458" frameheight="600" lastframe="70" align="center" speed="0.3" />

<action name="animate_1">
inc(frame,1,get(lastframe),0);
mul(xpos,frame,framewidth);
tween(plugin[at_jpg_1].alpha,0,get(speed),default);
tween(plugin[at_jpg_2].alpha,1,get(speed),default);
txtadd(new_crop,get(xpos),'|0','|',get(framewidth),'|',get(frameheight));
set(plugin[at_jpg_2].crop,get(new_crop));
mul(speed2,get(speed),2);
delayedcall(get(speed2), if(loaded, animate_2() ));
</action>

<action name="animate_2">
inc(frame,1,get(lastframe),0);
mul(xpos,frame,framewidth);
tween(plugin[at_jpg_1].alpha,1,get(speed),default);
tween(plugin[at_jpg_2].alpha,0,get(speed),default);
txtadd(new_crop,get(xpos),'|0','|',get(framewidth),'|',get(frameheight));
set(plugin[at_jpg_1].crop,get(new_crop));
mul(speed2,get(speed),2);
delayedcall(get(speed2), if(loaded, animate_1() ));
</action>

<plugin name="at_jpg_1" x="0" y="0" style="animated_jpg" frame="0" alpha="1" crop="0|0|458|600" onloaded="delayedcall(get(speed),animate_1());"/>
<plugin name="at_jpg_2" x="0" y="0" style="animated_jpg" frame="1" alpha="0" crop="458|0|458|600" />
#############################

why do you use "wait" in last "onloaded" und not "delayedcall"?

greetz

mil

6

Donnerstag, 18. Juli 2013, 19:07

Nice and cool.
Although you worked on first code version. There is updated version that does't produce pano transparency between tweens + replay button:
link to updated version
Will update latest with your easier speed change and share the link of whole package.

@Arsdezi: Can we use your car images in example package that I planed to share with community here (code, images....all in one archive)?

Umalo

7

Donnerstag, 18. Juli 2013, 21:14

Umalo, yes of course!
You can use this images in your examples with code, this images shooting by me, no problem!
Thank you for great example and issue to replace basic crossfade effect without flash! *thumbsup*

And your Help! *squint*
Panoreal — to make and see this wonderful world! *whistling*

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Arsdezi« (19. Juli 2013, 00:44)


8

Freitag, 19. Juli 2013, 00:55

Updated version with milemann's proposal:

Preview you can see here: click here
Code you can see: Here
Example you can download: Here

9

Freitag, 19. Juli 2013, 01:19

Zitat

"Updated version with milemann's proposal:

Preview you can see here: click here
Code you can see: Here
Example you can download: Here"
Umalo and milemann, very usable example!
I'm try this code in my task with multi-box information in vr-tour.

*thumbsup* *thumbsup* *thumbsup* *thumbsup* *thumbsup*
Panoreal — to make and see this wonderful world! *whistling*

10

Sonntag, 6. Oktober 2013, 03:25

that must be the best working example of animation in krpano i've seen...

only managed to make it loop with a delayedcall (no real looping), though
I need initiate_animation() to be called right after the animation stops, so that the jump to the start of the images is not noticable.

would like to use that for loopable animated sprites...
any ideas ?

11

Sonntag, 6. Oktober 2013, 20:07

Code at the top of the thread is looping all the time. In next example there is button implemented to start over.
Are you sure you need this code for your needs as for "sprite animation" you should start with basic animated xy code from Kalus:
http://krpano.com/examples/116/examples/…nihotspots.html

12

Sonntag, 6. Oktober 2013, 23:50

examples - square textures

thanx for the tips umalo...

I implemented an animation sequence of 20 frames using images of 200pixels X 200pixels

with your method : http://simulzine.com/playground/umalo-anim/

with Klaus example as hotspot: http://simulzine.com/playground/krpano-anim/anihotspots.html

works great so far !

These examples are meant for stip images as input wich gets you quickly to the limits of files sizes etc...
Below I'm attaching the two textures I used for these examples. 4000px and just 20 frames :(

As my animations are more than 20 frames long I would like to use square textures( 4096 px X 4096 px) for input images.

Are there any methods to "read" a square texture with krpano like you do it in the example for strips ?

I use a great software to "pack" my animations into single textures (http://www.codeandweb.com/texturepacker) and would like to write an exporter for krpano. I would appreciate any help or pointing me to the right directions

Best,
Alex
»alexinorbit« hat folgende Bilder angehängt:
  • cleo200-v.png
  • cleo200-h.png

13

Montag, 7. Oktober 2013, 00:17

Have animations with 60+ frames and all works like a charm. If I understood you correctly you would like not to have one row (vertical / horizontal) stripe but more rows and columns.
If so, this shouldn't be problem to make crops out of it, but I wonder what is your inital idea to go this way. I don't think you will end up with smaller files but in contrary, bigger.
Have done quick tests on 16 blocks differently aligned and exported (attached).
1*16 - 811b

2*8 - 1023

4*4 - 1459

Actually don't know why it is bigger. I expected to get the pretty same results.

If you want send me (on mail, please) your square texture and I will make code to crop correct images out of it. Let me know direction of frames to be read.
P.S. I didn't invented method for cropping frames, but Klaus. My example just use the same principles and make it semi parallel (turning off one and turning on second to get feeling of transition)

14

Montag, 7. Oktober 2013, 00:58

thanx Umalo,

I just send you 2 different texures with relevant "spritesheet" information in .json format, hope that helps. (I used the inet.hr email )

15

Montag, 7. Oktober 2013, 20:31

Thanks for square image. Here is how this looks like on Flash.
Link to 4096*4096 input square image example animation
As I'm informed that IOS is not able to load this due to limitations I wonder if this one will work:
Link to 2048*2048 input square image example animation
Can someone confirm with Ipad please.

I have read that there is limitation of 1xxx * 1xxx px. Is this still valid?

16

Montag, 7. Oktober 2013, 20:40

quick tested on ipad3 (retina) and the 2048 square texture works !

17

Freitag, 19. September 2014, 20:45

How can I make this a hotspot? (I need to distort the image sequence, as if a slide show is playing on a wall within the pano scene).

I have attempted to apply your code to a hotspot, but I have failed spectacularly!

18

Freitag, 19. September 2014, 21:01

Didn't try but I think it should be the still valid solution. Please contact me on PM or mail and send code example to see what you are doing.

EDIT: Tried adapting code to work with distorted hotspots and it works. Create distorted hotspot e.g.:

Quellcode

1
2
<style name="animated_hotspot" 	url="%FIRSTXML%/images/rod_2048.png" visible="true" handcursor="false" zorder="15" keep="true" alpha="1" framewidth="150" frameheight="159" align="center" speed="0.05" distorted="true" enabled="false"/>
	<hotspot name="transition_png" style="animated_hotspot" ath="0.0" atv="0.0" crop="0|0|150|159"/>	

replace all plugin related sets to hotspot e.g.

Quellcode

1
2
set(plugintransition_png].crop,get(new_crop)); ->
set(hotspot[transition_png].crop,get(new_crop));


One note: Due to wait action user will not be able use UI while animation is running on the "wall" ;(

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Umalo« (20. September 2014, 00:10)