Author Archive

Milligan Project 3

May 5, 2012 |  by  |  Project Three, Student Work  |  Comments Off on Milligan Project 3

List of Tutorials Used:

Photoshop Masking and Compositing: Fundamentals

Flash Professional CS5 Essential Training – esp. Chapters 10 (Working with Motion Tweens), 19 (Adding Interactivity with ActionScript)

Lynda.com

ActionScript 3.0 in Flash Professional CS5 Essential Training

Video/audio chapters: 11-12

Movie Clip As Button Tutorial

Greensock – TweenMax – esp. onComplete

Rationale of Design

I went through several different designs before arriving at this one, which is very different from previous ones. I wanted the entire site to have a scrapbook feel as if items are being painted in. The main “navigation” is the circle, though the user has to click into each scene, which plays a movie. I wanted the user to have some control over their use of the site, but also be – in a way – forced to “follow the path” of Peter’s life by exploring the three separate video scenes. I wanted the entire site to seem like one seamless piece of watercolor paper. I hoped to achieve a sense of visual consistency throughout the site through my use of typography and painted elements.

 

Rationale of Animation Technique:

Each scene first requires the user to click on a drip. The scene then animates to a video of a scrapbook. Once the user leaves the video, they are brought back to the scene in which an arrow (with text) appears. Once you click the arrow, the circle animates to a new position and Scene 2 begins. Like Scene 1, a drip first appears. When you click on the drip, a line is animated that brings the user to a video. Once the user leaves the video and is back on Scene 2, an arrow (with text) appears that – when clicked – again moves the circle to a new position. Once in this new position, Scene 3 begins. The drip appears. When clicked, the line appears and brings the user to the final video. Once the user leaves the video, an arrow (with text) appears that brings the user back to the beginning.

Rationale of Video/Audio

From the beginning of this iteration of the website, I knew I wanted video to be a main component. My site has three videos of me “scrapbooking” eras of Peter’s life before his death. The first video, which is accessed by clicking a drip in Scene 1, is a scrapbook page of his childhood. The second is a scrapbook page showing him in his early 20s as a mountain climber in Yosemite. The third is a scrapbook page that is meant to be a kind of memorial. Each video has audio that I felt was appropriate for the scene. The first video is 50s music, the second video is a hit from the 1960s and the third has wind sounds that evoke a feeling of being outside, perhaps in Yosemite. The audio for each video plays until the video is complete. If the user navigates off of the movie, however, the audio will continue into the next scene. If another movie is clicked while other audio is still playing, the first song fades out and the second song fades in.

Milligan Project 2

April 11, 2012 |  by  |  Project Two, Student Work  |  Comments Off on Milligan Project 2

Rationale of Animation Technique:

I want my project to have a scrapbook feel  – as if items are being painted in. Each scene first requires the user to click on the drip. A line is drawn and the entire scene will slides over. This offshoot of Scene 1 will be a video of my hands scrapbooking pictures, which will have some interactivity (not yet included). Once the user leaves the video by clicking on another drip on the scrapbook (not included – as a placeholder, click on the line to make the arrow appear) they are brought back to the main part of Scene 1 in which an arrow (with text) appears. Once you click the arrow, the circle animates to a new position and Scene 2 begins. Like Scene 1, a drip first appears. When you click on the drip, a line is animated that brings the user to an offshoot of Scene 2, which is another video. Once the user leaves the video and is back on the main part of Scene 2, an arrow (with text) appears that – when clicked – again moves the circle to a new position. Once in this new position, Scene 3 begins. The drip appears. When clicked, the line appears and brings the user to the offshoot of Scene 3, the final video. Once the user leaves the video, they are brought back to the main part of Scene 3 and an arrow (with text) appears that brings the user back to the beginning. I wanted the user to be forced to follow the “path” of Peter’s life by traveling along the circle. Because of this, there is no way to get back to Scene 1 without going through Scene 2 and Scene 3.

For a better idea of how the “offshoots” of Scenes 1,2, and 3 work, a PSD file is included in the ZIP.

List of Tutorials Used:

Photoshop Masking and Compositing: Fundamentals

Flash Professional CS5 Essential Training – esp. Chapters 10 (Working with Motion Tweens), 19 (Adding Interactivity with ActionScript)

ActionScript 3.0 in Flash Professional CS5 Essential Training

Movie Clip As Button Tutorial

Greensock – TweenMax – esp. onComplete

 

Milligan Project 2 ZIP

Milligan Project 1 Biopic: Peter Barton

February 15, 2012 |  by  |  Project One, Student Work  |  Comments Off on Milligan Project 1 Biopic: Peter Barton

Click here for Creative Brief & Functionality Document

Milligan: Project 1, Peter Barton

February 8, 2012 |  by  |  Project One, Student Work  |  Comments Off on Milligan: Project 1, Peter Barton

Click here for Milligan Creative Brief

Milligan Project 1 Mockups

February 1, 2012 |  by  |  Project One, Student Work  |   |  Comments Off on Milligan Project 1 Mockups

I decided to create a biopic for my mom’s brother, Peter Barton, who died at age 25 while climbing El Capitan, a rock formation in Yosemite National Park. I wanted the site to have three parts – a home page, a page documenting his travels across the US (which eventually led him to live in Yosemite) and a page documenting memories my mom and her family have of him. Since his memorial service was on top of El Capitan, I wanted to have an image of each her family members on top of the formation. When you click on a family member, either video, audio, or an image with text will show up with that family member’s memory. Although the site has an element of sadness, I want it to be more of a celebration of his life rather than have a memorial feel. I want the site to be collage-like with simple navigation graphics. Below are very rough layouts for each page:

HIGHRISE/ Out My Window

January 24, 2012 |  by  |  Inspiration, Project One, Student Work  |   |  Comments Off on HIGHRISE/ Out My Window

Site URL: http://interactive.nfb.ca/#/outmywindow/

“Highrise/ The towers in the world/ The worlds in the towers”

Why I Chose the Site

I came across this site through thefwa.com. I was interested in finding an RIA site that was both journalistic and interactive. When I launched this website, I was attracted to the premise and the clean, simple design of the opening page. Once I entered the site, I was immediately impressed by the visuals (collage-like feel, yet organized) as well as the short video pieces found within each apartment.

Purpose

“Out My Window” explores the stories of people living in high-rise buildings around the world. There are 49 stories told by people living in high-rise buildings in 13 different cities. The purpose of the site is to explore the stories and cultures of people residing in almost identical looking living spaces around the world . The director of the project, Katerina Cizek, wanted these stories to be told in a way that “mimics the way we get to know one another when we visit each others’ homes.” In this sense, the user can enter one of 13 apartments and look around. Certain objects and people  become highlighted as the user mouses over them, which links the user to short documentary videos about the inhabitants of the specific apartments.

User Profile

The user of the this site would most likely be in their 20s or 30s. Another interactive documentary project of HIGHRISE, “One Millionth Tower,” was recently featured on wired.com. I imagine the user of this site would be of a similar demographic to the one that reads Wired. Most likely, the user would have interests in both technology and journalism. Likely occupations of this user would be: multimedia journalist, designer and web designer, documentary filmmaker, artist, and computer scientist. HIGHRISE is sponsored by the National Film Board of Canada/Interactive, so I would presume that most users of the site are from Canada or the US, though I am sure people in the new media field from all over the world would be users as well. The likely technical abilities of a user would be knowledge of the web, design software, film editing software and some web or graphic design. Access to broadband internet connection is required for use of this site. The internet connection I have in my apartment here in Syracuse is not even fast enough to use this site without frustration, though I was able to use the site without a problem in the Newhouse computer labs. The director, Cizek, states that she is “keenly aware of the digital divide that separates those who can experience this project from those who can’t.” The HIGHRISE project, as a larger endeavor, will also feature low tech projects in the future according to Cizek.

User Interface and Functionality

I was impressed by how easy this site is to navigate for the amount of content  it presents. The first page of the site is reminiscent of a traditional documentary film title shot in simple typography. A brief, enticing description of the project is given and the word “Explore” links to the project itself. Once the user clicks “Explore,” a new page loads and a collaged high-rise building rises from the bottom of the screen. Thirteen apartments are stacked together in muted grays and browns. When the user mouses over an apartment, the scene in the apartment becomes illuminated with color and moves slightly, giving the impression of a button. The location of the apartment also appears at the top of the screen, though I would argue that the text is too small – this feature wasn’t obvious to me at first. After exploring each apartment, very little struck me as problematic in the design. It is extremely easy to navigate inside each apartment. As you click and drag for a 360 degree experience, different objects and people jump from the page and text appears. It is clear that this enables you to click and when you do so, a short video plays (usually short stories told by the inhabitants of the apartment). It is very easy to navigate from these videos back to the 360 degree view of the apartment.

Once I was in an apartment, I found it a bit difficult to get back to the collaged high-rise home screen. While the user is in each apartment, the words “Places” and “Faces” are on the edges of the screen. When the user mouses over these words, he or she is given a way to navigate directly to another apartment (i.e. through the location of the apartment or the faces of the inhabitants). The word “Spaces” is also on the edge of the screen and when this is clicked, the user is navigated back to the collaged home screen. I feel that this isn’t obvious enough – the icon used and the placement of the word makes it difficult to realize it’s purpose when you are first using the site. The only other issue I experienced with the site involved the text on the top  of the screen, which is a menu bar. This menu bar has links (“Exlore,” “Playlists,” “Channels,” “Blog,” “Interactive,” and “Search”) which directs the user to the National Film Board of Canada’s website, taking you out of the “Out My Window” and even “HIGHRISE” project entirely. There is a menu bar at the bottom of the screen which has links specific to the HIGHRISE project (i.e. “About Out My Window,” “Director’s Statement,” “Credits”). To simplify the menu bars and avoid confusion, I would make the National Film Board of Canada’s website a link on the bottom menu bar and remove the top menu bar completely.