The real, real final

Final Project

fought with this thing long and hard.

finally threw my hands in the air and completely rebuilt it using Tweenlite.

Thank you tweenlite you are my best friend.

ervin_final

Project is progressing, still need to lay in actionscript and finalize the end result pages.

I think the best way to show my actual files will be by uploading them to various sites and linking to them offsite. That way I dont make my flash file itself too huge.

Next steps will be:

uploading video footage to youtube
uploading images to photobucket or similar site
actionscripting
offsite linking
testing

update

The library is complete. However the size is way too large, at 1.5gigs roughly.

Button has several possible "styles" with currently 6 separate possibilities.

only animation left to do is actual "phasing in".

( A ) ervin_16

---The idea, or theme, behind my portfolio site will be an emphasis on navigation, specifically navigation through portals/orbs.

The site will begin with a parent orb, when user clicks that orb it opens a series of orbs representing categories. Each category will open still more orbs that include individual projects.

Each orb will be halved, one side green, one side red. Green will progress you, red will bring you back to previous step.

Individual projects will be present with a translucent black background in its own window.

---SITE MAP
(edit in scan here)


---B1: Smooth, clean interface with conservative color scheme.
B2: Simply one word: Professional. The site should be clean and smooth as stated before, with very minimalist aesthetics giving it an industry friendly, politically neutral appearance.
B3: Navigation through portals/orbs. I refer to them more as portals because they lead to other things, artwork, resume, blogs, ect. Again I want to push the formal aspects. The navigation will be unique yet direct, exactly the level professionalism I wish to get across.

Project Blood

1)

The final rendition of the blood project includes an aeshetic overhaul. The structure has not changed however the individual animations have been given a high amount of attention.

FINAL VERSION OF BLOOD PROJECT


2)

a) Portfolio using similar interface to previous project
FINAL VERSION OF BLOOD PROJECT
using circles to navigate and taking away the "medical" theme, replacing it with a clean, simplistic design.
similar to this flash game:Biggest difference is each "cell" would open up a new window featuring an individual project/page.

ex of navigation:
1) user opens page, single dot
2) user clicks dot, opens submenu dots (resume, project links, ect)
3) user clicks sub dots, opens sub menus


b) interactive hand eye coordination game using simplistic rules and visuals.
HAND EYE COORDINATION TEST

ex of navigation:
1) game opens with directions/splash page
2) user uses mouse to navigate a maze
3) as levels progress, games get more complex/difficult.


c) interactive story similar to "choose your own mystery" series.
Custom flash game, game
As far as the actual plot/story it would borrow from already existing stories (sherlock holmes), but hasnt been completely fleshed out yet.

ex of navigation:
1) mostly text based story, end of paragraph concludes with a) walk in room b) sit in room (hokey example but works)
2) if user clicks A, storyline A begins to play out.
3) large tree of possible stories.
4) little to no visual animation beyond the progression of frames throughout the story.

Blood Drive Ervin_14

The "blood drive" project is a visual interaction, I hesitate to call it a game because there is no real goal.

When the user mouses over the central cell, it completes mitsosis, and splits apart into many cells.

When the user clicks the central cell, all children cells come back to the parent.

When user clicks individual children they return to the parent.

My goal was simply smooth interactive animation with a clean, well designed interface, that the user can "dance" with. Playing off the "dancing" visual that occured when multiple objects moved in unison on my test project.

To dance simply start clicking wildly, mousing over back and forth over the central cell.



PROJEKT !4

Ervin_13

Lucky 13.

import JE.TweenLite;

also tried the identical,

import gs.TweenLite;

does not work, even though it works in the demo file. I am not sure if I missed a step but everything looks identical structurally but the outcome is not the same.

If it were to work it would wait for user to click an orange pentagram, upon clicking it would move the big circles on top of eachother and increase their brightness, and the other circles would stack in a different pile and turn translucent.

As for revisions on previous project Im still having issues with anything more than one level, so i have multiple one level projects.

TweenLite Test
REVISED DND

Project 12 = sick

unfortunately i came down a fever last night and am still sick today.

Though on project 12 Im pretty happy with the aesthetics of my game, and havent changed anything except the question mark "help" button.

If you want, feel free to open my name and pull it to server, unfortuantely cant do it here at home with a towel over my head. The user name and password are defualts.

SWF Links as of April

PROJECT ONE

PROJECT TWO

PROJECT THREE

PROJECT FOUR

PROJECT FIVE

PROJECT SIX

PROJECT SEVEN

PROJECT EIGHT

PROJECT NINE

PROJECT TEN

PROJECT ELEVEN

justin_11_

The project has its problems.. honestly I think flash just doesnt want to do what I want it to do, at least not how i want to do it, but Ive learned quite a bit in the process.

Each file is labeled ervin_(number of levels)_(version)
none of the versions are 100% debugged, but I felt that I needed to show my work, and each shows a different approach.

As you progress in levels the hittargets mysteriously dissappear (some stay, some go, nothing different that I can find)

Eventually, assuming I can debug the issues, Id like to have moving or even morphing obstacles, color changes, ect. I kept it simple because of the bugs, I didnt want the complicated aesthetics to cause confusion, and I also think its important to ramp up the difficulty over time and not just throw the user into moving obstacles off the bat.


CLICK HERE FOR AWESOME SWF

Where it begins

For the first project, to be in series and eventually a larger game, I will create one level of the aforementioned game.

There will be no clock.

There will only be one level.

Only uses movieclips and if/else statements.

Simply, user drags shape to desired shadow, if user misses, user fails and it resets. If user wins, message displays saying "winner" and game resets to menu.

Speed Shape Recognition and Reflex Test

Shape recognition game:
-user takes shape and has to fit it into corresponding shadow form within X seconds.
-digital clock readout at bottom right
-start/spawn button bottom left
-shape spawns bottom center
-one to twelve (based on level) different obstacles to avoid based on level.
-user cannot bring shape over incorrect shape or loses, must avoid objects.
-if user doesn’t choose correct shape or runs out of time, buzzer sounds and red “x” goes over screen and game resets to menu.
-if user gets correct shape, green checkmark goes over screen and game goes to next difficulty.
-if user beats game, game resets.

-----
elements:
(1)splash page (leads to) --->
(2)intro page (leads to) --->
(3)game page
a) clickable MC "Go" (go_mc, starts game by spawning obstacles and shape)
1a)shape that spawns is clickable MC that is mouseoverenabled. User input: click and drag, if user touches obstacle game ends, else if user touches correct obstacle game continues to next level.
1b) go button to restart or continue.
b)each level is its own animation, containing different shapes/obstacles/color scheme.
c) sound effects if possible

Porjekt 7

While designing and building my "media gun" I strove for a graphic aesthetic that lends to the idea of "media" rather than just "gun". Each bullet is a news broadcaster of some sort, and the end result will be that each bullet leads to the same story on each news website. Thus a direct (and easy) comparison of news sources can be done, and one can get as many sides of the story as possible. 

A few things I already want to change: 

Bullets (more of them, clean up the design itself) 

Drag and drop bullets

Animation sends viewer to said news site in a new window after gun goes off

Return to main menu upon choosing bullet and watching gun go off

noticed that some of the "white" lines are being read as "no path" making the background bleed through. 

NOTE: currently having issues with the action script. 

updaht

Things that need to be clarified: 

-what "media" is being shot at the viewer, and how does it impact the overall direction.

-Background? plain black? Plain white? Color? Texture? possibly turned off TV screen.

-sound (specifically gun loading and gun firing) 

Calendar:

(out of town until Monday) (while out of town, sketches) 

Monday - elements created (media ammunition, bullets, gun, sound effects)

Tuesday - elements compiled together, gun animated, and rough project put together

Wednesday - Project cleaned up, media finalized

Thursday - animation/transitions/action script

Friday - cleanup

Saturday - finished file

Elements:

Gun

Animation of Gun revolving to viewer

Gun shooting

Gun loading

Media Bullets

either News media links, or Experimental Media clips

Sound

source video

http://www.youtube.com/watch?v=H7Dzkaephv0

the guns in these video games are similar to real life weapons, but theres no confusing them with the real deal. This is the sort of aesthetic i want to go with.

I was thinking along the lines of the first picture, which is hellboy's oversized pistol.

As far as the media that it shoots itself, I think either a) my original idea of using it as a portfolio assuming keeping the media aesthetic.

b) shooting news stories links to video ect.

Updates

Things I know for sure:

-Gun needs to be hand drawn and/or have the appearance of being hand drawn in order to push the idea of the gun being a "media gun"

-same outline as before

Next up on actionscript

Basic idea behind my next flash site is a portfolio website in which the navigation is built off the chambers/loading of a gun. 

1)User loads page = Gun revolves up towards viewer (similar to the "reload" animation of most first person shooter, or FPS, video games) 

Each bullet = different work. 

2)User takes bullet and puts it into gun

3)chamber closes

4)gun revolves toward viewer

5)fires

6)flash of white

7)animation/portfolio item begins

As to the conceptual value of the gun, I simply like the aesthetic of it, but I dont want it to become an NRA flash site.... so the gun is going to be based off of video game/comic book dimensions and overall "feel". The bullet menu allows for an infinite amount of easily created submenus. 

noots

Code to link outside flash movie. 

function onClick( event:MouseEvent):void

{  

var targetURL:URLRequest = new URLRequest ("http://www.google.com");

navigateToUrl(targetURL);

}

Redesign Container

From its current state:

1) clean up the structure

a) put og animation in nested layer and reduce size to fit inside chatbox

b) frame flag/name segments for easier navigation

c) On second fly-out chat-box change "chat with SafeisSexy" to "chat with JustinErvin"

2) clean up original menu

a) take away "box" where avatar should be

b) link to ppgmr from the plannedparenthood username_link

c) remove "couple" avatar and replace with PP avatar originally used as the username.

d) revise capitalization issues 

3) actionscript coding

a) interactivity of the menu

b) buttons

nohta

frame labels:

must begin with letter, no white space sp. characters or dashes. underscore ok

use prefix/suffixes (ex. sdfas_btn for sdfas button)

unique name in properties window

event. listener = gets the commands

double click button for special button timeline,

control > test scene for preview

action script

code in main timeline, in its own layer

 

"   act_mc.buttonMode = true;    " tell movie file to act as button (hand to click)

comment out:

// asdfasdf //

or 

/* asdfasdf 

asfsdfasd

asdfs 

*/ 

hit area: use shape tool in hit area editing window accessable by double clicking the button. Not editable in scene. 

actionscripting 

"y -= 5" y's numerical value - 5. 

instance name - must be unique, way for information to be tagged so it can be referenced back to.

event listener - takes in input, or tells flash to take in input at given event

function - what it does with the input

parameter - the range of input, found in between parenthesis 

event target - where the event occurs

blue text = actionscript terms

gotoAndPlay(2); 

goes to frame 2 and plays on a loop. 

movie clips play indep of the timeline, therefore main timeline could only have 1 keyframe for movie buttons. 

random cool flash animation

it has its faults... but also has its moments.

animation storyboard

As the text continues, the previous text is pushed upward. 

Logo Redesigns and animation ideas

For my redesigns I lightened the first idea up a bit, with some typical "chat" nuances. Though I started to like the more simple design of simply the tag line and url and letting the fact that the bubbles look like chat bubbles already do the talking for me, so to speak. 

As far as an animation is concerned I'm going to animated the actual chat bubbles popping up as though they were having a conversation via an instant messaging service. 

"I dunno...." (blue box)

"what?" (pink box)

"no sex > std heh" (blue box)

"safe sex > no sex :p" (pink box)

"lol" (blue box)

"safe is sexy" (blue box)

"ppmgr.org" (pink box)

Identity crisis

4th Planned Parenthood

vocab nohts

flash has capacity issues so use...

symbols - reusable graphic objects you store as part of your movie. (double click within library to edit a symbol) , modify > create symbol

instance - copies of symbols, instances, in which the information is being drawn from the original symbol. 

registartion point - action script/coding 

anchor point - point of rotation ect. 

Double "break apart" on text = easier/faster way to animate individual letters in an animation. 2ndly right click objects and "distribute to layers"

triple "break apart" allows editing of shape itself 

anything on stage is instance, to name instance = ability to customize

movie clips play independently of timeline, they can be a single frame

movie clips interchangable for graphic elements, though movie clips can be effected by actionscript due to naming option. 

-gotta render out to see effects/movie

-movies only publish first frame in .mov files, must be published as SWF

dont use "delete" key to mess with keyframes, instead rightclick and chose "remove" ect. 

posi eases out start fast slows down

neg eases in starts slow and speeds up

use blank KF to organize project, try to keep things "capped" 

Modify shape hint allows control over morph

Third Times a Charm

New Mockups

I've focused on the "Safe Sex > No Sex" idea. Despite the notion that it could be turned on its head and parodied to be "any sex > no sex" or something similar, the fact that it is so simple would still keep the phrase/logo/idea in the viewer's mind. 

Im leaning towards emulating the chat bubbles that appear in AIM, since it is often where the dating game plays out these days, and therefore not only relates to the idea of sex, relationships, and courtship, it also relates to the younger generations who spend much of their time texting. The so called "e-generation". 

The phrase/logo is short sweet simple and too the point. 

OG mockups

3 Project proposals

due to scanner difficulty I dont have visual aid, but here are my three concepts:

1) Gun with a condom

2) plain, bold text (poss Helvetica) "Safe Sex > No Sex" and on back "No sex > STD" 

3) Salt shaker near lips (weakest obviously)

Salty Gasp Warning Hot 

Warning; a hot salty gasp is eminent. 

Literal: Lips with Saltshaker

Abstractly: Sense of impending sexiness.  

Narrative: A couple's lips grow closer.

http://i67.photobucket.com/albums/h309/righand/BitingLips.jpg

http://pro.corbis.com/images/42-17406038.jpg?size=572&uid=%7B16B426D6-BBC1-42F5-B75D-D96931C5A03F%7D

Not Sexy

Ugly

Grotesque

Clumsy

Rough

Pock

Grease

Stale

Boring

Fear of STD

Fear of Pregnancy

Fear

Orange

Dogma

Church

Old 

Anti-safe

Danger

Hot

Burn

Ouch

Hazard

Health

Cold

Fire

Teeth

Warning

Hepatitis 

STD

Evacuate 

Careless

Haphazard

Pain

Rush

Fast

Red

Sharp

Sexy

curve

sleek

pink

tan

sex

sloppy

wet

hot

drip

condom

sweat

sweet

salty

gasp

ceiling fan

sheets

soft

hard

titillation 

tit

ass

booty

tongue

nose

ear

electric

shower

soap

hormonal

lips

glandular

smooth

tight

moist

humid

bed

pillow

window

sack of potatoes

food

ravage

Safe

Safe

Warm

Fuzzy

Secure/Security

Tight

Protect/Protection

Intervene/Intervention

Guard/Guardian/Guarded

"Out of harm's way"

Mother

Inauguration

President Barack Obama's inauguration was a historical moment the likes of which one is lucky to see within a lifetime. Regardless of political bias, if you even ignore the fact that he is half African American, the significance of the event bleeds through. The peaceful transfer of power from one "regime" to another. I use this term "regime" because we Americans seem to love to use that word when dealing with other countries and never our own, but there is no denying that it is a "regime" change in that the executive branch as well as the legislative branch (and therefore the possibility to alter the judicial branch) is changing hands, from a neoconservative movement to what seems to be a "green" democratic ideology. Two million people showed up to watch the inauguration in person, all scornful of Bush's last two terms, all from different backgrounds of any and all types imaginable, and yet the only casualty from the day was a hospital visit by an ailing Kennedy.