The Pros and cons of my project
(and what I might change for a future project)

Pros

1. I feel happy with the project overall, particularly the look of the interactive game, and the website. I feel that creatively I have acheived the maximum potential that I could have, after a long period of research and evaluating my own work and style. I feel that compared to the types of styles that I aspire to that other designers have created, my work is fairly comparable.

2. I managed to find and apply actionscript in Flash without much help from my tutors (other than some script updating and tidying) and managed to understand most of the script and how it applied to the objects that it was controlling. In the past I have found that actionscript is very difficult for me to understand (in terms of what it actually does to the objects) so I feel that I have acheived some level of understanding which I'm very glad about.

3. I also acheived a higher level of understanding in Flash and feel much more comfortable with the program now than I did in previous modules (trial and error and constant use generally helps me learn programs).

4. I enjoyed the blog format of documenting my research and progress, rather than an essay at the end of the project. I found that I could write about how I felt at the time, and if I found something inspirational, it could be documented straight away with my immediate reactions and thoughts.

Cons

1. Unfortunately, my initial ideas didn't work out, because I was thinking too ambitiously in the time we had to finish the project. I admired several sites (such as the Tin Man site early on) that had astonishing artwork, but wasn't achievable without months and months of work creating the images. I wanted to use photos to create the work in my project, but I'm not a photographer myself, and so I would have been using other people's images, which for me was not very creative, considering my interests are design and illustration. It wouldn't have felt like MY project if I'd been using other people's photos to create it. I also found it hard to find the exact images that I wanted, because they weren't photos that I'd taken myself specifically for my project.

2. Because of my limited knowledge of actionscript, the functionality in the game is quite minimal. In previous projects I've asked one of my tutors to help me with actionscript, so that I was mainly just designing the project, and the functionality was left to someone who was much better at it than me! But for this module, the criteria asked us to work more independently, so I decided that most of the coding would be down to me figuring it out for myself. For that reason it's not as complex as I would like, but I'm glad that it works, even if it is simple.

Changes for future projects

If I had more time I would definitely find some more complex functions for the game so that there was more for the user to do. I would also expand the game so that beyond the top of the mountain there were clouds and perhaps other interactive elements, like more animals. The background could be expanded from all directions to create a longer and more interesting game.

I would also look at more styles to work with, so that I can try out different animation styles that I like. During my research I found so many styles that I liked, so it was difficult to narrow it down to just one. I'd love to experiment with all of them in future projects.

Saturday (13/09/08)

How I attempted to meet the criteria for the module.

By the end of the module you will be able:

1. to have demonstrated an ability to work independently and critically in pursuit of their stated aims as contained in the Study Agreement.

I have worked almost entirely independently on this project, with input from my tutors for inspiration in the beginning of the project. I found lots of inspirational websites, animations and drawing styles to incorporate in to my own style and ideas. I initially started out with an idea of using photographs for my animation, but found that I need to use the project to discover my own style more, which was more vector animations and use of colour. I looked at my ideas critically and discovered a new way of going about my project.


2. to have developed and sustained a high level of professional practice.


I got all my inspiration from professional websites and artists, and attempted to meet their work standards as much as possibly to give my work a higher standard.
I recorded (in this blog) all of the research and practical steps of my work, while constantly comparing my work in progress to other professional sites.
I also chose to display my interactive game in a website format to present it in a more professional way that was accessible to more users.


3. to exercise appropriate judgment in choosing the most suitable technical/stylistic devices to achieve the desire effect.


I discovered while doing this project that my style was more of a vector/cut out style rather than a photo manipulation style that I struggled with at the beginning of the project. I then went looking for other animators, illustrators and graphic designers who used similar styles, and incorporated their ideas, colours, and concepts in to my own work. I used Flash for my work because it was the most up to date and useful software for my work. I created my website using Dreamweaver HTML and CSS to create the accompanying website.


4. to have thoroughly demonstrated their understanding of the relationship of theory and practice in their work.


As part of my research I looked in to design and animation trends, and how the work of others with a similar style to mine was impacting animation and design as a whole. I recognised the trends and popular ideas of others and incorporated them in to my own work so that the theory of design and animation trends was strongly suggested in my work.

Saturday (13/09/08)

This is my CSS code for the website:


body {
font-family:"cambria",georgia, verdana, arial, sans-serif;
font-size:12pt;
color:#fff;
text-align:center;
background:#000;
margin:0px;
}

a {
color:#fff;
text-decoration:underline;
}

a:hover {
color:#fff;
text-decoration:none;
}

#splash {
font-size:40px;
margin-top:20px;
}

#maincontent {
width:900px;
height:1000px;
margin:0 auto;
background-color:#2a66a8;
background-image:url(images/mainbackground.jpg);
background-repeat:no-repeat;
}

#maincontentAlt {
width:900px;
height:auto;
margin:0 auto;
background-color:#2a66a8;
}

#title {
width:691px;
height:103px;
padding:20px 0 0 110px;
}

#pageheaders {
text-align:left;
margin:35px 20px 0 40px;
}

#leaf1 a {
display:block;
width:159px;
height:45px;
background:url(images/leaf1.png) no-repeat;
margin:-80px 0 0 150px;
padding-top:85px;
}

#leaf1 a:hover {
display:block;
width:159px;
height:45px;
background:url(images/leaf1_hover.png) no-repeat;
margin:-80px 0 0 150px;
padding-top:85px;
}

#leaf2 a {
display:block;
width:80px;
height:37px;
background:url(images/leaf2.png) no-repeat;
padding-top:50px;
margin:-100px 0 0 370px;
}

#leaf2 a:hover {
display:block;
width:80px;
height:37px;
background:url(images/leaf2_hover.png) no-repeat;
padding-top:50px;
margin:-100px 0 0 370px;
}

#leaf3 a {
display:block;
width:111px;
height:37px;
background:url(images/leaf3.png) no-repeat;
padding-top:50px;
margin:60px 0 0 330px;
}

#leaf3 a:hover {
display:block;
width:111px;
height:37px;
background:url(images/leaf3_hover.png) no-repeat;
padding-top:50px;
margin:60px 0 0 330px;
}

#leaf4 a {
display:block;
width:154px;
height:44px;
background:url(images/leaf4.png) no-repeat;
padding-top:100px;
margin:0px 0 0 500px;
}

#leaf4 a:hover {
display:block;
width:154px;
height:44px;
background:url(images/leaf4_hover.png) no-repeat;
padding-top:100px;
margin:0px 0 0 500px;
}

.lftText {
text-align:left;
float:left;
width:400px;
}

.wallpaper {
text-align:center;
width:400px;
margin:20px 0 0 40px;
float:left;
}

.characterdivs {
width:370px;
margin:20px 40px 0 40px;
float:left;
}

.spacing {
text-align:left;
margin:20px 20px 0 40px;
}

.homelink a {
display:block;
width:80px;
height:37px;
background:url(images/leaf2.png) no-repeat;
padding-top:45px;
margin:40px 0 0 400px;
}

.homelink a:hover {
display:block;
width:80px;
height:37px;
background:url(images/leaf2_hover.png) no-repeat;
padding-top:45px;
margin:40px 0 0 400px;
}

Wednesday (10/09/08)

The final design that I decided on was the second one, because I really liked it, and it seemed like the most creative and interesting design. I wanted the website to be just as interesting as the game, so that it was a creative element in itself.



I also added some more background elements, because once it was in HTML it looked a bit boring without them. I also solved the different resolutions problem by putting the layout into a central div of a fixed width so that it filled a 1024x768 resolution screen, with a bit of black background at the sides. There would just be more black background at the sides if the resolution was bigger. The links at the bottom lead to other pages, except for the blog link which leads right here! The links also have a mouseover effect so that they turn turquoise when you hover over them for extra interest!

The flash game appears in the blue box.

Downloads



The downloads page gives you a link to download the CSS of the website, download a PDF version of this blog, and also download some wallpapers.

I decided to make the title pink to give a bit of a variety on the website. There is also a similar leaf link back to the home page which has the mouse over effect similar to the leaves on the main page.

Info



This is the info page. I kept it quite simple, with just the basic information behind the project, who I am, etc.

Characters




This page was meant as a little explanation of the characters and the part they play in the game. This page was mainly just for fun so that the user gets some idea of what the story is.

(Saturday 30/08/08)

Design 1

I like this design, and it would be simple to code. The main focus is the game, and then the rest of the information will be underneath. I'll have a link to this blog, information about the project (like a general overview, etc) and some downloadables (like the CSS, wallpapers, etc).


I love this design! I wasn't sure how the idea would turn out in practice, but I think it looks really nice and very creative. There only a couple of worries though. Firstly, how to code it in CSS so that it will work on varying monitor resolutions (my monitor at home is quite wide, but other people have smaller monitors and I don't want side scrolling) and secondly when the game is playing, will the screen look too cluttered? At the moment it looks fine with just the word 'play' in the screen box, but with the game playing what will it look like? I'll have to try that out.


I also really like this design. It's interesting, but easier to code than the previous one, although perhaps not as creative. Again I'm worried about there being a cluttered look. The background will look neater than in this example, I'll make it all fit to the correct width instead of the mountain cutting off.

(Saturday 30/08/08)

I've started the part of the project that will be the most fun for me... the website! I love web design, and I'm really excited about making a site for this project because I've been really inspired by so many things and from so many sources, and I feel like I can be really creative with this project! I did some quick sketches of ideas for the site.


For this design I wanted to have the main area of the site as the game, and then underneath have the information about the project, a link to this blog, downloadables, etc. I like the abominable snow man, so I thought it would be nice to have him featured on the site, because he's quite a fun and recognisable character.


This design is much more artistic than the first one, with the tree and mountains as part of the background, and the abominable snow man popping up from behind the application. I really like this design as it's very creative, although I'm not sure about loading time if it's got large images in the background, even if they're CSS driven. I do like this design though, and it's definitely eye catching.


This design is quite similar to the first one, except I've repositioned the abominable snow man, and given the website a decorative border. I like this one too, but again it's not as creative as the second one, but perhaps less image intensive.

I quite like all of my designs, and I've found with web design that the only way to know if something will work or look right is to make it! I will make a Photoshop design mock-up of each of these designs, and see which one works best in colour. I think they will all work fine in code, so I'm not too worried about that just yet!

(Saturday 30/08/08)

I managed to get all of the background in to Flash, and had to import it a few times because figuring out the best way for the background to be (either layered individual objects or one whole image) was difficult to figure out, so a lot of it was trial and error. In the end I imported them as individual elements, but also had to import them again after that because the file size was too large, so they all needed to be png images. I originally drew the background in Illustrator, but because the file is large anyway (with a scrolling background) it ended up being a very large file size.

I'm actually still having problems with the file size, and it seems difficult to solve, because if I make the size of the actual images any smaller, it will be difficult to see what's going on in the game. I also want to show the details of the characters, etc, and making them smaller and smaller to reduce the file size will ruin the quality. But I am still trying to figure out a good way, so it's a work in progress problem!

Here are some screen shots of the game so far. There are still a few tweaks to add.







Here are a list of tweaks for the game to finish it off:

• Rabbits just under river and plants - reorder layers


• Not much activity on right hand side after rabbits


• Add more pigeons at the top of the mountain


• Pigeon goes under abominable snow man - reorder layers


• More animation: waterfall, river, more rocks


• Hide beginning of path (90 degree square) with plants

(Saturday 16/08/08)

I've designed the background based on the inspiration I got from lots of different sources (see below posts) and I'm quite happy with it so far! Here is a preview:



I put it in to Flash and I've encountered some problems which need addressing. Here's a list so I can cross them off as I sort them out:

• When the little pigeon moves around, it's actually the background that's moving, not the pigeon. But when the pigeon goes over to the left or right, the background moves, and so the background scrolls too far and all you see is the back of the Flash document (white). I need to stop the background scrolling too far by using barriers that the pigeon can't cross, or extend the background in some way.

• I'd like the pigeon to move behind certain objects, like the rocks at the sides are supposed to be in foreground, not something that the pigeon can walk over.

(Tuesday 12/08/08)

Today I worked on some functionality, which is unusual for me because 1. I hate functionality and coding (except for web design coding) and 2. I hate Actionscript! But it had to be done at some point, and I realised I couldn't really design the background properly until I knew how it was going to work functionally. So I trawled the internet and found lots of different ways of doing the same thing. The functions that I wanted were:

• A character that could be moved around with the arrow keys (the pigeon).


• A background that would scroll as the character was moved around.


• When the character hits certain background elements it stops.

This is the code I finally found and edited. The original code made the object fly around like a mad thing, so I changed some of the first numbers to stop it having so much 'power' and 'gravity'.


onClipEvent (load) {
yspeed = 0;
xspeed = 0;
wind = 0.00;
power = 0.10;
gravity = 0.00;
upconstant = 0.01;
friction = 0.90;
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.LEFT)) {
xspeed = xspeed-power;
}
if (Key.isDown(Key.RIGHT)) {
xspeed = xspeed+power;
}
if (Key.isDown(Key.UP)) {
yspeed = yspeed-power;
}
if (Key.isDown(Key.DOWN)) {
yspeed = yspeed+power;
}
xspeed = (xspeed+wind)*friction;
yspeed = yspeed+gravity;
_root.wall._y -=yspeed;
_root.wall._x -=xspeed;

if (_root.wall.hitTest(_x, _y, true)) {
xspeed = 0;
yspeed = 0;
}

}


I'm very sure that I'll find later on down the line that this code is useless and doesn't work for my idea at all, but it seems to work okay for now. I'm not sure how you define how big the flash window is at the moment, but I'll figure that out later (I might have accidently deleted it while I was editing the code).

Next: The actual background!

(Monday 11/08/08)

Some more background inspiration. I specifically went looking for 'cut out paper' images this time, to see what's achievable for my project. I found the paintings of Hokusai very inspiring, and I used some of the ideas from his paintings for the storyboard, but the style of the storyboard is not how I want the original to look (obviously) so I went searching for more inspiration!



I love how much detail the artists got into some of these images, even though they're only silhouettes. In the third image they've used similar blue colours to my background. I also found these images interesting because of the different styles of trees that were used. I'm going to need trees in my background, so I might try different styles using inspiration from these images.

(Monday 11/08/08)

Here are my storyboards, finally! I did one version of just the background design, and another with the creatures to show where they will all be placed. Obviously the colours of the ACTUAL background will be a lot different to this, but this is just to show!

(Sunday 10/8/08)

I slightly revamped some of the characters (with some input from my friend Cathy!) and did a couple more, including the main character, the pigeons! These are not the sizes they will be in the finished application, they will all be sized appropriately according to the animal that they are, but this is just for building the movieclips.











I gave some of the characters patterns on their bodies, to make them more interesting, which was also inspired by the bull animation that I found on Youtube:


I also gave the characters a drop shadow, to make them look more cut out and less flat.

The other issue to consider is how to make them stand out from the background. The characters themselves are quite simplistic in terms of styling, so the background can't be too detailed, or too the same style, otherwise there will be nothing to differentiate the background from the characters. I think staying with the limited palette of the background at the moment (eg. the blue that is the background, but with just lighter shades for the background objects (eg. mountain side) and colour for the background features (eg. plants can be similar colours to the characters). I will look at more backgrounds done by other artists for inspiration, and use the work that I already looked at by Hokusai, which is very simple in colouring like the look that I want to acheive.

Next... more inspirational sites for storyboard, plants and background!

(Sunday 27/7/08)

Yes character time again, but this time with some designs. From all the inspiration I found for characters, I narrowed it down to animals that possibly live up mountains, such as mountain goats and abominable snow men! Here are the inspirations and the designs that came out of them.


Inpiration



The rather strange muscley-looking mountain goat, possibly the weirdest goat ever to exist on planet Earth, and yet it is a real thing! Even better for me, I get to use the mountain goat to design an interesting mountain goat character.



Design

Basically a simplified version of the real thing. I tried to stay pretty accurate, besides the turquoise wool coat.


Inpiration




These lovely abominable snow men are what I based my design on.



Design

My abominable snow man will live at the top of the mountain, and he likes to dance around and make lots of noise.


Inpiration


This wasn't in my previous blog entry, but I decided a cougar was a great animal to have living up a mountain. They're such lovely animals too!



Design

My cougar is black, so maybe it's more of a panther now?

Characters coming up next: Birds, rabbits (to live at the bottom of the mountain) and plants and trees, which will all move too, of course!

(Thursday 17/7/08)

These are the beautiful paintings by the artist Hokusai. My tutor mentioned these paintings to me when we were talking about the idea of having a path or river so that the game could be long, similar to the Orange site, where the user can navigate by scrolling up towards interactive characters. I mentioned the idea of a mountain, and she thought of these paintings, which are part of a series Hokusai did called 36 views of Mount Fuji (you can view the Wikipedia article about his work here.)

This work is very inspiring for my project because the scenery is very intricate, and yet he has used very simple colours. Also the consistent topic of the paintings being the subject of my project means that I can get a lot of inspiration from his work. I like the idea of, for example, having the top of my mountain snowey, so that the pigeons have to travel through some snow, which allows the scenery to change over time, and perhaps add new characters (like the abominable snow man), and have an end to the game. I also like the limited colours he's used, which are similar to my ideas about colours.

Although these paintings are over a century old, I have noticed lately with graphic design and illustration that old styles are coming back into fashion, and that apparently 'modern' styles look more and more outdated. A 'retro' feeling to a lot of work is returned, for example, the use of textures to make a piece feel old or worn, the use of old styles of illustration, like 1940's and 50's style is now being replicated by new designers. My work also follows this trend in some ways, and I would like to incorporate it in to this project too. I like the idea of having the background looking old and worn, using textures, and then having the characters in the foreground in the vector style, standing out from the background. I will definitely test this out once I have designed some backgrounds!

I particularly like the first Hokusai image, because of the use of the very rich navy blue, with the faint yellowy beige colour, it gives the painting a really timeless effect which I like. I also see this style in one of my style experiments, with the dark blue background, and the pink in the foreground with turquoise. I think it's really effective.

I don't think I will use lines like Hokusai has, because I'd like to keep mine as the vector style throughout, but I will definitely try and use textures to create his old style, as if it's on a canvas, and use his idea of snowy top mountains for the cave of the abominable snow man!

(Thursday 17/7/08)

Character inspiration ahoy!


(I found most of these images on Google, but the hummingbird is by Jules1983, the first, third, sixth and seventh are by Kasey-05, the fourth owl image is by endlessway, and the fifth image is by kilky18, all on deviantart.com).

The next stage is now to think of what sort of characters to use. I really like the pigeon character I created, even though it was just to test out the styles, he seems to really work for the whole project! So I'll keep him as the main character, but there will be lots of him (like the pigeon and his pigeon friends who all look the same). But I also need some other characters. I still like the idea of woodland animals, but I'd like to use a surreal style, like the pigeon, so that they still look like animals in an environment, but simplified and cartoon style. So I went looking for animal inspiration, and I tried search keywords like 'vector animal' because vector is the style I will be using, and 'vector monster' to try and get some more surreal characters as examples.

Because I'm interested in using an environment like a mountain river, I need to think about what sort of characters might be living in that environment. Of course, pigeons don't live on mountains, but perhaps the rest of the characters should be more mountain characters? Possibly mountain goats, or an abnomiable snow man? Here are some ideas for those:




I do need more characters than three though. I could also have some of the plants as characters, and maybe attempt to use plants that really do grow up in mountains? At least then there would be something authentic about my designs, even if they end up being very stylised and a little bit surreal!

I had a look for some mountain plants, and here are some that I found:




I found these on the BBC Science and Nature website, and each plant has a little description about it and how it grows and 'behaves'.

Alpine clubmoss:
"This moss has four-sided, branching stems. Some of the stems produce distinctive little yellow-green cones."
(I could give this moss glasses, like a four eyes moss, to represent it's four stems. And a little face of course!)

Map lichen:
"This lichen forms bright yellow-green crusts with thin black margins giving it its map-like appearance. It has dark brown fruits on its surface which look like small black spots."
(I could give this lichen lots of little faces, as if it's made up of lots of miniture creatures, to turn it into a character.)

Purple saxifrage:
"A perennial plant forming low mats or compact cushions with small oval green or grey leaves. The thick leaves are 2-6mm long. The plant has pink to deep purple flowers which are almost stalkless. Stems are long and trailing and the plant grows 20-60mm high."
(This could be a tallish plant, with little blushing pink lady faces.)

Mossy saxifrage:
"This plant can grow in both long and trailing forms and as creeping mats. The lower leafy shoots grow in a tangled mass while the stems carrying the small flowers have few leaves. The pure white flowers grow singly or with up to five on a stalk and have five petals measuring 10-15mm across. Flower buds are often pink at the tip."
(This plant is very similar to the last one, with different coloured flowers, so it could be sister flowers with the purple one, the characters could always be placed together and have similar faces.)

(Tuesday 15/7/08)

I decided to design some concept art for the pigeon design that I liked best. I needed to test out each of the designs some more to decide which I liked best, and which one might work for my project.



Here is another piece of concept art using the first style that interested me.



This one was a path, which could also work in the same way. I decided I didn't like the trees though, but I do like the pigeon enough to make him a permanent character!



Here I'm trying out one of the different styles. I really like these colours too, so I'm not sure which ones will work better.

I liked the idea of a continuous journey through the animation, like the Orange website, so I thought maybe a world that you scroll through and follow along to discover different characters might be interesting. I thought of the idea of a river, and how different characters could be discovered along the river. I also got inspiration for this idea from Ecodazoo (http://ecodazoo.com/) which is an interesting project where you can scroll up and down a platform to meet each of the characters. I liked the way it went up and down, and was controlled by the user.


(You can click on each of the characters to lean more about them, and the engine takes you up and down to view each character on their own 'platform').

I like the idea of doing this for my project, perhaps using the concept of a mountain or river to travel along or up. I could even use both ideas, perhaps a surreal world where water runs up hill? Then lots of different creatures and plants would be objects that you could click on, and interactive with, while going on the journey up the river.

Next I will try out some different styles, and make some more character ideas to go in the game.

(Tuesday 15/7/08)

After a meeting with my tutor, we both decided that my ideas need to go in a different direction. I realised that I can't use other people's photos for the entire project, because I'm not able to manipulate them in the way I want to. It will also not really be my best work, for dissertation standard, because of the restraints of using other people's images. Also, the technical side of what I'm trying to do is too complicated, and will ruin the creative side of the project.

Looking for new inspiration
I decided to go back to some of the sites I looked at before, and look at the styles they have used. I always particularly liked the Orange Unlimited Wepage style, with the limited colours and simplistic vector style, which is very much like my current work anyway, and so would be much easier for me to create. It would also go along more with my style of work, and so would create a consistent style of vector work and animation for my portfolio.


(The Orange Unlimited Webpage style, and some of my current work. Similar block colours and limited colour range.)

Now I needed to find some more inspiration for the exact style and colours that I would use. I also needed to figure out the technical side of the new ideas. I thought that something more along the lines of the Orange website would be good, rather than trying to create a 3D environment, mainly because of the loading time problems I experienced with some of the other Flash engines, like the Zune engine. Although, Zune is very good in terms of style inspiration!

I went searching for my websites and images for inspiration.


Orange again, of course. They've used the brand's colours very well on this site, with the black silhouette style of the creatures, but they've still got lots of colour by adding the rainbow.


The Zune site is still excellent inspiration. They've used vector shapes with block colours, and lots of bright colours standing out on a white background. The overall look is very colourful and interesting.


This is a really lovely website, called The Adventures of Hearty Beefy Bowl. The creator is from Singapore. The style of it is really friendly, but modern, and again they've used block colours and vector style.


The characters are also really nice, I like the style of the little animals they've used. It's all really inspiring!


This site, Dubois meets Fugger, also has a great style, similar to the other sites. They've used a very limited amount of colours too, like the Orange site, and everything is very simple, but also very 50's retro style, which is something I like, and seems to be a trend with animation at the moment too. It's very simplistic, but looks incredibly impressive. The characters are also really simple and sweet.


I also looked at some general pictures (not websites) to think about style. This image is a style of animation that has a paper cut out style. They've also used the silhouette style of the Orange website, with the foreground just black block images, and the background being very limited colours. I like the textured feel to this one too, which is something that the other styles don't have. It makes it look old and interesting.


I LOVE this image, mainly because of the colours, but also the style again. They've used some lineart for some of it, but the same style could easily be created with just block colours. I especially like the little surreal creatures at the bottom in the audience, they're fantastic! Definitely using this image as inspiration!


This image is actually from the Disney film Ratatouille (impossible to spell!) as some sort of concept art, I'm not sure exactly what. But it's very similar in style to the Dubois meets Fugger website, with white on limited colours, and vector style block colours. I really like it, especially the character designs. Again it has a 50's feel to it.


I also looked at some 'cut-out' animation styles, which can be created digitally, but look as if the characters and backgrounds are made out of cut-out pieces of paper. I really like this style, because it looks like old, traditional style animation, but can be easily recreated in Photoshop. It's also quite simplistic and sweet, and also has the 40's/50's retro feel to it too, which is currently quite popular.


This is a screen grab from an animation that I found on Youtube, which was very interesting. It's styled in the way of the old Indian and Oriental style animations, but the animation is done in 3D and looks amazing. Here is the video, the music and movement are beautiful:
Click for Video
I really love the colours, and how they've made it look old style, but using digital animation. Retro styles of animation are definitely making a come back!


This image reminded me of my original moodboard, because of the kingfisher. I really like this style too, it looks old and grainy, but still incredibly modern. The elements of the picture also look almost cut out, and I like the idea of using some original artwork, and some cut out photo elements, because it gives the picture variety.

Trying it out
I decided to have a go at some of these styles, after becoming very inspired! I also found that a lot of these styles had a lot in common, so it will hopefully be easy to encorporate them all in to my own style and take inspiration from lots of different sources.



I designed a simple pigeon character, and then tested out lots of styles on the character and background. I tried both the vector/simple block colours style, and the paper cut out styles. I really like all of them! I'm still most inspired by the colours from the puppet picture, which I used for the bottom left pigeon. The fuscia pink on blue, with turquoise and white just seems to work really well as a style.

(Tuesday 8/7/08)

After visiting a ton of different sites and looking all over the internet for ideas, I finally settled on a natural world that would be based around the technology of the Tin Man website. Unfortunately I didn't have months or even years to make beautiful artwork to turn into a slick Flash engine with amazing navigation, but I could at least attempt to use the idea.



I came up with this moodboard, based on all the ideas I wanted to use. I wanted to have a very natural feel to the project, with plants and animals, but also perhaps a surreal idea behind some of the aspects of the project, like maybe characters or plants and animals that weren't quite real. I also liked the idea of creating a 3D effect, without using 3D animation, by creating objects that were in and out of focus in the foreground and background (like the petals on the moodboard).

I realised that the realism could only be created using photographs, because the amazing graphics on the Tin Man site couldn't be made in the short time that I had. So I started collecting stock photographs, mainly from deviantart.com, because there were lots of photographers on that site that allowed their work to be used with written credit, which was fine. I knew that stock images could be bought, but this project doesn't include a budget! I also needed to make sure I only collected high resolution stock images, so that the zooming in and out idea would work, without ruining the image quality.

I gathered several stock images, but I soon realised the main problem would be blending them together, and how to transition from one to another. On the Tin Man site they used very clever ways of transitioning, like going through the eye of the tornado, and looking through a tunnel, etc. The problem was, I was using stock images taken by other people, so I'd never get exactly the image I was looking for, and I still had no idea how to go about transitioning from one photo to the other. This diagram illustrates the problem I had:


(Stock photos by barns-en and Caserta-Stock both at deviantart.com)

As you can see the images don't work together, and even if I looked for another image that was similar to the first one, it was never similar enough to work for the transition, but it had to be slightly different so it felt like you were moving on to the next scene.

I tried this technique in Flash, and tried to overcome the problem by using blending techniques to merge the scenes. I tried television static to make it seem like a virtual world that you were entering in to from a screen, but the transitioning still didn't work. I also tried fading to black in the background, but the zooming in still looked stiff and not very professional. I realised the Tin Man site must have been planned exactly, with a proper storyboard and large group of artists, but in my case I couldn't plan the transitions exactly because the images I was using were created by someone else, and they were never going to look exactly how I wanted them to look. Suddenly the whole project looked a bit bleak! I realised this was going to be harder than I initially thought...

(Sunday 6/7/08)

continued...

Good Things Should Never End
http://unlimited.orange.co.uk



Orange released this site to promote their unlimited free text messages offer. Similar to the Zune site, the site has been created just for fun, and doesn't have a lot in it about the actual product, it's more of a gimmick to get people to visit the site.

The webpage is so long that you basically can't scroll to the bottom of it. As you scroll, different creatures appear, and you can play different games with them, eg. guess the word, write a message, talk to a chat bot, etc. The style is really effective and the website is actually a lot of time-wasting fun.

This site is a great idea as a less technically difficult version of Zune and Tin Man. It uses a similar idea, as a world that you can explore and have fun with, but the technology behind it is very simple. It also works a lot better in terms of loading speed and the fact that it uses simple scrolling rather than a flash engine that has the potential to confuse the user.

The downsides are that it's not as amazingly visually interesting as the Tin Man site, but I'm also assuming it didn't take nearly as long to make! There are also only a limited number of games and activities, and although the site is 'never ending' the games and characters and just repeated in a slightly different order all the way down, so you never really want to scroll to the end.

(Sunday 6/7/08)

continued...

Tin Man (The Infinite Oz)
https://www.scifi.com/tinman/



The website promoting the new TV series Tin Man is amazing. It works in a similar way to the Zune website, but the quality of the artwork is incredible, and you can get lost in it for hours, even though the functionality is more limited than the Zune site.

The navigation bar in the top left corner allows you to move forwards and backwards through the land of Oz as it's portrayed in the TV series, and the images are all linked in very creative ways, like in puddle reflections and castle gateways. The overall effect is mesmorising.

The actual technical side of the site seems fairly simple. A lot of the images are on different layers to make them appear to be closer to the screen as you pass through. There doesn't appear to be any 3D effects involved. The most technical thing about it is the quality of the images, which appear to be either incredibly photo manipulations, or digital paintings which must have taken months to create. The engine that allows you to move forwards and backgrounds through each of the images seems to be very similar to the Zune engine, but is much more simple and actually a lot easier to use. Although you can't 'explore' the images in the same way, it's much less frustrating and actually works in the way you would expect.



Unfortunately, like the Zune site, it can very slow on a less than ultra-fast internet connection, and it's also very graphic intensive. This seems to be a common problem with these Flash engines though, and there really is no way to get around how large the images will be, and how much memory they will take to run, as well as the internet connection speed issue. My ideas involve using high resolution images so you can zoom in and out of them without using the quality of the image (like on the Tin Man site) and so I'm likely to have the same problem.

(Sunday 6/7/08)

I found a lot of amazing Flash sites while browsing the web looking for inspiration, but there were a few that were particularly inspiring, both creatively and technically. Here is some more detail about each of these sites.

Zune
http://www.zunejourney.net/



This site is basically an advertisement for a phone. A lot of companies have started doing this, particularly multi-media companies. They make a visually interesting website, which is often interactive, and although there isn't actually much about the product involved, it gets users on to their website and potentially interested in their product, just because the site is fun to play on.

The site allows you to zoom in through a screen, where lots of animals, strange creatures, colours and shapes pass through. You use your mouse to navigate, and as you move forwards, all the strange creatures pass you. As you move further forward, you go through a range of different lands which all have their own colour scheme and strange creatures.

The website is very creative and seems like it would have been a lot of fun to make for the creators. There isn't really a point to the site, it's just visually interesting and the creatures are funny to look at. It is obviously created using some kind of Flash engine, which I have seen on other sites and has become quite popular, because it's very effective and creates a great 'virtual world' experience. I really like the surreal style to the different creatures, and the style of it is very modern and interesting, and makes you want to explore and experience the website.

There are some problems with the website though. It's very graphic-intensive, and runs slowly even on a powerful computer. Also, the ability to scroll forwards and backwards through the different lands is very awkward, and it's actually very difficult to be able to scroll the way you want to. Often you're trying to scroll forwards, and you end up going backwards, which is a bit frustrating. I think it's possibly because the scrolling doesn't just have a forwards and backwards motion, it also has a sideways motion, as you can see in this next screen grab.



It's a really great effect, and makes it feel 3D because you can scroll to the side of the animals, and almost take a look around each of the lands, instead of being limited to forwards and backwards. But that does unfortunately mean that the scrolling is often annoying, and you can't go forwards as easily as you'd like.

In terms of inspiration for my project, I definitely liked the idea of scrolling forwards and backwards, but I would leave out the sideways scrolling because of the problems I mentioned. I also really like the surreal environment, although I'm hoping to use photographs instead of vector shapes.

(Sunday 6/7/08)

This blog will act as a record of all the work I've done for my animation and interactive media masters degree dissertation project. Originally the first ideas for the project were started in May, but now I decided to record it all in this blog so I can keep up with all my research and inspirations. This post is just an overview of my current ideas and how they came into my head.

In the beginning...
Around May 2008 (about 2 months ago) I decided I wanted to do a project about digital nature. I had started working for a software company part time while I studied, and spending 8 hours a day in a small office made me appreciate the natural world more. I found that on my days off, I'd get the urge to spend the day in the park, or go for a nice walk up a hill just to get some fresh air, instead of being cooped up in an office, or at home trying to think about what to do for my dissertation!

But from this sudden appreciation for nature, I realised that bringing nature to the computer screen could be an interesting idea for my project. I had seen some lovely screensavers that were like magical worlds, but were completely digital, but were really calming and relaxing and nice to watch. I liked the idea of something that was just nice to look at, even if it didn't have a real purpose.

Looking for pictures
I started on a search for some nice images, with which I could create some sort of digital natural world. I'm not a photographer myself, so I figured there would be plenty of stock images available (preferably high resolution) that I could use to create my project.

I started scouting around and found lots of nice images. One of the subjects I liked was that of dew drops, and how magical plants look in the morning (when taken with a nice camera lens!)


(Photos by lostknightkg and sampok, both at deviantart.com)

I found tons of beautiful images, but I wasn't sure exactly what I was going to do with them. I needed some sort of inspiration to help me decide what sort of project I could create with these images. So I went searching!

Looking for interactive elements
I found hundreds of fantastic sites, all Flash, which used creative environments (often for commercial products) but they made the experience fun, almost like an online game or adventure.











I also found lots of screensavers, like I mentioned before, that looked like virtual worlds and were often animated. Unfortunately though, these generally were 3D, and I had no plans to use 3D for my dissertation, as I was planning to use Flash, and learning a 3D program could take months (months that I didn't have!)








The screensavers were great ideas for how 'digital nature' had been created, and the Flash sites were great ideas about technical things that I could attempt to acheive.

Out of the sites, there were a few that I really liked. I loved the Orange Unlimited website, I thought it was a very clever idea and was actually very entertaining, despite basically being an advertisement. I was also very impressed by the Tin Man website, because the effect was fantastic, and it seemed as if they hadn't used any 3D at all, just layered images. They had managed to merge artwork together, to create a complex virtual world, which could be navigated through. Mainly though it was amazing fun to play on, and I think I have spent several hours in total on that website just taking it all in! It really is fantastic.

I thought then that I could use the same technique as the Tin Man site, and use stock photos to create a similar virtual world. Using a flash engine technique, I could merge the photos so that you could travel from one to the other!

In my next post I'll write about what I did next. This post is long enough now!