Generating Ideas

When looking on Designspiration.net for some inspiration into ideas for a story line for my animation I came across an image that really helped.

In this image labelled Mr. Helium a man with balloons as a head a child looks as if he has just acquired one from him and is very excited about it. My possible story idea comes from this image which really helped my previous struggle to generate an idea that would of been possible with my current skills in animation. 

Idea 1

The animation starts with a child holding his pocket money that he's worked so hard for, he sees a balloon stand and immediately wants one. He runs over with excitement and hands the seller his coin and picks a balloon. (I really want to focus on the up close facial expressions to give a sense of emotion). As he walks away smug with the balloon the balloon awakens and gives the impression it is now 'free' or 'alive'. I haven't thought any further into the story line as of yet however I'm planning to do more research before I get an overall finished idea.

Idea 2

My second idea is the classic 'lost and found' type of story in which someone loses a balloon and spends the entire animation trying to look for it and then eventually finds what he is looking for. This second idea definitely has some potential and could cleverly be incorporated into someone elses animation and make use of the red start/end transition that we have to use.

AF201 Animation - Research 2 - Aladdin

Aladdin has always been a childhood favourite of mine, upon watching it recently there is a great scene that I want to analyse.

Around 1/3 through the film when Aladdin enters the Cave of Wonders he comes across the magic carpet that we all know and love.

The Magic Carpet from Aladdin

Aside from the brilliant animation for a 1992 movie what really impressed me was the level of emotion the animators managed to get into an inanimate object, in this case a rug.

As you can see in the screenshot above Abu (the Monkey) suspects that he saw the rug move but assumes he was seeing things, as he does the Magic Carpet creeps up on him and goes to tap him with one tassel, the animator has done an incredible job at making it look like a limb of a human, the tassel on the end is the hand and the gentle curve is the arm joining to the torso which is the main part of the carpet.

Again the Magic Carpet tries to sneak up to Abu this time the animator has bent the Carpet in such a way that gives you the impression its crouched or sneaking trying to look as small as possible.

Abu turns round and the Magic Carpet assumes what would be a 'normal' pose for a unused carpet, rolled up and put into a corner which is very comical gives a great entertainment value to this scene, Abu looks on the floor and cant see anything, completely fooled.

This is the scene that captures it all into one for me, the Magic Carpet on its third and final attempt tries to sneak up behind Abu the Monkey, by this stage its clear to the audience but not Abu that he's being followed  which gives it a pantomime "hes behind you" humor style which has always appealed to children. Was also needs to be said is that the Magic Carpet has subtly been shown as trying to play, or annoy where as this could all change if just a few aspects were altered, for example the if the colour of the rug was red/black and had larger tassels it could been seen as a threat/enemy so the attention to detail from the animator is brilliant ensuring that the right message is conveyed all of the time as first impressions with a new character can make or break its appeal.

Looking at the actual position of the Carpet in this scene is so well done, it might seem obvious to make the tassels act like feet but wouldn't be obvious if you weren't already shown it. It has one leg back poised ready to move and the right foot forward with the tassel stretched out like someone trying to tiptoe and be as quiet as possible, meanwhile the upper body/carpet is held back like its taking a risk and its hands are handing in anticipation ready to move quickly at any moment, with the twisted body of the carpet this all creates a fantastic effect of a creeping Magic Carpet trying to get close to someone without them spotting them. 

I'd really like to achieve a similar effect/feel in my animation and whilst previously I only had animation of a human to compare and take inspiration from, this scene gives me a great creative way to animate something without any arms or legs or a face and give it incredibly obvious emotion/actions. As I go through my research I will constantly be looking back at this scene to try and take some inspiration from it and hopefully incorporate it into my short film.

AF201 Animation - Research 1 - Paperman

Here I'm going to be trying to get some research together so I can collect several ideas and work out one to use for my final piece. Research is a great way to get inspiration for topics / areas that you haven't had experience in before.

To start things off I'm going to be looking at a short movie created by Walt Disney in 2012 called 'Paperman' this animation-short is a romanic comedy featuring a man and a woman and a paper plane. 

I freaking love this short film, all of the signs and emotions are so subtle which really leaves a lot to the imagination. This has to be my favourite all time short film and re watching it just confirms that again.

The subtle style of connotations is definitely an approach I'm going to be looking at, it shows skills on behalf of the animator and also confidence in his expressions on each character.

When looking at the animation it isn't anything over complicated, its relatively simple human movements, its very well done but nothing that I couldn't learn given a period of time. I feel the fact that the animation is black and white apart from the woman's lipstick really creates a powerful focus onto the love letter and its importance, it separates it from the other black and white documents that he is throwing out the window and makes it a part of the story.

After watching it multiple times I realised how many emotions the short film makes you feel within such a short space of time.

The film starts with the man standing still, you can hear the trains so you guess he's waiting at a train station, suddenly as you've finished analysing his emotions a train shoots past, startling both the man and the audience, he sees a girl and the wind blows one of his work sheets into her face, where he lipstick rubs off onto the piece of paper, she giggles and he looks and laughs, when he looks up she is off moving on another train. This is the 'taken away from him/her/it' stage, something sad happens. Then he goes to work and realises how dull his life is now he's had a taste of love, this is 'harsh reality'. As he's working he sees her in a building opposite by a window waiting patiently for what looks like a job interview, he's so surprised to see her and the music changes, he then thinks of anything to try and get her attention, as a viewer you don't ask why he's trying to get her attention as its obvious its a love story.

This is the effect I would like to achieve having such powerful emotions and actions.

In the screenshot above you can see the expression on his face, the animator has perfectly captured a surprised and anxious look, this is the moment he spots the woman in the building opposite his. When analysing the face closer his mouth is posed open with anticipation his eyes are wide with surprise and eye brows raised, this and the lowered jaw and the only things that have changed but give an you an immediate idea of what he's thinking. Certain traits won't be reproducible when working with a balloon, however the scene and other elements / possible people in the movie clip could be manipulated in such a way.

In this second screenshot you can see the moment they meet the expressions and eyes are telling a story, that they like to look of each other if nothing else, then later on you can see his shocked/realisation look that he is in love with this woman just as she leaves. The lipstick is the only coloured object in the entire film, as seen in both screenshots above.

The music also plays a massive part in the success of this short film, the classical simple and suitable song has been used as a guideline for the editing giving a nice effect.

In this scene the music has a beat every time each paper aeroplane hits the wall which is something I'd like to incorporate into my own short film, having the film and the music work in synergy can lead to impressive results.

Overall I think Paperman is the best short film I've seen, the first time I saw it as soon as I got home I watched it over and over again it is perfectly made from the animation to the editing 

New Year, New Brief

Its our first day back at Uni and our first project has been set.

The first project is to create a 25 second animation featuring a Red Balloon starting and ending with a red screen, this is to allow each students clips to be seamlessly strung together creating a story fading in between clips every 25 seconds.

My initial feelings are good for this project, it's been a while since I've done any animation my most recent being a DVD Menu for ALevel which I really enjoyed and actually used some stop motion in that for the introduction featuring a cardboard box being with string tied around it unravelling on its own.

My first step will be to look at existing animations of all types, CGI, stop motion and any others that I am not familiar with and then also the methods in order to recreate that. The first design method that came to mind was stop motion, having used it before in my previous project which turned out really well I feel that I could achieve a nice organic hand made feel to this animation which might become a reoccurring pattern in my work, trying to think outside the box and use unconventional methods of achieving a finished piece.

I also want to get to grips with Adobe After Effects as we will be using it over the next two years for additional projects and the skills will be useful, as I don't know much about it if I work out how to use it well I may find that I can think of a more suitable way to execute this project other than the way I know, being stop motion.

All in all I'm really looking forward to undertaking some in depth research and trying to identify my final idea.

WC3 Validator & Accessibility Test

WC3 Validator Test


Finally as I finished the website it was time to run it through the WC3 Validator to ensure that all my of elements and code is working correctly and as intended, here are the results:

I ran the test first time and only had two errors, these errors are not necessarily errors as they are anchors that go to a specific div, the validator sees this as two tags that shouldn't be inside each other however this is necessary when I am linking from a scroll hint to further down the page. I decided to not change the code to have an 'error' free result as it was needed to have the required effect on my website.



Accessibility Test
This test is evidence that I have provided the required changes for people with other additional needs and people on other platforms.

In terms of universal accessibility on my website I have every area covered, I have none of the following: same background/text colours, no text that is actually an image.

And I made sure I have the following:

High contrast between text and background
Example:

Alt and title tags on all 'img srcs' images
Example:

And there is no use of tables anywhere in the website.

Website Footer (and Roll-overs)

As most websites traditionally have a footer is a important part of what makes a website a fluid navigational experience. Initially my nav bar was fixed to the top of the page, even when you scrolled it stay at the top, making it an easy way to get around without having to go to the top, however I felt it took away from the rest of the design and as I haven't styled it much yet it just didn't fit. So I then thought how will I tackle this problem of having to scroll to the top when you want to change page, and that got me thinking, footers are usually used for social media icons, location of that company / design agency but that type of information isn't applicable here so I came up with solution of making the footer a very simple 'to the top' anchor and it looks great, it matches the rest of my layout and design and here's how I did it!

Anchors were used to create a link from the bottom of the page, back to the top, so I put an anchors destination <a id=""totop"> </a> immediately after the body tag, this would ensure that it was at the very top of the page and would't go halfway up. I then created a div, and gave it a class of footer, this was a grey box with 100% width just to create the space where it will go, I then put the anchor inside of the div, applied the smooth scroll class which I used for the scroll hint anchor where instead of jumping to the anchor destination it slowly scrolls like you would with your mouse. and I then used an image I found online of an arrow and put that inside the anchor.

Here's the HTML:

This is the HTML very simply and I did some in-tag styling for the image as I felt it unnecessary to type out the CSS.

Now for the CSS, I wanted the entire footer to be a link to the top, not just the small arrow image so for this I made the anchor position relative,100% height and display:block this gave it 100% width. this then made the entire grey boxed div the anchor making it more user friendly on computers, but also mobiles.
Here is the CSS Code for the Footer Div, and the anchor.

So my footer was there, and was working but now I had to position the arrow image in the center of the div. So I gave it a padding-top and bottom and it inherited the position of the anchor is was within with was centered, putting it straight in the middle. Currently it was now just an light grey arrow inside a dark grey div and didn't really give me the impression that it was a to the top, so I decided the give it a border of 2px, and a border radius of 50px; giving it a circle around the arrow, I then added a pseudo :hover style that changed the border colour from grey, to green (the same color as my nav roll-over). 

Here's the CSS: 

The roll-over was good, but not good enough the sharp snap from grey to green needed to match the rest of the webpage so I did a quick google search and found a ease-in-out transition and I set the transition time to 500ms, now I had the rollover I wanted but the transition only occured when I hovered onto it, when I took my cursor off the anchor it snapped back to grey, then after some research I discovered that you need to apply the transition to the image aswell, not just the pseudo :hover! 

Before :hover

After :hover

Content Arrangement - Main Section

In this blog post I'm going to be taking your through my methods on how I got my main content area to look how it does.

In the screenshot above you can see how I've displayed my content, a simple 2 x 2 Grid, but to get to this point, it took a lot of work.

Initially I tried numerous methods of displaying my content, huge 100% elements that take up the entire browser but I felt this was too over powering and didn't match the layout of my work thus far, so I looked online for good ways to display content and I tried to get some inspiration, I came across this: FlexBox - This is a brilliant tutorial and so in-depth, it goes through everything that the flex box is capable of. It then has the code you can copy which has the place holders which look like this:

These are the place holders and they stack when resized to this:

And then stacks down into 2 x 3 which is what I wanted, so from the code below I just removed the li class 5 and 6 as I only needed four for each of my topics, mammals, amphibians and reptiles, birds and trees.

Before

After

Here you can see my HTML elaborated from the previous one, where I've added my own content and titles, I've also applied my own div classes to each of the topics, so I could then target the paragraph within without influencing every paragraph in the website. I also used it to wrap the size of the text to a maximum of the same width as the images I used. You will also notice at the top of the screenshot I put the flex container, inside another container as when the screen was big enough my content was going 3 images along and 1 below and it just wasn't consistent. So by putting it another container it restricted the flex container keeping a constant 2x2 until you went down to mobile size where it would become 4x1.

Here's my CSS for the flex boxes:

At the top of the screenshot you can see the container of the flex that I added, I gave it a width of 100% and a simple white background colour, I then added the position of relative so it could be influenced by the z-index (so scroll hint didn't show through)

Next is the flex container, this CSS was part of the code from the website I linked earlier, I simply changed the background colour and added a max-width. I did this so the elements would stack 2 on 2.

Just below that you can see the flex item, now I only included the no.1 as they are all the same with just different background urls. For this I changed the height to 200px and made the margin top 80px (from 10px) to increase the distance between the grey content intro, and the edge of the containerofflex div.

I then added a background URL code which changed the background to an image of choice from the default red one. After I'd done this I felt it needed a bit of 'lifting' so I found this tutorial on how to give a box-shadow that was subtle. -webkit-box-shadow: 0 1px 2px rgba (142,110,132,0.3); is that line of code for that, it basically says give the left and right sides of the container a 1px grey, 30% transparent border and the bottom a 2px one. This is the result.

Like I said, its only a subtle difference but it give the surrounding of my image a slight lift and makes it look that little bit more professional.

The final piece of code that I used for the CSS3 flex boxes is a pseudo :hover command, this essentially is manual for the browser to read that when 'this' happens 'this' also happens, in this case, when you :hover over flex-item1 replace the background: url with this one, in my case the same image with a simple vignette over the top, giving the audience/user some feedback that they have selected this, and it does lead somewhere.

Here is the before and after result:

Before (:hover)

After (:hover)

As you can see it adds a very subtle roll-over effect that is nice and simple and looks professional!

In terms of the process I went through to achieve the looks of the text, it was the same as I explained in my previous blog post.