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
Re: Animated emojis - how to?
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.
Re: Animated emojis - how to?
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
Re: Animated emojis - how to?
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.
Re: Animated emojis - how to?
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
2 Attachment(s)
Re: Animated emojis - how to?
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?!
Re: Animated emojis - how to?
Nice Rik ... and ... No, I can't tell the difference!
Re: Animated emojis - how to?
Re: Animated emojis - how to?
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
1 Attachment(s)
Re: Animated emojis - how to?
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.
Re: Animated emojis - how to?
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!
Re: Animated emojis - how to?
I could do a small tutorial for you if you need it or want it.
Re: Animated emojis - how to?
Larry - yes please, that would be most welcome! Thank you!
Re: Animated emojis - how to?
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.
2 Attachment(s)
Re: Animated emojis - how to?
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
1 Attachment(s)
Re: Animated emojis - how to?
Rik I used your fine example here, hope you don't mind.
Attachment 106627
Re: Animated emojis - how to?
Nice clear tutorial.
Thanks
Hélène
Re: Animated emojis - how to?
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)
Re: Animated emojis - how to?
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.
Re: Animated emojis - how to?
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!
Re: Animated emojis - how to?
Manoj, hope it was helpful. Glad I could help.