Graphic Design: Film to Game Transitions

•May 4, 2012 • Leave a Comment
Image

Directly before the start of the game.

For the Graphic design badge I work to integrate game and film and create a smooth transition between the two. I tried to create visual transition which would allow the viewer to feel that they were moving seamlessly between mediums. Further, I tried to create games that had aspects of live actions or real photographed imagery. My goal was to make the environment of each game appear as much like that of the film world as possible. 

Image

Directly after the start of the game.

Power User: Advanced Flash Animation

•May 4, 2012 • Leave a Comment
Image

An image from the animated shooter game I created. It is meant to simulate a live action video game.

For this badge I created a simulation of a live action shooter game. In order to do this I filmed individual figures against a green screen and had them preform bobbing, ducking motions. Because this is a shooter game, there was the potential that they would be shot down by the player. So, for each move that an individual made, there were two outcomes filmed, one in the case that they were not hit, one in they case that they were. The footage was then edited and the green screen keyed out. 

Then these images were imported to ActionScript as png sequences. They were placed on a timeline and then incorporated into an environment composed on the stage with several graphic MovieClips. Individual figures were programmed to continue to play unless they were hit, in which case the alternate, interrupted motion (the figure that had been shot down) was placed on the stage. Because the individuals hid behind object to avoid being shot at, the objects were programmed to be unresponsive. In other words, an Individual cannot be shot down by a player while hiding behind an object. 

Coding: Advanced Actionscript

•May 4, 2012 • Leave a Comment
Image

This is a picture of the deduction game. A count down timer threatens you with a bomb detonation.

For advanced AS I created a several new games and programmed a film. The most difficult game was a deduction based game that required the player to guess a correct sequencing of colored lights. If you don’t figure out the puzzle you’re threatened with a bomb detonation. 

The film that I programmed was based on the concept of combing games and film together. In order to integrate the two I had to use AS as the basic programming platform. 

 

Garageband Badge

•May 4, 2012 • Leave a Comment

The Garageband badge was accidental. No, I didn’t bang my head on the key board and write a song, but my intention wasn’t to complete a badge. Rather it was an to attempt to create a soundtrack for my honors thesis film. This failed. While I generally had a grasp of how things ought to sound it was really difficult to translate them in the program. I blame this on the lack of options within the program. I mean, who doesn’t have a timpani instrument? Really? 

In all honesty this was way harder then composing music on a piano. The tutorial videos were really helpful in getting me off the ground. And while it was neat writing music with more than one type of instrument, it was really difficult to do so with accuracy. Next time I think I’ll try using a keyboard… the kind with black and white keys. Long story short, I scrapped my attempt at soundtrack writing. I kept this single song though which seemed slightly suspenseful. 

Augmented Reality: Tech Cartography

•May 4, 2012 • Leave a Comment

While compiling all of the information for this Badge felt strenuous, most of that was because I was struggling to stay on topic. This is an amazing field, capable of creating some truly beautiful things. I inadvertently spent a day looking at YouTube videos of what augmented reality can do and where its headed. My favorite use of AR that I came across was in an article about a graphic novel. You can use you’re phone or tablet to view extra content, animations and games. Sounds like the perfect combination to me! My white paper is included below. Continue reading ‘Augmented Reality: Tech Cartography’

Final Foundation Badge

•May 4, 2012 • Leave a Comment
Image

This is the first page of my site. Click for a link to the page.

Boy did this feel like returning to the stone age. Honestly I had trouble remembering how we did things back then- that was half my battle. I had to try and simplify my methods. In comparison to what we are creating now this site looks pretty sad. I ran into a little trouble with the ordered list. I realized that I had added coded the li tags with specific margin settings in my css. So as a work around Iadded my ul tags inside the text portion of m list items.

The best part of this assignment was looking through the blogs. I have run across a few of these doing research for class related topics. However, this really gave me a chance to look at what some of these had to offer. I feel like if nothing else I might start trying to consistently follow a few of these blogs.

Wireframe Wizard

•May 2, 2012 • Leave a Comment

This project really served a secondary purpose. I wanted to build a website that I could begin using as a portfolio. So, before creating each page I did a mockup. And, before doing each mockup I did some research. I scoured collections of web and graphic designer portfolios for common trends in their site layouts. What I noticed was that there was generally a home navigation page, an about page and then a gallery.

Image

The homepage

Starting with the home page I knew I wanted something that would show bits and pieces of my work but in the context of a navigational home page. I decided on going for a minimalist approach; it’s easier to program and easier to look at. I categorized my work into four groups: my thesis project, games, animation and graphic design. Each category would get its own image link that directs the viewer to a specific sub-gallery. An additional consideration was that I wanted my site to play with interactivity. It seems like that’s my personal buzzword these days and I wanted to highlight that aspect of my work. In my wireframes I added labels to each linking image; however, they are only made visible with a mouse over function. Other aspects of this page were the heading and the “about” image link.  

Image

Homepage completed.

The “about” link had a very natural placement. Groups of three work best visually so it was added as a third image column. I also wanted it to stand out as a different type of item, so the text I planned is meant to be static – not interactive. The heading is the site name is meant to stand out almost as a logo, so I ramped up the size. Really this page only contains three types of items; I felt that this minimalist visual style would be easier to navigate and simplify the user experience.

Image

The about page.

The about page, is designed to act as a short introduction. After examining other portfolios and their introductory pages I noticed a trend. Most designers tried to quantify themselves in an image and several short sentences. In order to replicate this I decided to try and explain my work in three buzzwords: interactivity, perhaps game design and video? I used these to break up my self-explanatory text which I moved to a left aligned column. I kept the oversized heading, continuing the attempt at self branding. I decided on adding a simple interactive image that would also be descriptive and could be linked conceptually to my three chosen buzzwords.

Image

Completed about page

 

This page is not particularly information packed. In the tradition of minimalism I worked to strip down my online identity to the essentials. This is meant, once again, to help clarify the content for the user. However, the site does attempt to maintain the playfulness which I feel also quantifies my creative identity.

My final page templates, in contrast are more down to business. The only necessary aspects seem to be the content itself, a subheading and a small navigation bar. The subheading is center aligned and easily readable. On the graphic design/photography page the content is distributed using rule of thirds. I will use a next arrow to navigate through image collections that have been divided into pages of three. The navigation bar is at the base of the page. This is intended to force the user to look through the page and actually see the content before continuing to the next gallery.

Image

The photography page.

 Most of the issues I dealt with in creating this site had to do with how to simplify and balance content and navigation. If someone wants to look at my portfolio I should at least make it easy for them. On the other hand, I actually want them to see my work. Creating this wireframe helped me consider what components were essential and useful for my site.

Image

Completed photography page.