Sunday, 27 November 2011

DP1 Interactive Project

I recently completed my interactive project for my final Design Practice 1 project.

Here is the link to access the interactive experience:

http://www.nimahedayati.com/interactive project.html

Research

At the beginning of this project I viewed examples of interactive videos in which the viewer had to make choices which dictated the characters journey through a story. One memorable example is the ‘Deliver Me to Hell’ video which can be viewed online through this link: http://www.youtube.com/watch?v=9p1yBlV7Ges

I brainstormed some ideas and came up with the concept of an escape from prison. My idea was inspired by a film called The Shawshank Redemption.  The interaction is about a wrongly convicted man being imprisoned and this motivates you to free him from this situation. This will appeal to anyone who is interested in role playing games or films.

In order to create the interaction it was essential for me to have a basic understanding of the programming languages html and CSS. I was given a few basic tips by my tutor and also did some research online by reading html tutorials and web design tips in forums.

I decided that using video for my project would be too complicated to do on my own. I therefore chose to illustrate all my images by hand and use Photoshop to add the colour.

Design and Production

Below you will see a sketch of my initial diagram showing the brainstorming and sequence of pages for my project. 


 
Exploration

I showed the first draft to my tutor and was advised to add more pages which give the navigator of the interaction more paths to choose.

The problem with the first version is that it is simply a linear path with each page having only one or two links which either lead the navigator to the next page or back to the previous page. I decided to make a few of the pages ‘nodes’ in which the navigator can choose different paths for the prisoner to follow; each path would be parallel with other paths so ultimately they lead to the same outcome but the navigator will not necessarily see every single page of the interaction. This made the experience more interesting as it was now more like a game rather than a film.

Below you will see a diagram of the improved interaction with all pages and links.


Once I had the complete flow diagram and all images fully illustrated and coloured, I used Dreamweaver to create the html/CSS code which would control the way the interaction worked. This was actually the quickest part of the whole process as once I had the script for one page, I could copy this for all other pages and just change the background image, link targets and hotspot areas. I also added a code that created a hand pointer when the mouse hovers over hotspots, this was done by adding the code style="cursor:pointer" within the <a> section which defines the hotspot area.

 Here is an example of the html code used for the index page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Locked Up: an interactive experience created by Nima Hedayati</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<style>
body{margin:0px; padding:0px;}.image-map{width:1024px; height:768px;
background:url("images/intro page.jpg") no-repeat; background-color:#000000;
position:relative;}
.image-map-hotspot{display:block; position:absolute; width: 254px; height: 57px; left: 385px;
top: 633px;}

/* start style for hotspot area */
#A{left:389px; top:638px; width:250px; height:59px; border:0;}
#A:hover{border:0;}
/* end style for hotspot area */
</style>
</head>

<body>
<div class="image-map">
<!-- Start Hotspots -->
<a href="page2.html" style="cursor:pointer" id="A" title="" target="_self" class="image-map-hotspot"></a>
<!-- End Hotspots -->
</div>
</body>
</html>


Evaluation

Of the three projects, the interaction has been the most enjoyable for me and I am very happy with the outcome. From my experience and knowledge gained in making this project I have been inspired to create my own website (see nimahedayati.com) and have decided to choose the interactive web path for my second year in university.

Friday, 11 November 2011

DP1 Film Project – ‘Shoe Done It?’



Today I finished my short film called ‘Shoe Done It?’ this is for my Design Practice 1 film project.

The brief was to create a 3 minute film with the key storyline being a woman eats a pasty and falls asleep on a park bench; when she wakes up, she realises one shoe is stolen and through police interviews of her and witnesses the thief is found. The film also needed to contain flashback scenes and an interview within the Arboretum Park.

The entire process took three weeks to complete. In the first week our class was split into groups of 4 or 5 students; my production group consisted of me, James Bedford, Nick Horton, Marcus Howard and Georgia Hirth.

Week one was spent familiarising ourselves with the camera equipment and choosing roles for each individual in the group. Initially we chose the genre of mockumentary; in the style of programs such as The Office.

In week two we chose the strongest story from the individual storyboards and developed this into a script, we went with Nick’s script as this seemed to contain the most humour which was essential for our film. Nick also had two friends who had done acting before and were willing to be in our film.

In week three we did the filming as a group and then edited individually. All filming was done during a three hour session on Wednesday 9th November. The locations we used were the Arboretum Park and a room within Waverley building. All footage was shot on manual camera settings with white balance calibrated for each different location. I spent around 8 hours editing on Thursday and Friday.

Luckily we filmed on a bright and dry day so the outdoor footage looked well lit and colours were vibrant. The indoor footage was a little darker and greyer; I overcame this problem by adjusting the brightness/contrast and colour balance within Adobe Premiere. Specifically, I increased the brightness and contrast by subtle amounts to brighten the image; I then increased the amount of red and green in the indoor shots to give them a warmer look. In future I would like to use lights for indoor shooting as this allows for greater control and continuity in lighting between shots.

One difficulty I had was cutting between shots which had a similar composition e.g. medium shot of interviewee to another identical shot of the same person. If I had done a straight cut between these shots you would have noticed an obvious jump; my solution was to zoom into one of the shots or apply a page peel transition. I did the best I could with the footage I had but if we had the opportunity to shoot again I would have been more careful with the composition of shots with editing in mind.

During the editing I spent a lot of time mixing the audio. In some cases I had to dip the volume of individual phrases in the actor’s speech to give a balanced overall sound. It would have been useful if I could apply an audio compressor/limiter to the master audio mix as this would smooth out the peaks.

I recorded the music at home using an Ibanez guitar into a Line 6 POD X3 amp simulator; this was then recorded into Sound Forge and mixed with drums and bass in Reason 4.

This was a very enjoyable project and I am pleased with what I have achieved with my group. I look forward to working on another film project in the next term.

Tuesday, 8 November 2011

'Zero'

In my tutorial group I was given a task to create an image that expresses the concept of 'zero'. Here's my idea:

Chosen designer for Design Process essay

For my Context 1 essay I have decided to write about the design process of Glen Keane.

Glen Keane (born 13th April 1954) is an American animator, author, illustrator and director. Keane is best known for his character animation at Walt Disney Studios for feature films including The Little Mermaid, Aladdin, Beauty and the Beast, Tarzan, and Tangled. Keane received the 1992 Annie Award for character animation and the 2007 Winsor McCay Award for lifetime contribution to the field of animation.

I will mainly focus on Keane's animation and illustration process. I have begun my research and compiling an index of references. I will start writing in the next few days and hope to finish the assignment within a couple of weeks.

Saturday, 5 November 2011

DP1 Film Idea

I created a short film with my group to practice using the camera equipment and editing software. Here it is: