Animated emojis - how to?

Hi all

I've been tasked with creating cartoon-based emojis for a mobile messaging app. All has been going well so far as I create the images in Xara (of course :)) and export as PNG files, and the development team takes care of the rest.

However I've just found out the next set of emojis will have to be animated. I'm feeling a bit stumped as I have very little experience with animation per se :eek:

Facebook has some very nice animated stickers and I'd like to make similar effects, but I'm not sure how to go about it.

Any suggestions, tips, tricks etc would be most welcome!

Thanks

Manoj

I've only ever done .gif animation.
Which is done by creating the frames necessary for the movement, and then adjusting the frame time - sometime individual frame timings, and sometimes global frame timings. Whichever gives me the required effect.

Might be an idea to give us a link to the sort of emoji animations you're trying to create.

Quote:

---

Originally Posted by Rik

Might be an idea to give us a link to the sort of emoji animations you're trying to create.

---

Yes that would indeed be helpful.

Gif's would work great but it will require many frames to get a smooth animation and therefore larger file size.
Swf's would allow you to tween. but it may not support certain things you need to do and from what I hear it is on it's way out, also not supported by apple or mobile phones.
There is another method that works on, and supports everything but I forget the name, sorry

Thanks Rik and Larry - I'll update when I know more about just what they're looking for. I agree that a lot is possible between simple movement of an isolated element and fullblown animated movement.

Hi

There is l
on You Tube a video made by NarrenzunftKalbach which explains how to make a gif animation With xara software

Hélène

Hi Manoj.

If you draw the elements, you can then use a programme that can then export a .gif animation for you.
Or
You could use Xara to do your drawing, as well as export a .gif animation.

I'm attaching both animations - one from a programme I tend to use, and the other from Xara.

Can you tell the difference?!

Nice Rik ... and ... No, I can't tell the difference!

nice animation Rik.

Thanks Helene, there seem to be a lot of tutorials there!

Rik - that's great work and no I can't make out any difference! Quite encouraging. Any particular tips on how to plan ahead for animating?

Thanks
Manoj

Create a new animation page, from the File menu.
Make the page, the size of your intended animation.
Do your first drawing, then from the animation frame gallery, make a copy of that page, and change the drawing slightly, and keep doing that until you have the required number of drawings.
Now change the timings of the individual frame to get the desired result of your animation.
Export as gif, and you're done.

Have a look at my simple wink animation file.

Thanks Rik! Very well done. Hopefully I'll be able to do it all in Xara after all. Now to hunt down some animation basics!

I could do a small tutorial for you if you need it or want it.

Larry - yes please, that would be most welcome! Thank you!

It's kinda late now so will do it in the morning. Do you want/need tutorials for gif or flash or both? Gif does not have issues with certain things(as flash does) and you can do much with it, but, the beauty of flash is tweening.

EDIT: This will be a written tutorial not a video like angelize and egg do so well.

i'm certain @wizard509 will explain it all properly but just to hit on a couple of points...
something that small, you really needn't concern yourself with backgrounds or overlays. won't save you much, if any at all, in file size
also, being only a few frames the gif is quite a bit smaller in file size with nearly no difference in animation (top gif=6kb, bottom swf=14kb)
they're 5 frames. could have a little smoother transition yet adding one or two more frames.

Attachment 106623

Rik I used your fine example here, hope you don't mind.

Attachment 106627

Nice clear tutorial.

Thanks

Hélène

Thanks Hélène.
As regards the eyebrows, presonally I would have used a line with a profile, i based my tutorial on what i looked like Rik had done. Maybe I should have done something from scratch with little graphics showing each step, but, it's done now, for better or worse. Anyway thanks for the kind remarks.

To quote Gare
"My best"
Larry (wizrd509)

I was just looking over Rik's xar and he used an 8pt line for the eyebrows with an ellipse profile. Sorry I had that wrong Rik.
For the final frame of the blinking eye I'm just not sure. it could have been a line with no profile instead of further altering the eye shape and probably was.
Sorry for any misinformation in my mini tutorial.

Larry - sorry for the late response, been busy with deadlines. I'm still waiting to hear what the client has in mind for the next emojis, and will go through your tutorial in the meantime. Thanks so much for your help!

Manoj, hope it was helpful. Glad I could help.