Image sequence-player

#7

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

#8

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¿

#11

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 …

#13

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

#14

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 …

#16

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:

#18

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: https://www.dropbox.com/s/1bv7qbvze6ohu66/appNew.hype.zip?dl=0

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

#24

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.

(Jonathan Deutsch) #26

In this particular case, it looks like your character animation is occupying about 100x160 pixels, though this should be considered 200x320 for retina resolution. Your document does use flexible layout, so perhaps you’d like to make sure it looks good even if tripled up in size, to 600x960. Basically if you were just to crop each of your 1920x1080 frames to just the character you’d be at this size.

If Hype v4 constructs a sprite sheet of 168 images at 600x960, then the resulting file is 10200x9600, which is 27% the size of the original spritesheet, and might be manageable for browsers to run. In memory the bitmap would then require 373.53 MB vs 1,344 MB. It is still quite big, so if you can get away with a lower resolution or fewer frames that might be better. This could also be a time to use video for that many frames. (Or perhaps Hype can use a mechanism that is gentler on browsers, but that much memory is still going to be required)