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

  • 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*

  • 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:
    https://krpano.com/docu/actions/#tweentypes
    http://hosted.zeh.com.br/tweener/docs/e…ransitions.html

    Best regards,
    Klaus

  • 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

  • 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

  • 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*

    Edited 2 times, last by Arsdezi (July 19, 2013 at 12:44 AM).

  • 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 ?

  • 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

  • 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)

  • 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!

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

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

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

    Edited once, last by Umalo (September 20, 2014 at 12:10 AM).

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!