MaXx Berkowitz Project 3

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

fishfish_short

Download project ZIP:

MaxxBerkowitzProject3 ZIP

Maxx Berkowitz – GRA 500 Project 3 Rationale

My goal for this project was to create an a web presence that represents me.  At the beginning when I thought about what aspects I thought were relevant to me, I came to a list of contrasting ideas, edgy, artistic, grungy and messy, but also 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  differently (e.g. flatten masks, and adjustment layers, reuse aspects more, trim layers to screen size , and think about different states better). There has definitely been a bit of an evolution with this project, although I’ve stuck fairly close to the original concept, I unified the skies so there is one sky across all states, re thought the home page and tried to simplify the portfolio page a little.

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, small popping noises are heard when each word pops up, “Nav Home Hover” makes the top triangle swing; when hovered over. When hovering on about (“Nav About Hover”) my eye shows up and blinks on the sign . When hovering over contact the triangle (“Nav Contact Hover”) it falls out and a phone falls on top of it.

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 a page from the navigation.

Motion/video: zooms to the TV in the tree, to navigate within the videoFocus 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, the movie controls fade in and out when the mouse is over or off the screen there are custom play, pause, back/stop, seek bar, mute, and volume buttons. THE ACTIVE VIDEO IS THE SKATEBOARD VIDEO, there is no sound in the video until the skating starts.

Photo: (not currently active)
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 often fly over my house in CT during the fall, we used to run out to watch them whenever we heard the big whoosh of the flame. Games have always been a big thing in my family, so I thought it was appropriate to put the tic-tac toe, chess, 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, with short bio text (RC Plane/ “Tail message”), 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.

Future expansion Ideas:
Every square on the balloon will glow or have an action when the mouse is hovered over any part of it.

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:

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/

adding seekbar/volumebar:

http://www.adobe.com/devnet/flash/articles/skinning_as3_flvcomp_03.html

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