The Amazing World of Gumball

The Amazing World of Gumball is another show which I had not watched before, but decided to for research and ideas for my animation.

I watched the episode 'The Shell', which can be viewed at: http://www.watchcartoononline.com/the-amazing-world-of-gumball-season-3-episode-20-the-shell 

The main thing that makes The Amazing World Of Gumball stand out from other animated shows I have seen is the use of photographic backgrounds with 2D vector based cartoon characters in front of them.
These backgrounds are often fairly complex with lighting and effects, which in turn affects the 2D cartoon characters, for example lighting spots and shadow are used in various places on their faces and bodies, which sometimes creates slightly 3D effects to the characters too.

Once again, many of the characters' facial expressions are conveyed most from their eyes, however the characters in The Amazing World of Gumball seem to have a lot more animated components to their faces and bodies as a whole that characters in Adventure Time and The Regular Show.
Personally I do like this and feel that it makes the animation more exciting, however it is clear that a lot more time and effort has gone into creating all of these.

In this episode there is quite a heavy use of metamorphosis, as Penny's 'real self' transforms into different animals and creatures. The transitions for these are still extremely smooth, and, combined with the photographic backgrounds, presents the animation as a lot more 'real'.

Similar to Adventure Time and The Regular Show, sound is use in speech, sound effects, and music to add drama, tension and atmosphere to the animation.

Regular Show

I have never watched The Regular Show before but decided to for some research regarding my animation.
I watched the episode Maxin' and Relaxin', which can be viewed at http://www.watchcartoononline.com/regular-show-season-6-episode-1-maxin-and-relaxin 

Similarly to Adventure Time, The Regular show uses quite bright colours, however there seems to be more of a variety of shades and tones used. The backgrounds also appear to have less bold lines and more detail, including shading and slight texture.

Both the characters and their movements seem to be a bit more complex than those of characters in Adventure Time, however I think this adds to a slightly more 'realness' of the animation. Although the characters of The Regular Show are animals and creatures, they live within a fairly human world, driving cars and performing 'normal' human everyday activities, which provides more 'realness' and connection to the audience.

All of the characters in The Regular Show have voices, and sound effects and background music are sometimes used too.

This episode of The Regular show also shows some flashbacks, which is an interesting part of the narrative.
The passing of time was sometimes shown by a scene of text, reading '2 hours later', or something similar.
I also liked the fact that this episode seemed to have a message to it.

Adventure Time

I decided to watch and make notes about how animation is used within the popular cartoon Adventure Time.

I am already very familiar with Adventure Time, it is one of my favourite animated TV shows, and already I feel that I has had some influence on my own animation style, and fits well with my style of drawing.

I decided to watch one of the most recent episodes of Adventure Time: Ghost Fly, which can be viewed at http://www.watchcartoononline.com/adventure-time-season-6-episode-17-ghost-fly 

The overall visual style of Adventure Time is made up of bold lines and colours, giving it a simplicity as a whole, which makes it easy to understand and enjoy.

It's animation style is often minimal, with many scenes including just a few animated movements, for example just an arm moving, or simple facial features moving.

One thing I noticed regarding the facial expressions of a lot of characters was that their emotions are mostly conveyed through their eyes more than anything else. Simply changing the shape of a characters eyes slightly can have a large effect on their facial expression as a whole.

The characters in Adventure Time are often made up of simple shapes, such as circles, ovals and squares. This not only adds to the simplicity of the style but also makes the characters easier to animate, as their bodies stay the same simple shapes throughout, and so their limbs are simply attached on to these and can be animated easily, without affecting the rest of the body.

Adventure Time seems to use a fair amount of techniques which require as little animation as possible, but still do not effect the story. For example in this episode:

• The use of the repeated wide angle shot of the tree house, but with different weather, to show the passing of time
• The mid shot of Finn and Jake running, which does not show their legs
• The use of flying characters
• A shot of the characters backs while they are talking: as their faces are not shown in the shot no animation is present at all while they speak
• The use of repeated backgrounds throughout, for example the interior of the tree house

I think techniques such as these are useful within animation because they are shortcuts which make the animators work a lot easier and less time consuming, yet still produce a good outcome.

Sound is also use effectively in Adventure Time. Most of the characters do have voices, but background music is also sometimes used to enhance dramatic or tense moments, as well as sound effects such as footsteps, or the fly buzzing.

First Draft of My Short Animated Sequence

Here is the first version of my short animated sequence which will hopefully be used for my first assessment:

 

I will now spend some time working on my proposal and writing tasks for the assessment.
I plan to look back on this sequence in a couple of days time, to view it with fresh eyes and mind to see if I find anything that needs to be changed or improved.

Compositing in Premiere

I decided to use Adobe Premiere Pro to simply put all of my animated sequences together as one:

 

Doing this and seeing how each scene changed from one to the next made me realise the importance of 'hanging on' to a shot a little bit longer before it would change to the next. This just meant adding a few more frames to the end of a couple of my sequences but it did have an important effect on the way an audience would view and understand my animated sequence.

Animated Scene in Flash - Rapunzel Frowning

Again, for this scene, I used another of my previous Flash files as a template to work from, this one from my animation of Rapunzel smiling, and turned it into an animation of her frowning and looking upset.

The only parts of this that would be changed were the three moving parts that were previously used to create her smiling expression: her eyes, eyebrows and mouth.

I started off my removing the animation of her eyes squinting, so that they were just the same still shape the whole time.

Then I moved on to animating her mouth. I started with the same first shape as I did for her smiling, and then converted it into a symbol. I created a simple shape tween and altered the shape of the mouth into a frowning shape. This animation was quite similar to that of Rapunzel's mouth smiling so it was fairly easy to create.

The final piece of this animation to animate was Rapunzel's eyebrows. Although her eyebrows did move in my short animation of her smiling, to create a more effective frowning expression they would have to raise in more of a pivot/rotating motion from an axis, rather than just moving up the screen.
To do this I selected her eyebrows and made them into a symbol again, and created a motion tween. Similarly to when I was creating the movement of her legs swinging in one of my previous short animated scenes, I had to make sure that the outsides of her eyebrows stayed at a similar point throughout the animation, so that they would move correctly:

This is how my animated sequence of Rapunzel frowning at her laptop screen, upset that yet another princess is getting married, ended up:

Animated Scene in Flash - Online News Article

For this next scene I took the Flash file for the ordering pizza animated sequence and copied it to work from, as most of the parts and layers of that would also be used to create this scene.

I kept most of this scene the same, but took out the mouse animation and the laptop screen with the pizza website on it. I replaced this with a white background, and added a long symbol of the news article which I simply drew straight into Flash. I used a motion tween on this to give the effect of scrolling down a website or web page:

 

I did find the scrolling website quite difficult to animate, as there were many different lines and components to the object, and I also had to think carefully about how the layers would be organised so that the scrolling website would only be visible through the screen of the laptop.

This is how my sequence of Rapunzel scrolling through a news website on her laptop, to discover that another princess has got engaged, ended up:

Animated Scene in Flash - Rapunzel Lying on her Bed

The next scene that I went about animating was a bit different from the previous two, as this scene was from more of a wide angle shot, of Rapunzel lying on her bed while on her laptop.
This shot probably could have still been used without any animated parts to it, however I did not want this scene to be one still shot, and creating interesting small animations for this scene was a good way to improve my skills in Flash.

 

For this animated sequence I used quite a few layers, which was challenging at times, however I definitely learned a lot about organising the different parts of my animation, and how different lines and colours affect what is going on in the scene. This was also the scene which helped me decide on a lot of the colours that I have used throughout my first animated sequence.

Within this scene I included three main animated parts, all of which I used motion tweens to create.

The first animated parts I decided to create were Rapunzel's legs swinging up and down. I found this particularly challenging, as, to create a fluid motion I had to make sure that both legs moved from a sort of pivoted axis, with one part of them staying in the same place at all times. I also had to use one layer for each leg within the motion tween symbol, and make sure that they moved correctly at the same time and pace:

 

 



The next animated parts that I created for this sequence were Rapunzel's hands moving over her laptop, to create the effect of her typing and using the mouse on her laptop. Although I had to draw the hands in on Flash (as my original hand sketch did not include hands), I found this easier than creating her legs, as the parts were a lot smaller and not having to move so much. Again I used symbols and motion tweens to create this movement:

 

 

The final animated part that I created was simply of Rapunzel's eyes blinking. I did not originally intend to use this, however since this scene was a few seconds long I thought it would give more of a subtle naturalness to her character and movements.

This did not take long to create, and I used a motion tween to create this simple animation as well:

 



 

Most of the background and static objects that I used for this scene were again from my own hand drawings scanned into a computer and changed to more defined JPEGs through Photoshop, however I did have to do a small bit of drawing and altering through Flash itself:


This is how my sequence of Rapunzel lying on her bed on her laptop turned out:

Animated Scene In Flash - Pizza Order

The next short scene that I decided to attempt to animate in Flash was the shot of Rapunzel's laptop as she orders pizza online.

I wasn't sure on how to create the pizza website on the laptop screen, so I decided to combine my own simple hand drawings and a simple line image of a laptop, to create the main subject of this scene. I edited and combined both of these using Photoshop: 

Once I had uploaded this into Flash, I played about with colours a bit and then went about animating the mouse, which would be the only moving object in this sequence.

I drew a simple mouse with the pencil tool in flash and converted it into a symbol. I then made a motion tween and motion path so that the mouse would move across the screen as desired:

I spent some time experimenting how I would use colour and shapes within the image of the laptop and pizza website, and decided to add some polygons as keys for the laptop as well. 

Compared to the first scene that I created for my animation in Flash, it is clear that I had improved my understanding of creating and using motion tweens, as it took me a lot less tries to create one for the mouse, and that Ihad started to think about colour, design and details of my sequences visual look more:

This is how my sequence of Rapunzel ordering pizza online on her laptop ended up:

First Animated Scene In Flash - Rapunzel Smiling

I was not entirely certain of where to start with creating the scenes for my first 10 seconds of animation for my first assessment, so I decided to start with what I thought was one of the more simple animated sequences: Rapunzel smiling at her laptop screen.

I used this JPEG of one of a scan of one of my drawings (which I had altered in Photoshop) as the starting point of my short Flash animation:

I had left out Rapunzel's mouth in this image because that would be the main thing that I would be animating. 

Because this was only a short and simple animated movement I decided to just draw in her mouth and use a shape tween to transform it into a more smiling mouth (at this point I had not added as much colour into this sequence): 

Although this simple smiling animation with just the mouth moving did not look bad, I decided that I wanted to give my character more emotion and expression. 

When somebody smiles, the way that their eyes move is often half the way their emotions are conveyed, so I decided to have a go at animating Rapunzel's eyes and eyebrows also.

I wanted to use a motion tween to animate her eyes, however at this point I was still not 100% confident with creating motion tweens, so it took me a few tries to get it right.

In the end I was able to create a motion tween that made Rapunzel's eyes squint slightly as she smiled:

I also created another motion tween to raise her eyebrows slightly as she smiled:

With these three animated movements  combined together I was able to make Rapunzel smile at her laptop screen quite effectively:

Drawings to JPEGs

For my drawings to be used and animated in Flash, I had to scan them into the computer and alter them so that they were clearer and cleaner line drawings. I initially was thinking of using llustrator to do this, using the trace image tool, however most of my scans of my drawings would not open in Illustrator.
I tried to resolve this problem, but instead to I decided to use Photoshop to create the simple line drawings instead.

I opened each image in Photoshop and deleted various parts of the image so that I was only left with the line drawings. I added a white background, which helped me to find any odd lines or marks to erase, and then enhanced the black lines to make the drawing stand out and become clearer.

I then saved each of these images as JPEG image files ready to use in Flash.

Here is an example of one of my scans after my drawings after it had been altered in Photoshop:

Drawings for my Animation

Over the last couple of days I have spent some more time creating some more various drawings which I might use in my animation. 
I sketched them out in rough, then went over them more neatly in black pen, and scanned them into a computer.
The next steps with these drawings are to put them into Illustrator to neaten them up a bit, and then use them within Flash to experiment with animating them. 
This will all help to decide what steps I will take next, and which scenes I may use for part of my first assessed 10 seconds of animation.

Storyboard

Using a storyboard template, I have created a rough storyboard for my animation.

Depending on time, I may add a couple more scenes to this, however I think that my storyboard so far will likely cover the 90-120 seconds required for my final assessment.

Rapunzel (Elz) First Character Designs

The main character of my animation is going to be Rapunzel (or Elz).

I decided to have a go at sketching up a couple of ideas for what sort of style I should use for my characters and possibly the overall feel of my animation.

I wanted for Rapunzel to be quite the opposite to stereotypical princesses in fairy tales, and much more like an ordinary teenage girl.

My first two rough sketches were just playing around with possible ideas:

Although I liked both of my first attempts at character ideas, I decided that my second drawing would probably be the best fit to animate, especially as I am going to use Flash to create my animation. The bolder, more simple lines of the second drawing would be a lot easier to move and recreate, and would come together in a style which I would be more confident in working with.

Once I had decided on this style (at least for now), I put together a more clearer cleaner character drawing of Rapunzel:

Throughout my animation I plan to have Rapunzel wearing a simple outfit of comfy clothes: mostly that of tracksuit bottoms and a strap top, to give the effect of a bored, lazy teenager. However I am still going to include the crown on her head to display that she is still a princess.

I also decided to try and experiment with putting these designs into Illustrator and adding a bit of colour, however I am not so happy with the results.

            

The first of my experiments did not go very well at all, as the original drawing had bee drawn on lined paper and so the tracing effect did not perform as accurately.

The second of my experiments in Illustrator did turn out better, however once I have made some more sketches of characters, objects and scenes for my animation, I will scan these in instead to get clearer, more accurate traced images to work with.

Eevee and Marceline Flash Animation.

To improve our knowledge of and skills in Flash, we were given the task to create a short animation of a humanoid cartoon character petting an animal cartoon character in front of a photographic background.

For my short animation, I chose to use Marceline from Adventure Time, and the Pokemon Eevee, in front of a photograph of a shopping street in Seoul, South Korea.

I enjoyed this animation, as by this time I did feel more confident with working with flash, and was eager to try out new techniques, such as bitmapping and tracing an image to alter different parts of it, and so to make single parts of the image move. I then used tweening on these motions to make them more smooth.

I was able to make Marceline bend down and pet Eevee, and to make Eevee's tail wag and eyes blink.

I feel that the techniques I have learned while creating this short animation sequence will help me a lot with making my own animation, as I will be using my own drawings, traced through Illustrator, and then be altering and animating them in the same way as this using Flash.

https://www.youtube.com/watch?v=mNC83YSfJ98&feature=youtu.be

Stick Girl Experiment

To get to grips with using Flash a little more I decided to watch a couple of tutorials online and have a quick go at experimenting with Flash.

The result of this was the creation of an animated stick girl, who's eyes would blink and moth would move.
By doing this basic experiment, I did feel a lot more comfortable with using Flash, and more organised in doing so, for example I named all my layers and knew where each part was going and what it was doing.

https://www.youtube.com/watch?v=qFD93HbWpkY&feature=youtu.be 

Bird Flying Animation in Flash

I then set about to create a short animation of a bird flying across a background.
Similar to the pink bouncing ball animation, this animation uses movie symbols, a motion path and motion tweens.
I also found this quite difficult to create, but was able to make it work in the end.

This image shows the layers, symbols and motion path that I used within this animation to create the bird symbol moving across a background, with it's wings also flapping at the same time.

https://www.youtube.com/watch?v=uiTBefgeI0s&feature=youtu.be 

Sweet Motion Sketch

After analysing how a rubber ball would bounce, including the way it would squash and stretch and the height it would gain/lose after certain amounts of bounces, we were given the short task of sketching the movement of a boiled sweet once it was dropped.

As the boiled sweet is made from hard sugar with a plastic wrapper, rather than a material such as rubber, not a lot of 'bounce' will occur, and so the motion of the sweet being dropped will not be one of momentum: it will just fall to the floor, with possibly only a couple of small bounces from when it hits the floor.

Bouncing Ball experiment 2

Next we had to create a similar bouncing ball animation in flash, but this time using symbols and motion paths and tweens.

I found this task quite difficult to get the hang of, but eventually I seemed to figure out what I was doing, and also add squash and stretch motions to the pink bouncing ball.

This first image is of the main scene of the short animated sequence. You can see the side panel which includes the symbol (and a couple of other practice symbols) that I have used.

This second image is of the animated sequence used for 'Symbol 1', the pink bouncing ball. This sequence is one within the main scene, and the motion path is visible.

https://www.youtube.com/watch?v=Bm3kGufNeVY&feature=youtu.be 

Bouncing Ball Experiment in Flash

In the last class session, we were introduced to Flash and taught some of the very basics of this program.

Our first task was to create a bouncing ball animation.

I first used a shape object to create the bouncing ball, and using key frames and tweens was able to make it 'bounce'.

https://www.youtube.com/watch?v=p7nzLAYNbFY 

Idea For My Animation Story

For my animation, I have decided to use the brief of adapting a folk tale in my own way.


I have chosen to use the story of Rapunzel, as well as the typical 'princess in a tower, waiting to be rescued' scenario of a few folk/fairy tales.


Rapunzel is not like the usual princesses in fairy tales; she is more similar to a modern teenage girl. As she is locked in her tower, I would like to use this in a way that makes her similar to a teenager who likes to spend a lot of their time on their own in their room. For example, while Rapunzel waits to be rescued by a prince, she likes to spend her time on the internet, playing video games, eating takeaway food, and sleeping. She will often trip over her long hair and not bother too much with her appearance.


The basic story of my animation will be:

• Rapunzel is waiting in her tower for her prince, killing time.
• She sees online that another princess is about to get married, this makes her feel more disheartened.
• She orders pizza for herself one night and the pizza delivery guy tries to have a conversation with her, shows interest.
• This happens again a little while later, they talk and have things in common, e.g. video games. Rapunzel starts to develop a small crush on him.
• One night the pizza guy arrives out of the blue with Rapunzel's favourite pizza and a new video game (or something like that), and asks if he can come in and chill with her.
• Rapunzel agrees, he climbs up her hair and they sit in her messy room together playing video games and eating pizza, like 'normal' teenagers.

I am hoping this will all fit into the maximum of 120 seconds that I have for my animation.
However, if I have any time to spare, some other short animated sequences could be added in, such as:

• Rapunzel overhearing a conversation for the witch who imprisoned her about how she thinks Rapunzel will never be rescued by a prince.
• Rapunzel washing her hair in the rain.
• Another princess calling up Rapunzel, inviting her to her engagement party, to which Rapunzel makes an excuse not to be able to go.

Animation - A Guide To Animated Film Techniques (Roger Noake) - Notes

“The subtle and complex relationship between soundtrack and picture is one of the most potent sources of inspiration for the animator. But it also poses problems of technique – such as the synchronisation of lip movements with speech – which demand a high level of skill and application.”

“Often the soundtrack is prepared before the the action and the animation is then carried out to match the sound. This gives a very precise degree of control over the relationship of sound and image and opens up rich possibilities of interpretation.”

Sounds to add depth, emulate movement, voice effects to enhance an animation.

“Atmosphere is a special kind of sound effect laid throughout a scene, it represents the background or ambient noise of the location.”

Timing a soundtrack according to frames per second, to “organise and manipulate timing.”

Film Art: An Introduction (David Bordwell and Kristin Thompson) - Sound In The Cinema - Notes

“Sound as flexible and wide-ranging as other film techniques.”

“We’re strongly inclined to think of sound as simply an accompaniment to the real basis of cinema: the moving images.”

“To study sound, we must learn to listen to films.”

Sound “engages a distinct sense mode.”

“Sound can guide us through the images.”

“Sound gives a new value to silence. A quiet passage in a film can create almost unbearable tension, forcing the viewer to concentrate on the screen. An abrupt silence can jolt us and arrest our attention.”

“Sound bristles with as many creative possibilities as editing. Through editing, one may join shots of any two spaces to create a meaningful reaction. Similarly, the filmmaker can mix any sonic phenomena into a whole. With the introduction of sound cinema, the infinity of visual possibilities was joined by the infinity of acoustic events.”

 

“Several aspects of sound as we perceive it are familiar to us from everyday experiences and are central to films use of sound.”

Loudness: to create atmosphere, perceived distance, extreme shifts in volume, interruptions

Pitch: distinguish music and speech from noises, distinguish among objects, create tension, other more specific purposes

Timbre: voices, articulate portions of soundtracks, humour, other more specific purposes

These all shape our experiences of a film as a whole.

 

Sound in cinema: speech, music and noise.

Use of recycled sounds, samples from sound libraries.

“Sound guides the viewer’s attention.”

Sound effects and music are usually subordinate to dialogue.

 

“In creating a sound track, then, the filmmaker must select sounds that will fulfil a particular function. In order to do this, the filmmaker usually will provide a clearer, simpler sound world than of everyday life.”

“By choosing certain sounds, the filmmaker guides our perception of the image and the action.”

“Guiding the viewer’s attention, then, depends on selecting and re-working particular sounds. It also depends on mixing, or combining them. It is useful to think of the soundtrack not as a set of discrete sound units but as an ongoing stream of auditory information.”

“The rhythm, melody, harmony, and instrumentation of the music can strongly affect the viewer’s emotional reactions. In addition, a melody or musical phrase can be associated with a particular character, setting, situation, or idea.”

 

“Fidelity refers to the extent to which the sound is faithful to the source as we conceive it.”

Space: Digetic and nondigetic sound, sound sources

Time: “Sound also permits the filmmaker to represent time in various ways. This is because the time represented on the sound track may or may not be the same as that represented in the image.”