1. Animating Leo, a supporting 2D character across text comprehension activities.
These specific activities developed by Smartick aim to enhance text comprehension among students. They focus on two key objectives: facilitating guided reading of relevant and interesting texts to bridge gaps between reading fluency and comprehension, and aiding students in effectively navigating complex academic or expository texts to ensure meaningful learning and prevent information overload.
To assist children with these tasks, they receive guidance from Leo, a beautifully illustrated 2D character created by 🔗 David G. Ferrero.
My responsibility here, in addition to developing the complete UI design system for the exercises, was to generate different character animations.
The goal was to make animations that could be used for many different voiceovers, so they needed to be as generic as possible.
I created and delivered 6 animations, using 3 separate state machines to control the required poses: 🔗 standing, 🔗 sitting, and a 🔗 head close-up. Each pose comes with an idle and a generic speaking animation. A single boolean condition controls the pass from idle to speaking.
To enhance the transition between the two states, I played with the Duration settings.
I only animated the head once and used nested boards to reuse it in different main poses. For each pose, I linked the nested board containing the head to the head's main bone. This saved me from creating different head animations for each pose.
These two character-like puzzle pieces* appear every time the student successfully connects a group of related concepts.
I made three animations: one with pieces entering the screen, another with pieces going away, and an idle animation. The pass between them is controlled by a state machine and a boolean condition.
* The pieces were illustrated by 🔗 Roberto Martinez Rufian.
These exercises aim to develop critical thinking skills in children by teaching them how to identify and recognize fallacies. This concept is explored through various activities, one of which involves determining whether the knight on the screen is a friend or foe. To do so, children must carefully analyze the knight's statements and evaluate the quality of his reasoning in order to uncover the truth.
I created 5 animations for these activities: one for the mysterious knight, two for the good knight, and two for the evil knight. The kids will see a different ending animation depending on whether they can tell if the knight is a friend or foe.
I created a single rig and linked the various faces and VFX using nested artboards and Solos. The state machine controls all animations with a numerical input, each number corresponding to a different animation. I once again used the Duration value for smoother state transitions.