Not a question about Hype, but about something I need to integrate into Hype:
I’d like to be able to convert and/or export a simple animation into a vector or svg format so it becomes 2d keyframes.
Years ago I used to use Swift3d (ElectricRain) which allowed me to vectorize a 3d animation.
Anyone know of a means to achieve this today to bring into a Hype document?
Thanks,
I remember electric rain’s swift 3d from back in the day. What are you trying to achieve exactly with it being an svg output, and does it really need to be an svg? Why not just export a sequence of png files from a 3d app and load that sequence of png’s or jpg with sprite sheet selection in hype 4 pro?
Maybe use a plugin for After Effects bodymovin that in theory uses svg data within a json file but the export maybe heavy depending what it is you have in the document.
Thanks Pete, I’m not familiar with the sprite sheet selection but I’ll check it out!
I was hoping the file size would be smaller vs a png and more crisp as well, but this may be a workable solution. 
You can create your animations in After Effects and then export them as animated SVGs using bodymovin:
Thank you, but unfortunately I don’t have AE 
I do however have Apple Motion… is there something similar I can do with it?
No, sorry, I only know that solution from Adobe. but I believe they are giving 2 months for free since the whole coronavirus situation.
Never mind, thats only for current subscription members.
no worries - thanks for looking into it though!
Hi furmie,
Just joined today. I used up my 14 day trial but really didn’t get a chance to check out all of the features. I saw your message yesterday and thought I may be able to chime in. I used Apple Motion 5 with the mO2 3d plugin to create a 30 frame animation which I then output as a 30 frame .png image sequence file with an alpha channel background (image size 900x300). As others mentioned Hype will load the image sequence file and create a sprite sheet element which can then be manipulated via transformations on the timeline. I only had few hours to actually demo the product so I’m going to see if I can get another 14 day trial as there are many features that I didn’t get to checkout. It kind of reminds of the old Flash interface.
Here’s a link to the file that was created using the above process. Runs on my desktop and Android tablet. Will run on iOS phone with some resizing.
@cdanserv Thanks for the suggestion and welcome to the Hype forums! Nice work with the 3d guitar! That’s exactly the type of 3d animation I’m talking about that I need.
I hadn’t heard of the m02 plugin but just downloaded the demo to test it out. Their video showing the capabilities is certainly impressive. I have keyshot 9 but not the pro version so no animation capability. I believe this will help me greatly expand what I can do with Hype.
As a relatively new user of Hype I’m going to give you my 2-cents… You won’t be disappointed. Its absolutely addicting – and the more I use it, I find that its the solution to so many problems I had before. As a non-coder (designer only), I can’t speak enough about the simplicity of its UI coupled with the complexity “behind the scenes” that helps me achieve interactivity of what seemed impossible before.
edit: on a side note, I also used to use flash and loved it then. that was before the subscription bs. even learned a bit of actionscript (2.0 in those days). My process was I’d draw my assets in macromedia freehand (sadly killed off by you know who), then bring it all into flash. With Hype I don’t even think about flash… its even got the vector/tween type of animation that flash used to do. nowadays the only thing I own from them is captivate. and while useful, its UI looks super outdated… like a decade behind. 
Hi furmie…
When I read your original post I felt obligated to reply as I had just worked through that process for my own evaluation. As mentioned I hope to get another trial run before I lay down the cash as there are many features I’d like to test as well. Flash 8 is still on my 14 year old Dell laptop and I believe Flash still runs…lol. My goto paint program back then on the Windows platform was a product called ProMotion. Truth be told my all time favourite machine was The Amiga. Deluxe Paint III, the Toaster & Flyer, Dr. T’s KCS, and Videoscape to name a few.
There’s another program I use on my Mac call Magic Music Visuals (magicmusicvisuals.com) which allows for all forms of graphic files to be displayed and manipulated with audio or midi file input. It will render a 3d image file (.obj) which can be controlled with great accuracy using a midi file as the input source.
If you’d like I could send you some links to some of the stuff I’ve been working on regarding the above blurb.
Let me know…
PS - You can create 3d image files that standard Apple Motion will load and then allow manipulation of the object(s) in a 3d environment. It’s not a user friendly process but does work well. You essentially create a .svg file(s) and then convert the .svg file to a True Type Font file (ttf) and then copy them as 3d text into Motion to create your 3d model.
I see you used my method loading as image sprites in hype 4. Its funny you mentioned motionvfx’s Mo2, I’ve been using mObject from motionvfx and just recently bought mO2 about a week ago. I also have Element 3d 2 from Video copilot. Just used it to do this in conjunction with a few apps and apple motion.
One thing Id recommend, export with less of a frame rate (FPS) the less the frames the faster it loads, the less image frames or sprite needed to make up a sprite sheet. Since hype conforms to the web standards theres a height limit on how big the sprite sheet can be. Also, the smaller the frame the snappier Hype runs. I’ve done a few ads that rely on this technique. Additionally, when exporting to images disable motion blur from Motion as theres no need for it as it applies to videos.
Hi Pete,
I like what you did…very nice!
Thumbs up to your suggestions. I was merely testing Hype’s ability to load and create the sprite sheet. You’re correct with the sprite sheet size limitation. I’ve used Google Web Designer to animate using the sprite sheet method but the sprite sheet is created outside of GWD but it will load and play it based on command.
The main reason I sought out the sprite sheet method was in order to animate objects with a transparent background which was not possible to do by using a .mov or .mp4 or so I thought until recently.
Perhaps you may already know this but you can create .mov or .mp4 using Apple ProRes 4444 HQ which will maintain the alpha channel.
Render out the file with a frame size that captures the movement only (i.e 169 x 99). The rendered file can then be composited in a scene with the alpha channel.
It worked for me using Magic as the display app.
Still need to buy Hype before anything else…
BTW - Are you the author of Hype?
3d -> sprite png -> SVG
Jonathan Deutsch @jonathan is the founder/developer of Tumult Inc. @michael Michael Johann is the UI designer of hype. Daniel Morgan @Daniel all things support and beyond. All great individuals.
Interesting, How come Apple Pro Res 4444 HQ doesn't define this from the get go?
Im use to using After Effects to export transparent alpha channel enabled png's.
Hi Pete,
I believe I first read of in the Dec 2019 mO2 product update docs. See below…
To export an mO2 animation with Alpha Channel, a proper file format and codec must be used. In case of video formats the most commonly used codec is ProRes 4444. For image sequences, formats that support Alpha Channel include PNG, TGA, TIFF and OpenEXR.
I think I saw the same reference in the Magic docs. I did re-read the file definition info in the Motion docs and it does reference the alpha channel in ProRes 4444 with the trade-off being file size.
The Motion User Guide does not really make a big deal of it?
BTW - Motion will render out a .png image file sequence with the alpha channel for whatever frame rate or count and at whatever image dimension you choose.
While motionvfx did their part of explaining but with apple it’s a different story. Apple lacks advanced features that After Effects tends to have out in the open.
