Final Animation

IT IS COMPLETED.
Here is is:

The lip sync is a little off on YouTube, I think its something to do with YouTube's frame rate which sucks, but it still looks pretty good!


I'm really happy with the final outcome. I have completely enjoyed creating it, and as you can see (if you watch the video as much as I have), movement, lip sync and control get better as the video progresses, as I got much more used to using the different tools on After Effects.
I think this video responds to my aims really well. I wanted to explore how we rely on technology, but not in a serious, derogatory manner. I wanted it to show the funny side of how we trust in technology, and my exaggerated version of reality plays to this perfectly.
Pat on the back, initiate!

Another production screenshot

Here is just another screen from the cartoon in production.

Restaurant

This is the setting for the first restaurant scene where the girl is choosing what to eat. Jeri suggests a salad because red meat can give you cancer. Awkward moment in 3...2..1..

Girl Character

I have drawn up the female character now.

Couple together

I've coloured the two quite stereotypically to stick to the simplicity of the design.
I have also created the replacement layers for the female too, so all is now set for production!

First set of animation

Using the simpler character design, I have done the first small section of the story which starts the conversation with Jeri.

Jeri - The phone VI

To record the voices I have spoke into a microphone using free open source software called Audacity and edited the pitch using Adobe SoundBooth.


I like the way the visuals work here. Little movement makes sure nothing distracts the viewer from the story.
I shall continue using this style and hope it will continue looking good!

New Character Design

I have done a drawing on Photoshop with a few replacement layers in a similar style to that of Frank Floethmann.

I actually quite like it! It would be really easy to animate, and because of the simple facial shapes, his eyes and mouth will show his entire expression.
I think I'm going to start production with this design, and start recording some voices for my character to speak out, and see where that takes me!

Frank Floethmann PINGPONG

I showed my tutor my character design and movement so far, and he suggested I looked at a series of videos by Frank Floethmann called PINGPONG.

As you can see, It's incredibly simple design, and very little movement.
Even though there is no dialogue, the story is told through the expressions and symbols shown in the characters.
I will do a drawing In a similar style to this to see how it could look.

Moving my character

I have created my character on Photoshop using my graphics tablet, along with some replacement layers for the mouth, eyes and hands.

I have also had a bit of a play in After Effects at using the time-remapping to animate different movements.

There is no dialogue here, but I intended this part to be the bit where my character receives his reply text and says 'SCOOOOORE!'

Animation tutorial

As my animation relies on dialogue to tell the story, I need the mouth of my character to look believable when he is speaking.
I've never done this before, and I was worried I'd have to draw out each movement, which would be ridiculous in terms of workload. So I looked online for some tutorials how to do it easily, and found out it's actually incredibly easy.


http://www.lynda.com/After-Effects-tutorials/2d-character-animation/734-2.html
On this site, I watched through all the free tutorials which shows that you can simple create a mouth in different shapes and use time-remapping to flick through them, eliminating any drawing. All i need to do is create several individual layers holding a different mouth and I can just select on each keyframe. Easy!

Further Character Development

I have done a few more drawing based on my first character designs.

Wearing Shirt Angled

This design shows my character wearing a shirt. I thought it would look but, but because of the shape of his body he looks like a waiter. I'll pretend this didn't happen.

Possible accessories

To make movement a little easier, a trick to making joints believable is to cover them up with something to avoid seeing an outline moving out of place. This could be a watch on the wrist or a collar on the neck, things like that. This just explores a few possibilities.


Although it would make movement easier, I don't want to clutter him up with too much gear. I want him to be simple, so people can relate.
I think the best thing to do is to start drawing him out on the computer and see what I can come up with digitally.

HISHE

HISHE (Hows it should have ended) is a web cartoon series which explored how films games and TV shows should have ended in very funny ways.

It is very simply animated, but focuses on the story and humorous narration than detailed appearances. I absolutely love it!

The Dark Knight

Predator

Superman

One of many scenes with Superman and Batman in a coffee shop.

Tron

These web cartoons are incredibly funny, being sarcastic, ironic, and making fun of huge plot holes which could end the stories early on, should events take different turns.

^ This Iron Man episode is one of my favourites. Find all the rest at http://www.howitshouldhaveended.com/ or their youtube channel at http://www.youtube.com/user/HISHEdotcom

Although I have a little experience with character design and animation (see my first animation project from last year), I have never included voice or dialogue, so I will need to look for some tutorials online how to create fluid mouth movements which sync up to the dialogue.

Character Development

I have done a few drawings and sketches to develop a likeable character. I want something simple which won't be too difficult to animate, but which also doesn't look too bare and basic.

Development Faces

I started by just drawing some simple faces which looked really different, to see what sort of shapes and styles I liked.

Head Parts and Facial Expressions

As you can see in my first character designs, and in my storyboard, the male has spiky, scraggly hair. I like this, as it makes him feel more believable and likeable. I added this hair onto the one at the bottom, and I have decided to stick with it.
I also like the triangle nose, as it is easy to build expressions around.

First stage male

This is my starting point for the male character. He is simple but believable, and thats what I am aiming for.

First female design

I have done one drawing of a possible female character similar to the character shape on my storyboard, but for now I will put the design of the female on the back-burner, as she doesn't come into the story until scene 2.

I like the male character so far, so I will develop him a little further to see how/if i can make him any more interesting.

Script

Here is the script I have written for my web cartoon:

Scene 1

Face

Guy : Hmmm, hey Jeri, I’m pretty bored. You think I should look through Mugbook for some possible girlfriend material?

Jeri: Sir, I think that’s a splendid idea. I’ll open your Mugbook profile now.

Phone

Guy: Nope. Nope. Noooo. Definite schizo. Heyyyy, what about this one, I used to go to school with her!

Jeri: You seem an excellent match sir. Would you like to send her a text message?

Guy: Hell Yeah! Hmm lets see…..

Types message

Guy: How about that, that’s pretty romantic right?

Jeri: Quite so, sir.

Guy: Send! Now we play the waiting game.

Face to Blank Phone, back and forth.

Face

Guy: Jesus, what is this girl doing?!

BZZZZ. Message comes through.

Phone

Face

Guy: She said yes!

Jeri: It seems so, sir.

Guy: SSCCOOOOOOORREE!

Jeri: If I may be so bold sir, maybe you should get ready. The time is 7.30.

Guy: Jeez, you’re right.

Combs hair, sticks back up.

Guy: Close enough. Any last minute tips, Jeri?

Jeri: I have searched the web and found females are attracted to smart, humorous men, preferably with muscles.

Guy: I’m going to be alone forever.

Jeri: Maybe you should just be polite, sir. No foul language, good posture, and look after her well-being.

Guy: Good idea, Jeri. I dunno what I’d do without you!

Jeri: Fear not sir, I’ll be with you the whole time.

Scene 2

Guy walks up to Girl waiting outside restaurant.

Guy: Hey!

Girl: Hey!

Guy: You ready to eat?

Girl: Yeah! Lets head in!

Inside restaurant sat at table.

Girl: Wow, there’s so much to choose from. Maybe I’ll have the roast beef!

Jeri: Actually, wikimedia says red meat is a catalyst for cancer. Might I suggest a nice salad?

Girl: erm…

Guy: Trust in Jeri, he’s always right.

Girl gives awkward smile.

Fade to after meal.

Girl: Ohhh im stuffed, that was delicious! I think I might still have some room for dessert though, if you know what I mean

Winks

Guy tries to speak but is interrupted.

Jeri: Actually, eating dessert too quickly after your meal can result in a downward spiral to extreme weight gain. A quick scan online has resulted in the suggestion to exercise more regularly to lose love handles.

Girl looks angry.

Scene 3

Couple stood outside restaurant.

Guy: So, you want to take a walk on somewhere?

Girl: Yeah, that sounds great!

Jeri: Might I suggest the beach for a romantic walk? Only three mugging have been reported in your area within the past two months.

Girl looks worried.

Guy looks awkward.

Unknown female voice comes from Girls handbag.

Voice: Excuse me, I have a suggestion.

Girl pulls phone from bag.

Voice: I have paired your two names together using NameDate.com and results show a 4% change of romance. Girl, get yourself outta there!

Girl: Sorry, always trust Miri!

Girl Walks off

Guy looks angry.

Jeri: She sounded hot.

Guy: Shut the f-BEEP up.

END


I think this story shows how being too reliant on technology can interfere with our social lives. Now to start some character development!

Story/Storyboard

Looking back at what I have found, it seems smart phones are definitely something worth focusing on.
I have also recently gained inspiration from one of my friends. He thinks 'Siri' on the new Iphone 4S is amazing.
Siri is basically a VI which can use your phone for you in case your too lazy to use the device you have spent hard earned money on. By just asking it, it can text people for for you while you just speak out what you want to say, just in case your time is too valuable to spend that 20 seconds typing it out. It can also check the weather forecast for you in case you live in a cave with no point of reference to the outside world. It can add things to your diary in case you can't read a calendar. Even tell you the closest place to bury a dead body. You get the point.
Personally I think it's a ridiculous and pointless creation, and seeing as it is another step to being reliant on technology to run our lives, I think its a perfect example to focus on.


I have not yet decided on character designs, but I have drawn a storyboard with basic human models to show how my web cartoon will play out.

Page 1

Page 2

The story will follow our main male character (who I haven't named yet) searching online on 'Mugbook' (a reference to Facebook), for girls who he could date. He is asking for help and advice from Jeri, the VI in his phone.

To avoid directing any sarcasm or insult to Apple or Siri, I have changed the name and some characteristics of Siri. Its a male voice (instead of the actual female) called Jeri, who can talk more like an intelligence than a robot, a bit like Jarvis from Iron Man. This way, it can relate to the main character and speak to him as a person rather than an object.

After finding a suitable match, someone he knew from school, he gets Jeri to send her a message asking for a date. She replies accepting said date and they meet at a restaurant.  Throughout the date, Jeri keeps interrupting them with information he has found online regarding what they are doing. For example, when the girl considers ordering roast beef, Jeri blurts out that 'Wikimedia' says red meat is a catalyst for cancer, and suggests a salad.

This continues throughout the date until the girl reveals she has her own phone VI who claims it has matched their names together on namedate.com and the result shows 4% chance of romance, to which she leaves.

I have also written a script which goes into the gags in more detail, which I will put in the following post so this one doesn't look too cramped.

First Developments

I have been thinking of what I could develop as a final outcome.
I love watching web cartoons, and love the simple animation style they posses, as the story and attention is on the narrative and the narration. They are easy to create, but can be really effective.


I have drawn some initial character designs for possible people involved in my story (which I haven't done yet, thats my next step!).

I just thought i'd upload these. Whether or not I use them I don't know, I just had inspiration from web cartoons to create simple cartoon characters to see if they inspired my story writing in any way. Speaking of which, that's my next step: Story and Narrative.

WYLD STALLYONS

Wyld Stallyons (not to be mistaken with Bill and Ted's most triumphant band Wyld Stallyns) are a moving image and animation agency who are most famour for their work on MTV's MADE adverts and animations. Website found at: http://www.wyldstallyons.com/home/latest

MTV MADE

Punish The Atom

This video is a short animation test for 'Struwwelpeter'. Its pretty twisted, and has an awesome soundtrack, check it out! I like the animation style of it, and the voice narration.

Studio AKA

Studio AKA (http://www.studioaka.co.uk/) are an animation agency who have worked with companies such as Green Flag and ITV.
The work they produce is generally 3D modelled characters such as the ants from Green Flag, although some of their work is 2D Abstract movements.

Green Flag

ITV - I'm A Celebrity Get Me Out Of Here

STUCK ON A SUNDAY

National Palook - Swan Lake

Clearly very talented animators, I love the way the characters move and feel alive.

Technology Brain Storm

I have done a brain storm on a few different forms of technology which I think could be interesting to use.

My Next step is to look at practitioners or agencies relevant to motion and interactive design.

My Own Research

I have asked one simple question on a survey online. Only got 11 people replied, which obviously isn't that many but it was actually very useful.


I asked for a form of technology which is really important to them, they use everyday or something they could't live without (figuratively speaking), and why.
Of the 11 replies, 8 were their smartphone (Iphone or Blackberry). One was alarm clock, one was TV/Sky+ and one was Xbox 360.
The answers as to why this technology is important to them regarding the smartphone were all very similar. Music, Internet, and communication were running themes.
And in fact, the one answer for the alarm clock turned out that person's alarm lock is on their Iphone, so I think i'll give that to the smartphone section!


This is quite interesting.
9/11 people consider their smartphone to be their most important piece of technology. And as I have stated in a previous post, the majority of mobile phone owners aged from 14-30 use a smartphone. I think whatever my final outcome will be, it must include some reference to this fact.

Existing opinions

I have looked online at some existing opinions on technology.
After reading a few stale articles both for and against the reliance on technology, I found this article at http://cjlevinson.com/2008/09/03/do-we-rely-too-heavily-on-technology/.


I found this article quite interesting, as CJ goes into the good and bad points from his own personal experience and that of others.
I'll post a few quotes I found interesting.


When talking about the London Stock Exchange systems crashing and losing millions of Pounds, he says "Should any piece of technology be so important that we can't function without it for 8 hours?"
True! This relates to not just this happening at the stock exchange, but to other forms of technology.
I have seen statuses on Facebook from people all like 'My laptop is broken, i'm so bored, nothing to do' and the likes. Seriously? Read a book, go outside, bath your dog, there's more to life than your laptop!


"...technology seems to have become more of a convenience than a tool."
Once again, I must agree. Take the internet for example. First invented for the Army to use as a communication device. Then it gained popular demand and, well, as you are reading this online, you will know, taken over EVERYTHING. There not much you can't find online now, from genuinely useful information, to talking to your friends because you can't be bothered to get up off the sofa and go out.


Following on from what I just said, he later says "...I'm also worried our social skills are deteriorating".
Many people now prefer to text or email rather than phone someone or speak face to face. I'm not going to say I haven't fallen into this bracket of people, because I do text people a lot, as it does have its obvious advantages. But I do also phone up my friends to check what time we're meeting or whats happening.


I find it really interesting that we are using technology more as a convenience object than a genuinely useful tool.
I think my next step is to find out myself what technology, if any, people consider themselves reliant on. This will start a basis for my development.

Preliminary Research

I have started looking at the history of technology and how it has developed.
From searching the web, I found some good timelines showing when important breakthroughs were made.

(Apologies for the terrible formatting. As I see it here in the posting window, these pictures are side by side -_-)
I haven't added the whole timeline here, because it is massive, and it's not necessary to bore you looking through it all. I have just added 3 random sections of it all (I have saved all of them to my computer for my own reference).
There are some interesting things on this timeline which I had not even thought of as technology. For example, right at the start, 2400BC the abacus was invented, the worlds fist calculator. Already several gags have popped in my head  from this. 1826, Photography Invented.1877, Microphone invented. 1946, Microwave invented. The list continues up to modern times. 2001, Digital radio, etc.


It is useful to know the dates when these breakthroughs happened, as I can look into what was happening at the time.
I now need to look into people's opinions on technology, as this will help me decide what sort of technology I want to research further.

Proposal accepted!

My proposal was accepted! Obviously I need to now get some groundwork done. We have been told not to think too much about the final outcome just yet, but to start some research on the subject.
I now thatI want my project to be humorous. As I have explained already, I don't want it to seem like I am insulting technology or making it out to be evil. Adding humour could be the perfect tool to creating something ironic or exaggerated.
The tips I have been given are to define an age group to aim my project at. This is crucial, as it will impact what my final outcome will be.
So, next steps are research, both primary and secondary. Lets do this!

Project Idea

I have always been interested in technology, and how we use it. We are, without a doubt, becoming more reliant on technology due to the incredible advancements we have made. It's difficult to find anyone aged from 14-50 without a mobile phone these days, and the majority of these people have smart phones.
I would like to base a project on this theme; How we have become reliant on technology.
I would need to be careful with how I approach this, as I do not want to make out that technology is a bad thing, or that it has made things worse. On the contrary, I believe the opposite. But I am interested in the fact it has changed the way we live, and in some cases there are negative points.
I need to write up my proposal on a template provided and show this to my tutor for approval before I get cracking on with this. Looking forward to it!

New Project: Self Directed

Firstly, like my research blog (http://paulmurraydesignresearch.blogspot.co.uk/), I am importing posts from a Tumblr blog because it has decided to crash on me. So a lot of posts which have been done over the course of a few weeks will be posted at once, so play along with the story of development!


The final project of this year is a self directed brief! We can pretty much do a project based on whatever we want. We can do something we are good at, or something completely new, as long as it relates to the marking criteria.
The marking criteria, in the 'critical awareness' section says 'Set appropriate but challenging tasks and identify cultural, technical, social or economic opportunities when writing your project brief'.
This means I couldn't just do a music video for my friends band because I would enjoy doing it (which, yes, would be awesome). I must base a project on something which has some value in one or more of these factors.
As long as my brief meets this criteria, and I get approval from my tutor. So, time to start thinking!

Screen in Use

Here is a demo of what the screen in use would look like:

Regular readers will know by now that I must apologise if this video looks a little low quality. Thats because it is, due to my incredibly rubbish internet speeds. The final is rendered in full HD.
It is insane how tedious it was to create this! I did it in Adobe After Effects and in total used 233 layers (containing one light). Each light flicker had to be animated separately to get a realistic view of what it would look like.

Seating Plan

Here is a recap of the seating plan. The dimmer lights would represent taps from people sitting in any of the white seats. Although they do not create the letters, they are equally as important as it creates the surrounding image, and sets the mood for the scene.
The brighter lights are representations of taps from those in the red seats (which obviously spells out the word). When these lights turn even brighter and linger for a while longer, this person has tapped their pad in sync with another person in a red seat of the same letter. This rewards the audience for tapping in sync, and makes the words seem clearer.


I really like how it would look on screen, and I know that it would look spectacular to create it in reality, and would be immense fun to play with. Shame about that whole budget thing....


Well, after completing this, all I need to do now is create a 10 slide pdf to present to the tutors to finish things off. But after sitting at this Mac for 7 and a half hours, I think I need to lay down in a dark room for a while. I'll do the pdf tomorrow...

Instruction Sheet

I have completed the Instruction Sheet which would be placed on the seats involved in this event, so that the audience are aware of the workings of the pads and how they can be involved.


Here it is below:

Instructional Sheet

I am pleased with how this looks and I am happy that the audience would be well informed of the pads and how to use them.
This sheet also gave me the chance to brush up on my Adobe Illustrator skills, its been a while!
Now to create the demo of the screen in use!

Panic Time!

On Friday, I went and showed my video so far to my tutors, and the response was awful. Really. In fact, I don't think a single positive comment was made about the video itself.   :(


So what came out of that meeting was to scrap this video and start on a new final. A few ideas were given, so I need to do some thinking about which direction to choose.
One suggestion was to use a simple sheet of instructions to be laid on the seats of the participating seats. A bit boring for an animation student I must admit, but it makes sense. So this is something I am leaning towards doing. But It isn't going to be a sheet of text, I don't do things that way. Its going to have to look good.
The one thing I wouldn't want to happen would be the audience to arrive at their seat to find a sheet of paper sat there and for them to think its a programme or advertisement and to pick it up and place it under their seat to be ignored. We have all done it before, so it can happen if the sheet doesn't attract attention.


The other good suggestion, which was actually part of my intentions for my video anyway, was to create a full working representation of the screen in operation. Similar to the letter 'A' video which I posted previously in my development, but with the whole letter set for Alight. However, the difference is I am going to add features which will reward the audience for participating in sync. For example, if two people sat next to each other tap at the same time, the light could linger for a little longer. They could even join into one bigger, longer flash. Or it could fade in to a brighter set of lights. There are many options which I could incorporate, all of which need to be thought about and then played around with.


Well, deadline is Friday, so I better get cracking on with it. Fingers crossed all will be well!

Final Video going along smoothly!

Just thought I'd post how things were going. I'd not posted in a good few days, didn't want you to think I was slacking!
I have been getting on with creating the instructional video for the pressure pads. So far, I have run into zero problems, so fingers crossed the rest will go smoothly!
I am roughly about half way through it so far, so I thought I'd post it to show what it's looking like.
Due to my insanely rubbish internet speeds, it is set to half quality, so some bits do look a bit pixelated. Thanks Sky!

I am happy with it so far. I like the way the simple movements and shapes make it look a bit like an old 50's instructional video. I wasn't going for that at first, but just stuck with it for laughs, and I quite like it!
I must also add that the last scene here isn't finished just yet!
Going to get cracking with the last few sections of it, so hopefully it will be finished early next week with a bit of time spare! Wish me luck!

Storyboard

I have created a storyboard in photoshop showing step by step how my instructional video would play out. Here it is:

I intend to fade the text based screens into one another.


Well, I suppose I should get started on the video then!