Making the Composition

After creating the backgrounds of the scenes, I arranged the film shot-by-shot with directions of what actions and characters were included in each scene. I started working on the individual character animation. I wanted to do it with frame-by-frame drawings rather than animating it entirely digitally using Toon Boom or After Effects. I began drawing the individual characters in static poses on white paper with no background details, then duplicating them; changing their positions with small increments. I used my Pinflair lightbox for this, which made copying each drawing much less labour-intensive. A small example of one of the actions I made a sequence for is shown below (note: they are not in order).

After this, I scanned each image consecutively into my computer, and imported them to Photoshop where I traced them, cleaning up the lines and added colour. I saved each sequence as a single PS file with multiple folders containing each of the images, so that I could import them into Toon Boom.

In Toon Boom Animate Pro, I created a new project with the dimensions that I wanted my film to be. I then had to import each image that I required to be an element in the shot, and arrange them in order of view. I got the hang of using the software pretty quickly, although there are a lot of elements too it that I still do not yet understand, and I feel I could improve my workrate and output if I invested in expanding my knowledge of the software and interface. In Toon Boom, I keyed in the frames one-by-one; which was quite labour intensive! Although, the final output looked great so I was happy with it in the end.

After everything has been finished up in Toon Boom and exported as a .mov file, some of the shots needed to go to After Effects for some further editing. Here, I made small changes like adjusting Brightness and Contrast, adding a zoom effect or combining the footage with particles for rain, etc.  This process was much quicker than using Toon Boom, but I prefer the visual look of keyframed, frame-by-frame animation than just using After Effects for all the manipulation.

Finally, all of the finished footage was imported into a project in Premiere Pro to edit it together. Here, I worked on perfecting the specific timings of each of the shots. I added transitions between some of the shots where appropriate. Many of the technicalities of the software I was unsure of, so I watched a few YouTube tutorials yet again on the subject. As well as cutting and sticking the video together, I also was able to finally add the audio files onto the footage. One track contained the music piece that Chris had sent me, which I left completely unchanged. To the other track I added sound effects such as rainfall, a moving train and a door closing. I used them sparsely but, I hope, effectively.

When I was happy with the final output I exported the entire thing as a .mov quicktime file at 25 fps, with dimensions of 1280x720. I am fairly happy with the finished product, though there are some minor things that I am unsatisfied with that I would change given more time.

Model

I made a small to-scale model of my main character out of clay, while in the stages of development. This gave me a very helpful visual reference for when I was positioning the character in shots or drawing him in new poses. It allowed me to keep his proportions fairly uniform throughout the entire animation.

Frames

I though't I would just quickly upload some of the still frames that I drew to be used in the animation. I want to display them here because I think it's a pity that these works aren't truly seen in the final animation, but instead a processed, edited version of them. So here are some cute ones that I personally liked!

Inserting the Sound

Thankfully, just in time for my animation to be due, Chris delivered the final music piece to me. This one was my favourite of all of them by far, and I was very pleased to be able to use it with my animation. I think it captures the mood of the poem and the emotions I am trying to convey very well. It is especially tailored to the visuals, so the highs and lows, changes in tempo and pauses mimic the action on screen.

As well as this recorded music track, I wanted to include some sampled sound effects to the piece. My idea was to keep them very sparse, so only use about 5 or 6 in the entire compositions: just enough to enhance the narrative and visuals but without being any kind of a focal point. The sound clips I downloaded from freesfx.co.uk, which is all completely free and royalty free, which was great to find. On the website I discovered an entire bank of sound clips to choose from, and each one met my specific needs very well.

In order to add the sound files onto the visuals, I had to learn methods of combining the two with software. As I have never really worked with sound before, I thought this would be a challenge for me. As I was using Adobe Premiere Pro to edit the entire short's final output, I watched some videos online about using Premiere Pro for sound editing. I found the process relatively simple, and I picked up the technical knowledge quickly.

Walk Cycles

One challenge which I faced throughout the development of the drawn materials for the project was learning how to create realistic walk cycles. It is a very basic of animation mastery, but not simple to do when just beginning. I had a lot of difficulty with it at the start, but soon found a way to get around this. I searched through Google for series of images displaying each element of a walk cycle. I practiced copying them, using my own cat character as the subject. In my animation I wanted to show both shots from behind the moving character, and from in front, so I needed to learn how to draw walk cycles from various angles. I took a short cut in some instances: any shots where the character is walking but their legs cannot be seen, I just manipulated the position of the character repeatedly up and down on the screen, to give the illusion of walking.

Creating the Scenes - Finished background artwork

Creating the Scenes - Initial Sketches

Before creating images digitally on my computer, I decided to first sketch the scenes out on paper. This way I could quickly and roughly plan proportions, positions and angles of shots and scenes without expending too much time or effort. These initial sketches mainly incorporate elements of all of the inspirational images that I had included in my last post.

Creating the Scenes - Reference Material

Below is a collection on images that I used as source / reference material for creating the backgrounds of scenes in my animation. I found them through taking screenshots of my favourite videos, and from searching online using random key words like 'subway' 'townhouse' and 'rooftop'.

The Princess And The Frog Production

Yet again while browsing some animation channels on Vimeo, I came across an interesting piece of behind-the-scenes action of an animated production. This time, it was Disney's 'The Princess and the Frog,' and showed the development from pencil line drawing to full colour of one of the shots. You can see in this video the frame by frame drawings done of the characters, and the layering that went into them.

Night Scene After Effects

The next background/ sky that I wanted to create with After Effects was the final night-time, starry sky. After the characters have disappeared off screen at the end of the act, I wanted to create their images as constellations in the night sky, and have stars twinkling around them, with the rooftops of the town silhouetted below in the moonlight.
First, I used Photoshop top create a stylized night sky, blending texture and photo layers to achieve the desired look.

On After Effects, I imported the image, and used CC particle world effect to create stars twinkling in the sky. I created them with a 3D depth so that when I zoom out of the scene, the distance is noticeable.

I took one of the simple images that I had created of the two cats holding hands in the storyboard/ animatic. I tidied it up on Photoshop and inverted the colour, so that it looked like a white outline on black. I bumped up the outer glow of the outline level so that it looked bright.

I imported the outline layer into the AE composition. Next, I created a new camera layer and a new null layer, and linked them to each other by making the null layer the parent of the camera. I zoomed into the top right hand corner of the composition, where I wanted to constellation to appear. Using keyframes, I faded in the constellation while zooming outwards, away from the top corner to view the whole scene. I only wanted to create a very short sequence, so capped it at 8 seconds. 

I created a wiggle on the constellation to make it look hand drawn and imperfect, aimed for the sort of look that Julia Pott's characters have. I created two keyframes on the position panel of the constellation layer, and using the 'wiggle' effect, applied a small side-to-side movement to the animation. I rendered it all out and uploaded it to Vimeo.

Rain Falling After Effects

I experienced quite a bit of trouble while trying to determine how to create the effect of rainfall for one of the more miserable scenes in my film. My issue came about because I wanted to draw my own raindrop outlines to use, rather than use generic CG rain. I watched many a video on YouTube and Vimeo about creating a rain effect in AE, but none of them gave any indication as to how to use one's own rain drops. I tried first using a particle simulator effect, and using my own raindrop as the particular, but it didn't work out quite as I had hoped. The direction and flow of the rain didn't look natural at all. I could possible go back to this and experiment more with it if needs be at a later stage, if nothing else I try out works.

After this, I tried creating a separate composition of a single raindrop falling in AE over the top of a cloudy background that I had created in Photoshop, and then repeating the same thing over and over and over. Aside from this being incredibly tedious, it still did not look quite right. I will continue to experiment and update this blog post later with any developments.

Rain test from Cal McLoughlin on Vimeo.

After Effects Sunshine

In one of the shorter scenes, I need to create the illusion of the sun shining through a window, and the rays illuminating the room that the protagonist stands in. I thought the best way to create this effect would be with Adobe After Effects. I found a great YouTube tutorial online by searching 'After Effects sun ray light.' What came up was a Text animation tutorial, but I applied the knowledge learnt through it to using on my image.
http://www.youtube.com/watch?v=6-X999qybnM&list=PL06BB622B5353ACA2&index=4

I had earlier created a sky scene using PhotoShop. To animate the sun separate of the background, I saved them as two different PS layers.

I imported both the layers into a new After Effects composition which had the same dimensions as the final piece I want to create. I followed the tutorial's instructions and created a double layer of the sun, and gave both of them the 'fast blur' effect of different amounts. Then, on the underlying sun layer, I added another effect called 'CC radial blur.' I created a keyframe at the 0 second mark, and another at the 3 second mark when I had adjusted the amount of the effect from 0 to 230. It took quite a while to render out the scene, but I managed to create a quick, simple animation of a sun shining brightly with increasing intensity.

Carine Khalife

While browsing through Vimeo's Editors' Picks of the day, I discovered this absolute gem. I adore nearly everything about this music video animation. The music is by a band called YOUNG GALAXY, and all of the artwork is created and directed by Carine Khalife, whom I had never come across before. The dreamy audio track works incredibly well with this fantastical video, in which animals in suits roam through woodland and plains. While the action itself is relatively simple; with the only animation being of the animals' walk cycles, the detail that goes into creating each single frame is phenomenal. It appears to me that each frame of the character's animation is hand painted. The textures and colour variations created by this look wonderfully unusual, and I have fallen in love with it. I could continue to watch this video again and again. It just goes to show that even without a strong storyline-type narrative, an animation can still be visually and emotionally stimulating.

Jee Young Lee

This is not much particularly to do with animation, but I stumbled across this photographer's amazing work while browsing through art blogs online. The Korean artist Jee Young Lee creates mind-blowing sets using just her own small studio apartment space. At first I thought that the images were created with the help of Photoshop or some other photo editing software, but after reading the description I discovered the scenes were entirely handmade by Lee. It just goes to show  what amazing work one can produce with enough creativity, innovation and motivation. This has truly inspired me with my own work, not in style or form, but just in a simple lesson of perseverance and determination.

http://www.boredpanda.com/stage-of-mind-surreal-photography-jee-young-lee/

Phenakitoscope

I found this fantastic video online from a Japanese band called SOUR. After successfully crowd-funding their campaign on Kickstarter and GreenFunding (a Japanese equivalent), the band released their latest music video with the help of directors Masashi Kawamura and Kota Iguchi. The band filmed 189 spinning CDs as phenakistoscopes to create their entire animated video, “Life is Music.” 
The song is about “the circle of life, and how music is its rhythm maker,” say the creators. “We took this concept, and came up with an idea to use the spinning CD disc as a Phenakistoscope.”

As well as the music video itself, I found a fascinating behind the scenes look at the making of the video. It's fantastic to see that this primitive style of animation is still being used in new inventive ways!

The Blue Umbrella Making-Of Holiday Calendar

The Pixar creators of the short film 'The Blue Umbrella' are releasing a day-by-day behind the scenes look at the making of their film for the entire advent period. On the website http://www.theblueumbrellamakingofholidaycalendar.com/ an advent calendar of little umbrella animations is displayed. With every passing day, a new one becomes clickable to reveal a snippet of behind the scenes action. Themes for pieces include inspiration behind the film, script writing process and the animatics behind the finished animation. I think this will come in particularly useful to me over the course of the next month in my animation studies.

Complete animatic

I created a complete (or as complete as I could) animatic. I did not want to dedicate too much time to it, so I spent just one whole day in the library and completed it, from start to finish. Although it is very simple and unrefined, I was quite proud of myself for achieving this in such a short space of time. I used Photoshop to create still of each of the main shots of action, and animated it by exporting as a quicktime file.

I mainly used my tablet for drawing directly onto the screen, and I kept details to a minimum by doing very rough sketches and leaving out backgrounds of scenes.

When I was finished I discovered at the whole piece came in at only 1:20, instead of the required 2 minutes for the brief. I will have to think of places in the animation that I can extend the length by slowing down the pacing; or else add another short scene onto the end. I still have yet to think about the credit sequence at the end of the film and how I want to display that.
I sent the final animatic to Chris so that he can tailor the music better to the timing. I'm looking forward to it all coming together in the end.

I used some stills from my favourite animations as examples for planning some of the shots. Examples include  Julia Pott's work.

animatic whole 2 from Cal McLoughlin on Vimeo.