Evaluation

I was really worried when initially starting this project as to how I would go about creating something interactive and whether or not it should be Illustration based. It has been really challenging but I am happy with what I have created. There are a few bits that need tweaking, for example some of the waiting time for the buoy to come in is a bit too long, theres one of the animations in the middle which has a slightly un-edited Sir Francis Drake where you can see where hes been roughly cut out and other little things like that.

I have learnt so much and I'm really happy to have actually completed something. I now feel quite confident in Flash and Flash Catalyst, as well as in Illustrator and Photoshop. Before starting this project I could use Illustrator and Photoshop but not very well, I think by having to learn two new programs so quickly, I got used to working with Illustrator and Photoshop and have learnt even more about them. I found using Flash quite difficult to begin with, even infuriating at times! But I think I have got to grips with it quite quickly and feel fairly confident on it to make a basic animation. I also feel more confident to look for help in the right places on the internet such as using Adobe TV and there are some great help links on the Adobe website itself.

I am pleased with my outcome, I think it's quite light hearted and fun, it's quite basic but I think that some of the basic animation adds to the 'cardboard cut out' feel I was trying to create. Drop shadows were also brilliant for creating this effect. There are quite a few things I would do if i had more time, from simple tweaks here and there to changing some of the speech Sir Francis Drake says. I would link each shop on the treasure map to their own websites and probably make the map a bit more detailed. I would also probably add more to look at in the animation with the whale such as some seagulls flying past, maybe change it from day to night and add some sound effects. But now I know the basics I feel as though these are all things I could quite easily do if I had more time.

I feel through doing this project I would be able to use these programs again and go on to create more animations and explore web design a bit more. I would like to learn a bit more about Flash Catalyst, I found it very easy to use so maybe I should explore what other possibilities it has to offer.

I think that in terms of the websites advertising, it keeps it fun but could probably be a bit more directed to promoting Drake Circus from the beginning. I think theres a possibility that users may get bored/ switch off before getting to the end point so featuring the Drake Circus name a little bit more would add to its purpose.

Over all I think I have worked hard, created something I never thought I would realistically be able to do, overcome a lot of Flash hurdles! and I have learnt so much along the way. I plan on using what I have learnt in future projects to create more animation/ interactive work.

Front and back pages

Here are the front and back pages to my website. I originally had another front page but felt as though the type I had designed didn't really fit in with the rest of the website so I changed it to the above. I also added a noise layer to the background image. I linked the first page to the first part of the animation using a transparent button that sits in front of the page, it's only really visible because the hand cursor comes up when you hover over it. The back page is also linked to the Drake Circus website.

The Treasure Map

This treasure map has turned out to be quite a lengthy process! The image above is the treasure map as a whole and my idea was to make each little black dot appear one after the other until it reaches the first little group of shop names, and then carry on for each page. To do this I had to import the image above into photoshop and delete the little black dots and shop names one by one and save the file each time to make the animation work in Flash. All together I have 112 Treasure map photoshop files and my computer really hates me. In Flash I then made a layer for each of these files and gave a 3 frame gap in between each layer so the dots pop up accordingly. And there are 5 separate flash and swf files for 5 different states in Flash Catalyst. This is all confusing stuff but I'm really enjoying it!

Flash...

The 'Mask' layer has saved me! I imported my swf file of the first finished part of my animation in to Flash Catalyst, where I have already began creating the website. When I went to run the project, you could see all the outside edges of the 800x600 frame (which are the parts your not supposed to see) and I tried everything to change it but couldn't work it out! After lots and lots of google searches I found out about the mask layer, which hides everything outside of the object you place in to your file. I used a rectangle and you can align the shape so it fits into the box perfectly. I then saved and re-ran the swf file to update it, put it back in to flash catalyst and now it all works.

Flash...

For the whale bobbing up and down I used one of the motion presets available in Flash which was actually called 'wave' so it was perfect for the movement I wanted the whale to make. For the first motion where the whale enters the page I used the wave motion preset and then to make the whale continually bob up and down i used the same motion preset but in a much smaller area, which seems to work! I have had trouble with making certain parts of the animation stop and loop at the right times so made a new layer and added a 'gotoandplay' at 241 and that works (after trying to figure out which frame it needed to be for a good half an hour). I find that whenever I work out how to do something on Flash it's such a good feeling, like a puzzle I'm trying to work out.

First bit of Flash...

This is a screen grab of Flash and the first part of my animation, I will probably forget to do constant screen grabs but I am so excited because I've got moving waves! They go backwards and forwards and I'm going to add drop shadows so they appear a bit more cardboard like. I want to movement to run smoothly but to also have a pop up book affect where you move bits of card with a longer bit of card... if that makes any sense! I made the waves move by adding a keyframe at 60, moving the wave to the other side of the page at 60 and then creating a classic tween on that layer.

Good Blog for textures!

I have come across this blog... http://lostandtaken.com/ which has loads of great textured layouts and backgrounds available to download in really large formats and resolution. I have found a few good tea stained paper backgrounds that I'm playing around with at the moment but I'll have to favourite this one for future projects.

Adobe TV

I'm quite scared about building my website, I haven't used Flash before (apart from in the sessions with Andy) and I'm not too familiar with Flash Catalyst either so I'm having a cramming session and watching lots of Adobe TV to try and remind myself of the programs and how to do the basics. Theres a whole section on Interactive Design and I have been watching the 'Flash in a Flash' videos. Link: http://tv.adobe.com/channel/design/interactive-design/

More on Photoshop/ Illustrator

I have played around with different colours to use for the images I'm going to animate, I found the colours for the whale and sea on Kuler and think they work quite nicely together. For the background I want to use some paper or cardboard, maybe tea stained, to give it an old map sort of feel. Since drawing up and putting the images in to photoshop and illustrator, I have since realised I'm going to have to re-draw quite a lot of it because I didn't think about the different layers I will need to make the animation work properly. Which is a bit annoying but all a learning curve!

Importing to Photoshop/ Illustrator

I have experimented with a few different colours for my character and tried out different backgrounds for the title page. I found a really great blog with loads of large image files of old maps and the one I have used below is from the 16th century... true to Sir Francis Drakes time!

On the image below i have added drop shadows and a noise layer to give it an old sort of feel.

Developmental Drawings...

A few scanned pages from my sketchbook of developmental drawings so far... I'm thinking about putting Sir Francis Drake on a whale instead of in a boat, basically because drawing boats is quite boring and I quite like the look of the whale. When it comes to animating my characters, I want to create a very cardboard cut out sort of effect and add some drop shadows behind the waves that will move.

Ideas

I think I have got a good idea of what I'm going to do for my interactive project now. I'm going to make an interactive website with an animated Sir Francis Drake, he will find a treasure map which leads him to Drakes Circus shopping centre and find out about all the different shops he can go to along the way. At the end I want to link the Drakes Circus website to the last page saying something like 'For your own adventure, visit Drakes Circus, Plymouth'. I explored a few other ideas, I thought about applying a circus theme in to my work playing on 'Drakes Circus' and possibly having Sir Francis Drake himself as the ring master. I want to keep my work quite light hearted and to be enjoyable for the user, as well as promoting the shopping centre.

Ideas

Trying to choose between the themes of Transformers, Vivienne Westwood, PCAD, Drakes Circus and Porsche was quite a big decision but i was edging more towards the Plymouth themes because I've got all the inspiration I need right on my door step! I already have an idea for Drakes Circus which involves online interactive advertising for the shopping centre, using an illustrated Sir Francis Drake as the main point of interaction. At this point I'm not sure whether to build a website, online magazine/ flip book or an app but I'm edging more towards the website just because I have more of an idea how to build it from the Wednesday self promotion sessions with Andy.

Interactive Illustration Research

Home Sheep Home is another game created by Robin Davey for Aardman Digital with the help of Chris Underwood. The game involves different obstacles for three sheep to tackle and your job is to help them to safety. The appearance of the game is very sketchy and hand drawn, using a water colour style. It's a really addictive little game and I had to play it until I had completed all the levels... all in the name of research of course! Here are some screen shots...

Interactive Illustration Research

Booty Juggler is a great little flash game created by Robin Davey commissioned for Channel 4's 4mations. For some reason the game won't work on the 4mations.tv website its self so i've found it on another website. The game involves a pirate octopus and your job is to stop him from getting blown up! The choice of colours and the screen printed style is really effective and gives the game a nice vintage/ pirate sort of theme. For my own interactive project, I will be focusing on a similar sort of seaside/ Plymouth theme involving Sir Francis Drake, so i have found this game quite inspirational and it has shown me what can be done.

Interactive Illustration Research

Hunters' Moon is one of my favourite pieces of interactive illustration I have found so far. It's an app created for the iPad by Rob and Anthony Grajirena, I don't have an iPad so i haven't been able to experience it properly but the screen shots look beautiful. It has some game elements but is described as being "An interactive illustration and a drawing that shares an idea through game mechanics. It is best heard with headphones and played patiently."

Interactive Illustration Research

The next website I want to talk about is a project created by Stevan Živadinović called 'Hobo Lobo of Hamelin' - http://hobolobo.net/ - which is a comic/ story book fantasy written and illustrated by Stevan. He describes it as "A webtime story about a city, it's scruples, some rats, a lobo, his woodwind, and the stuff that goes down."

The websites consists of different pages that move in to each other as you move through the story. The images are supported by text and some pages are accompanied by sound. It's very complex but very impressive, anyone who wants to view it really needs to have a good internet connection! Here are a couple of screen shots...

Interactive Illustration Research

As I'm an illustrator, I'm trying to find examples of interactive illustration and have come across a couple of really impressive websites. The first is http://www.vobnedir.org/ which is a Turkish website (I only know this thanks to google translate). I don't know who designed the site, what it's selling or what any of it means, but its very inventive and uses hand puppetry and illustration to take you on a journey. Here are some screen shots of the site...

Interactive Illustration Research

All the festivals this year seem to be going down the same illustrative sort of route with their web design. This is the site for the Green Man Festival which has a really organic sort of feel to it. It's not as interactive as the Bestival site but has a few nice little surprises on it, like in the top bar theres a little hand drawn stage that makes a pumping kind of motion. There is also a branch next to it with links to Twitter and Facebook which pop up in red when you hover over them. I think it's a really nice little website and the navigation is easy.

Interactive Illustration Research

The Bestival website has a really lovely illustrative interactive theme to it. When on the main page to look at the line up, news, info etc, when you move the cursor around the page the animals eyes at the side of the page move to watch where your cursor goes. The initial page you come to has a planet with a background full of hand drawn starts. The planet moves up and down in quite a simple motion but looks really nice.

Interactive Design

Interactive media involves interaction between people and content, and digital interaction can be achieved through the use of text, image, graphics, animation and sound. There are many different examples of interactive media, ranging from websites, to applications, to video games, to interactive art, to interactive advertising, to social media, and interactive TV.

When researching what Interactive media is, i found it quite difficult to determine what it is exactly because it covers such a range of platforms. For example, interactive media can also be established through board games, pop up books etc, which are considered 'printed media'.

Interactive media must heavily rely on communication and allow users to participate with the content.

There are so many options to explore when thinking about how to take on this project, I am keen to learn more about applications, websites and online magazines. In terms of my design knowledge, they are areas that are quite alien to me but i think it would feel like a real achievement to be able to create my own.