Hey All,
Did a lot of research on this but not finding answers out on the web so posting here. I’m looking for a way to generate a large number of mp4s based on a hype design I have created. Probably easier to explain as an example:
Example:
I built a hype file (let’s call it shoes.hype) that grabs an image of a shoe we sell and places that shoe image in the animation so it looks all cool. I can publish the hype file for it to be:
http://someUrl.com/shoes.html
And you can then add a shoeID to the URL and the hype file will grab the image of said shoeID and toss it in the animation. So this url:
http://someUrl.com/shoes.html?shoeID=nikes
Shows off a sweet pair of nikes in the animation and this URL:
http://someUrl.com/shoes.html?shoeID=adidas
Shows off some nice Adidas. All works well but say I needed to get a video (.mp4 or just the .png frames @ 30fps is fine) of each shoe? I can manually do that in Hype for each shoe, yes but say I had an array of shoeIDs that I needed to make videos for, say it was an array of 10,000 shoeIDs would there be any way to pragmatically have Hype do this or is there somewhere you could point me in this quest?
Since hype animations are based on DOM manipulations through JS getting the frames outside of Hype is proving hard to do (tried phantomJS but it’s hacky and this list is good but no silver bullet on there) so how might I go about solving this problem?
I would record a screencast of each show being shown (back to back), with a known amount of time for each shoe. (Record outside of Hype, with a regular preview on a retina screen in Chrome or Safari).
This would give you a loooong video (we’ll call it source.mp4.
Next, build a spreadsheet like this with your times. You can use ffmpeg to encode, splice and work with parts of a video.
You could then run the formula through a command line or bash script to slice out your shoe portions. You can run multiple commands at once (split up the commands into two terminal windows).
If you know that each shoe vid is 10 seconds, you could generate this type of sheet in a few minutes with Excel or Google Sheets formulas.
Oh interesting… Any suggestions on what the screencast setup/program would be? I’m starting my googling now but suggestions on software etc would be awesome.
Thank you for the quick reply!
Quicktime (File > New Screen Recording) gives you great quality, but you can get better compression and more features with Screenflow: https://www.telestream.net/screenflow
Thank you. None of this screams “package this up and put it on a VM to automatically do every n number of hours”. Just double checking there weren’t other ideas out there as to how to accomplish this on a larger scale sans desktop mac/pc. e.g. adding the stipulation I need these 10,000 mp4s as fast as possible?
Again thanks for the ideas Daniel!
Totally - but you could potentially drive Hype in an automated fashion for a task like this, even without AppleScript support. It would look like:
Use command line tools (like sed) to modify the document.hype/data.plist file to make the modification
Open the document in Hype using the open command
Use AppleScript (perhaps System Events is required?) to drive the Export as Movie > Video… menu
Wait some period of time
Quit Hype
Go back to step 1
Other methods involving a post hype-exported document would be to use Selenium or PhantomJS, but I've never tried these for capturing video. I did a little bit of "record video headless browser" searching:
I definitely did the record headless browser search and got a phantomJS POC working but it leaves a lot to be desired. Also looked into three JS exporting base64 images to socket io (as seen here: http://www.tysoncadenhead.com/blog/exporting-canvas-animation-to-mov/) which works great but three js is semi nightmarish to work with for novices since there isn’t a feature rich editor UI.
BTW, under the covers is Hype leveraging some mac OS based way to generate the Frames when I pick File > Export as movie > PNG sequence?
Not really - the way it works is it makes an offscreen window with a web view. It then loads an export of your animation, but uses a modified version of the HYPE-584.full.min.js runtime file that can talk to the Hype app and move the "clock" one frame at a time. It basically just takes screenshots of that offscreen window as it goes!
All the video export options use this technique, but then may simply stitch the frames into a video, animated gif/png, or write out the frames as individual pngs.
Interesting @jonathan. Any possibility of making this modified JS available publicly with a few notes on how to move the “clock” one frame at a time to reproduce what Hype is doing or does this fall into secret sauce/proprietary territory? This is of course assuming one could use the hype export + modified JS to then take the screenshot one by one outside of Hype.
Thanks again for the replies!
i would:
create a hypefile that can produce a repeated animation (attached)
export the video (in above file i’ve got a loop with duration of 7 seconds === 21 videofileduration)
split the resulted video using a commandline tool like ‘mp4box’
True this would work @h_classen but I guess my example use case was not totally transparent as I’m researching ways to really do this at scale as fast as possible with consistent fps outputs again and again using n number of cloud VMs (aka not macs).
Been using Blender (https://www.blender.org/) to accomplish this so far but the animations are mainly 2D and Blender is overkill taking roughly 7 to 10 seconds to generate 30 frames (aka it takes 10 seconds to render 1 second of video). And tried all the little tricks to speed it up hitting a wall in the 10:1 range. Hype solves the speed problem but showing the animations in a browser environment isn’t always an option so we need a .mp4 version of the animations as well. Thus all the questions as to how it might be possible since it feels SO CLOSE (painfully close to an awesome solution).
I think improving automation is the real way forward and hacking the video export isn't something I'd want to support.
You're welcome to try a hack at it though; you can find the video export script in Hype's package as Hype2.app/Contents/Resources/HYPE.video.js. It has an augmented API that exposes a function that could be called like:
I don't know if this would be enough though to drive the automation you would want - you're on your own there! We may change this in future versions, so if you go down this route it is at your own risk!
