Image sequence-player

Using JavaScript with Hype Function Library
1

Attached an imagesequenceplayer.
Below how to call it and the options:

  • play from any minframe to any maxframe (e.g. 33 to 60)
  • frames per second (1 to 60)
  • playdirection
  • digits for the sequencename
  • imagesuffix

rest should be obvious :slight_smile:

could be extended with play, pause, stop, continue but … hype4 is rising :wink:

	hypeDocument.imageSequence(
	
	'myTargetId'/*targetElementId*/, 
	
	'hedgehog_'/*baseName*/, 
	
	'${resourcesFolderName}/'/*basePath*/, 
	
	0/*min*/, 
	
	345 /*max*/, 
	
	{
	
	digits:5, //00000, 00001, 00002 ...
	suffix:'png', //png, jpg
	fps:60, //1 to 60
	direction: hypeDocument.kDirectionForward //hypeDocument.kDirectionReverse
	
	}/*options*/
	
	)

hope it’ll work :slight_smile: best day!

4 Likes
2

@h_classen - Beautiful - Look forward to experimenting with your demo!

1 Like
3

Thanks for this script. I have some questions:

#1 How should I add the images? There is the variable {resourcesFolderName}. But should I add the images manually to the root-folder, export-folder or should I add it in Hype? I ask because there are thousands of sequence-images and it could get confusing under resources.

#2 Do i have to manually add the first image to the scene and then start the sequence with start()?

#3 Whats the best way to sync it with a mp3 file?

#4 How can I add a image or a function to the end of the sequence? At the moment it disappears after the last image.

4

in the meantime the Beta provides an imagesquenceplayer ... so you may subscribe for the Beta .,..

////////////////////////////

storing the files in the resources will enable the possibility of preloading, which'll be the best.

#2 Do i have to manually add the first image to the scene and then start the sequence with start()?
otherwise nothing will be shown untill it's started

a new/other script to handle this ... sry

#4 How can I add a image or a function to the end of the sequence? At the moment it disappears after the last image.
the image should not disappear when ended.
a callback can easily be added:
add a function as last argument and within the start.script.
in the head-script add callback as lastargument. find the last line that cancels animation request. after it add a line that executes your function: callback()

2 Likes
5

Okay thanks. I’ve tested it deeper now and I have the following issue. Please see the video. Sometimes it is working, sometimes not. Do you have an idea for the reason of this flickering?

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 …

7

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

8

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

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.

10


does it work for you¿

11

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

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

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.

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:

1 Like
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.

1 Like
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)

2 Likes