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.
