Chakra Media blog

Just a quick note to check out the newly re-designed Fall 08 prAna.com home page. It features three randomly loading Flash movies to give it a constantly changing look. I've done a lot of work with these guys over the years, they're a good crew and it's always a pleasure to help them out.

With the release of SWFAddress 2.0 I figured now would be a good time to update my Flash design template to version two. The update includes the new SWFAddress 2.0 and SWFObject 2.0 as well as updated HTML embedding. The code has been cleaned up a bit and the AS2 version includes SWFMacMouseWheel (for OSX) while the AS3 version loads a Flex app (blog reader) and includes the some AS3 font embedding just for fun.

UPDATE 4.10.08 - includes the new SWFAddress 2.1 code

Download for AS2
View example

Download for AS3
View example

The L.A. Times article I mentioned in a previous post about about 2A's Eric Jordan was released last month and I thought it turned out good. So it inspired me to write a little bit about my creative process and some of the weird little things I do to get the synapses firing to bring me into Design Mode. LIke most Flash des/devs I tend to jump back and forth between designing or animating something and then programming to give it functionality. While this is cool to do for small things, once I'm confronted with any sort of 'large' project I tend to separate Design Time and Develop Time into distinct camps. I like to block out periods of time to do each, sometimes working on multiple projects simultaneously either designing or programming. Design Mode always take a bit longer to get going than Geek Mode and it's that process I want to discuss.

Nathan Meyers (author of the article) asked me what are some of the things I personally would like to read about EJ and one of the things I mentioned was I thought it would be interesting to hear about his creative process... how does he get into the mindset of doing what he does? Say what you want about EJ and 2Advanced, the style may not appeal to you but the guy's an artist and you cannot deny the incredible attention to detail and feeling you get when viewing the work. There is a certain soul that is felt when viewing the work. It's easy to criticize his style, and it's even easier to be influenced by him. I don't consider myself a total 2A fanboy, but I do give them mad respect for creating such engaging work. No doubt it's helped me progress and grow as a designer.

A lot of the design process stuff of the article was left on the editor's cutting room floor, but Nathan forwarded me some notes from EJ explaining a little of his creative process. I definitely related to a lot of it and I thought I'd post them for the 3 or 4 people who actually read this blog :

NM: WHEN YOU START TO DESIGN A SITE, WHERE DO YOU BEGIN? IN PHOTOSHOP? IN FLASH? ON PAPER?
EJ: Lets back up a moment, pre-software. As soon as I receive a project, I don’t just dive right into a software program. I do something, which unfortunately many designers fail to do when they begin a project. I have to let my mind absorb the project. I’ll go take a shower, I’ll go drive my car, I’ll sit on my balcony overlooking the city and watch the lights shimmer, I’ll go see a movie, I’ll read a passage from a book. I will keep doing these things until I have what I call “it”. “It” is the breakthrough. “It” is the accumulation of inspiration and energy that has been built up in my mind as it pertains to that project. There is always an “A-HA” moment. There is never any kind of fumbling around in photoshop, moving squares around until something looks “kind of good”. Everything I create, I see in my head first. It just appears in that “A-HA” moment. Sometimes it takes longer than other times, but eventually it comes…a moment of higher creativity where the weaker ideas have fallen away. (And when I say weaker ideas, these constitute things which have already been done, concepts that have already been explored, or just approaches that are simply boring when you really thing about it.) This “It”, this “A-HA”, is a moment of higher creativity where something comes through and cuts down all the static and simply says to you “I am the approach”.At that point, all I have to do is bring to life what I have seen in my mind. Now we can move into software. I begin by creating a directory for my project and creating a sub-directory called “Idea”. I begin filling this folder with scans, sketches, pictures, text files, color swatches, screenshots, even Quicktime movies. This “Idea” folder is the heart of everything. It is physical (digital) manifestation of the idea I have seen in my head. Anything I can get my hands on that will help move that idea forward goes into that folder.

Now I open Photoshop. I create two folders within my Photoshop document “Idea” and “Design”. First, I begin dragging all the images from my Idea folder into the Idea folder in Photoshop. Once I have everything I want stored in the layer, I hide the layer….except for one layer that I find most relevant to my idea…I leave that layer open. It might be a picture of the Hong Kong skyline, it might be a video frame capture from a commercial I saw on TV, it might be a digital scan of a cocktail napkin where I sketched out a small scene. Whatever is on that layer, I keep it open….and then I begin to design. I begin placing shapes and “feeling” the canvas with my eyes. During this process I do a series of things, almost unconsciously. I will rotate the canvas at random times, 90 degrees, 45 degrees, turn the image completely upside down, zoom in 500%, zoom out 500%, squint at the image, invert the colors, sit about 5 feet from my monitors and stare at it for 7 minutes, make the image grayscale, and a number of other things that just seem to happen naturally during my design process. I suppose the point of all this, is that there is a flow, a sense of feeling the design come through me…almost as if it were being broadcast to me from a dream in real time, and I just need to sort through everything until the puzzle fits exactly how I’ve imagined “it” in my mind.

A very lengthy description of my Photoshop process, I know…but I feel it’s an important part of how I get where I am going. It is not rare to catch me actually looking at my monitor sideways, or even standing back from my monitors across the room. It is not that different from sculpting. I always tell my designers “Do not be afraid to turn your design upside down! Look at it from every perspective.”
After a Photoshop design is complete, it goes through a whole host of revisions, changes, modifications, tweaks, approvals, etc. Once a design is approved, I move into Flash. I begin by importing my entire Photoshop design onto the canvas start the tedious process of converting every Photoshop element or layer effect that can be reproduced in vector, into….well, vector. Anything that is too complicated to reproduce in Flash will remain as a bitmap element, which I optimize separately.

Beyond this stage, I could actually write an entire encyclopedia on my process in Flash and motion graphics. I could literally write for a month about how I approach motion...

NM: WHAT TIME OF DAY IS THE CREATIVE TIME FOR YOU?
EJ: 1:00 AM: when everyone else is sleeping…that’s when my mind starts going.

NM: WHEN YOU WORK AT HOME, DO YOU WEAR HEADPHONES? BLAST THE MUSIC? PLAY IT SOFTLY IN THE BACKGROUND? WHAT’S THE SCENE?
EJ: If it is during the day, I am blasting progressive trance @ top volume through a 12 Channel Mackie mixer which feeds into two Studiophile BX8a 130-watt Bi-amplified Studio Reference Monitors (the studio speakers I test all my mixes on). If it is nighttime, I like to be kind to the neighbors…so I switch to headphone mode. The lights get dimmed, my Technic RP-DH1200 Stereo Headphones go on, and I become engulf in the sounds I love. Usually I play Radio 1 Essential Mixes (Live DJ Sets recorded around the world from top DJs). Occasionally I will find myself in a more serene mood, and in those moments I will listen to more eclectic material like ambient from Banco De Gaia, or even the soundtrack to a movie like “Code 46” (one of my favorite movies).

NM: IS 4:30 AM MORNING, OR NIGHTTIME?
EJ: Nighttime.

So that's EJ, what about me? One of the most creative moments for me happens within the first minute of hearing about a new design project . As the project is explained or introduced to me , I get a brief flash within my minds eye of what I envision the look and feel to be. This moment is brief, but I get a sense of colors and general graphic design. It's never enough info to explain out loud what I see, but I nearly always have a decent feeling of my vision at the moment, and I think to myself... "I've got an idea." This is my starting point.

The next stage involves a little web browsing for further inspiration and letting that initial vision marinate and take shape. I stare off blankly a lot during this time too... I take naps, I go surfing, I go running, I drink beer and play pool. I praise Jah with a heatgun. I do 10 pull-ups on my gravity bar. I (lovingly) harass my cat and annoy my girlfriend. As I'm doing all of this though, there is a little background process continually going in the creative factory of the brain that keeps hacking away at the 'idea', getting rid of what's not needed and letting it take shape. It's always there, always grinding away, even when I sleep.

When the grinding and searching is complete and that 'ah-ha' moment comes , the idea and other inspirational energy coalesce into a burning ball of motivation. This is when I fire up Flash and begin to design. The Flash IDE is my main design tool for just about anything.... from web applications to T-shirt art. I used to do all my mock-ups/design work in PhotoShop, but I soon realized I was continually duplicating my work, which uh... sucks. So, I started doing all the initial layout on the Stage, and creating certain elements in PhotoShop or Fireworks and then importing them in.

I go through many of the same things as EJ described - gathering elements of inspiration, laying out the interface, zoom in, zoom out.. stare at it for 10 mins.... invert, stand back, twist my head... unfocus my eyes... blink rapidly whilst moving my head from side to side. In other words, I get into it ....and music is the vehicle that gets me there. I get into musical 'moods' ... generally listening to one type of music from different artists. Lately,(In keeping with the theme of this post) I've been rockin' EJ's monthly mix .... and I must say that 120 bpm (or whatever) seems to be doing wonders for my productivity. After a while I burn out of that genre of music and move onto something else.

Once I feel comfortable with the design, then I begin to get feedback and continually tweak and revise things until everything meets approval. Most of the time, the initial idea proves to be correct and stays intact throughout the development cycle. I'm not an institutionally-taught designer, and I've never been into doing a bunch of different design mock-ups for clients. My experience is that the creative energy and focus is diluted when trying to design three or four different things around the same model. Instead of pushing pixels around and guessing what it should be, I let 'the approach' reveal itself to me by listening to my instinct and following my initial vision.

Once the design is complete and approved, I will then switch over into Dev Mode and begin to add functionality to bring the site to life. I usually leave a lot of the interface animation or motion graphics until most of the major development is complete, as usually there are small changes that take place and adjusting things that are animated can take longer than those items that are not.

I think I'll stop here as this is already a marathon post... I'd like to discuss motion stuff too...but maybe another time....

Just launched a re-design of manjujois.com for a long-time client of mine. Manju Jois, Ashtanga Yoga guru of Mysore, South India, is the oldest son of Sri K. Pattabhi Jois, recognized worldwide as the foremost authority on Ashtanga Yoga. The site features a photo application that taps into the Flickr API via Kelvin Luck's great actionscript wrapper called Flashr (thanks Kelvin!) and is also back-button and deep-link enabled via SWFAddress. We have plans on integrating the Google Calender API for the schedule so they can easily update it themselves.

I had the pleasure of meeting a talented writer by the name of Nathan Myers at my regular morning hangout/office.  Nathan writes for some major surfing publications and is currently working on a piece for the LA Times on Eric Jordan and 2Advanced.  He asked me if I'd heard of EJ and 2A (what web designer hasn't?) and asked if I'd like to read a rough draft to check for errors and give some feedback.  Nathan didn't know much about Flash before starting this article and wanted to make sure his terminology was accurate (which was for the most part).  Anyway, since the article isn't out yet I won't comment on it's contents (I will say it's good though!). If it comes out on the web, I'll link to it.  The point of this post is after reading about Eric Jordan and 2A I was reminded about his other job as a DJ and how he puts out free (as in beer) monthly sets of music for people to download on his site Neverrain.  I'm not a huge techno fan, but I find this music is great to work to.  I've been super-busy these past few weeks and this helps me get down in the trenches and just start hammering on the never ending pile of tasks.  His latest set is called Shade & Aura and he's released Volume 1 which is the darker of the two mixes. Check it out.