Tuesday, June 7, 2011

GoAnimate's Bring on the Noise Contest

Between December 2010 and March 2011 GoAnimate ran their Bring on the Noise contest in partnership with the Tribe of Noise indie music sharing web site. Animators could choose from a selection of about 15 songs and make an animated music video for their favorite.



You could enter as many times as you like. I managed to create two entries, the second of which you can see at the bottom of my post about Episode 1, Part 3 of Bat Storm: Financial Crisis which didn't get the required number of Facebook Likes to be considered a valid entry in the competition.



My first entry, below, not only made the cut it was the first runner up in the competition (effectively second place). As well it was the most viewed and the most recommended of all entries by the close of the competition.



Re-animatrix 'Afghan Sands' by Stoneye by etourist



Like it? Create your own at GoAnimate.com. It's free and fun!



Obviously my video is inspired by the closing battle in The Matrix: Revolutions but it wasn't the music that prompted me to go in that direction. In fact this animation did not start out to be a music video at all. It's beginnings were in my GoAnimate forum post, You Can't Do That on GoAnimate Challenge where Mr Holiday (who has since changed his screen name to Gangster Fart) wrote:





As you can see in my response I took up the challenge and set myself the task of achieving it with GoAnimate only props and characters.



Initially I was going to use GoAnimate's stick figure theme because those characters already have a Matrix style leap as one of their fight actions. I even made a start using some figures I created to look like Bat Storm and the Jokester (see image right).



I spent a lot of time with the stick figure version trying to work out how many steps were needed to spin the characters fluently through 360 degrees and how to hide the point where the characters have to flip.



One thing I discovered was that the moment I flipped the jumping character it reset their jump to the pre jump position, making that nice Matrix jump action virtually useless. Looking back I can see how I could solve this problem but at the time it was one of the catalysts for making me switch to the Lil' Peepz theme.



The other reason was that Lil' Peepz had just been given new fighting and gun using action packs that I thought would be great to feature in a Matrix style animation. So off I went to design my Neo and Agent Smith in the Lil' Peepz character creator.



To cut a long story short, the 360 degree spin I created requires just four GoAnimate Scenes to do the full spin. To help you understand how it all comes together look at the diagram below:



The diagram shows the scene slightly from above at the point where agent Smith has just jumped and frozen in mid air. The circles on the ground represent the space in which everything will spin through 360 degrees. The axis are labeled like a clock face with 12 at the top, the 3 on the right, 6 at the bottom and 9 on the left.



Over four scenes you have to move each object to the next axis in a quarter circle motion (add a control point or two to your slide movement) following a clockwise rotation (as indicated by the arrow line A). For example, Neo is standing on the 9 axis. By the next scene he needs to be on the 12 axis at about the same position he is standing on the 9 axis.



Things to keep in mind include perspective. Anything moving away from the viewer will get slightly smaller (i.e. anything moving towards the 12 axis). Anything moving towards the viewer will get slightly bigger (i.e. anything moving towards the 6 axis).



Characters crossing over the 6 or the 12 axis will need to be flipped in the next scene. Seeing the flip spoils the effect some what, which is why the scene includes two trees that rotate in front of viewer, hiding the flip. The trees also help to make the scene seem more like a real environment. The trees should move in quarter turns just like the characters.



The city line on the horizon should scroll/slide to the right (as indicated by arrow B) if the characters are spinning in a clockwise direction (it should move left for anti-clockwise). You will need to repeat the city scape prop so it forms a continuous, unbroken line of buildings through the whole spin. This will give the impression that the characters are surrounded by buildings - as if they're in a park in the middle of the city.



Note that the buildings are quite far away so they will move much slower than the characters. I used the default slide length of 75 pixels in my animation.



The whole effect can be helped by framing the scene tightly on just the characters using the CUT tool - that way the trees passing in front of the camera are less noticeable and seem more realistic.



It's a complex scene to set up and not that easy to explain clearly but hopefully you get the idea. If you look at the animation you'll see the man hole cover prop (i.e. the large grey circle I use on the ground in the animation) from the Lil' Peepz theme is a good substitute for the guidelines in my diagram above.



After all the hard work of trying to do the 360 spin using only GoAnimate props and characters it seemed a shame to release the animation with just that one move. GoAnimate had released its fighting and gun action packs so I decided to extend the fight scenes and add a music track.



I'd already heard the Afghan Sands music track by Stoneye, which other animators were associating with war and the Middle East for obvious reasons, but to me it felt like the faced paced music that I could picture being part of a film like the Matrix. Some people said it didn't suit but I think it does, given the Matrix is very much about a war and has plenty of Middle Eastern and Asian influences in its design and style.



Since the 360 spin played with perspective I expanded on that quite a bit to make my environment seem larger. Hence there was a lot of shrinking of props to create different camera angles and illusions of height and distance.



The closing tag line of "Clearly these two are not the One" was something I came up with because the end really needed some kind of statement after the two characters collide and vanish in a cloud of flames. Something to explain why I ended it where I did.



I never expected this animation to do as well as it did. Some people went so far as to say it would win the competition - quite a big call since I released it in December and there was plenty of time for someone to do something even more impressive before March.



Had the competition been about the most views I would've just made it but as it was a judged competition it turns out the second most viewed video won it - and deservedly so since that actually was a very creative music video and not just an extended fight video. The winning video is below...



Alice TERMINA by TOUJOURS



Like it? Create your own at GoAnimate.com. It's free and fun!

No comments:

Post a Comment