Spritesheet from Flash into Hype

(Mattias Lindberg) #1

OK!

Got a new problem to solve. We need to deliver frame by frame animation in a HTML5 banner. But this provider does not allow SVG. So have to do it with a PNG spritesheet. Flash got some good options for this: If you right click a symbol in the Flash library > Generate Sprite Sheet. If you wanna do the difficult “hard way” in Hype, you uncheck the “Trim” checkbox, so you can adjust the size so it is always same on every frame. You get a good PNG file, that you can optimise with ImageAlpha and ImageOptim. Then you import it to Hype and animate it step by step, inside a Group or in a symbol with overlapping content as hidden.

Or… Hoping that Tumult can help me out here. You can export a Trimmed PNG from Flash, together with one of the JS options (see pic). Making it trimmed is a lot better, decreases the width and height… I tried using the Easeljs libary. Could I get some help in making any of these work? The one that needs the least amount of code, would be great…

Image%202015-10-19%20at%201.18.09%20PM.png978×656 77.5 KB

(Lucky) #2

why not just use a png sequence with the 0-100 alpha visibility on it set to instant
like this pngsequence.zip (299.0 KB)

(Mattias Lindberg) #3

Thanks for sharing! :slight_smile: For producing multiple banners, it wouldn’t be optimal though.

  1. Having a PNG sequence instead of one PNG, adds on file size, maintenance and file load calls. You have to optimise every frame instead of one.
  2. Too much manual work if your doing multiple banners.

This is how it works in Adobe Edge Animate, you go File > Import SpriteSheet. You first select your PNG spritesheet. Then a dialog opens up, lets you load an EAS file. Set duration, FPS, done. Some more options if you don’t have a EAS file…

(Lucky) #4

No worries, though honestly i dont think it will actually add filesize with having multiple pngs vs 1 since they would all contain the same png data put together. tinypng helps but yeah these are pngs at the end of the day :stuck_out_tongue:
And yeah sprite sheets would make things easier.
Mean time you could just make 1 huge png, shove it in a gruoup, set the group to hidden and use it to mask out 1 frame. then keyframe moving the png inside the group by 1 of the png’s width so in essence you’re creating a png sequence by moving the png around(with everything but the first section being visible). But that would take a lot more time. Those are th options i’ve found myself, apart from that yeah use edge heh.

Still cant believe this is for a banner, banners dont usually have the filesize allowance for png sequnces. Btw gifs work a lot of the times as good as pngs if the color palletes are limited and are 3x+ less filesize. try to do a manual gif sequence export and mess around with the settings. You can probably get it looking pretty close to the png.

#5

Hi Mattias

I just helped someone out implimenting reel JS into one of their projects. Could this plugin help you out in any way. It’s essentially a 3D viewer using a sequence of images or one large image and playing a frame by frame rendering.

http://jquery.vostrel.cz/reel

D