Posts Tagged ‘First Flash Project’

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

Azar | First F**** Site

March 9, 2010 |  by  |  Project Two, Student Work  |  , ,  |  Comments Off on Azar | First F**** Site

PROJECT OVERVIEW
This is an autobiographical visual representation of me, Chris Azar. It features three sections, an introduction, a heart section and a head section. The mood of the piece is surprisingly more dark/creepy than I had previously imagined. However, once I recognized the organic elements I threw out my word mark (which is clean and in helvetica) and replaced it with my hand written signature. That signature for now is one of three elements of navigation. I will continue to add to functionality of every section in the site.

This is merely a work in progress..
I spent far too long in photoshop and developing content for this project and there a lot of things I didn’t get to or couldnt get to work in the action script. For example I created a new portfolio page over the weekend to be the target of an iframe but couldn’t get a function to work.I however am not defeated and will get shit to work. I also wanted the pencil to link to my blog. I will probably also add a small music player and a pre-loader for the next round. I would also like the heart/head items to go in reverse back into place, Finally, I would like to add tool tips to all the items in the heart/head sections. (Especially because a portion of the heart section is in french.)

ANIMATIONS
So far what I have are three stop action sequences and a bunch of tweens. I’ll start with the heart items. They all pour out of a masked hole where my heart may be. They have a red tint that fades as it loads over 30 seconds. The items on the left represent my immediate family. My parents split in 99 and now live in separate towns in RI. The towns (bristol and tiverton) are located on either side of the mount hope bridge (pictured in green). Rhode Island is the Ocean State and a golden anchor is featured on the state flag. The phrases in french read Tout le monde coule.. mais je demeure. In a french poem “le point” (the bridge) represents stability and values while the water represents life as flowing and constant. So the french phrase in English is the world flows.. but I remain. I love the symbolism and the physical division that the bridge is in my life. It’s just a bonus that the bridge is visually beautiful. So my parents flank the bridge. My mom is 100% irish and is represented by the clovers. My dad is 100% lebanese and is represented next to the cedar of Lebanon. Ever since they split my kid sister (16 year old Maggie Azar) has packed up and traveled with me every week on Sunday night to the other parent’s house. She is the beautiful butterfly that floats between the two parents. She has always been an avid reader and is seen against a couple bookshelves. She is the first one to emerge from my heart intentionally. The images that are on the right are images of friends from RI. There are a lot of inside jokes connected to the things in the carriage. I will add otto and sports symbols (running and biking and red sox) to the right side as well.

This site was very therapeutic even through the frustrations with as3. I didnt realize that making a rationale would entail my life story haha.

The head items are for my portfolio and my blog. I will add social networking links and a link to my resume in there too.

AUDIENCE
This site was made very selfishly. It was crafted primarily with the subject in mind (me). I guess prospective employers interested in seeing my portfolio/flash skills/creativity, would be my audience. But in reality, my mom, (who has a flash player and a monitor wide enough to accommodate
950px wide stage) is probably my main audience.

RESOURCES
A wicked lotta shit..

lynda is easy.
ended up getting addicted to learning and bought a subscription.

This is what I used to install a tooltip.

The tutorials on this blog.

Special thanks to you harper for sorting through that batch of errors for me. It really got me started.

I have a few more bookmarked that I haven’t used yet but will.

EMBEDDED SWF

ZIPPED FOLDER
Azar-Project2 Zipped

David’s First Flash Project

March 8, 2010 |  by  |  Project Two, Student Work  |   |  Comments Off on David’s First Flash Project

PROJECT OVERVIEW
This is intended to be a Web site for the always eccentric musician and actor, Mr. Tom Waits. Waits is untamed and a little gruff.. sort of mumbly, has a bit of a bayou swampy flare and charm to his personality, and that’s why people love him and his music. To capture these aspects of Tom, I kept my color palette to a warm, earthy mixture of greens and reds and tans. Backgrounds and skies are made of animal skins, and many elements are meant to reflect a sort of travel/antique map sort of look (hence the map border, and the early 20th century propeller plane that makes an appearance every so often) think safari meets Louisiana bayou. Everything is supposed to look like a real place, but in a dream-like, bizarre way.

ANIMATIONS
Introduction (might only be visible when the page first loads, it goes away quick!)

  • This is meant to be a “loading screen” but it doesn’t actually work, its fake.
  • The compass needle spins around 360 degrees, then the compass slides down the page and gets smaller, coming to a stop at the map border, where it remains as the top of the navigation menu
  • The page fades into the “home” page

Home page

  • If you hover over Tom, he glows!
  • Once you’ve hovered over Tom, quotes fly in from  offstage left and right . Tom is famous for his word play and crazy song lyrics.
  • Click on Tom and he will begin to sing “Pasties and a G-string”, one of his raunchier songs.
  • Click on the wheat below him to make him stop singing.
  • If you hover over the compass, the navigation menu pops up and you can go to the different sections

Music

  • By default because of where the cursor is, the page might look a little frozen, but don’t worry- it does stuff!
  • Move your cursor away from the gramaphone (old record player) and the song info box will dissapear
  • Move your cursor on to the gramaphone and it will bob up and down in the water, creating ripples, and the song info will pop back up
  • Click on the bottom song in the song info box to hear “Little Drop of Poison”
  • Click on the middle song to make “Little Drop of Poison” stop playing

Tour

  • If you navigate to the tour section, the propeller plane swings by for a bit, and clouds begin to role in, setting sort of a foggy up in the air sort of mood- it’s Tom’s tour, he’s traveling.
  • If you mouse over the names of the cities going along the mountain ridge, the names change to dates and the bars underneath do a little bounce action
  • As per the (really good) suggestion from someone in the class (Sam, maybe?) additional tour information is displayed for each city on the tour in front of the mountains. Now you can figure out how to buy the tickets

AUDIENCE
My audience for this site is definitely current Waits fans. I hope that this site would illustrate Tom’s character to a non-fan, but I think, overall, it makes a little more sense to someone who has heard his sound and gets his schtick. They probably are also pretty weird themselves, fairly tech savvy, and don’t need to spend much time searching for the info that they want about Waits. They know what they want to know and where to go to get it. The site is really more of a fun, alternate depiction of the guy, not necessarily supposed to be info-heavy and super biographical.

RESOURCES
Lynda, isn’t she wonderful?

Dynamic sound fade – not yet implemented, but maybe in version 3?

Using sound in AS3

Republic of code

TweenLite

Hours of iTunes like no other

ZIPPED FILES

Miller’s project II, all zipped up.

Sam’s Flash Project!

March 8, 2010 |  by  |  Project Two, Student Work  |  ,  |  Comments Off on Sam’s Flash Project!

Sam’s Zip File

Visual Message

The goal for my website was really to reflect upon LIGHTS’ personality. It is more of a cartoonish version of space, so I needed to have the basics like a flying rocket ship! It has 3 main pages and the intro page. The pages are the home page, a page with video(which does not play video) and a music page (which does not play music yet). Overall, it needed to be fun. Her current site is very related to space and she describes her music as intergalactic.

Audience

The audience of this site would be younger. Her music is more electronic and pop, so older generations would probably not enjoy her music. So the age group would be some kids, teenagers and young adults. All of which have a pretty good idea of how to use the internet. So the navigation was made so one can search around the site, or just use the control panel to get around quickly.

Animations

The site starts with an animation of a moon and a chain swinging. When clicked the chain gets a bit longer and  the site begins to load. The moon fades away, her name appears, fades out and you get to the home page. On the home page you can do a few different things. By clicking the glowing button at  the bottom of the page the control panel rises up with all of the navigation, along with bio, news and tour info, which open via hover. The button at the bottom of the control panel makes it return to its original position.

On the home page you can click either the purple or yellow planets. The music notes bounce around the yellow planet and the antenna on the television moves around on the purple planet. Each planet glows when you hover over it. When either planet is clicked, the rocket ship begins to fly to the planet, and the respective screen loads. Why have a scene in space if you can’t fly in outer space?

The yellow planet, or the music page features a radio. The radio will be functioning once we get more into adding music. After about 8 seconds, a shooting star flies through the page. From this page, you can go anywhere from the control panel, or click the purple planet to go there. The purple planet, or video page has a television on it. Music videos will eventually play on the screen. At this time, you can click the forward or backward button and it changes to screencaps of two of her videos.

Tutorials (or  lack thereof)

The only tutorials I used were the ones we talked about in class. My animations were fairly simple. I have lots of video and music that does need to be added though.

Errrr

I’m not sure why my .swf is showing up so small, or why at the bottom, what should be hidden is showing up. :-/ When I preview it in Flash, it does not look like that. I didn’t even change the size of it when I uploaded it.

project no.2 by renée

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

[the image]
To keep in style with the works of Pineles, this web site uses a clean and sophisticated feel to emulate her designs. Other images hint at the time period of the start of Cipe’s career, including the antique typewriter highlighted on the typography page. Other items such as the string of pearls symbolizes her feminine side. Every image that is used throughout the site has a direct influence from the life and work of Pineles.

view my full rationale

reneeStevens_project2.zip

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

MaXx’s First Flash Project

March 8, 2010 |  by  |  Project Two, Student Work  |   |  Comments Off on MaXx’s First Flash Project

My home page

Download: MaXxProject2

Maxx Berkowitz – GRA 500 Project 2 Rationale

My goal for this project was to create an idea for a web presence that represents me. When I thought about what aspects I thought were relevant to me, I came to a list of contrasting ideas, edgy, artistic, a little grungy and messy, but on the other hand clean and professional, that is how I see myself. To achieve this look, I decided to do a mixed media type of site, photography and composites mixed with sketched styles. I want to incorporate animation elements (“Easter eggs”) throughout my site to keep it entertaining and interesting for the viewer.

As I have learned more about flash, there are definitely some things that I realized I should have done (e.g. flatten masks, and adjustment layers, reuse aspects more, trim layers smaller, and think about different states of things better). There has definitely been a bit of an evolution with this project, although I’ve stuck fairly close to the original, I unified the skies, so I use one sky across all states, and tried to simplify the portfolio page.

HOME Page:

Motion items: “rcPlane_mc” flys across the screen slowly, with a tail banner with “Maxx” waving behind it. The numbers and ribbons on around the plane will also animate and change

The clouds and “Hot Air Balloon” slowly float around, and the Birds (Sky/“Birds”) will flap their wings.

On hover the “Moose” will turn its head, the “Wind Farm” rotates their propellers. “MaXx Leaping” jumps between mountains and elements in the scene, and the “Maxx Pop up camera” will pop up and flash a picture.

Navigation (across all pages):

When someone hovers over portfolio (“Nav Portfolio Hover”) the triangle hinges open and all of the text and the picture fall out and arrange themselves, “Nav Home Hover” makes the top triangle swing; when hovered over. About (“Nav About Hover”) will fly out of the screen with a bang. When hovering over contact the triangle (“Nav Contact Hover”) falls out and a phone falls on top.

PORTFOLIO Page:

Motion:

Each medium has its own unique display method, to get to each section you click on the area and you zoom in on the given area, to get out of an area you can either click a red “X” in a circle (“Exit Button”) or just click in an open area in the background.

Motion/video: zooms to the TV in the tree, where a DVD type menu shows up, to navigate this section you hover over the circle thumbnails, and the name of the project will appear above the dials. When a  video is clicked it comes up full screen on the TV.

Photo: is hung up on a line in the tree, when you click on a picture it is brought up to the bigger viewing area (Big Picture/“Picture Viewer”), which ever picture is selected the Polaroid will overlap the “Picture Viewer” box, and slightly change color.

Print: comes up on the easel, you can select different categories of print by clicking on the various boards, and then see different samples of my work by clicking on the Polaroid’s on the left. Information about each piece comes up in the “Info Panel” at the bottom, and can be toggled on and off if you click the “image info click here”

Web: when going to web, it shows up on my computer in the chrome browser, I based this interface off of the chrome browser, one of my websites shows up first, and a user can either click on the left/right sides of the screen (arrows appear), or they can click on one of the tabs in the top of the browse.

ABOUT Page:

I have always liked hot air balloons and they always fly over my house during the fall, we used to run out to watch them whenever we heard the big whoosh of the flame. I have also always loved games, so I thought it was appropriate to put the tic-tac toe, chess, and boggle, and Tetris on the surface of the balloon. The balloon moves gently,  maxxLeaping_mc  jumps over the balloon periodically. The text about me comes across dragged by the rcPlane_mc, and every 3 passes the plane makes a bird swoops up and defecates on the banner.

Motion to be done:

all sketched lines will animate as if they are being drawn, Birds will fly around, and the cloudDinosaur_mc will roar and move a little.

To get to information the “RC Plane” from the home page will fly around, and pass by with messages, most of the time it will have standard short bio text (RC Plane/ “Tail message”), but sometime will come with something random written on it, also every once in a while a bird (RC Plane/Tail Message/Bird Poop State/“Culprit”) will swoop up the screen and poop (…/“Bird Poop”) on the tail banner.

Transitions:

I wanted to have smooth motion zooms and pans between pages.

Between Home and About – the balloon either rises or falls between the two states.

Between Home and Portfolio – there is a quick pan and zoom.

About and Portfolio the balloon will come down and bounce before sliding and changing places with states.

LINKS Used or Referenced:

Lynda.com

advancED Flash interface Design

ActionScript 3.0 Language and Components Reference: Timers http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/utils/Timer.html#event:timerComplete

AS3 Events Explained: Using Event Listeners: http://gamedev.michaeljameswilliams.com/2009/02/06/using-as3-event-listeners/

AS3: The “If” Conditional:

http://www.republicofcode.com/tutorials/flash/as3conditionals/

AS3: Loops

http://www.republicofcode.com/tutorials/flash/as3loops/

TweenMax Getting started:

http://www.greensock.com/tweenmax/

I’m sure that there are more too, but forgot to write them down.

Disclaimer –  I have to admit that unfortunately this project isn’t up to the level I would like it to be, but I put in a lot of time, and I think I just overshot for what was reasonable for my first flash site, but it’s coming along slowly.

Download my zip file