You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

Umalo

Professional

  • "Umalo" started this thread

Posts: 1,047

Location: Osijek, Croatia, EU

  • Send private message

1

Tuesday, July 16th 2013, 5:00pm

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

Arsdezi

Intermediate

Posts: 174

Location: Ukraine

  • Send private message

2

Wednesday, July 17th 2013, 2:30am

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

Wednesday, July 17th 2013, 4:19pm

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

Umalo

Professional

  • "Umalo" started this thread

Posts: 1,047

Location: Osijek, Croatia, EU

  • Send private message

4

Wednesday, July 17th 2013, 5:42pm

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

Thursday, July 18th 2013, 1:14pm

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

Umalo

Professional

  • "Umalo" started this thread

Posts: 1,047

Location: Osijek, Croatia, EU

  • Send private message

6

Thursday, July 18th 2013, 7:07pm

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

Arsdezi

Intermediate

Posts: 174

Location: Ukraine

  • Send private message

7

Thursday, July 18th 2013, 9:14pm

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*

This post has been edited 2 times, last edit by "Arsdezi" (Jul 19th 2013, 12:44am)


Umalo

Professional

  • "Umalo" started this thread

Posts: 1,047

Location: Osijek, Croatia, EU

  • Send private message

8

Friday, July 19th 2013, 12:55am

Updated version with milemann's proposal:

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

Arsdezi

Intermediate

Posts: 174

Location: Ukraine

  • Send private message

9

Friday, July 19th 2013, 1:19am

Quoted

"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

Sunday, October 6th 2013, 3:25am

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 ?

Umalo

Professional

  • "Umalo" started this thread

Posts: 1,047

Location: Osijek, Croatia, EU

  • Send private message

11

Sunday, October 6th 2013, 8:07pm

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

Sunday, October 6th 2013, 11:50pm

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 has attached the following images:
  • cleo200-v.png
  • cleo200-h.png

Umalo

Professional

  • "Umalo" started this thread

Posts: 1,047

Location: Osijek, Croatia, EU

  • Send private message

13

Monday, October 7th 2013, 12:17am

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

Monday, October 7th 2013, 12:58am

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 )

Umalo

Professional

  • "Umalo" started this thread

Posts: 1,047

Location: Osijek, Croatia, EU

  • Send private message

15

Monday, October 7th 2013, 8:31pm

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

Monday, October 7th 2013, 8:40pm

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

17

Friday, September 19th 2014, 8:45pm

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!

Umalo

Professional

  • "Umalo" started this thread

Posts: 1,047

Location: Osijek, Croatia, EU

  • Send private message

18

Friday, September 19th 2014, 9:01pm

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.:

Source code

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.

Source code

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" ;(

This post has been edited 1 times, last edit by "Umalo" (Sep 20th 2014, 12:10am)