Author Archive

Monica’s Re-post (since I mucked up the first time…)

April 14, 2010 |  by  |  Project Four, Student Work  |  , , ,  |  Comments Off on Monica’s Re-post (since I mucked up the first time…)

Barron Live from 315 Submission

I really liked the idea of showing a grid of thumbnails of the different videos. I imagine that once the user is on the homepage, it would look something like this. To add some motion and life to it, the thumbs from each of the videos could animate randomly for a few seconds at a time. When the user rolls over the thumbnails, a title and brief caption will appear in the thumbnail area.

To incorporate the video transitions and the idea we came up with in setting the environment on a table/desk, we could lay the grid over an empty area of the dark wood tabletop, and once the video is clicked, the camera could move over the table to the appropriate genre transition. The wires laying on the table at the top right corner tie in the appearance of other objects on the desk. The video could scroll up to show the rest of the headphones attached to those wires as it moves to the “About” page, or some other subpage. Once the transition is over and the subpage has been reached, a translucent box for the video player will appear over the table/objects, and then once the user presses Play, the video will go to full screen (see below).

And as much as I didn’t want to go with orange and blue for a color scheme, it worked well with the dark wood texture. It doesn’t have to be blindingly obnoxious orange like we’re used to at SU, but a paler orange and a light blue. Dark, textures, warm, and ambiguous enough for all the genres.

INSPIRATION

For the grid: Uniqlo Mixplay

For the overhead table look: Lionways

FUNCTIONALITY

  • Video pan over objects on table
  • Camera stop, grid of thumbs pops up
  • Once a video is selected, camera pans back over to chosen objects representing video
  • Video player appears for visitor to hit play
  • Video goes to full screen for duration of video
  • Navigation always on top so user can easily choose new videos or sub pages

CATEGORIZED

April 7, 2010 |  by  |  unfathomable  |  Comments Off on CATEGORIZED

 Okay kids. Here’s what we decided today in class for dividing these bad boys up. The names of the categories themselves may need a little work, but I think we did a good job of grouping them. From here, we need to start thinking of visuals and gathering supplies for the shoot. So gather up your bitches, bitches, bitches, and get to it.

 

ORCHESTRA

Harpist

Wind Ensemble

Violin Repairman

 

CHOIR

Charles with Gospel Church

Orange Appeal Acappella

Unity Choir

 

THERAPY

Dementia (cute sweater lady)

9-5 Music Lessons

Alzheimer’s Group

 

FREE SPIRIT

Mother Earth

Vinyl Collector Dude

Bandeir (kid in basement?)

Liz Lewis (solo guitarist, SU Student)

 

DANCE

Battling Break Dancers

“Slave Dancers” who are NOT Sophistafunk

Fritz Polka

 

HIP-HOP

Reggae Guy

CD Burning Studioman (“Bitches, bitches, bitches!”)

Tots

 

WICKED HAHD COAH?

Straight Edge (screaming punk)

The Hunter, The Pianists, and The Pope (aka WTF?)

More of Monica’s Ideas for 315

April 7, 2010 |  by  |  unfathomable  |  Comments Off on More of Monica’s Ideas for 315

Team Preference

Since 100% of the class is more talented than I am when it comes to coding, Flash, etc. I should refrain from joining the Design team. Sure I think I could design a pretty site, but I think I should leave the hardcore stuff to the pros in our class. I will help track down Bios if that’s alright. I still want to help out in any other area of production whenever I can!

 

Categories

I’m having a hard time finalizing category names without having seen the rest of the videos, but I thought that they could have a theme of motion, since we’re focusing on feet. Something along these lines…

How we roll  /  Jump in  / Running start  / Hop to it  / Get down  / Wander around  / Pop up  / ?

 

Transitions

If we’re sticking with the feet flat on the ground in a circle like the way they were in the inspiration site, then once the feet are clicked the screen could rotate very quickly so that those feet are right side up (depending on where they’re located in the circle) and zooms in so that they are now the only feet we see. The feet begin walking/dancing/rolling (wheelchair?) to the right, camera pans right following them and stops for a second as the feet continue moving right and off camera. Then the videos and navigation pops up. To get back to the homepage we have a Live from 315 icon at the top at all times.

Monica’s 315 Homepage Concept

April 5, 2010 |  by  |  Project Four, Student Work, unfathomable  |  Comments Off on Monica’s 315 Homepage Concept

As I posted before, I really liked the idea of showing a grid of thumbnails of the different videos. I imagine that once the user is on the homepage, it would look something like this. To add some motion and life to it, the thumbs from each of the videos could animate randomly for a few seconds at a time. When the user rolls over the thumbnails, a title and brief caption will appear in the thumbnail area.

To incorporate the video transitions and the idea we came up with in setting the environment on a table/desk, we could lay the grid over an empty area of the dark wood tabletop, and once the video is clicked, the camera could move over the table to the appropriate genre transition. The wires laying on the table at the top right corner tie in the appearance of other objects on the desk. The video could scroll up to show the rest of the headphones attached to those wires as it moves to the “About” page, or some other subpage. Once the transition is over and the subpage has been reached, a translucent box for the video player will appear over the table/objects, and then once the user presses Play, the video will go to full screen.

And as much as I didn’t want to go with orange and blue for a color scheme, it worked well with the dark wood texture. It doesn’t have to be blindingly obnoxious orange like we’re used to at SU, but a paler orange and a light blue. Dark, textures, warm, and ambiguous enough for all the genres.

Monica’s Brainstorm

March 31, 2010 |  by  |  Project Four, Student Work, unfathomable  |  Comments Off on Monica’s Brainstorm

5 WORDS: Irreverent   |   Passion (yes, we said it in class, but it came up several times in the clips)   |   Casual   |   Hopeful   |   Lifestyle

5 KICKASS SITES:

Not anywhere near “kickass” but I liked the way the video clips were laid out in a grid here with thumbs. When you click on one it covers the whole player and then shrinks back down when it’s done.

 This is a much slicker way to lay out the videos in a grid like I mentioned with the CNN site.

I liked the interactivity and the retro feel of this.

Dark colors, intimate setting that makes the viewer feel involved. Could work for multiple genres of music.

Although it’s not really consistent with what my “vision” entails, it seemed pretty slick and had a lot of potential for not getting caught up in only one particular genre of music. (and for more night club style inspirations…)

MY “VISION”:

I had this vision of vintage concert posters with vintage type, and dark wood in the back., not a lot of color Something like a combination of these things:

   

I would want as minimalistic a frame as possible, focusing on the videos and the thumbs. There is SUCH a wide variety of styles with this project that to cater to any genre in particular would be a crime to the other artists. You can’t cater to the tater (aka Tots) and then leave the Mother Earth lady hanging. I thought something evoking a pretty generic, vintage poster would fit the style of just about everyone.

I watched some of the videos full screen and some of them in a window filling about half the screen, and I enjoyed my viewing experience much more when they were full screen (especially on those big beautiful lab monitors). The people are passionate and the visuals are great, so its much easier to be absorbed into it when you’re not distracted by outside elements around the player. So the videos will definitely go to full screen.

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

Monica’s First Flash Project (aww…)

March 8, 2010 |  by  |  Project Two, Student Work  |  ,  |  Comments Off on Monica’s First Flash Project (aww…)

(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.

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. (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:

Lynda.com, 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 (help.adobe.com)

Google-ing random things.

Tears of Anger

Tears of Joy

Sweat

Prayer

Ken Harper

Kickass Preloaders

February 15, 2010 |  by  |  unfathomable  |  1 Comment

http://www.smashingmagazine.com/2008/03/13/showcase-of-creative-flash-preloaders/

A showcase of Flash preloaders courtesy of the almighty Smashing Magazine. My favorites are the ones for Section Seven and ONY. Wundervoll!

Shorpy.com – It’s not old… It’s vintage.

January 25, 2010 |  by  |  unfathomable  |  , ,  |  Comments Off on Shorpy.com – It’s not old… It’s vintage.
Shorpy screenshot

Vault of high-res vintage photographs.