Field Notes Inside an Integrated Communications Agency

For nearly as long as I have been a Flash guy, I have longed for a better relationship between myself and the drawing tools available to me in the Flash authoring environment. That's not exactly true. I really just wanted Flash to be more like my beloved Illustrator. Now that Adobe and Macromedia have embarked down their road to application Nirvana, I am suddenly a changed man. I get it now. It's intuitive. Drawing in Flash has come a very long way, and I'm finding myself using Illustrator less and less.

This past weekend a friend asked me to clean up an image he found, so that he could have some vinyl wall art printed up for his kid's bedroom renovation. I agreed to help sight unseen, but experience made me reasonably certain of two things immediately:

1) He found a crappy web graphic online of what he wanted, which would never, ever work

2) I would need to re-draw this art from scratch

I was not disappointed. Here's the original image he provided:



As a reflex, I fired up Illustrator and placed the image, then broke out my bezier and went to work. After setting about 10 anchor points, and staring at all the repeated simple shapes, I was possessed by an overwhelming urge to run to Flash. I knocked out the drawing in no time at all, but found myself oddly melancholy after. At some point, after struggling for so long against the but-it's-not-Illustrator effect of learning to draw in Flash, I think I got good at it. And now I enjoy the heck out of it.

Both Illustrator and Flash are powerful, effective and robust tools of our trade, and both have their place in my heart. I officially withdraw my longstanding request to have their toolsets merged. Flash has grown up on its own, and the unique drawing tools it offers have grown on me. Here's the final product. Kid's got good taste in music for a 12-year-old...

First discovered during our early forays into transparent Flash video, it's safe to say that the fading and washing out of transparent PNG images has plagued our creatives for years.

A successful transparent video project requires developers, designers and dynamic media guys to work in concert. Even more so, it requires the tools of our trade to work together seamlessly. AfterEffects, Flash and Photoshop are born of the same Adobe gene pool, which is great - but 24-bit PNGs with alpha information are an especially stubborn lot. After exhaustive searching online for an orthodox, documented solution for this color shift, I decided to simply make myself a corrective Photoshop action. 

There are a million ways to do everything in Photoshop - this is the method I used. It is by no means an end-all, be-all solution for every transparent PNG you'll ever create - skin tones are especially fickle - but it is a solid benchmark from which to tweak to your needs. Apply the action and you'll be left with adjustment layers, making it incredibly easy to tweak, without compromising you're original pixel data. I'm going to use the talented Lindsey Bennett, Capstrat Vice President and Associate Creative Director, as my reference. There are four steps to my action, each adding a different adjustment layer to your file:

1) Hue/Saturation - Under master only, set hue to -1 and saturation to +24. No change to lightness

2) Color Balance - For both Shadows and Midtones, set red +6 and blue -6. No change to green

3) Brightness/Contrast - Set brightness +9, contrast +2

4) Selective Color - This is the step with the most malleability. I've found that I can adjust only these values for most any situation. It involves only the black slider. Under the Colors drop-down, start with Red and drag the black slider to +20. Then go through and slide black to +40 for the Yellow, Green and finally Black groups. This is my benchmark; for Lindsey's particular skin tones, I adjusted these values ever so slightly.

The final image, in Photoshop and when viewed in a browser, will look blown out. Here's a before and after shot, outside of Flash. Optimized for this article, the effect is diminished, but still very apparent:

When brought into and subsequently published from Flash, your blown out image will calm down. The end product is a true-to-life approximation that will make your project pop:

Download the action. Simply drag to:

Applications Folder -> Photoshop -> Presets -> Actions

Just a few minutes ago I received an email from Lynda, informing me that she would be handing over the reins of ownership of this year's Flash Forward conference. Handing them over to Beau Ambur, veteran rich media developer and CEO of Metaliq, a San Francisco-based solutions firm.

Why does this merit your attention?

I find it interesting - neutrally, journalistically interesting - that 4 of the 8 projects currently  featured on Metaliq.com are of Microsoft origin. Ambur himself has been working with SilverLight nearly since its inception. If this sounds catty to you, it is just that perception that brings me to my point.

It is my goal as a developer - as a professional - to learn as much as humanly possible about my craft and the media in which that craft is practiced. The end to those means is, ideally, to create experiences for my users so fully abstracted from the nuts and bolts as to eliminate those nuts and bolts from the conversation entirely. The notion that flash developers are flash-centric is outdated and incorrect. Users have control, and we use whatever works best for the job. 

Kudos to Lynda in her selection.

Co-authored by Todd Coats and Will Langley.

We’re honored to be part of PRWeek’s 2007 Book of Lists. They recognized capstrat.com as one of 5 agency sites that awed. PR Week writes, “Many agencies have tried to show its ‘people.’ Capstrat's ingenious panoramic view of the office succeeds where everyone else failed. Every single employee appears to have a bio, declarative proof that it's an agency that cares about all of its employees.”

Well, we believe they’re right. We do care about our employees. We also care about collaboration and innovation. I asked Will Langley, one of Capstrat’s programming ninjas to revisit our collaborative process that led to this unique approach. We decided to write our individual points of view since we approached the problem from two directions (me coming from the conceptual trying to understand the technical, Will from the technical trying to interpret the conceptual). Our mission was the same though—challenge through collaboration.

Todd starts: “Repeal the laws of physics. That’s what I want, Will!” We challenge ourselves to surprise and delight clients at every turn. Visitors to our office always talk about its openness and energy. So I had a crazy idea to create a panoramic view of our office as the stage to show our unpredictable energy and randomness. Strictly speaking, the content could be anything. Since I decided to use the office funkiness as a stage, it was easy to decide that our people and practice areas would be the stars. The challenge was how do they interact? How do we make this useable? How do we keep it interesting for repeat visitors? What is this crazy world we’re making?

I pitched the concept to Will as a place where randomness reigns. We didn’t want to give the impression people were on treadmills as they moved, though. They had to obey (some of) the laws of physics for believability. Otherwise the result would be too designy. It would just be moving pictures, no magic.

Having seen a few sites with Action Scripted parallax, I figured we could do that. When Will’s head didn’t explode I figured we could make it a panoramic illusion, too. Heck, while we’re at it let’s make it animated navigation. Will did a lot of experimenting with the black arts of scripting until we agreed the multiple layers behaved correctly. The design team experimented with backgrounds and people to present them at the right scale. That was harder than we thought. Again, to sell the illusion we wanted one foot in reality and one foot in this anything-can-happen world.

I wonder if Will thought I had a foot in Bonkerworld.

Will says: I did not think Todd was bonkers. A little eccentric? Maybe. Twitchy creative? Certainly. After much arm-waving and wild scribbling, we finally found ourselves on a common plane of understanding. Thus began a period of tense negotiation with the Flash authoring environment to bring Todd’s vision to life. Creating a believable parallax was relatively painless – but as Todd mentioned, randomness was mission critical. I’ve visited so many rich media sites and been wowed by the action—riiiight up to the point where my brain recognized the loop. Once that happens the knee-jerk response is to browse on, having seen all there is to see. By randomly shuffling our arrays of people and objects, we were able to break the “loop.” This created a more engaging experience for visitors to our site and enticed them to hang around and explore.

The panoramic backdrop of our office brilliantly highlighted all the pockets of individual funk and flare that make working at Capstrat such a rewarding experience. We share and evolve ideas and solutions with impunity around here, and the quality of our work shows it. The final panoramic is rich and seamless – you feel as though you could crawl into any corner of it and live the Capstrat experience. When we decided to follow up with a second banner for our Culture page, Todd accepted my offer to create a similar panorama. A print designer before taking up the dark arts of web development, this was thrilling! I was able to push and develop my Photoshop skills to new heights.

Our initial foray into the world of transparent video in Flash, design translation for this project uncovered other unforeseen hurdles. With all of our detailed image assets needing to be transparent, the use of the PNG-24 image format was a necessity. Running Photoshop assets through both After Effects and Flash, and meeting in the middle without color shifts, proved to be a major undertaking. Tears were shed. Hearts were broken. And ultimately, Photoshop actions were created to put us back on our way.

Use of the transparent PNG format presented us with our final major obstacle – file size. This beautiful piece of collaborative effort would be for naught if our baseline user had to wait an eternity for the experience. It’s common knowledge that, as developers, we have only a few seconds to engage our users before we risk losing them. The need to overcome our loading issues led us to rethink our loading and preloading schema. We decided to keep everything compartmentalized, remanding our preloaders to each individual asset. This allowed us to eliminate the use of a clunky and frustratingly slow global preloader. The result of this approach is a [relatively] large file efficiently removing itself from the experience, offering the user tasty morsels to distract from the heavy lifting taking place behind the curtain. The user gets to browse our office panorama almost instantly, with each piece of the parallax puzzle sliding into place seamlessly and quietly around them.

With all of our problems solved, we began the final Q/A process. We noticed right away that we had a little user-experience glitch, resulting in a slight case of “chasing the rabbit”, wherein the user finds themselves unable to keep their mouse on the clickable regions without interference. To eliminate this, we made our randomness conditional, so that each object weighed its randomly-selected starting position against all of its peers. When unacceptable overlap occurs, the position is tossed out and another selected. The process continues until an acceptable condition is reached. While the user is none-the-wiser, this little tidbit is perhaps my most triumphant of the entire project.

This project exemplifies what we’re about at Capstrat. Sure, we all come from different backgrounds and speak different languages. But, whether you say the sky is robin’s egg blue or hexadecimal 6FD3FF, we all agree that innovation is a full contact sport. Our management team understands, encourages and lives the spirit of collaboration. The result is personal and professional growth as well as development on a macro scale. Not to mention note-worthy work that we can all be proud of. Visit the PR Week posting.

If you've been into the development game for any time at all, chances are you've encountered the famed Suckerfish dropdown navigation system at some point. I have successfully employed this chunk-o-brilliance - and it's successor, Son of Suckerfish - more than a few times. I recently had cause to implement dropdown navigation over Flash content, and was dismayed to see Safari comPLETEly freak out and throw a tantrum, causing my dropdown menu items to flicker in and out of existence. After much poking about, I decided that Safari must just not handle z-index as well as other browsers. I set up a little javascript function to detect the user's browser, and point to a separate CSS file if Safari was encountered.

It was only after pausing for a moment of silent reflection for all those users who would never see my handy navigation that I thought to try to find a similar case online. I started at the top of my bookmarks. Four sites in, and right there, at the top of Adobe.com , was my answer.

In order to make all other browsers behave when rendering your dropdown nav over Flash content, all you have to do is a) make use of the wmode tag for your Flash div, setting it to either transparent or opaque, and b) assign a z-index value of 2 to the block-level element containing your dropdown menu. Safari balks. To make it behave, you have to burrow down into your nav CSS and add z-index tags to every nested element, including the links:

#navdiv {
    z-index:2;
} 

#navdiv ul {
    z-index:3;
}

#navdiv ul li {
    z-index:4;
}

#navdiv ul li ul {
    z-index:5;
}

#navdiv ul li ul li {
    z-index:6;
}

#navdiv a {
    z-index:7;
}

Presto! Change-o! Safari's nasty flicker is tamed. Lesson to be learned here: take advantage of Firebug , and don't worry about reinventing the wheel. I was able to find a working example of what I wanted, and Firebug gave me the behind-the-curtain insight needed to make it happen. If you are not currently in the know on the incredible development resource that is Firebug, I implore you - drop everything and go get it!

As Flash sheds the last vestiges of its prepubescence and roars into adolescence, I am seeing little evidence of the social anxiety and self-image crises that have come to define these awkward years. It seems my favorite little App. has benefitted from some good parenting, and is growing into a strapping young development platform. Like an anxious parent watching his daughter get ready for her first school dance, I have found myself stabbing the Web for answers on how better to communicate with Flash's new, deeper voice: Actionscript 3.0. There are some major code differences that can be daunting at first, but all you really have to do is break the ice and you will find that, while a little uncomfortable at first, you relate better than you might think.

With Flash Forward fresh in my mind, here are some of the major arterial differences you will encounter as you navigate the migration from AS 2.0 to AS 3.0:

• More code. Based on ECMAScript, ActionScript 3.0 is compliant with the ECMAScript Language Specification, Third Edition. This means that the syntax is more closely aligned with traditional programming languages. A little more verbose, the extra typy-typy actually serves to simplify the language. Are you down with OOP? Our Python jockeys are loving it.

• Stricter. While this may be initially more frustrating for those coming from the front-end world, to the seasoned programmer this is a welcome breath of fresh air. Train yourself. Declare data types and function return types.

• Some things are just...plain...gone. setProperty(). attachMovie()? createEmptyMovieClip()?? swapDepths()?!?! Oh crap. _global is gone. _level is gone. I'm sweating now. But we can get through this. We can. It's for the greater good.

• No more stage coding. Actionscript may no longer be applied directly to buttons and movieclips on the stage - on() events are, as they say, l'histoire. All AS3 events are handled via the EventDispatcher, using listeners (yes, just like AS2 event listeners - take comfort). Frame actions are still cool. 

• Display Objects. Movie Clips are now instantiated with new():
     var mc:MovieClip = new MovieClip();
Depth management of display objects is now accomplished with a very intuitive parent/child display list syntax.

There is much more, but if you take the time to read through the information sprinkled throughout the above list, you should find yourself well-equipped to jump in and get your feet muddy. Actionscript 3.0 is faster, more consistent and much more powerful. Wrap your mind around the nuts and bolts of Object-Oriented Programming - you will thank yourself. And be prepared: because AS3 does not play well with AS1/AS2, you will find yourself straddling the fence in your project work. This is almost certain to prove frustrating and tedious at times; take comfort in the fact that you are not alone, and know that, as a wise old man used to tell me, we are building character...

Additional Adobe love:

AS 3.0 Overview  

Tips for Learning Actionscript 3.0

OOP Primer

I have work to do.

And dishes to wash, groceries to buy...a supply run to my local home improvement warehouse to make, for a couple of projects that need closure.

So much to do on this, my day of much-needed rest, and all I want to do is play. Several of my creative colleagues and I have just returned from Flash Forward 2007 in Boston, where our brains were expanded, challenged and thrown outside the box. Of the major themes of the week, one that struck me the most was that of remembering, as creatives, to have fun in our work, and to follow the bend in the road when we can.

We work hard dreaming of and orchestrating award-winning work here at Capstrat - while simultaneously navigating a symphony of schedules and deadlines. The folks at Adobe are constantly providing us with deeper, more powerful tools with which to push the envelope on Flash design, production and development; it is easier than ever to find ourselves charging forward, head down, to bring an idea to life - using tried-and-true techniques and code - and in doing so undermining the power at our fingertips.

It is vital that we continue to strive to set the bars of performance and execution, and that means continuing to change the way we think - as our industries and clients continue to shape and change the way they do business. As creatives, it is through experimentation, collaboration and play that we can most effectively push ourselves toward this end. With the changing environment and theology of rich media development, and the user-centered evolution of the Web in general, designers and developers have to be willing to leave the sanctuary of traditional interfaces, navigation and functionality. The schedule at Flash Forward this year, was, as usual, rife with the newest and hottest trends, practices and client work. As a testament to this evolution of tool and trade, however, the week was peppered with inspiring and engaging discussions on staying ahead of the curve. Here are a few session titles in particular:

'Beyond the Knowledge; The Art of Playing'
'Finding Creative Techniques'
'Imagination + Technology'

The curiosity that drove me toward engineering years ago is the same that pushes me today to sharpen my skills as a flash developer. What's this button do? What if I try this effect with this crazy new microphone class I've been reading about? If I do it this way, can I really cut half my file size?!? Using every client project as a canvas on which to blow our own minds is good for us and good for our clients. It may not always work out, and tight schedules may not always allow for it - but setting a goal to experiment a little in your projects will keep you hungry and passionate.

For inspiration:

http://jot.eriknatzke.com/

http://www.reflektions.com/miniml/template.asp?pagename=all

http://lab.mathieu-badimon.com/

http://www.oneover.com/