Monica’s First Flash Project (aww…)

March 8, 2010 |  by  |  Project Two, Student Work  |  ,

(Zip it.)

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.


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. (Hopefully) once the final Flash site is developed, all hovering and navigation animations can be made while the animation/sound clips are playing simultaneously. All subpages will also remain in the “grill” space of the radio frame navigation.

Introduction 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. Once the final site is developed, the visitor can turn the left knob on the bottom of the frame to adjust the “station” playing an audio clip of Ira’s voice. The black line of the knob will indicate how far the knob has been turned, and the red dial bar will move accordingly along the station indicators panel. As the knob is being turned and the bar is moving, the red bar and the stations panel will glow. The right knob adjusts the volume of the clip, and the black line on the knob moves similarly to indicate the volume level. Once the visitor stops turning the TUNING knob, the selected audio clip will begin to play. The ON AIR sign will glow red, and the text describing the currently playing clip will scroll in from behind the sign, moving left. The yellow sound waves will also animate over the stations panel while the clip is playing. When the clip is complete, the ON AIR sign letters will no longer glow red, the clip descriptor text will disappear, and the yellow sound waves will quickly fade out. The visitor can adjust the TUNING knob to begin playing a new audio clip. (I tried to get the knobs to turn and found several codes, which are in the a layer for the knobs movieclip of the final Flash file, but I couldn’t make it happen.)

Subpage 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. On the about page, 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.  An image of Ira pointing in front of a black background will appear in the “grill” space of the navigation frame on the links page. A list of links will appear to his right (our left).

List of Tutorials Used:, Creating a First Web Site with Flash CS4 Professional/Creating a First Web Site with Flash CS4 Professional/Creating Sections

GRA500 Blog Posts, PSD to Flash and our First Animation | Phase 6/PSD to Flash and our First Animation | Phase 5/PSD to Flash and our First Animation

Using Adobe Flash CS4 Professional (

Google-ing random things.

Tears of Anger

Tears of Joy



Ken Harper