Sam’s Project Three!

March 24, 2010 |  by  |  Project Three, Student Work  |  , , , , , , ,  |  Comments Off on Sam’s Project Three!

download the zip

I hope this ends up working. I couldn’t figure out where/how to upload the .xml file for my music player. So it probably won’t work on here. But it does work on the regular file. At least it is showing it in the proper size this time.

I haven’t had the chance to edit some of the things from the last part of the project since I have had flash for like 2 1/2 days! That normally prevents one from working on a flash project.

Addition of Video and Music

For my use of video and music I added video to the television and music to the radio. I had to edit the buttons to make them fit with the style and with the necessary buttons for the the two players to work. I also wanted them to been relatively simple to use. The target viewer probably won’t have any trouble getting the music or video to play. I really already had the setting for the two players set up prior, so it was just a matter of adding the fancy code to make it all work.

Tutorials

The video tutorial from this blog and this post on Republic of Code for the music player.

Aaron Katchen: Third Project – Video

March 24, 2010 |  by  |  Project Three, Student Work  |  1 Comment

PROJECT OVERVIEW
This project added a video player to the Justice site I’ve been working on. The main information of how to use the video component, etc, was obtained from the class blog, but everything else that I used (scrubber, volume controls, fading toolbar) was a lot of trial and error, since I was unable to find too many tutorials relating to this.
I added the video in, which I grabbed from YouTube. I placed a “painted” background behind the video to give it some context. I added the fading toolbar to make it seem more “professional”. The volume slider was more or less an exact copy of the volume slider I used for the music player. The scrubber on the other hand was a new world. While some of the concepts were the same as the slider, it added a whole new world of troubles. I managed to overcome them, although I’m still not sure exactly how. When something works, don’t touch it. There are some minor glitches related to the scrubber, but they’re nothing serious, and I can’t figure out how to get around them right now. (IE, when any toolbar icons are clicked the video glitches a little).
I cleaned up some things from the previous version too. I inverted the colors on the tour map to add more contrast and the song info scroller in the music player no longer scrolls while paused.
ANIMATIONS
The only new animation is the video player. The scrubber is a type of animation I suppose. It moves as the movie plays.
AUDIENCE
The audience for this project would be younger people interested in the group. This is not really a site to learn about who the members are, but more about what they do and I think the overall vibe gives that off.

Aaron Katchen – Justice Project 3

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