Corkboard

I've been thinking about a way to share friends' projects for a while now, and I finally went ahead and built one. Check out my corkboard.

I knew I didn't want to build a traditional portal. Whether it's a bunch of images in a grid, a combination of text and images (like blog posts), or a gallery with sequential images with one large/featured image and a bunch of thumbnails or navigation - I didn't want anything like that.

There's something interesting that happens when you have a disorganized collection of stuff. I wanted to create something closer to the physical, tactile experience hunting through a pile of old records, or photos, or a messy section of a store. Summaries are nice sometimes, but it's a different experience getting a small glimpse of something, then jumping into it with with no other preparation. That's what I wanted to make.

I searched through existing free or pay versions of this kind of this kind of interface, but none were customizable to the degree I wanted. I did find some existing drag and drop galleries, but none of them allowed the user to click on the image and open a pre-defined URL (and not a larger version of the image). Had I found a solution like that, I probably would have went with it.

Instead, I built a custom app in Flash. I've created Flash/XML galleries before, but this was more complex because it's dynamically duplicating images based on the number of items in the XML list instead of filling in a bunch of pre-defined spaces. From a technical perspective, making sure all of the elements had been loaded before the animations began was the biggest challenge. Once I had that working, the majority of the technical work was done.

I wanted a tactile experience, so I created an animation effect where the image lifts when initially grabbed - it rotates a bit, the shadow lightens and moves further away from the white border, and the tack lifts of and gets slightly larger. Subtle stuff, but it adds to the physical feeling of the app. This created some technical issues - the "drag" button is under the "view" button (the center of the image) and rotating it sometimes caused it to rotate away from the mouse,  causing it to get stuck. Some careful motion tweening fixed this. A little "pop" sound helps sell the tack removal/inserting effect. I kept the description under the image really minimal - only two or three words will fit, depending on their length - and I used a handwriting font (even with a bit of a blur effect) to keep the interface looking less digital and more analog.

I photographed all of the elements on my iPhone, then assembled them in Flash. As each movie clip is duplicated, it's given a random horizontal and vertical position, rotation, and one of three possible tack images. I made the corkboard image tile in the HTML (after removing the seams in Photoshop), and enlarged the Flash file to 100% so that the elements could (if their random start positions or dragging allowed) go beyond the bounds of the window. I'd considered adding a border around the Flash file itself, and making the HTML a wall element (like wood grain) but this effect - filling the window completely - worked out closer to what I was going for.

During the development, I also discovered a bit of code that allowed bitmap (raster) images in Flash to smooth - that's always been a problem in the past. That's always been a compromise when using raster elements in Flash - when the .swf is presented at anything other than 100%, or when individual images within the file are presented at any other size or rotation than their default (100% and no rotation), the images look jagged. The new code worked great - I'm glad someone worked out a solution. Unfortunately, it's executed within the Flash application, so it doesn't help the dynamic images. I did more searching and discovered the .forceSmoothing property - not sure how I missed that before, but by adding one line of code I was able to make all the externally-loaded images look beautiful. That was very satisfying. I was worried that it would slow down performance, but after playing with the app after the update, I didn't see any noticeable slowdown.

I also randomized the depths of the elements. Initially the pieces were all coming in in the order of the XML file, so the earlier images were always buried. After trying and failing at randomizing all of the duplicated movie clips after they were created, I used the "sleep on it" method and instead randomized the order in which they were loaded from the XML-created arrays into the duplicated movie clips. That worked out much better, and now any project stands an equal chance of being at the top or bottom of the pile. And once a project is dragged, it moves to the top of the pile anyway.

After I had the basic app working for a couple days, I made a couple big tweaks. When I started the project, the images were much larger, but because the number of projects kept increasing (to 117, at the time of this posting) I had to reduce their size. I went back and created three buttons at the bottom of the page that allow the user to resize all of the elements to 70%, 100% (the default, of course) or 130% of their original size. This definitely helps when trying to dig in deeper, making sure more of the elements are visible - or, conversely, letting the user see larger images, though with much more overlap for a messier experience.

I played with the site more and added two more features. The first was stack/unstack option, turned on and off with two separate button. The stack throws everything dead center, and lets the user sort through the images one by one. The unstack button throws everything back to its initial (random) position.

I then added a categories feature. It pops in and out via a button at the bottom center. At first I didn't want to give users the ability to search too easily - and possibly ignore stuff that they might otherwise enjoy when discovering it by chance encounter. But with so many varied projects, this seemed almost necessary for people to really use the app - especially for repeat visits. Users can click All Off, then click on only what they like - or, they can start with All On (the default) and subtract out what they don't want to see.

Keeping with the minimal explanation (think Led Zeppelin IV) effect, I didn't add any extra information to the page. Just a Facebook share button and a little box linking to me for any administrative questions or issues, and it was up and running. I didn't want to give visitors the kind of navigation or explanatory elements most sites have - in the end, this is an art project, and it's designed for exploration more than traditional, sequential viewing/reading.

I may give it its on URL someday - though all the cool ones are taken. If only there was an international domain suffix for .rd, I could see if "www.corkboa.rd" was available. Ah well - have a look at the  corkboard.

The AlphaNumerizer

Here's another Flash application for young kids - The AlphaNumerizer. I tried to find a simple tool for my son Nico. He's a year and a half old and he loves letters and numbers - seeing them and hearing them pronounced makes him very happy (in fact, he's playing with my wife's alphabet cookie cutters as I write this).

Every letter/number game I found online was more complex than what I was looking for - most commercial educational sites clutter the screen with lots of links to additional content and branding elements, and many of their tools and games have animations and other images that supplement each letter as it's typed. That's fine (and probably better suited to kids older than Nico), but I didn't want those kinds of visual distractions - I tried a couple with Nico and I actually had to point to show him where the letters were on the screen.

So I built The AlphaNumerizer. It was a very quick Flash build - about four hours of work total. The audio was recorded on my new Blue Mikey external microphone for the iPhone. It's an excellent quality mic - you can hear the clarity on the samples. I gave the audio very little compression when exporting from Flash - so it's a fairly large file for such a simple application (about 500k ) but it's worth it for me in terms of the quality.

I used typical color scheme, though a bit desaturated - I don't like the kind of overblown colors that you usually find in websites and games for kids. I went with VAG Rounded for the typeface - it really represents the letters and numbers in a nice, traditional typographic style but with rounded ends, which keeps things looking kid-friendly. We wouldn't want kids to get hurt on sharp-cornered letters or - heaven forbid - serifs.

Nico likes when I use the aggressive, excited voice I wound up using for the AlphaNumerizer - we have foam letters that he plays with in the bathtub, and the way I pronounce those letters when I hold them up for him is the same way I voiced them in this application. I exaggerated the pronunciations while still keeping them as clear as possible.

I put the featured letter on a colored card and animated it so it would fly in quickly, slowing to a gentle stop. I also added a timer so it would fade out after a few seconds, essentially clearing the slate.

After I got the basic functionality working (I spent an hour wondering why only certain keys worked while I was testing in Flash before I found out the Flash test environment was "stealing" my key presses - I had to disable the keyboard shortcuts to fix that), I thought about tracking which keys had been pressed. It seemed like that would be a helpful feature, so I added a little strip of letters and numbers at the bottom that fade out as each key is pressed. I kept them small so as not to distract from the main huge letter, and added in another function that fades them back in when the mouse rolls over them.

And besides a title bar and an About section, that's the whole thing. Some early testers have suggested adding a other features, like detecting when certain words are typed. I'm not sure I'd go that route, but if I did, I'd still keep this version as it is. There's something nice about a full screen devoted to one primary element to focus your attention on. Now if I could only find a way to prevent Nico from hitting keys that get him out of the browser window...

Check out The AlphaNumerizer.

BeatMaker

BeatMaker wasn't created for a client - I developed this little Flash application a couple years ago to help a friend's five-year-old daughter, who was then starting to play the drums, understand the basics of rhythm and counting time.

The interface is simple - the screen contains on measure of music, broken down into eighth notes, with three instruments - closed hi hat, snare drum and bass drum. It was tempting to add more drum sounds, but the idea here was to allow simple beats to be created - not to make a virtual drum machine or anything so complex that it would get in the way of learning.

Each note is clickable - clicking toggles the note on or off. There are four speeds ("Slow", "Medium", "Fast", and "Crazy Fast") and there's a voice (my own) that counts each note in the measure. It can be turned off so the child can try counting on their own. A vertical line scrolls in sync with the counter, so kids can connect the counting to the current position in the measure.

I've included sixteen sample beats to help give kids an idea of how each note can be arranged. There's also a Clear function so they can wipe the slate clear and start from scratch (rather than manually turning each note on or off), a Random feature that creates a totally random beat, and there's a Print function so favorite beats can be saved and practiced later - even if there's not a computer around.

That's it - nice and simple. Check out BeatMaker.

Premium Music Solutions - Interactive City

The Premium Music Solutions home page - an interactive city with each building representing a different genre of music being promoted. Click to launch website.

After about four months of development, www.PremiumMusicSolutions.com has launched. I'm excited. It's been some time since I did the first proof of concept of the Christmas village at the center of the city, with its blinking lights and falling snow. The rest of the city was finalized months ago, but the client decided to hold off on the site going live until the second phase - building the interiors of each venue, which house the full song information - so everything would go live at once.


One of the six venue interiors - this is Club T, featuring disco, club, and other dance-friendly music. Click to launch website.

The song data is all XML-driven so they client can make changes and updates on their own, without my intervention. As always, the handshake between Flash and XML - making the information flexible enough to accomodate, say, multiple pages of of songs - is always the most difficult technical piece, but it pays off in the end. Now the client can maintain all of their own content - an efficiency and cost-savings.

Another minor technical feat: the interiors of the venues all use one Flash file. Each venue has its own HTML page with a single FlashVar, "venue", passing down a value of 1 through 6 to the .swf file. The .swf then goes to the appropriate background image for the venue, and pulls in the appropriate XML file based on that value, which then propagates all the song data. This is also an efficiency issue - I only have one file to maintain - and also helps the site load quickly, since once the first interior is loaded, all subsequent interiors load near-instantly, as they're really just opening the same .swf.

One other "trick" I tried, which I've seen before but hadn't attempted - actually a trick in two parts: The interiors of each venue show large text buttons for the other five venues, but not a link for the venue you're currently in. A small thing, perhaps, but it's nice to only present the user with the options other than the one they're seeing. And part two - instead of having an off/over state for those buttons (they all seemed to important to keep "dimmed" when they're off), instead, when the user rolls over one of them, the other five temporarily dim.

Now go check out the traffic lights and cars on the home page. Yes, they really work. Now it's time to add in some pedestrians.

Me Make Monster Animated Commercial and Theme Song

The first Me Make Monster commercial has launched, complete with a retro 80's-style theme song! Click below to check it out!

Or check it out at:
www.memakemonster.com

The theme song, 34 seconds long, was composed in GarageBand, using all MIDI instruments except for the voice, which I tripled to thicken it up. The song's feel was modeled after the early- to mid-80's Saturday morning commercials of my youth - very aggressive, filled with attitude, Eddie Van Halen-inspired guitar noodlings and heavy beats.

I kept the lyrics as streamlined as I could, conveying the customized monster-making functionality of the site, and the ability to get those monsters printed on producsts, in as few words as possible.

I developed the commercial all in Flash, and kept it free of gradients so there wouldn't be any nastiness when the piece went from Flash to Quicktime to Flash Video, or whatever other compressed format it'll be converted to.

The piece has been integrated into the site itself, and should set the tone for the site as being edgy, cool and fun - especially for the 8 to 12 year old boys I'm targeting. I hope they enjoy the sixteenth note guitar triplets. I'm sure they will.

Me Make Monster! Launches

Click to make some monster stuff.

I've launched a new project - a new venture, if you will - and it's called Me Make Monster! I'll create a more detailed blog post in the future, but for now I invite you to check it out and play around with it. And hey, if you have a kid - especially boys 7-10 - and you get them to check it out, I'd be especially interested in what they have to say.

I've kept the purpose of the site very simple - you make a monster out of various parts, name it, and then you apply your finished monster to a variety of products on Zazzle. The products are created on the fly using Zazzle's API, which imposes a high-res image (generated from the vector monster parts in Flash) and adds it to templates. That was certainly not the fun part of this project, but working it out meant a very smooth handoff from the MMM site to Zazzle, which will hopefully entice customers to make a purchase.

As far as the monster is concerned, you can select pieces for the head, eye brows, eyes, nose, mouth, ears, body (really the torso), arms, legs, and "extra", which can be a tail, wings, and other stuff that appears behind the monster - essentially attached to its back. For some parts (eyes, brows, nose, mouth, ears) there is a blank option - essential for creating some specific monsters, like a Mummy - Mummys don't have noses, in case you didn't know.

You can also select the color (one color per monster only) and a texture (which can also be blank). For each piece except the body/torso, you can enlarge or shrink that piece, and move it up and down - all within certain tolerances. There's also a Reset button that brings it back to its base position and size, and a Random button that selects a random body part, size, and position. I've also added Reset and Random buttons for the full monster - clicking the Random All button is a great place to start - you can keep going until you see a monster you like, then jump in and start tweaking it.

Something I wrestled with was hair and clothes. At first I was going to exclude both because of technical resasons - I wanted the body parts to be varied, so I knew Frankenstein's Monster hair wouldn't fit on a Dracula-style head. Same thing with clothes. But I eventually I decided I really wanted to add those features - I couldn't make all the kinds of monsters I wanted to without them. So I created those functions, but as purely on/off options - each head and body part has one discrete hairstyle and clothing option. That way I don't have to worry about elements fitting - or not fitting.

I thought about going with a sequential setup - like Mad Men Yourself, where you select one body part at a time, and move forward and back. This may have been easier for the core demographic I'm targeting (boys 7-10) but it also slows things down, and because it doesn't present all of your options at once, it can be less satisfying to use. We'll see - I've got some beta testers playing with the site now - hopefully their feedback on the interface is encouraging. I trust 'em.

There were some technical hurdles to overcome (and some I'm still overcoming) but I wanted to get the site up and running first, then start cleaning things up. So - it's up! Check it out if you're into monsters (is anyone not into monsters?!) and let me know what you think.

www.MeMakeMonster.com

Bond Opening Parody

Oh yeah - this project. Another one that I forgot about, for the most part, until I found it in my hard drive.

This animation was created for a large corporate client who does a lot of fun internal projects like this. I don't think I ever got the full story, but they had an executive who they wanted to mock (always a good thing) and there was some connection between "Agent 007" and "Agent 88.00" (some kind of nickname for the guy), so they wanted to James Bond-ize him, and asked me to help.

It wasn't a complex project, which was good because the turnaround time was either two or three days from when they called me - the animation was to be shown at a large departmental meeting. The client sent me a photo of the executive, and I was happy to see that his expression was nice and grim - it really fit the Bond mood, especially when I stuck his head on a tuxedoed body holding a gun in Photoshop.

I studied a few openings from different Bond films on YouTube. They were all similar, with some minor variations between them. I boiled it down to the basic elements, created them in Freehand, and animated them in Flash - adding a classic version of the song. I think the only change the client requested upon seeing the first version was that I add an actual bullet flying at the viewer. I don't know how well that registers, but it's in there for a few frames.

I finished just in time for the deadline, and the client was happy. I'm not sure how the executive who was the subject of this lampooning took it, but hopefully he had a good sense of humor about it. It's not like we made him into Austin Powers or anything. James Bond is always cool.


Click the "Play Movie" button above to view the animation.


Watch the first 30 seconds of the clip above for a comparison.

Balloon Buster

Balloon Buster game. Click to play in a new window.

I decided to create this game purely as a self-promotional piece. I was getting more Flash game work around 2005, and I wanted to have an example of a simple online game that I created to show potential or existing clients, as a way to demonstrate my abilities. I decided to leverage an existing animated version of myself that I'd already been using on my www.stevespatucci.com website, so as to give myself a little head start on the game.

This pea-soupy green is my favorite color, and as it was already the color of my animated self's shirt, I decided to stick with it and let it dictate the color scheme of the game. That may sound lazy, but with an open-ended project like this, every limitation helps move things along.

I worked out the concept - a retro-style shooting game where you throw water balloons at me, Steve, disguised (in some cases, poorly) as different characters - real people, archetypes and fictional characters - in the windows of a building. You have to hit the Steves while the windows are open. And, you get a bonus if you hit the floating slice of key lime pie (a prize also determined by the color scheme).

I made up a couple more rules: I couldn't alter the cartoon of me lying underneath the disguises - I could only elements on top of it. And, I would only work in the existing color palette. I just started brainstorming, and worked out way more characters than I expected - I actually had to add more levels to the building to accommodate them. Since there are four characters on each level of the building, sometimes I'd think I was done... then I'd realize there was one more character I just had to include, and I'd add that character in... then I'd have to add three more to fill out the level. It should go without saying that the game took longer to complete than I anticipated because of this pattern - maybe a month total.

Here are all the characters, from top left to bottom right:
• magician
• party guest
• spaceman
• beatnik
• clown
• Indiana Jones
• Peter Criss (from Kiss)
• generic superhero
• Roman gladiator
• redneck trucker
• 1920's accountant
• soldier
• Robin Hood
• Fidel Castro
• Frankenstein's Monster
• pirate
• old-timey aviator
• devil
• Hannibal Lecter (from The Silence of the Lambs)
• Tin Man (from The Wizard of Oz)
• Rebel fighter pilot (from Star Wars)
• Kermit the Frog
• Amish guy
• The Pope
• chef
• Jason Voorhees (from Friday the 13th)
• Mickey Mouse
• Austin Powers
• Albert Einstein
• pilgrim
• Storm Shadow (from G.I. Joe)
• The Statue of Liberty
• Salvador Dali
• Batman (Christian Bale movie version)
• Chinese man
• The Cat in the Hat
• nun
• viking
• Napoleon Bonaparte
• Alex (from A Clockwork Orange)
• Sherlock Holmes
• George Washington
• old timey bowler-wearing guy
• late 60's John Lennon
• 50's greaser
• Marvin Martian
• Rorschach (from Watchmen)
• Andy Warhol
• Harry Potter
• Rastafarian
• court jester
• Willie Nelson


Closeup of the game. That's me as Indiana Jones, Peter Criss
from Kiss, a redneck trucker and a 1920's accountant.

I developed the basic game engine in Flash fairly quickly. At first the fact that the balloon you're throwing covers up the screen briefly (as it's a first-person view) felt wrong or confusing, but after a little test-playing I liked it - it only blocks your view for a brief moment, and it adds to the challenge - if you just keep shooting, you won't see where the characters are on the board.

Someone who played it asked me once where "you" (the player") are - it's not shown (since you're in "your" head) but in the instructions, it says you're in a hot air balloon. I guess I was really into balloons when I developed the game.

I created three levels - the harder the level, the quicker the descent, and the more the building moves side-to-side. The theme song, created in GarageBand, is meant to emulate early 80's game songs - simple, repetitive, and low-fidelity.

Oh, and there's a little bonus - if you hit every character you get a little surprise at the end of the game. I'm not telling what it is - you'll have to complete it (at any level) to see it.

After developing Flying Spaghetti Monster - The Game, I knew that if I posted the game file to one of the online gaming sites (that all "share" the game file generously), it would be all over the Internet in days. And it was - which is what I wanted (all part of my master plan). When I track hits to my websites, I get a few hundred a week from Balloon Buster - and mostly from all the other sites that host it (and not my own). Granted, I believe they're mostly from people looking for more free games, but occasionally someone does inquire about my game design services. There's no such thing as a bad link, I always say (not really, though I do believe it).

As with all of these games, some people said it was fun, some said it was boring, and some people cursed me out and called for my death... anonymously, of course. Ho-hum. If I created a game featuring 25 levels with different gameplay on each level, and hundreds of characters, weapons, backgrounds - people would say it's too complex to play online. I may sound jaded, but feedback for online games is some of the most pointless feedback you'll ever read. Here are some of the highlights from one of the many online sites that host the game:

"wow, that game was good.............NOT!!"

#6 anonymous (3 weeks ago)

"this a effin bullshit this game is"

#5 anonymous (8 months ago)

"this is really bad"

#4 anonymous (8 months ago)

"gay"

#3 anonymous (8 months ago)

"ur a f*kin pleb"

#2 anonymous (2 years ago)

"this the the gayest sh*t i have ever seen"

#1 anonymous (3 years ago)

I just wish the #2 anonymous person would have been more clear - am I the pleb, or one of the other comment-givers? It really bothers me.............NOT!!

And a few positive pieces of feedback, not surprisingly from NewGrounds, probably the best (and maybe the oldest) online gaming portal, where people usually try to be constructive in their feedback:

"Nice job on the art, your use of green is really nice. The controls were great too, which made the game more addicting than it really is. Music went nice with the theme. You definitely have talent. Keep up the great work =]"[delete]

---

Enter your response

Respond!

---

Tell Rigormort1s what you think of his review!

No HTML, please.Characters remaining: 4,096

"Fun game you have here, the 'CONTROLS' were nice and smooth, and the shooting was good, the color tone could have had a mixture and more color but it was still cool, a fun and addictive game, so nice work, keep it up..."

"it was a neat little game. a bit easy and repetitive, but it was fun to play and it had a good concept to it and your efforts in this one were good too."

I know. It's more fun to read the negative stuff. I agree.

After all that fantastic feedback, click here to play Balloon Buster.

Video Productions by David

I'll have to post a more complex logo design project soon, because some of the recent ones I've selected - like this one - were really simple.

A local videographer found me and asked me to develop a logo for his company. He had a very specific idea in mind: since his name is David, and his company is named after him, he wanted a representation of Michelangelo's statue of David, facing to the side, looking into a video camera. He also knew he wanted a subdued color, and he referenced one of my other logo designs in terms of the style - he wanted a simple, high-contrast representation of David and the camera.

And that's what he got. He gave me these images of camera for reference on the style he wanted to show in the logo:


And I used this image of the David statue for reference:


Before I did the final rendering of the image, I composed a rough layout for the client, so he could see the basic layout and approve that before I got into the more detailed work of rendering the image:


When he saw this, he was generally happy - he liked the formality of the layout and typeface - but he asked that the colors be reversed, and that the camera be placed on a tripod. I then worked out this version of the logo, in three color variations:

He liked the blue, but he had one minor request - he wanted the camera to be a little bigger - so it didn't look so much like a consumer-grade camcorder. Here's the final logo - it's a subtle change, maybe a 105% increase on the camera image:


And that was it... until we started working on the website. Once my client saw the above logo in the original website layout - positioned in the traditional upper-right location - it looked "off" somehow - he thought it might look more natural if David were look at the text, so we switched the locations and changed the layout a bit, removing the color boxes.

Here's the web version:


Video by David website - click to visit.

The original logo was still used on business cards, brochure, and other marketing materials.

The website was laid out in DreamWeaver, integrating a header and navigation bar I developed in Flash. My client provided the images and sample video files... which should probably be updated to Flash Video and integrated into the site, but at the time he preferred Windows Media Player files. Yeah... it might be time to check in with him for an update.

Check out www.videobydavid.com

The Jim Henson Company Proposed Website Redesign

Here's something weird - about a year ago, I visited the Jim Henson Company website, and I was not pleased with what I saw. I'll get more in-depth on Jim in the future, but suffice it to say, he's a a hero of mine - maybe the only person I look up to or idolize, and not just as an artist, but as a human being. So when I saw the Henson.com (it's since been redesigned), I just didn't feel it was worthy of the man or his legacy.

The layout back then was simple, but inelegant, and broken in many places - links didn't work and images were missing. And for some reason, whoever put the site together (in previous and current versions) likes using Jim's "Henson" signature truncated at the top of the page. I do not approve.

The whole site is very 90's - it's not elastic in its layout - the content sits in one narrow area in the center of the page, no matter how wide the window is. The Flash elements have no smooth transitions (something Flash is ideal for), and I swear the frame rate on the Flash elements is too low (probably at the default of 12 fps) - an error that screams amateur. I'm not usually so critical of others' work, but this is Jim Henson here - maybe no site could ever be good enough for me, but I know it could be better than this.

Archived versions of Henson.com


Click image for larger view.
Page Two Concept | Page Three Concept

So I did something a little wacky: I created some static layouts for a redesign, found the contact information for the company's Marketing Manager, and sent him links to my work with a short e-mail saying that I'm a designer, an admirer of Jim Henson, and I'd like to improve the site.

I kept the layout very simple, leaving the full Jim Henson signature intact and (after finding a vector version of the official Kermit image/logo) extracting the true Kermit color for the background. I found a few images and treated them with the color as well.

And... I never heard back from them. Or not "back" - I just never heard from them. The current redesign of the site went up a few months later - probably with no connection to my e-mail or proposal - as much as I'd like to believe I shamed them into reworking the website, I'll assume they were already planning the update. It was a step or two in the right direction, but still a long way from what a Jim Henson website could and (in my opinion) should be.

I believe this is the first time I ever did this - proposed a redesign for a company (especially a big company) out of a combination of disappointment at the current site and enthusiasm for what it could be. I doubt I'll ever try something like this again - not because it didn't work out, but because there's really only one Jim Henson, after all.

Interactive Creature Maker prototype

Click above to play . Click on a piece once to grab it - then drag it so the blinking dot is laying on top of one of the dots on the body - then click again.

Wow - I totally forgot I did this. This little piece was an experiment when I was working on my project Jabloo, trying to find my way. At first I was thinking along the lines of an interactive world where you created your main character (like a lot of other game - Spore, most directly) and then use that creature to navigate a world.

I didn't get far before I decided to change directions, but I did work out a little system in Flash to allow the user to pick up a body part and lay it on one of the articulation joints. The interactivity is a little odd - instead of clicking and holding (really, dragging) you click once to grab, click against to release. If you're on a joint, it secures to the body - if not, that piece goes back to its original spot. If you drop a piece on a joint that's already holding a piece, that piece gets replaced.

You can also change the global colors of the piece - I had to make the shadows transparent so that they show through to whatever the main color is behind them. Each joint on the body has an optimum rotation angle, so the pieces always snap to a logical position. And the shadow has to be a generic shape - with a 2D application like Flash, there's no realistic way to make the cast shadow of the creature reflect all the body parts the user chose.

Well, have fun with it. Sorry there's no background, or animation or anything more than some random body part assembly. If I ever add to the piece, you, blog reader, will be the first to know.

The Darjeeling Limited

Click to view the site in a new window. Some functions have been
disabled. Don't be too sad.

I was enlisted to develop the Flash website for the film The Darjeeling Limited by the same agency who'd asked me to created the Deviated Discharge game for The Heartbreak Kid. They're in L.A. and they're very specialized - they only do movie websites. Must be nice, eh?

Because of the tight deadline (about three weeks), the number of people involved in the project (including Wes Anderson himself), and the scope of the site itself, this project wound up being the most complex website I've developed - by far.

This was first movie website I developed, and I was told by the lead agency that it's very uncommon for the director to be so heavily involved in its development - but that was exactly the case with this project. Besides getting input from the studio (Fox Searchlight) and the lead agency I was working for, Wes Anderson had already contracted his favorite design studio (he apparently uses them on all his films) to develop the overall look of all the film's promo pieces, both print and online. There was also a third agency involved, developing just one section of the site ("Explore TDL"). And I was the set of hands putting it all together in Flash... and dealing with lots of questions and problems along the way. Par for the course.

I never communicated directly with Wes Anderson, but at a few key milestones in the site's development he'd go to his agent's office in New York, review the site's progress, and compose notes. His agent would forward his e-mail to the lead agency, who would then forward it to me - stripping out Wes's original e-mail address before they hit "send". I guess to prevent me from forming any direct communication with the guy. Maybe they were scared I'd add him to my famous Tuesday morning knock-knock joke distribution list. Maybe.

The website was a pretty messy affair - integrating elements provided by so many different sources, in a tight timeframe, is never going to be pretty. Working on the little music player, for example, required hours of testing and modification - especially programming it to fade out quickly when the user views the trailer, so the sounds don't overlap. I listened to the beginnings of those songs so many times that when I eventually saw the finished film, I had some strange Pavlovian reactions each time a tune began, quickly visualizing myself in front of my computer at 2 a.m. trying to debug some ActionScript. It made it kind of hard to enjoy the performances of Owen Wilson, Jason Schwartzman, et. al.

Eventually the Flash site was completed and integrated into Fox Searchlight's main site, which contained their global navigation and some additional, changeable elements below the Flash piece, like news, contests, and other press pieces about the film. The site went live a couple weeks before the movie opened, and no, I know what you're wondering - I was not invited to the premiere. I'm not bitter, though.

I almost designed another movie website for this agency a few months aftering finishing this one. They asked me if I had time to develop a simple website for what they described as a "little indie with Jason Bateman". The timeframe was initially to be two week so I agreed to take it on, but then they cut it down to one week. I had to pass on the project - that's too quick for my blood. I need to sleep a little between projects. And of course, that little indie turned out to be: Juno - a much more well-received film than The Darjeeling Limited. Grrrr.

Flying Spaghetti Monster - The Game

Click to play in a new window.

If you haven't heard of the Flying Spaghetti Monster internet meme, then you're fine. No, really - it was a big thing in 2005, but now it's pretty much run its course. I won't bother explaining the deeper workings of this pseudo-religion (really "parody-religion") - a guy named Bobby Henderson created it as a goof, and it took off all over the Internet. "Pastafarianism", as it came to be known, is centered around a diety made of spaghetti and meatballs. Pirates are also part of the mythos. There's even a version of Heaven containing a beer volcano and stripper factory (don't be mad at me - I didn't make this stuff up) - pretty silly stuff.

When the Flying Spaghetti Monster thing was still taking off, I contaced Bobby to see if it would be okay for me to create the official FSM game. I even worked up a sample conceptual image for Him to review. He was very enthused and gave me the go-ahead immediately, and I got to work.

Within three weeks, the game was complete, Bobby posted it on his site, and people began playing. I posted it on a couple online gaming sites, and pretty soon people began stealing the source Flash file and distributing it to gaming portals everywhere (yes, without my permission - good thing I developed it as a self-promotion, for no charge). I get dozens if not hundreds of hits to my site every day from people clicking the link embedded into the game. Web analytics are fun.

I've never created anything with as wide a reach as this thing - before or since - so it took some time to get used to all the feedback the game generated - much of it negative. I made the gameplay fairly simple - you, as the Flying Spaghetti Monster himself, float above a scenic landscape, pressing the mouse button to fire one of your "noodly appendages" down to the ground. If the tip of the appendage hits one of the 25 people roaming the land, they are converted to a pirate. Convert all 25, and you win the game. There's a timer, a couple bonuses, and evil darkly-clad administrators roaming amidst the people - points are deducted if you hit them.

And that's it. But for some reason, the game play stumps the majority of people who play it - at least initially. See, you move the mouse left and right and the Flying Spaghetti Monster moves across the screen - the screen scrolls as well. But if you move up and down, your character also moves up and down - and your position in the sky determines where vertically on the ground the tip of your appendage will strike, which in turn determines whether or not it actually hits the people on the ground.

Most people who play for the first time don't consider this vertical positioning (your shadow moves with you, as an additional targeting tool. People get very frustrated with this, often posting comments like, "This game is IMPOSSIBLE!" and "I can't convert ANYBODY!!! HELP!!!" until some nice person (not me) comes along and advises them to consider their up and down movement when they're playing. It would have been way too simple a game if you only had to move left and right, align yourself with the people below and press the button - but for whatever reason, that doesn't occur to people. Maybe I should hold a press conference or something. Ah, too late for that.

And speaking of player feedback, the comments the game has generated (currently at 558 on the official Flying Spaghetti Monster site) have ranged from really positive...

"I love this game, and enjoy the challenge of converting the non-believers while simultaneously attempting to improve my score and skills" (sounds like it was written as a school assignment)

"Bravo on the game. I thoroughly enjoyed it."

"This is heaven on earth! Thank tou (sic) FSM for giving us the wisdom and knowledge to create this wonderful game!" (hmmm... I didn't know "we" created it)

...to the moderate...

"Quite amusing and decently challenging without being impossible. I just wish there were more levels or the game was longer."

"Great game, but it needs more levels. It`s great fun, and really improves your eye-hand-coordination. " (okay, so I probably should have made more levels - quite a few people mentioned that - of course, many more were happy the game was short and able to be completed)

"i thought it was a little hard. then again, i suck at video games so who knows?"

...to very, very negative...

"This game sucks!!!! While the rest of the site aint bad the game needs improvement. I will sodomize the monster" (that seems a little unnecessary)

"IT DOSNT (sic) WORK FOR ME THIS GAME SUCKS!!!!!!" (read the instructions, bud)

"wtf that is the most retarded thing i have seen in my life who ever made this should kell (sic) themshelfs (sic)" (I'll take it under consideration... mmm, no - not gonna do it)

I even got this private message sent to my Newgrounds account, where I also have the game hosted:

"Your addiction to the so-called oh-so-glorius (sic) Flying Spaghetti Monster, or FSM for short, plain disgusts me. Sure, you're allowed to make up your own religion [wasn't me, bud], sure you're allowed to follow this twisted immage (sic) of a wannabe god, sure I can't stop you... And so on and so forth. [he got a little lazy there]

FSM is a lie. If you think different, please prove his existance, (sic) the reason of the religion, some stories behind the creation of life... Stuff like that. I'm waiting, Steve. Waiting in excitement.

~Dottorius Sigma, mouthpiece of Ender."

For the record, the opening of this piece seems lifted from the Star Wars quote about "your sad devotion to that ancient religion...". I took it as a joke, but I still held off on responding.

Ever since the game came out, I've been receiving screenshots and even videos of people completing the game and getting into "Heaven". That's pretty fun - reminds me of my own youthful video game fascination (some people even send me screenshots and videos of them not winning, which is a little harder to get excited about).

The game was featured on an episode of Attack of the Show, though I never got to see it. From what I heard, they got a good laugh out of it and talked about the game for a good fifteen seconds - but I'm not complaining. Oliva Munn wound up contacting me to develop a Flash game for her. Okay, not really. That would have been pretty awesome, though. But that show, and some online publicity the game received, helped me get a few paid Flash game projects. So you see? It was all worth the abuse.

And the only nearly unanimous feedback I received was on the game's music, which I composed in GarageBand early one Saturday morning. Even people who hated the game loved its theme song. That softened the impact of some of the harsher feedback and death threats. People asked for an .mp3 file and I obliged, making the song available publicly to appease the Pastafarians who hungered for it. It's not as satisfying as a good marinara sauce, but then again, you can't dance to sauce.

Love Is In The Air - Part Two

Click image for larger version. You can even see a fancy animation
showing the sketch fading into the final image!

I've finished my wedding invitation piece, and the client was delighted with it, as was her fiance. I was a little worried that the fanciful color scheme - especially the trees - would cause her concern, but she really liked the effect. The only revision she requested (actually, it came from her fiance) was that the flowers get more definition - the original version of the bouquet was more amorphous, but in the final version I defined the shapes as roses.

In my first pass vectorizing the piece (using the long-defunct but much-loved Freehand and my trusty Wacom tablet), some of the pieces in the front - the stone pilings and stand for the sculpture - were gray, and the ground was kind of a concrete color (which is what it really looks like - see comparison below) but those literal colors were boring and didn't convey the kind of romantic, whimsical feel my client was going for - so I deviated.

I kept a jazzy, loose feel to the structures - it didn't make sense to create totally perfect perspective and angles for a piece like this. I think that kind of treatment would have come off as looking too technical and less artistic. Elements were simplified into mostly monochromatic versions of their real-world counterparts. I also reduced the width of the water so it could fit completely into my piece - I didn't want anything to overshadow the couple. I considered adding the fountain's spume, but it was another element that might have competed with the bride and groom - and I really needed the sky color to provide contrast behind the bridal gown - a light or white fountain shooting up there would have been a problem.

My only regret is, because of the bride's dress and the shape of the letter, the L is pretty heavily obscured. I couldn't find a way out of that one, so I've got assume that the ubiquity of the landmark, combined with the fact that people know how to spell the word "love", will help the viewer's mind complete the image.

And here's a comparison - my version versus reality. I've already designed the invitations and RSVP cards, using a couple different croppings of the piece. Maybe I'll even get invited - if not, hey - I'll just print an extra invitation. Don't tell.

Stage Sweeper Game from The Family Values Tour

Stage Sweeper was developed to promote the 2006 Family Values tour. The lead agency developed the basic concept for the game (which tied into the tour's website and other promotional efforts), and contacted me to do the actual Flash development.


Click to play in a new window (some functions have been disabled).

On a project like this, where the main elements are already created and approved by the client before I'm even involved, my creative input is fairly limited. The agency provides the static layouts, individual elements (like the animations of the player himself - one of their employees, if I'm remembering correctly) and ideas on the game play - though that tends to evolve over the course of the project. Then it's my job to take those pieces and put them together, structuring and programming the game in Flash. My right brain takes a bit of a rest for these kinds of projects.

The game is pretty simple: the player must jump over obstacles on stage without being tripped up, collect bonus items, and perform tricks using the arrow keys while diving off the edge (some lower-scoring examples are provided in the instructions). There was (though it's been disabled) a high score function which tied into a database to collect player information for a contest the agency created. It was a nicely integrated campaign.

It would have been nice to include visual representations of each band during their respective level, but you'll only see a few shadowy figures holding instruments (and not even animated) in the background. Creating animated versions of each member of five different bands would have been as much if not more work than the developing the game itself, and it may have even been a distraction to see them right behind the player - but still, that would have been pretty sweet.

Figuring out the scoring system was, as expected, the most tedious part of the project. I created a complex formula, based on the level (1 through 5), the player's speed, and the jump angle (which determines the final jump). Then that number gets multiplied by another factor and becomes the "Jump Quality Bonus" - which is then added to a "Passes Left Bonus" (the number of lives remaining) and a "Jump Style Bonus" (the final trick, based on the key combination). Lots of testing on that one - by me and the agency.

And to this day, Stage Sweeper remains the only project I've worked on that allowed me to include the term "Smacked Ass" (it appears when your player burns to cinders after failing to jump over a flashpot). The agency and client loved that one. I've got to find ways to use it more often.

SugarPlum Studio

When Sharon O'Connor Spatucci asked me to design a website showing off her fanciful pastry creations, I responded with an enthusiastic "yes!" - not only because I'm married to the woman, but because... wait... that really was the reason for my excited reaction. But I also knew I could give her online portfolio the kind of treatment her tasty treats deserved, and that started filling my head with website concepts.

I'd already designed a logo for Sharon - a straightforward interpretation of the name "SugarPlum", which implied fairy, which is what Sharon wanted (note the whisk instead of the wand - her clever suggestion):


So the basic feel and color scheme would be derived from the logo, as is usually the case. I designed a layout (approved by Sharon on the first round!) and began building the Flash-based website. Besides the typical "Bio", "Events", and "Contact" sections, the main feature of the site is a set of categorized galleries featuring Sharon's work. We did all the photography in-house (get it? in our actual house!), building a green screen which allowed us (okay, me) to easily mask the pieces out of their backgrounds, letting them stand on their own - really, on the purple.

I also built an interactive Cake Constructor tool, which allows visitors to visualize a cake, adding, subtracting and modifying the number and shape of the tiers, color, size, and other decorations (elegantly called "adornments" in the dessert industry - I've learned a lot of cool terminology being married to a pastry chef). Once a visitor is happy with their creation, they can click a "calculate servings" button to get an idea of how many people could eat their custom cake, were it only not made of pixels.

We launched the site in 2007, and for my efforts I was paid a handsome fee of seventeen cupcakes - with sprinkles. Not really. But I wouldn't have complained if I was. I like cupcakes.

Visit SugarPlum Studio.

Oh and hey - see if you can find the zombie cake. The week Sharon was making it, I knew it was in the refrigerator, but when I saw the life-size decomposing head and hand emerging from the cake, I actually got a little scared. Just a little, though.

Baskervilles - Twilight 14 Website

The New York-based band Baskervilles (no "The", please) asked me to design a site for their Twilight 14 project - a one-year initiative through which they would record and release a new single every month for a year (with two bonus tracks - hence the "14"), each with sleeve art by a different artist. But instead of pressing physical singles, they wanted a site that would be updated monthly with each new (and free) single offered as a downloadable .mp3 file. I admired their ambition, and they were working with producer Mitch Easter (who worked with, amongst others, R.E.M. in their early days), so I had a good sense that this would be an interesting project, and agreed to take it on.

I don't think I'd ever started a project like this, with a guaranteed timeframe of at least one full year (plus an anticipated month or two of maintenance after the last single had been posted), but lead singer Rob Keith seemed like such an agreeable chap, I wasn't worried about the marathon-like pacing of the project.

I designed a static layout for the website, which the band approved, and I got to work making it interactive in Flash. The site was fairly complex to code - every month a single variable was changed, which enabled the next record icon to become visible and clickable, allowing the new song to play.


That little album is pure vector art. After lots of
tweaking of the gradient's and grooves' size and
position, the element wound up looking
nearly photo-realistic, much to my pleasure.

I also custom-built a simple music player component in Flash, which pulls in MP3 files from the site's server and allows the user to pause and restart each song. Initially we'd added more functionality, but later decided that letting users do too much with the song was overkill, and so those buttons were removed. Other single-specific information is dynamically pulled into the display window once each single is selected, as well as a download capability. Sleeve art and page backgrounds also change with each song. All that, and a nifty little color-coordinated vinyl record animation slide-out effect, too.

The now-complete site has evolved to become the band's primary web presence, with Purchase (for Baskervilles CDs), Upcoming Shows, Mailing List and Share With a Friend functions. In fact, Baskervilles were so happy with the website, they actually wrote a song about me, to be released as a single in 2010. Not really. This did wind up being a very fun, satisfying project in the end, and though I heard some of these songs hundreds of times by the time the site was complete, I still listen to and enjoy the Twilight CD pretty darn frequently. It's infectious (but not in the bad way, like a disease).

Visit the Baskervilles - Twilight 14 website.

Deviated Discharge Game From "The Heartbreak Kid"

The agency that was putting together the website for the Ben Stiller movie "The Heartbreak Kid" needed a little help with one of the pieces for the site - a game concept they'd sold the studio on called Deviated Discharge. If you haven't seen the film, Malin Akerman's character Lila reveals that she once had a problem with the nose candy, and as a result she developed a deviated septum, from which she inadvertently shoots a beverage while Ben's character looks on in horror. It's a funny scene. I laughed when I saw it in the movie, even though I'd seen it in the preview dozens of times already. That's humor.

And based on that scene, the lead agency created the concept for the game and asked me to develop it into an interactive Flash piece as a fun addition to the movie's website. It was a fairly straightforward project, but I was only given a couple weeks from when the project was assigned until it needed to launch - pretty short timeframe, but most of the graphics had already been supplied by the studio, so that sped things up.

Click above to play Deviated Discharge.

The client didn't have a solid concept of how they wanted the actual game to work - that was for me to figure out, of course. On my first pass, the player merely clicked on the objects at the bottom of the screen and they'd launch directly from Lila's nose. That wound up being too easy, though, so the Art Director asked me to change it to a two-phase load/launch system - click to load the object into her nose, then press the space ar to launch it. Allowing the user to only load one object at a time, plus speeding up Lila's head rotation and the targets characters' movements as the time progressed made the game a bit more challenging.

I think the game wound up more funny than fun - the gameplay is pretty limited, but to be honest, these tie-in games aren't meant to provide hundreds of hours of play. They tend to be simple novelties, more notable for their concept and the way they pull elements from the original movie than long-term diversions themselves. What I'm saying is, if you wanted to play more than two or three games, I'd be surprised. It takes a lot longer than a few weeks to make a deeply addictive video game.

I also got to do research for the different status lines at the end of the game. Based on your score, your septum can be rated "dense", "stiff", "perforated" or several other medical terms related to that particular body part, ultimately ranking you "deviated"... if you can meet the challenge (I got it twice!)

My claim to fame, and I'll forever be proud of this, is one of the sound effects. I supplied all the sounds, some created from scratch, but there needed to be a sniffle sound for Lila to make when she shoots the objects from her shnoz. So I did some rehearsing, created a bunch of options, selected the one that worked best and pitched it up a bit, to (I guess) make it more feminine. If I ever meet Malin Akerman, I'm telling her that we essentially collaborated on one of her roles. Hey, it's kind of true, isn't it?!

"Wars We Need To See" Animated Video

I play drums in a rock band. Or at least I did, before we all started having kids and went on a lengthy hiatus. But from '99 to the mid-2000's, we rocked the Philly area hard. Someday we will make our triumphant return (Nico should be heading off to college in 2025).

Phil, our guitar player, wrote the song "Wars We Need To See", and he'd be the first to admit the lyrics are pretty bizzaro. I offered to do a Flash-animated video for one of our songs, and I wound up picking this one because: it's the shortest. Only a minute and forty-four seconds. And it still took about 120 hours of work to create over the course of three months. Yikes! You know I was single and kid-free back then - I don't have a spare ten hours a week now to work on non-client pieces these days.

I stole the characters of the band members from our website (which I'd rendered them for a couple years earlier), but there were a lot of supplemental graphics to create. I contemplated developing graphics for each "scene" described in the lyrics - "The far far right versus the far far left", "High fashion implanted chick versus liposucked gym boy", "Conspicuous consumer versus organic minimalist'", "Subsidized plaintiff versus overfunded defendant"... but creating all those characters and backgrounds, and animating them, for what would be less than a few seconds onscreen for each scene just wasn't practical. If only I had a crew of animators working for me...

The final animation consists of "performance" scenes (the band playing) with the bridge (about 2/3rds of the way through the song) containing more conceptual work, based on the lyrics:




Fun Fact: When this video came out in 2004, I noticed multple visits to our website from the Department of Defense for a week or so. I guess the title aroused their suspicions, but I have to assume the strange but un-terrorist-like lyrics alleviated their fears. I told my bandmates about this, but I don't think they actually believed me. For a week, we were Persons of Interest.

I probably heard this song (often in pieces) a few hundred times while I was working on the video - not to mention all the times you hear a song when you're recording (and mixing and mastering), and we rehearsed and performed it many more times. It took me a couple years to cleanse my palette, but I do admit that I enjoy listening to it again. A friend described it as "proto-punk", a description which I think suits it well.

Once it was complete, it was a satisfying project, and the final piece got us some press and lots of hits to our website, though we didn't have quite the increase in people purchasing our music as I'd hoped. Oh well. Infamy is better than fame and money any day. We did have a few people come to our shows randomly, after seeing the video - and someone once recognized two of us before we went on stage, based on seeing us in animated form. You can't beat that. Not even with a drum stick.

"Wars We Need To See" Animated Video

Please don't ask me what the song means. I don't know. I am only the humble drummer.

Chumby Face Maker Widget

Because I "knew somebody who knew somebody", I was one of 100 developers to receive a Chumby a few years ago, before they hit the market. "What is a Chumby?", you may be asking? It's this thing:


Chumby is a soft handheld electronic device that connects to the Internet wirelessly (but must remain tethered to an electrical connection, unfortunately) and displays a series of widgets that you can view, listen to, or interact with. The widgets are selected by modifying your Chumby's online channel, and they include games, utilities, media viewers, and all sorts of other cool stuff.

The "price" of receiving one of these Alpha units was developing a widget, so the Chumby folks could have a collection of offerings to give value to their soon-to-be-released product. My first widget was Face Maker, which you can play with below:


(click it - it won't bite)

I decided to create this widget so that users could literally personalize their Chumbies, giving the opportunity to create the face that best suits their new toy. I also figured that once the product was out, this would be a natural widget to choose for publicity photos of the product, which might create some automatic marketing for me. That's called strategy, son. It didn't really work, though - I have found a few photos of Chumbies with my widget on their screens, it didn't become the bonanza I'd hoped/fantasized about. Oh well.

Chumbies have a fairly small touch screen (320x240 pixels), but they also have an accelerometer inside, which means they can sense movement like the iPhone and the Wii. This means you can create a widget that reacts to the user's motion. In the case of Face Maker (though you can't see it above - please don't try tilting your laptop or monitor) the pupils of the eyes could be moved around by rotating the Chumby. Pretty neat. The device also has a squeeze sensor, but that's only used to bring up the main system menu. Initially a light sensor was also planned, but from what I hear that was scrapped before the Alpha units were released.

The frame rate of the Chumby is (or was, at least, in its Alpha state) pretty low, so the interactivity was somewhat clunky. Because the screen was small, buttons had to be fairly generous in size. Also, file sizes need to be pretty small (I compressed the sound file for that little click down to within an inch of its life), because none of the widgets are stored on the Chumby - the units pull each widget down via their Wifi connections every time the user (or the unit's timer) advances to the next one. The price of limited memory, I suppose.

But these are small compromises for such an innovative little device. I went on to develop two more widgets for the Chumby (a Whack-a-Mole style game featuring random faces stolen from Face Maker and a top-down space shooter that I still haven't released), but once the product was available to the public for a period of time, they shut down the Alpha units' ability to be on the Chumby network, and my little friend went dim. I've considered buying another one (we early developers were offered a price of $180 - the product retails for $199) but haven't done so yet. They're really fun, but the (understandable) necessity of the power cord, combined with my more convenient and always present iPhone, may have taken the steam out of that purchase. Someday, Chumby, we'll be friends once again.

Not long after I started creating products for my Zazzle store, I pulled elements from Face Maker and created three faces for a kid's shirt. uncleverly named "Three Monster Faces". I probably could have pushed harder on that one.

Three Monster Faces on Zazzle