Smith Micro Graphics Software Blog

How Mobile Animated Messaging is Made with Moho Animation Software

Posted by Emmy Rey on Oct 24, 2016 10:22:42 AM

For the newest wave in digital messaging look no further than AniMates animated stickers, which was recently launched for the iOS 10 iMessage storeWe sat down with the creator of this newest release, David Knight and asked him what his creative process was like and to explain how Moho 12 played a pivotal role in this project. 

AniMates Characters

AniMates Characters

Recently we were asked to create a set of 2D stickers for AniMates V2. The job consisted of 60 stickers, 15 of which had to be animated and all this delivered within a two week window! I think most of you would agree this was quite a daunting task for such a small time frame and with so many graphic software packages on the market these days we were faced with several questions before settling on the right tool for the job. We managed to boil things down to four essential areas:

What was the fastest software for creating vectors and vector animation?

What software had the most comprehensive set of animation and vector
drawing tools for the job?

What software can output the right formats needed to deliver the job?

What software has a strong support base in case something went wrong?

We looked immediately to Moho 12. Moho has the speed required not only for drawing and animation, but also multi-threaded rendering for fast output. Moho also has the most comprehensive and powerful set of 2D animation tools on the market specifically, Bones and Smartbones which are designed to make the animation process extremely fast and precise. It also supports many output formats and the support base is the best I have ever experienced.

Sticker Creation Process

Step 1: Character Design.

A girl, a boy and a pet dog were the suggested starting points, so we grabbed our Wacom tablets and set about sketching out the characters. We wanted to do something unique that reflected current trends.

Note: During the design process characters can often go through a change especially when you start fleshing them with movement, limbs thicken up and proportions change to match motion. It's a natural part of the evolution of your character so don't panic. Our dog was taken off two legs and put back on all fours, eyes changed and there are still further changes in progress.

Creating the AniMates Characters

AniMates character conception

Step 2: Choose Emotions for Characters.

We wanted the characters' emotions to translate when we put them into drawings. Not as easy as it sounds. Facial features and body postures are so important to get right. The use of eyebrows is extremely important when conveying complex emotions. Let's take the emotion "sadness". To create this we slanted the eyebrows upwards as the norm, but we also added the slanted shape to the upper eyelid to enhance the effect of the eyebrows. One of the most challenging emotions we were tasked with was "shyness". Not only do you have to use the eyebrows and eye shape to convey this emotion, but you also need to add body posturing to the mix.
We turned the character slightly away to the right eyes looking back, upwards toward the viewer. Left shoulder shifted upwards toward the face as if trying to hide behind the shoulder, hands clasped together tightly twisted slightly inward toward the body at the end of straightened arms and legs together with feet slightly twisted inwards. It was still missing something when we suddenly realized color was a very important part of this emotion. We added flushed red cheeks to finish it off and bang, we had it!

Choosing Emotions

Illustrating AniMates character emotions. 

Step 3: Vectorize the characters in Moho.

Bearing in mind that some of these characters emotions were going to be animated, we chose to create each sticker in a main Bone group with sub groups for the head, body, arms, legs etc. This way we can choose any emotion we want to be animated, open the emotion file up in Moho, quickly add a main bone structure to the top layer and then parent each sub layer to it's relative bone for animating. Vectorizing was done using a
combination of point to point plotting and using the newly improved freehand drawing tool. With the new addition of Bezier curves in Moho it makes it possible to create very complex curvatures with the freehand tool while keeping the point count down to a bare minimum. This is an extremely powerful new enhancement to Moho which allowed us to create the hand drawn motion effects around the characters.

Sticker Animation Process

Screenshot of sticker animation process.

Step 4: Animate the finished characters in Moho.

We chose an emotion to animate, opened it up and added a bone layer to the main layer. Then parented each sub layer to the appropriate bone. Eyes and mouth were all kept in a main group layer and arms, legs and body were left as point groups as sub layers. When using bones to bend points in an arm or leg on it's relative layer we just added Smartbone point adjustments to correct any point errors at the joints.

2D ANIMATION TIP: Create your character rig to do the task at hand. Never try to design a 2D character to do everything. It's a waste of time. Look at the design and movement you need for the shot and create a bone rig that will do it. So many times I see people create 2D characters with overly complicated bone structures that have taken hours to create but are just overkill. There is just no way you can ever create a 2D character with bones that will be capable of performing everything a full 3D character can.

Summing up, the whole job took two weeks to complete, from concept sketches to final art and was quite intense, but knew we could deliver the job on schedule using Moho.

Get Your Copy of Moho12 NOW!

Topics: Insider, Moho (Anime Studio), Other Graphics Software, Featured Artists, News, Education, Digital Artists, Back to Basics for Animation

Subscribe To Blog

Recent Posts

Connect with us Online

Facebook Twitter You Tube Instagram LinkedIn