Image sequence-player

(Hans-Gerd Claßen) #6

the files are checked as ‘preload’ within hype?
invoking the sequence when already running will cause this behaviour too …
could you share the document?

but as said before: Hype 4 will have a imagesequence player so you might be better of to use this built in one … as the above was never finished. i needed it for an videoexport and it’s been good enough for this …


Yes, preload is checked. I have signed up for the beta version.


Here is the file. Maybe the pngs are too large?

(Hans-Gerd Claßen) #9

you should definitely optimize the images (imageOptim or something simular should get about 90 % less fileweight) before placing in the resources folder and uncheck hypes image optimisation.

(Hans-Gerd Claßen) #10

does it work for you¿


I implemented all your specifications and optimized the images. Same issue.

(Hans-Gerd Claßen) #12

did you download my above we-transfer-provided file? it works for me …


Also works for me: Desktop - Safari (11.1); iPad - iOS 10.3.3


Sorry, I didn’t see that. Yes, now its working.

I see that the pictures are much smaller. Is that the only thing you changed, or did you change the code (except the callback)?

(Hans-Gerd Claßen) #15

please note that the images filesize can be compressed much more:
1.) using the correct size -> an imagesize that matches the size in the layout. at the moment the size is twice as needed
2.) quality for files within animation (not start or stop) can be much lower
3.) what will be the best fileformat -> png, svg, …

btw if it’s a afterEffects-export -> there’s a js-library playing those sequences which works within hype too …


Thanks. Its made with Adobe Character.

(Hans-Gerd Claßen) #17

so if you can get those files to after effects:

may be there’s a simular plugin + js-library for adobe character animator …

have a nice day :slight_smile:


Thank you very much for your help. Have a nice day as well. :slight_smile:

(Jonathan Deutsch) #19

Browsers need to do an image re-render when doing a set of the background image, which is the technique employed by the image sequence code. Some handle this better than others; Firefox is especially bad and likes to render the image as blank while changing. Are you previewing in Firefox?

The technique for the smoothest image sequences is to have a single image that is masked via parent group with the overflow to hidden and move its top/left position. This is how the Hype v4 sprite sheet works. I see you applied to the beta; we’ll be sending out a new batch later this week so you can test with that.

(Hans-Gerd Claßen) #20

yes, ff does not draw it well. i wrote the script with purpose of a videoexport … which works fine. btw, i did a test in hype 4 throwing @schmeidt images in a spritesheet. This resulted in a 17mb file in the resources panel and did almost not play on preview -> showed blank and then finally the last frame … (chrome desktop)

(Jonathan Deutsch) #21

Interesting, I’ll look into that.

(Hans-Gerd Claßen) #22

btw: each pic has fullHD-size which is surely a k.o.-factor :slight_smile:
the sourcefiles for testing:

(Jonathan Deutsch) #23

Yeah, it is probably an issue due to the resulting spritesheet being 19,200 × 18,360 pixels. I can reproduce the problem easily on Chrome. Firefox doesn’t even show the image. Safari seems to work fine :slight_smile:. Thanks!


Thank you @h_classen and @jonathan. Is it for performance better to work with video or png sequences?
whats the right resolution for png sequences?

(Hans-Gerd Claßen) #25

smallest possible size and filesize is always recommend.

video may be a choice if you do not need transparency and interactivity.