Posts Tagged ‘project 2’

Christopher Azar | Flash Project Two Redo

May 12, 2010 |  by  |  Project Two, Student Work  |   |  Comments Off on Christopher Azar | Flash Project Two Redo

As seen by Chris’ Mom..

The design is very plain an clean because I wanted to highlight the video contents. The pastel colors embody the spirit of mother’s day and of spring. The video panel has a a nice little rounded edges boarder and an inner shadow to give the panel some depth. I also used flowers as the video buttons that spin as a call to action but are also in line with the spring theme.

The video panel is the same dimensions as my web cam capture 640x480px.
Tutorials I used were the one prof Harper made for us when for creating a video player and making custom buttons to control volume/play pause and back.

Christopher Azar Project Two Redo | ZIP

Monica’s First Flash Project (now with Video!)

March 23, 2010 |  by  |  Project Three, Student Work  |  ,  |  Comments Off on Monica’s First Flash Project (now with Video!)

(Barron Proj3)

Project Overview – The purpose of this site is to shed some light on the life of radio personality Ira Glass. The sub-pages include an About page, Media page, Links page, Follow page, and Contact page. Images, video, and sound clips will be available, as well as information about his life, news, and contact information.

Audience Profile – The target audience is made up of people who are fans of Ira Glass and his work on “This American Life.” This audience is typically made up of men and women over the age of 18 who are educated (at least some college) and interested in both news and human interest stories. They must also enjoy listening to public/talk radio. The visitor’s computer must have broadband internet, be able to support Flash, have a minimum browser size of 1024×768.

Perception/Tone – Because Ira’s career revolves around radio, the structure of the site centers on the frame of the radio and using radio buttons as navigation tools. Ira’s signature look includes his black-rimmed glasses, which is why I made them a central part of the Intro animation. His quirky personality reminded me of old fashioned radio objects and style, which guided my choice of images, font, and color. The site should feel retro, approachable, and intellectual.

General Site Functionality – This site will be constructed in Flash. The dimensions of the browser window must be 960×700 to see the full screen. If the window is smaller, the site will be cropped and scrollbars will be needed to see the rest of the site. If the window is larger, the image/navigation will remain in the horizontal and vertical center of the window and the remaining space will expand the black background. The background will remain black throughout the site. Text on the site is the font Clarendon. I chose this font because I felt that it matched the quirky, retro tone of the site and was also functional at various sizes. All subpages will also remain in the “grill” space of the radio frame navigation.

Intro Animation Details – Upon entering the site, the browser is black. An image of the glasses reflecting a radio dial fade into view and after a moment, the flash animation will begin, and the red dial will arc from left to right across the lenses. The red dial will disappear below the bottom rim of the right side of the glasses frames once the page has loaded completely. The homepage radio frame then fades into view as the glasses fade out.

Navigation Details – When the visitor lays his cursor over one of the six white buttons on the bottom of the radio navigation frame, the individual button’s navigation text indicating the destination appears underneath the button. When the user clicks on the desired button, the button animates as though it has been pressed. The space inside the “grill” of the radio frame then fades into the destination page contents.

Home Page Details – The main structure of the site is contained within the frame of the old radio. When the home page first appears after the Introduction animation, it will consist of the radio frame and navigation. The “grill” of the radio framed in the center of the browser contains the left side image of Ira and the “Ira Glass” title. After a moment, the rest of the home page fades into view. Whenever the visitor lays his cursor over the image of Ira, he smiles and winks.

About Page Details – A Polaroid image of Ira appears on the right half of the “grill” space. Text about Ira’s life and career is in the left half, and additional text can be viewed by adjusting the scrollbar. This subpage will remain in the main radio navigation frame.

Links Page Details – An image of Ira pointing in front of a black background will appear in the “grill” space of the navigation frame. A list of links will appear to his right (our left).

Media Page Details – An old-fashioned television appears in the center of the “grill” space of the frame. The buttons on the right hand side of the television control the Play/Pause/Stop/Mute functions of the video. The video clip appears on the television’s screen once the Play button is pressed. The clip is the first of a series of clips of Ira talking about the art of storytelling.

List of Tutorials Used:

Lynda.com – Creating a First Web Site with Flash CS4 Professional: Using the Adobe Media Encoder to Encode Video, Playing video using the FLVPlayback component

GRA500 Blog Posts – Flash Video Basics

A few tears of anger (not as many as last time though!)

Ken Harper

DC First Flash Website

March 8, 2010 |  by  |  Project Two, Student Work  |  , , , , ,  |  Comments Off on DC First Flash Website

Project 1

Rationale::

The drawn branch is the only element to survive form project 1 to project 2. I threw out the textured backgrounds, mountains, flowers and a whole bunch of other crap to create this stripped down scene.
I like how each state is just a small window of the overall whole.
The site opens up on the branch, with a sketched version of myself swinging from the tree on the bottom of the frame and a clothesline to the right with links to my portfolio.
One of the most popular reactions to the site so far is that it is “very me” which I guess is the goal.
Most of the illustrations were hand-drawn in illustrator using a wacom tablet and the pen tool. Since this website is about me, I made sure all of the elements were self-generated.
The animations are relatively simple (although we all know simple in flash can still mean hours of tweaking!).
The transitions are simple shifts and zooms to match the simplicity of the site. When you click on the clothesline thumbnails, the site zooms in. In the future I will embed players to view all the images in each portfolio. I am also still working on creating tooltips.

I definitely referenced a bunch of tutorials, especially those on the blog, but here are a few I remember::

Create Links

Tooltips (via Azar)

onComplete

Conditional Statements

I lost the folder with my inspiration images when my thumb drive crashed in the beginning of the semester but I looked at a bunch japanese style paintings for inspiration for the branch and the bird as well as searching those terms in iStock photo. Suggestions from Harper and DMillz led to the creation of the tire swing and the portfolio clothesline.