View high resolution

An article in the Sussex Uni newspaper (The Badger), regarding the students catching TB, used a photo of green bacteria alongside the written piece. This triggered me in to thinking I should use actual imagery of bacteria in my project in the section regarding the spread on Ikea over the world. I already did the growth in a ‘petri dish’, so I went back and re-edited it using bacteria instead. Hopefully the viewer will understand the message slightly more that in Fight Club consumerism is seen as a negative, so the ‘spread’ of Ikea over the world is like the growth of bacteria.

View high resolution

design for Chuck Palahniuk Choke t-shirts.

First I embedded a video clip from the film on to the timeline itself, rather than an external player in the skin. I had to convert the files in to FLV’s using Adobe Media Converter. I used the clip in Fight Club where the Narrator is looking through an Ikea catalogue, then walks through his condo and items and text appear as he moves, in the style of the catalogue.

Then I decided to put buttons over the top of text within the film, to make the text glow so the user clicks on it. This then takes them to a new layer with different info about Ikea/consumerism etc.

I also tried to use the same play/stop/pause buttons etc as I have used before, so the user can pause/rewind etc through the video. They can then go back to other glowing buttons they may not have seen the first time. However I cannot get these buttons working at the moment….

To make the glowing text, I took a screen shot of the text within the movie clip, edited it in Photoshop so that I was just selecting the letters and not the background. I then imported this PNG in to the flash library, made a new layer, and put the item on to the first frame the text appears in in the film. I turned the text in to a symbol, and moved it every few frames to keep it in line with the original text in the movie. I used classic tweens to join the movements. I also used the glow filter in flash, as well as turning the alpha up/down when the text comes on/off screen.

(Source: super-8-bit)

I want to show the spread of Ikea across the world over the years, but I want the effect to look like it’s spreading like a disease. I would really like to make the map ‘grow’ like bacteria in a petri dish - the oval shape representing the standard map shape you see of the world. I need to try and figure out how to do this on a timeline so the viewer can pause the ‘growth’ at any year, and see the figures of how many Ikea stores were open in each country at that time.

To begin some initial ideas, I took a world map with details of the number of stores in each country from it’s start date in the 50’s up until 2007. I used the 2007 map as my starting point in Photoshop, then removed any countries not included in the previous years, on different layers, until I was left with the original 50’s map with only a few stores.

Next I imported these layers in to Flash, placing them in chronological order on the timeline on separate keyframes. I then added tweens between each of them, so when it is played back you see the map ‘grow’.

I also experimented with making play/stop/pause/forward/backward buttons in another new project. It was very simple, just adding code in to an actions layer for all the buttons. I tested this with some simple text appearing word by word, so you can pause/play etc the words.

I then tried transferring these buttons on to the Ikea growth map but for some reason they don’t seem to work…

Index page - opening screen, took clip from Fight Club film credits. Turned off the audio from the credits. I tried to loop this section but couldn’t make it loop smoothly so let it just play once.

Made the text ‘enter’ glow, and a separate button to enter to the main menu.

For the Insomnia page I separated the audio clip from the film where the Narrator talks about everything being a copy of a copy due to his illness. I exported this to the library and put it on a hidden button on the ‘over’ action. Every time the mouse hover over the button the audio clip starts, rather than just playing the clip once - by pure accident this turned out to be a good mistake as then the audio clip i splayed multiple times over eachother. It literally does what the quote says and becomes a ‘copy of a copy’. At first the audio was muffled but I realised I needed to change  it to RAW and it sounds fine.

Once you click on the audio button information is written in a typewriter effect. I used some code I found online to do this, and adjusted the setting to make it type out faster. On the button there is also some code to prevent the text being ‘typed’ until the button is pressed.

In the final image this is just some testing. Here I made the text appear by using a mask that moves from one side to another to reveal the text below. This was a preliminary idea before I found the typewriter actionscript. In the background I embedded a video clip and turned the alpha levels down so it was faded and not taking over the screen.

View high resolution

Fight Club (movie) Barcode - colour composite.

I found these movie barcodes on this blog (originally from Kottke.org), where all the colours from a movie are taken and put in to vertical lines to create barcodes.

The example here is from Fight Club. As noticable from watching the film, all the colours are dark and dingy, with sludgy greens and shades of blue throughout. I could incorporate this colour scheme in to my web project, or even the barcode idea itself. 

In contrast - this is the barcode for the Lion King - bright and colourful, suiting the mood of the film. Check the link to the blog to see other examples, they really do show how much thought goes in to the colour schemes for films.

 

Whilst looking at other examples of non-linear, interactive websites I found ‘Out My Window’, by Katerina Cizek (2010). Here you can see 13 different apartments in 13 different cities across the world, giving an insight in to each home and what they see out of their highrise windows. To select which apartment you want to see there is a collage of photos for each one or you can bring a map down and select from here. Once selected, there are photo collages giving a 360’ look around the room. You can hover over objects or people and find out more information and the stories of the inhabitants lives. This information is either represented with sound and still images, or 360’ films made with Yellowbird cameras, where the user can navigate around within the film. There is also some background audio noise in each room, or sounds when you hover over an object. The project is incredibly complex but from this I am encouraged to try and use as many different formats as possible – images, clips, sounds and so on. The idea of using a map made me think of doing something similar for my section on Ikea – I could show a world map and indicate how many stores were opened in quick succession in different parts of the world. Also I liked the opening screen for ‘Out My Window’ – it almost looked like titles for a film, with the title appearing, with information on what it was, and then an ‘explore button. I could do something similar using the titles from the film perhaps, or the cover of the book with an ‘open’ option.

Another example of interactive documentaries was ‘Welcome to Pine Point’ by Paul Shoebridge and Michael Simons (2011). This is technically a linear narrative as you can only navigate to the ‘next’ page or the ‘previous’ page. However within each page there are interactive aspects. One that was used often was to be able to click through a set of photos within that page, as well as have a scrolling screen within a box that you could scroll up and down in. This would be a simple way to get lots of images in to one screen level rather than having to make lots of new ones. A place this may be useful would be for the ‘Soap’ section in my project – if I include a step by step recipe of how soap is made, but you can click through each step one by one within that screen. Each image would have the instructions and a picture to go with it.

HBO Voyeur is an example of an interactive documentary however it is fictional, and although you can click on what you want and see what you like at any time, it is the same footage being played on loop so you could in theory see everything there - just in alternative orders. This is more like my project as the same material will be available to everyone, but you cannot change the meaning or ending as in some interactive docs where you choose the paths for the characters etc. Mine is an informative, factual piece. 

Initial ideas and technical experiments in Flash. Getting used to the program, and how to make basic buttons with functions when you hover over them and click on them (up/over/down/hit). 

Managed to cut clips in iMovie very easily - imported to library and embedded in flash project. I thought I wouldn’t be able to as m4v file but seems to work fine!

Found the nearest font I could online to the Fight CLub font, on DaFont.com. Figured out how to embed it in to the library - again surprisingly easy! Used the same pink colour from the soap bar icon (colour picking). Saved the colour swatch to make it easy to use on everything.

The Donnie Darko website →