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.