Make animated iMessage Stickers with Hype!

Animation
1

So I am wrapping up my Swift Tutorial today on the Tapping game but had to share a preview of another tutorial.

I recently released my first sticker pack for iOS on the App Store and have been busily building new packs after the day job.
I wanted to put in animated stickers and the only tutorials out there were for using Apple Motion.
I wanted to use Hype.
So I did.

Pretty easy:
make a 2 second animation in hype on the stage format on one of the iMessage sticker platform size.
300x by 300px
408x by 408px
618px by 618px

Then export the animation as a series of png files setting your frame rate to 15fps.

Next I used a cheap little converter on the app store called PNG animator to create the .apng file that is needed in the sticker pack

Wrapped it up in Xcode and I have an animated sticker.

Watch the 2 little screen captures below.

Now my wish list for Hype 4.0
.apng exporter
sticker format document presets.

http://forums.tumult.com:/uploads/db2156/original/2X/6/6416174b2c4c8a3f14cfc6db16a12c5691f87fd7.mov

http://forums.tumult.com:/uploads/db2156/original/2X/2/2f75806f1acb02e7e61367bcaca9e955847abe04.mov

3 Likes
3

A good idea is also to make the background transparent . You can do this in the Document inspector.

1 Like
4

Awesome! I do have an open item that is tracking those two requests - I’d love to make this easier with Hype.

1 Like