Noughts&Crosses Loading Icon
The making of a fun little loading icon
I’ve actually wanted to jump back into AfterEffects for a while now to create some fun little animations; I wasn’t sure exactly what I wanted to create, but I eventually landed on a loading icon. I opened up AfterEffects and just started playing around with shapes and generic compositions that I could easily loop.
The purpose of a loading icon is to communicate to the user that something is happening and the content is getting ready to load — so what’s a good way to pass some time? A game of noughts&crosses, of course! Once this little idea came into my head, all the pieces tehn began to fall into place on how this little loading icon could work; it could seemingly ‘play’ games of noughts&crosses until the content is ready to load. To communicate that the content is ready, the icon could ‘win’ a game. Genius!
I started with flat isometric planes that would bob up and down and change colours, eventually trying to animate the plane flipping over to reveal a nought or cross. This felt too simplified though so I took an approach that would make the icon more dynamic, adding depth and contrast respectively.
Storyboarding; Are you trying to lose?
Why yes, as a matter of fact I am.
It’s odd to think you need to storyboard such a seemingly simple icon; I was pretty certain I’d knock the thing out within the day. Of course it took twice that time because I needed to plan and organise the lifecycle of the animation, particularly ensuring that the flow followed ‘real’ game-sense. Initially I set off attempting to just wing it, animating as I go, but I realised this wasn’t efficient and was just a complete brain scramble.
There were a few things I had to consider. I wanted 4 games in total; 3 losses and 1 win. After each game the grid would return to it’s default ‘new game’ state where the cubes rotate back to showing the face that’s completely blank. I also needed to decide if the nought or cross began the game, then make sure the consecutive moves alternating accordingly. For instance, nought is marked somewhere on the grid, then the cross would be next, then the nought, and so on and so forth. I actually mess this up in one of my storyboards (shhhh)
The entire animation flow would go as follows:
new game— round 1(lose) — new game — round 2 (lose)— new game — round 3(lose) — new game — round 4 (won)— new game
This flow is incredibly versatile because it’s complex enough to be varied when items are taking a long time to load, while it can be cut and pasted when content is ready early, without having to play the whole animation lifecycle. This means that on every ‘lose’ cycle the loader will check if the content is ready; if it’s not, it would play another ‘lose’ game, but if it is, then it would play a ‘win’ game to indicate the content is now ready.
The end animation was 30 seconds long — this was far too slow but gave me good wiggle room to tweak animations. Thanks to After Effects’ handy Time Remapping I was able to double the speed and the entire animation now lasts a maximum of 16 seconds — ample time to load heavy content.
Constructing the Cubes
Initially the loading icon wasn’t going to be cubes, more simply, they were just going to be floating planes that flipped over. I liked the isometric approach but it lacked presence, which is where the cubes come in. After a lot of trial and error, I found the isometric approach was just too much work to do in After Effects alone so, instead, I used 2D planes to construct 3D shapes and animate them individually.
I could have made my life ALOT easier by having one cube ‘design’ and duplicating it — but no. I sketched out 9 individual cube variations but actually created 6 final ones within AfterEffects before duplicating 3 of them for efficiency. Once I’d got all the flat version of the cubes made up, I then folded them in on themselves by rotating at the appropriate ‘hinges’ which effectively created a 3D cube.
You’ll notice that on each of the cubes I have left a face blank — you’ll often find that a game of noughts&crosses can finish early. Either you make a move that puts you in a corner where your opponent will win whatever option you choose, or sometimes both you and your opponent are in a ‘stalemate’ where neither of you can win. You end up with blank squares left because there’s no point finishing the grid if the round is over. With this in mind, I wanted to complete the grid regardless of whether it was an early win/lose because reverting to the ‘new game’ state too early disrupted the rhythm and flow of the animation.
After constructing the cubes I needed to control their rotation individually so I created a null object to use as a controller of sorts and numbered these 1–9. Instead of animating the surfaces of the cube, I could animate the null object which would in turn, rotate the cube. It was important to make sure the null object was exactly in the centre of each cube on all three axis so that the cube wouldn’t move out of position once it’s completed its rotation. Once the cubes were all assigned their controllers I then created another null which controlled the entire group and allowed me to angle all the cubes collectively, tilting towards the camera and rotating at 45 degrees to get that corner angle.
“Creating controllers outside of the actual parameters of the individual cubes would also allow me to later tweak the position of the faces if necessary (and their physical attributes) without affecting the keyframes.”
Animating the Cubes
I decided to break the movement down into the most important parts; the first being getting the cube from rotation point A to rotation point B. Simple. I didn’t want to animate around the Y axis (turning it horizontally) purely for simplicity, and animated around axis X and axis Z. For variation, I animated in both directions along these axis so that the rotations look less repetitive. I had 4 games to animate and I can’t stress how much easier storyboarding made this process. In my sketches — underneath each ‘move’ — I made a note of what number cube it was, and then it was just a case of adding the rotation and making sure that it was a nought or a cross, depending on my sketch. When all the keyframes were in place it was just a case of offsetting them accordingly, making any adjustments to cubes that were rotating in the wrong order. I also amended any cubes that had the faces visible to the camera once they’d rotating — you’ll notice these as some of the rotations are 180 degrees instead of 90 degrees. This was a happy accident and thankfully I messed up enough times to make it look organic! Yay!
The animations so far were too smooth and lacked any interest whatsoever. I began tweaking the velocity of each keyframe which would make the animation look less stiff, as well as add character to the movement. I used curves to control how each cube moves — this varies depending on whether the cube is returning to it’s default position or turning to reveal a nought or cross. I wanted the cube to have this feeling of releasing from it’s current rotation and then locking into it’s new rotation. By making it briefly rotate in the opposite direction to it’s actual direction, it appears to rock at the beginning and end of the movement, additionally, the movement in the middle is much slower, making the overall animation snappier.
Finally, I animated the ‘win’ animation by consecutively moving the ‘noughts’ vertically and key framing a colour change — you’ll notice there’s a stark colour change now as we near the final design. If the user is doing something else, the screen flashes red to catch their eye and indicate that the content is ready to load.
I had a lot of fun making this and it was a welcome break from my recent 2-part Yoga app project. There are probably a gazillion different ways I could have achieved this through 3D modelling software — C4D, Maya, SketchUp, Blender, to name a few — but I’m far too stubborn!
Thanks for reading!
pssst…you can also catch me on Instagram @penguinchilli_designs
