Like many on the forum I’m interested in creating some animations that result in small file sizes. I’ve got a copy of Moho (formerly ‘Anime Studio’) and it allows you to export vector animations as .svg image sequences. After importing a single frame I think it appears as an uneditable vector graphic in Hype (which is fine). Is there a way to import an .svg image sequence? It didn’t seem to want to do it as a sprite sheet.
Kind regards.
You can probably use TexturePacker to create the sprite sheet.
Hi - looks like a great program but it doesn’t seem to export or import SVGs.
My objective isn’t really making a good sprite sheet. Moho can export PNG (etc) image sequences as well which can be imported as a ‘sprite sheet’ in Hype pretty easily.
I’d like to use the SVG image sequences that Moho can create (with transparent background) and I would like to be able to play these images in sequence somehow in Hype as SVGs. I’ve read about Lottie (etc) but I thought that it would be nice to do it in a simple way and use some software that I’ve already got.
This seems like a great use case for Hype’s built in morphing, but I agree that there’s a number of additional SVG-support blindspots in Hype!
vector.hype.zip (24.8 KB)
Hey thanks for the response. I agree that the example I used would lend itself to the morphing feature.
I was hoping to be able to use Moho’s bone tools and animation rigging system though.
I’m guessing AE/Lottie/Body Movin’ is probably a good solution.
BTW I’ve started reading Sarah Drasner’s book on SVG animation and she describes a way of animating a SVG spreadsheet using CSS. The example she uses can be found on her CodePen. Is this something that could be integrated with Hype?
Hype’s sprite sheet feature is more-or-less the same as how she’s animating in CSS.
Looking at the codepen, the water drop is this SVG image, already arranged in a sheet form:
https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/svg-sprite9.svg
Hype can import that as a sprite sheet, you will just need to manually setup where the frames are located. Based on the CSS code it appears a setup like this would work:
(the 106 value for the bottom is the svg height of 3955 minus her value of 3848 in code)
Here’s the codeless Hype document:
SpriteSheet.hype.zip (76.2 KB)
Hey that’s great.
So I guess the issue was that the SVGs would not load into the sprite sheet feature as an SVG image sequence - but I just tried it your way it successfully loaded into the feature as a pre-made sprite sheet SVG.
Thanks for the speedy reply 
Correct; we don’t properly bring them in when doing a sequence, but if it is a single .svg file meant to be used as a sheet then that will be handled properly.
