Interactive Architecture Reflection

Shawna P.
Interactive Architecture
Photoshop, camera, WavePad Sound Editor, iPod Touch, Flash (sort of), and Windows Movie Maker
November 28, 2012
Technical
I took forty or so pictures of Lisa walking up the stairs that I wanted to feature in my interactive architecture assignment. I edited each of them in Photoshop by adjusting the colour to eliminate the yellow hue and to remove Lisa from the background. I made a glowing footprint in Photoshop using tutorials that I had found online that involved using a gradient map and gaussian blur. I distorted each footprint to make it appear to be on the staircase behind Lisa.
I also recorded sounds with my iPod from my piano that I could play while Lisa went up the stairs, then edited them to get rid of any background noise in WavePad Sound Editor.
Idea/Concept
I decided to animate the stairs so that they would light up when someone walked on them and play a note, eventually playing a tune by the time you got to the top.
Of course, this would have been much easier if I could have just gotten Flash to work. Instead, it decided to crash on me so I had to put it together in Movie Maker, and the sounds do not match up as I intended. I would have liked a button at the beginning so that you could click on it and watch Lisa go up the stairs quickly (‘Too Fast") and another button where she went up at the right pace ("Perfect Speed").
Influences
I once went to a ballet in Toronto where they had frosted glass stairs. As you climbed them, you could look above you and you’d see the shoeprints of the people climbing the stairs above you. That encouraged me to animate something similar, only this time the shoeprint would linger on the stairs and light up.
Composition
Lisa’s footprints are the main focus of the animation because they light up. The sound enhances this effect because each time she puts her foot down, the shoeprint lights up and a note plays. This is the main piece, the part that makes it interactive, so I want it to be the focus. Its colours differ from that of their surroundings, making them stand out. They also fade as time goes on, and because they are always moving they capture your attention.
Motivation
I always thought that it would be neat to have light up stairs, and this was a way to test my photoshopping abilities to make something light up in a real-world setting. I had to use a few filters and brushes and feathering to achieve the effect I wanted, as well as altering online tutorials to my needs, which helped me learn more about making objects glow. I want to use this technique in future pieces, so I wanted to include it in my interactive architecture so I could learn how to do it.
Critical Assessment
The animation runs smoothly and does actually seem like she is going up a set of stairs, which is what I wanted. I was surprised with how well the glowing footprints looked, and how well they turned out when I was saving the pictures of them because I slowly reduced the transparency with each picture and the effect turned out better than I had originally imagined.
Of course, I was upset that Flash would not work for me and would have greatly preferred to put it together in there. However, with the resources I had, I am glad that I was able to produce a solid animation that ran smoothly. If I had additional time, I might have changed the ‘slow’ footprints to green instead of yellow to better introduce the fact that it is the ‘perfect’ speed.

Usability

Usability:

a.       Yes, the navigations are easy to read, understand, and click. In the main screen, the menu is very visible and it is clear which button takes you where. In each screen, I will have clear buttons to return you to the home page, and what each button does is obviously labeled. Although I want the visitor to enjoy looking through my portfolio, I don’t want them to get frustrated when they can’t get where they want. I also have used readable fonts so the visitor won’t have trouble reading the information.

b.      I will always have my menu displayed at the top of each page. When the menu is not incorporated into the artwork, it will be in the top right corner every time. The page you are currently on will be highlighted in the menu or otherwise emphasized so the user is aware of which page they are on and which ones they can ‘jump’ to. This will make it easy to get to each screen.

c.       On my pages, the text will always contrast enough to be clearly legible. If the background is too busy for the text, a square will appear behind the text so that it is still visible. While the focus is on the text, animations will be fairly minimal so it’s not distracting. Animations will not run in front of the text while you read it so it is not blocked.

d.      This design is creative because I have put my own twist on things I love: video games! It is also creative because it includes animations (and if my knowledge of Flash becomes more extensive, interactive gameplay portions!). It will stand out because my interests are clearly displayed throughout my entire portfolio. My portfolio will be interesting to look through as well as informative, which will make it stand out from generic informative.

Sketch it Up

Menu page of my portfolio

What I'm modelling it after

For my portfolio, I want the first page to resemble that of the old Pokémon game battle screen. For this reason, I am using simplified drawings made up of visible pixels and a very clutter-less layout. From this page, you can select which section you would like to go to. The Idea Thief would move up and down and probably open and close its mouth a little, and the girl would throw the light bulb in her hand out onto the screen much like the boy throws the Pokéball in the actual video game.

In this, the mailboxes are like the ghosts and the envelope is like Pacman. The pieces of paper (letters) are like the large circles you can collect so the ghosts turn blue and you can eat them.

The Resume button would immediately take you to my resume, which would go to a relatively distraction-free screen with a background that is Pacman themed. It would have a movie clip showing a mailbox chasing a letter around the screen much in the same style of the actual game (I don't want to plagarize, however, which is why I'm changing it up a little).

Obviously I would only have one character on the screen at any given time, but I put the three on there to show that I have more animations for the character.

An example of a fact that may show up if you hit a mystery box.

"About Me" would take you to a Mario-themed page where I am the character being controlled. Preferably, I would really enjoy being able to make it controllable, i.e. you can make the character jump and hit the question mark boxes. Each question mark box would reveal a new fact about me. If not, I could have it play in stages, so when you clicked "next" the character would play as a movie clip and hit the question mark box to reveal a fact.

What I'm basing it off of ;)

"Portfolio" would take you to a screen similar to the Pokémon selection screen, only each 'Pokémon' would actually be a piece of art I did and clicking it would allow you to zoom in for a closer look.

The Artist Statement Screen

...which is based off of this.

Finally, "Artist Statement" would bring you to a Tetris-style screen with an animation showing different sentences and words coming down on each of the blocks and fitting together to create the entire artist statement. A solid base of blocks and words would already be in place so that not too many would have to fall down and be put into place.

The transitions from page to page will include 'vintage' transitions from old video games, mostly pixels blocking out sections of the portfolio and sometimes flashes of light and then pixellation.

Whew! That took a lot time to make, it's making me wonder how long it will take me to make the actual portfolio ...