Image sequence-player

(Hans-Gerd Claßen) #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!

When will Hype 4.0 be released?
Looping elements
Importing from Adobe Character Animator
#2

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

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

(Hans-Gerd Claßen) #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()

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

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

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