As the primary distribution mechanism has shifted from discs to digital, consumers’ discovery process has followed suit, evolving from the “new release” rack of their local record store to the link collection at their favorite music blog.

What many accounts of the struggling music industry fail to mention, however, is that the music industry’s ultra-fragmented, content-overloaded state has created an opportunity for brands to become involved as never before. The record label’s and record store’s historical position as middlemen between consumers and content is dwindling, leaving a vacuum that is rapidly being filled by blogs, publications and the savviest of brands.

Demand is at an all-time high, but the “means to consumption” have changed, says Roger Faxon, head of EMI Publishing, in his recent interview with The Economist. There are new free-and-subscription-based streaming services setting up shop every day, sustained and fueled by the rabid demands of consumers for more and better content.  The result has been the disintermediation of content – consumers no longer care where good content comes from, as long as it’s both convenient and good.

Do marketers and brands need to become A&Rs?

According to a recent Forrester survey, 65% of brands and product companies interviewed will spend more on their digital music strategies in 2010 than they did in 2009. The increased spending is part of brands’ greater commitment to strengthening their emotional connections to consumers as well as developing cultural relevance for their products.  For brands to truly deliver on these objectives it’s safe to say that yes, we do.

Delving into content creation/curation has never been more important.  Brands that succeed become part of the cultural vanguard, occupying the gatekeeper role that once fueled the success of publications like Vibe, Foot Locker and Tower Records. It begins with being sensitive to consumer lifestyle and culture barometers, developing discerning tastes, and having a keen intuition for which emerging trends will pay dividends for the brand and which are fads that are better avoided.

And though it may come as a shock to those of us who grew up during the 90’s (sell-out!), artists, for the most part, are willing to welcome brands into their world.

“There are lots more people who are competing out there, and they have the ability to enter the marketplace. That’s what the Internet allows you to do…enter the marketplace. Now you have to break through. You have to have extraordinary talent, or high level of recognition…focus, huge number of people, in a relatively short period of time….”

-Roger Faxon, head of EMI Publishing

Here’s a great example: New York City-based urban clothing line 10xDeep has excelled at commissioning original content, so much in fact, that they’ve begun to be recognized as a valuable conduit for propelling the careers of burgeoning fashion-forward artists. Their last three forays into music have been (free) digital mixtape projects for eclectic hip-hop artists Wale, Kid Cudi, and most recently, Donnis, all of whom have since been signed to major label contracts.  All have since achieved national acclaim, including, in Kid Cudi’s case, Grammy Award nominations.

Normally, the brand will release a limited-edition, commemorative t-shirt in conjunction with the project’s release, most of which sell out instantly. But, t-shirt sales are second fiddle to the other forms of ROI realized: lead generation and consumer insights attained by downloads, cultural relevance, and a substantial volume of ”buzz” that generates a healthy amount of earned media and attention amongst influential blogs and content publishers online. The equity they attain as a result of their investment and genuine alignment in their consumers’ culture is nothing less than a paradigm for success.

A Double Edged Sword…

One thing to keep in mind is that “music” shouldn’t be perceived as a standalone strategy, but as one of many brand touchpoints that should support and enhance all other forms of brand communication. Forrester’s Mark Mulligan astutely notes that, “music represents massive opportunity for brands, but the current momentum easily becomes a retrograde move if mistakes are made and fans feel alienated by intrusive marketing messages. If brands are to shake off the ‘suit in the mosh pit dancing like a dad’ image, they must seek to add to the artist-fan relationship and differentiate in an increasingly crowded marketplace.”

The brand/consumer transparency that is allowed by digital channels is a delicate privilege that needs to be respected.  Marketers have a habit of preaching about the perils of being inauthentic, but the reality is, without an equally firm grasp on both the brand’s voice and the consumer landscape, one runs the risk of shooting themselves in the foot with hackneyed content plays that don’t ring true.

Stepping into New Roles

Aligning with music to connect emotionally with consumers is hardly a new concept, but the shifting music landscape has opened the door for brands to take a greater role in the discovery and propagation process.  Just as brands have become comfortable in the role of venture capitalists, bankrolling ideas to further the greater good, brands can now take on the role of A&R reps, cultivating and curating music to fill the void that has been left by disintermediation.

The question is, how drastically will the historical role of the brands change once being a content curator becomes standard practice?

“We change as culture has changed…it’s about connecting our brand with people where they are.”

-Andrew Katz, sr. marketing mgr., PepsiCo

Encapsulating a company’s philosophy is a tall order. Sure, there are tons of fancy phrases you can throw out there, but actually putting our values, beliefs and way of life into a visual format is an intimidating task, to say the least.

We wanted to not only tell people about our Philosophy, we wanted to show it as well. Initially, the idea of a pop-up book was thrown around, a clear nod to a very kinetic form of visual storytelling. (The images below are some of my initial concepts from a brainstorm sketch session I had for the pop-up book idea.)

Starting from sketch

Although this was a great starting point, I wanted to delve deeper into the actual meaning of storytelling. I went back to the drawing board and approached the pop-up book from a completely different angle.

When I was little, I absolutely loved pop-up books. Back then, I was fascinated with them because they allowed me to interact with the story itself. I wasn’t just reading the story; I became the story – a force that pushed the characters along their journey.

In physics there is a principle called the conservation of energy.  Among the most spectacular examples of this principle is the Rube Goldberg machine – the energy from an initial event affects everything in its path, usually through increasingly absurd steps before a completely mundane ending.

I set my pencil to paper and began to sketch a world where the viewer would take a journey, triggered by a tiny event – a spark – that unleashed a fantastic story.

Setting the scene

You can flip through my sketchbook from start to finish using this nifty Flickr slideshow.

My story would be comprised of 6 distinct scenes. Each scene would illustrate a part of our creative philosophy and would reflect part of AgencyNet’s culture. I also decided that each scene would be created entirely out of paper.

Why paper?  For centuries, paper has been used to record and tell stories.  Books and paper have become universal symbols of storytelling making it the perfect medium.

The paper world exists on the shelves and bookcases of our CEO’s personal office, which is, in my opinion, the obvious place to store the agency’s Philosophy. I opened up Photoshop and began the creation process. The following images are the result of the first round of comps.

Scene 1

“At AgencyNet we believe in the power of digital to create meaningful dialogue.”

In the dialogue section, I knew from the beginning that I wanted there to be paper doll-like heads emerging from a book, using emoticons to express their ideas to each other.

Meaningful dialogue

Scene 2

“We believe a story can only be told if the user experience allows it to be heard.”

In the first round of comps for the story section, I created a fictional “Downtown Fort Lauderdale” complete with a paper AgencyNet building. (Fun Fact… A photograph of the AgencyNet office was used when creating the paper building, so the structure is exactly the same.)

How we tell stories

Scene 3

“We believe a story can only be told if the user experience allows it to be heard.”

For the later part of the “story” scene, I wanted the viewer to take a look inside the paper AgencyNet building and get a glimpse of a “day in the life” of an AgencyNetter. I represented this with a paper cutout of a human form watching two different monitors while paper elements appeared from behind the screen.

User Experience

Scene 4

“We believe innovation, experimentation and interactivity are core to modern creativity.”

I’ve always been fascinated by the artistry that incorporates kinetic motion, so when I saw first-hand an actual wall mounted kinetic piece, I knew that I wanted to incorporate this into the Philosophy section somehow.

After brainstorming, I figured that since the main AgencyNet building is in Fort Lauderdale, close to the beach, there needed to be an ocean scene represented somehow. Making the sun a kinetic machine was an added bonus for this section.

Core to modern creativity

Scene 5

“If we’re successful it all ends with a connection, but it starts with a spark.”

After representing the beach in the previous scene, I wanted to show some love for our New York office as well. I created an “urban” paper scene with a hint of the Statue of Liberty. The connection is made when the blimp passes over Lady Liberty’s lit torch.

Ends with a connection

Scene 6

“Above all we believe everything begins with ANidea”

ANidea was a little bit more abstract, so it took some thinking to come up with a scene that made sense. After scratching out a couple of ideas, I thought about the actual meaning behind “an idea”. An AgencyNet idea can come from any one of us at any time. Kind of like little fireflies bouncing around until one lights up and catches fire.

It all begins with ANidea

Once I had the different scenes planned out and comped up, I created a storyboard to figure out the user flow and transitions. The storyboarding portion of this project was a crucial exercise for tying up loose ends. With all of the scenes printed out in front of me, it was a huge help to see the project in its entirety. I could switch pages around and add notes to create a more logical path without spending hours in Photoshop recreating and revising different elements.

Storyboarding to get the right flow

I also created a macro view of what the sections would look like in the office environment, to better understand the movement and direction of each scene. Having this version of the scenes at hand was extremely helpful when it came to animating the scene.

The Macro View

Sharing the AgencyNet Philosophy

While going through rounds of revisions to finalize the look of the Philosophy section, I found myself consumed and charmed by the world I was creating. It became an extension of myself and my excitement for AgencyNet. It was the type of project that I had never had the opportunity to lead before. I loved every second of it.

Handing off the project to the talented developers in the office was like watching a child grow into an adult. Although I knew the section was special, seeing each piece of the story come to life before my eyes was an emotional venture.

Turning AgencyNet’s Philosophy into a visual story that engages a user wasn’t an easy task. But it is one that I am proud to say I was a part of. To see the finished product for yourself, visit our Philosophy section at AgencyNet.com.

Like a taste of Japan dropped into the middle of Manhattan it is an audio-visual overload. Big colorful billboards, people, music, video screens, casual dining restaurants, misappropriated Presidential images — basically anything and everything to eke every last bit of attention from the throngs of tourists that bustle through daily.

Does that President look hungry to you?

Our designers captured this stunning panorama for our client’s section.  Creating a sweeping 360° experience that put our client’s name in lights, replacing all the Times Square advertisements with our client roster.  But the illusion wasn’t complete – to complete the experience we needed to bring the same attention to detail to the audio.

Here is how we did it:

Research

We can agree that Time Square is not a quiet place, but all sound is not the same. To ensure the experience is as authentic as possible, we needed to break down the sounds make up the aural landscape of the Crossroads of the World.

First, we took a look at the visuals and determined what is visibly in the scene.  You’ll need to be able to hear that.  We then added a list of the other sounds we could discern while doing the whole tourist thing.  Some of the sounds we added were:

• Cars
• People shouting
• Kids
• Tourist speaking their first languages
• Music
• Live performances
• Whistles

After we created the list from above, we searched for YouTube videos — just to see if anything was missed.

Asset Mining

At this point, I knew what sounds I needed to design the audio for this section. I began my sounds hunt by digging through various sound libraries, offline as well online, using SoundSnap (http://soundsnap.com). I ended up with over 50 sounds that needed to be mixed down and properly placed into the 3-Dimensional audio space to make them sound like they are truly a part of the scene.

Creating the scene

The audio software I used was  Logic Studio Suite, particularly Logic 8 and Soundtrack. One of the requirements for this project was 3D audio. We wanted the user to make the audio respond based on the user input – as someone moved about the scene, the sounds they hear would change. This requirement often dictated how I was going to position the sounds in this 3D world. Unfortunately, this didn’t mean that I had less work, in fact, it added a few more tasks that needed to be done in order to make the illusion sound believable.

It needs to sound like you are outside

For the sounds that were not recorded outdoors, I tweaked them using the Space Designer plugin that comes with Logic 8.  I began with one of the presets and adjusted from there so my sounds had the correct acoustics. After this, I did some channel EQ, to boost or remove certain frequencies.

In the end, I mixed my 50 individual sound bites down to 12 distinct audio tracks.

Below, is a video showing the session and all the channels and plug-ins that it has.

Preparing sounds for Flash

In order to deliver the sounds to our flash developers, I needed to provide each channel individually. This way, as the user moves about the scene, different sound files can be triggered and layered to create the 3D effect.  Logic makes this process painless, all I had to do was click on File>Export>All Tracks as Audio Files and save them as AIF audio format.

From there, it was all bright lights, big city and FLASH!

In the spirit of redesigns, FWA just relaunched their own globally recognized site today. The FWA represents the very best of cutting edge web design and one of our industry’s hottest stamps of approval.

As always, thanks FWA! We are honored! AgencyNet.com has been a labor of love and we’ve appreciated the swarm of compliments and congrats on our new .com.

For all of the expertise, experience, and creativity we bring to bear to solve our clients’ deepest business and communications challenges, we often find ourselves sitting in our own internal brainstorms, staring blankly at a whiteboard. Befuddled.

Believe me, I was there.

Part of the trouble arises in the fact that agency websites are, truthfully, a pretty uninspiring lot. At best, they tend to reflect an agency’s recent work (after all, it’s all about the work), and if we’re lucky, they also provide some nugget of insight into the underlying mentality and approach of the agency as a whole.

And while I agree that the work is essential, in an age of Wikipedia, YouTube, and hyper-connected social behavior, an agency’s work and reputation can hardly be thought to be in the exclusive domain or control of an agency’s own website. (Modernista famously made this point several years ago, with great PR fanfare.) It’s exactly this— the lack of clear role and purpose for an agency site— that makes the task of building a good one such a challenge.

Ok, let’s take a quick step back.

Over the past couple of years, we at AgencyNet have slowly but surely launched a strong multi-platform digital presence—including a well-read thought leadership blog (ANidea), a footprint on Facebook, Twitter, Flickr, and YouTube, and a mobile-optimized web presence— all in the name of demonstrating how brands can (and should) bring content and ideas to the places where consumers naturally spend their time.  Visitors to our YouTube channel can view our portfolio, while visitors to our Facebook, Twitter, an ANidea platforms can get to know our way of thinking about the world in a far deeper and more consistent way than a portfolio site could ever allow.

And while it’s absolutely true that each touchpoint in this network serves its purpose— it was also clear that something was missing from the picture.  We needed a place to not only share our work and ideas, but also to tell the more human story of our agency and its culture.

This human element—  the people and passion that comprise our agency’s character—is hugely important to us.  And given that clients often rank team chemistry and fit as the single most important variable in their selection of an agency partner, it’s clear it also can define an agency’s success or failure over time.

And in this, we found our site’s purpose.

Earlier this week, we proudly launched our latest incarnation of AgencyNet.com, a labor of love that will serve as an important hub in AgencyNet’s increasingly diverse digital communication network. And for all of the innovation, creativity, and incredibly nuanced work that went into making the new AgencyNet.com a reality, it all really does boil back down to a very simple idea in the end.

We’re AgencyNet—and we welcome you inside.

And, if you’ve visited the new AgencyNet.com, you probably noticed that we have a bit of a thing for user interface.  Our new site explores a range of UX paradigms and inputs — exploring a building, navigating a slideshow, even using the touch-sensitive iPhone as an input mechanism.

We also employed a unique navigation system in our “Culture” section, exploring the ability to browse content without clicking buttons or scrolling in a page.  The system was designed to facilitate a more human friendly interaction between the Flash application and the user by using “mouse gestures”.

Most of us are already familiar with this concept.  It is used to particularly good effect on the iPhone and other touch screen devices, where users can give commands using specific fingers movements for specific actions (i.e. zoom in by separating two fingers or by doing the opposite to zoom out).

We’ve already revealed some of the secrets behind our eye-catching homepage and, in the spirit of open source, we thought we’d do the same here.

Creating Gesture Navigation

Developer note: Gesture navigation is not suitable for every application.  Also, when using this technique, the developer should choose which gestures to use wisely.  Try to make the gestures self explanatory and intuitive.  Gestures need to be consistent and fairly simple in design, yet have distinct differences between them; we don’t want the users to get frustrated because the app is confusing the gestures.   Finally, a personal tip is to avoid letters, because a word in English may begin with a different letter in another language.

In this mini tutorial we will create a simple image gallery that will be controlled through the use of mouse gestures.   Here is a list of the gestures that we will catch:

• A horizontal line to zoom out.

• A vertical line to zoom in.

• An arrow pointing to the right to go to the next image.

• An arrow pointing to the left to go to the previous image.

And here is the plan we will follow:

1. Create a “gesture listener” that will call the commands and execute the behaviors on the gallery depending on the gesture that the user provided. This will act as a bridge between the gesture library and our app.
2. Create a gallery image class that has the next public behavior or functions: show next, show previous, zoom in and zoom out.
3. We will connect these by using the command pattern to add some sugar to the code, in this way we will be able to use buttons and/or gestures or whatever we want to use as an input for our gallery.

If you haven’t already, take a look at our Culture section and familiarize yourself with it so you have a better idea of what we are going to be talking about.  And from here, you can download the source code using any SVN client.

(Your svn client may ask you to authenticate, if so, use the word “anonymous” for the username and password)

The gestures handler

The core of this is to have a way to recognize the mouse gesture (or the mouse movement trace).  The good news is that we don’t really need to get too much into it, there is already a library in AS3 that’s really simple to use it and it works great. The Mouse Gesture Recognition lib for AS3, created by Didier Brun, implements all of the functionality that we need to detect mouse gestures; you only need to translate your mouse movement into numbers, where each number represents a direction.

After this, the numbers entered with the mouse are compared with the saved gestures, using the Levenshtein distance (the minimum number of edits to transform one sequence into another), and then it selects the best candidate, provided it’s enough close to a defined gesture.

Please refer to the official page to see a clear image of how it works and how it uses the Levenshtein algorithm to choose the best candidate of the registered gestures.

For this task, I have created a class called GesturesHandler that listens to the mouse gesture library events.  If a mouse gesture is recognized, it will execute the command specified by our class.

First we need to register the movement for each gesture that we want to match:

_mouseGesture.addGesture(RIGHT, "1112333");
_mouseGesture.addGesture(LEFT, "3332111");
_mouseGesture.addGesture(ZOOMIN, "222222");
_mouseGesture.addGesture(ZOOMOUT, "0000000");
//inverted
_mouseGesture.addGesture(RIGHT + "2", "7776555");
_mouseGesture.addGesture(LEFT + "2", "5556777");
_mouseGesture.addGesture(ZOOMIN + "2", "666666");
_mouseGesture.addGesture(ZOOMOUT + "2", "444444");

We need to register the same gesture twice since the user might draw the same gesture backwards, like the zoom in line, it can be draw from the top to the bottom or from bottom to the top.

Next, we need to add some handlers for the events that the Mouse Gesture library dispatches; here is a brief explanation of the event handlers inside our class:

• handleStartCapture(event:GestureEvent): When the gesture library starts capturing a gesture, we need to start drawing that gesture in the UI to give the user feedback that a gesture is being handled.
• handleStopCapture(event:GestureEvent): We will use this event to clear the graphics of the DisplayObject that we use to draw the gesture.
• handleGestureMatch(event:GestureEvent): If a gesture of the ones we registered is matched, a command specific to each gesture is executed.

private function handleGestureMatch(event:GestureEvent):void
{
   if (event.datas) {
      var gestureString:String = event.datas as String;
      if (gestureString.indexOf(RIGHT) > -1) {
         _commands[RIGHT].execute();
      } else if (gestureString.indexOf(LEFT) > -1) {
         _commands[LEFT].execute();</pre>
      } else if (gestureString.indexOf(ZOOMIN) > -1) {
         _commands[ZOOMIN].execute();
      } else if (gestureString.indexOf(ZOOMOUT) > -1) {
         _commands[ZOOMOUT].execute();
      }
   }
}

So how do we register the commands?

public function addCommand(key:String, command:ICommand):void
{
   _commands[key] = command;
}

As you can see, there is an addCommand() function that adds a command to a dictionary.  The handleGestureMatch() function uses those commands from the dictionary to call each function.  We can add commands to our gesture handler dictionary from our Main class.  The good thing about using the command pattern is that our gesture handler is not tied to any other class; we can use our class to control anything that our concrete commands implements.

The Image Gallery

This class creates an Array of images defined in an xml, as soon as the first image is loaded that image is added, this class implements four public functions that will be called from our commands, here is a brief explanation of what they do although their names are pretty self explanatory:

• zoomIn: Increases the size of the current image, maintaining the image centered.
• zoomOut: Decreases the size of the current image.
• showNext: It moves the current image to the left leaving the stage, and it shows the next image in the array coming from the right of the stage.
• showPrev: It moves the current image to the right leaving the stage, and it shows the previous image in the array coming from the left of the stage.

So far, we have created the two main components of our small app, but we need to connect them using commands.  I think you are starting to feel my love for this pattern; it’s just a nice way to maintain objects loosely coupled and keep our code as abstract as possible.

Commands

Finally for the commands we will create an interface called ICommand that will define the signature for the “execute” function; with this we can create our concrete commands that will call the behaviors from our image gallery class using the “execute” function, here is a brief description of each of the commands class that I have created:

• NextImageCommand: It Calls the showNext function of the image gallery.
• PreviousImageCommand: It Calls the showPrev function of the image gallery.
• ZoomInCommand: It Calls the zoomIn function of the image gallery.
• ZoomOutCommand: It Calls the zoomOut function of the image gallery.

Here is one of the commands classes the only difference between them is the line of code inside the execute command function.

public class NextImageCommand implements ICommand
{
   private var _receiver:ImageGallery;
      public function NextImageCommand(receiver:ImageGallery)
      {
         _receiver = receiver;
      }
      /* INTERFACE com.agencynet.gesturegallery.commands.ICommand */

      public function execute():void
      {
         _receiver.showNext();
      }
}

Mixing Things

So in our Main class we link our objects using the next lines of code:

//create the gallery using the xml
_gallery = new ImageGallery(xml.images.image);
addChild(_gallery);

//create the commands to control the gallery
var nextCommand:ICommand = new NextImageCommand(_gallery);
var prevCommand:ICommand = new PreviousImageCommand(_gallery);
var zoomInCommand:ICommand = new ZoomInCommand(_gallery);
var zoomOutCommand:ICommand = new ZoomOutCommand(_gallery);

//create and add the gestureHandler that will receive the mouse events
_gestureHandler = new GesturesHandler();
_gestureHandler.resize(stage.stageWidth, stage.stageHeight);
addChild(_gestureHandler);

//assign a command to a gesture type
_gestureHandler.addCommand(GesturesHandler.RIGHT, nextCommand);
_gestureHandler.addCommand(GesturesHandler.LEFT, prevCommand);
_gestureHandler.addCommand(GesturesHandler.ZOOMIN, zoomInCommand);
_gestureHandler.addCommand(GesturesHandler.ZOOMOUT, zoomOutCommand);

As you can see we create our ImageGallery, then we create one instance of each of our commands. After that, we create the GestureHandler instance and, finally, we add the commands to it using the addCommand() function.

A Bonus

So for all of you who kept reading and watched the source you may have noticed that there is another class available called Menu, this class is also able to add commands just like our GestureHandler, this class contains four buttons on the edges of our stage, clicking on each of the buttons will trigger one of our commands.  By using the same commands we are able to control our ImageGallery from a different source and we don’t need to tell our ImageGallery class anything.

I hope you have found this useful and that you can use it in your future works, and please don’t hesitate to post your comments either if you have questions or suggestions about how can I improve the way I write my examples, and keep flashing the world.

For more Behind The Scenes content check out:
Behind the Scenes: AgencyNet 2.0

We’re not a digital production company.  We’re not a media shop.  We’re not a think tank.  We’re not a software developer.  We’re not a creative boutique.  We’re not a business consultancy.  As I said, we’re a modern marketing agency… and by virtue of that; we’re all of those things and a whole lot more.

But more importantly, much more importantly, we’re people.  Smart, hard-working, experienced, talented, passionate people who thrive and perform in a culture of positivity, creativity and innovation.  And those people, that culture, and the work we produce accordingly, are a primary factor in why new clients hire us and the majority of our relationships span a decade.

With this perspective, I sat down five years ago to define the main objectives for AgencyNet’s last website, and the answer was remarkably clear: humanize ourselves, bring people inside, and let them experience our work and culture.

Fast forward a little over a half-decade and just about everything has changed in digital. Google is no longer supplying search results to Yahoo (and they have 8-times the market cap.) Social networking sites have usurped aggregation portals as the most heavily trafficked web destinations. Our business today is more about creating sustainable platforms and reaching consumers across many screens (particularly mobile) than it is about one-off initiatives and micro sites. And awesome publishing tools (like the one we’re using here in Wordpress) have empowered a legion of beautiful and simple communication platforms.

But a few things remain the same. We’re still a modern marketing agency (although much larger now.)  Clients and prospective clients (increasingly global) still hire us for our talented people and culture of innovation. And the web (now fully broadband empowered) still has the incredible power to touch a user’s senses via a highly crafted, rich experience.  As such, the objectives for our redesign remained the same: humanize ourselves, bring people inside, and let them experience our work and culture.

So, after five years and lots of wear and tear, I’m proud to announce the launch of the new agencynet.com. The site complements our presence on YouTube, Facebook, Twitter, Flickr and SlideShare, where much of our team actively learns, shares, and pontificates about this fast paced, nuanced, and always energizing industry we’re in.

The creation of the site was an opportunity for the entire team to push boundaries, as well as flex their creative and programmatic skills.  We still have an insatiable desire for innovation.  This time, it’s quenched with killer social media integration (Twitter feeds for every member of our team), multi-screen connectivity (the ability to fly a helicopter from your iPhone) and the ‘SlideBar’ (dynamically identifying and allowing users to seamlessly transition between this blog and the immersive site.)

I hope you enjoy the experience as much as our team enjoyed creating it.  Can’t wait to hear what you think…

In the open spirit of the internet, we would like to share some behind the scenes goodness with everyone out there. In this article, we wanted to focus on the homepage building and the creative process behind it.

The challenge of showing two office locations in one interface was tricky. With one office in sunny Florida and the other in downtown New York City it was a challenge to blend the unique environments into one world. Our solution was to create a tower that allows the user to travel vertically between the two locations. We used the background behind the tower to communicate the environment and atmosphere of both locations. As a bonus, we felt that combining our offices is symbolic of how close knit our agency is, regardless of location. Even though our real offices are states away, our streamlined process and constant communication makes it feel like we are all working under one roof all the time.

Our team discussed a variety of executions for creating the building. We compared the pros and cons of constructing a physical miniature model, creating it in 3D, or stitching together stop-motion photography of our real offices. In the end, we chose to create the building in 3D.  Not only would it give us the greatest control over style and quality, but it would be the most flexible to update in the future.

In order to build it right we needed to create a plan that broke-down the construction into stages.

STAGE ONE: Sketch

We began with a sketch. We based the layout on the actual blueprints of both offices. Sketching the building layout allowed us to quickly determine where people, animations, and interactive areas would live.

STAGE TWO: Draft

Once we had our rough blueprint, we translated the sketch into 3D space and began building our world. The foundation and building walls were first modeled low-res to give a better idea of scale and placement. We could use this mockup to plan additional details and elements (including imagery, video, interactivity and personality) that would eventually bring the office to life.

STAGE THREE: Prototype

Next we planned the interior design of both offices and began modeling the furniture and other objects. Higher res renders with lighting allowed us to get a better idea of how it would look in the final render. This step allowed us to start planning how various objects would help bring the otherwise flat rooms to life.

STAGE FOUR: Render

After weeks of texturing and lighting we had a photorealistic render. Small details and textures were touched up in Photoshop. We passed around the layered building to different designers in both offices, so they could each add their own style and love to the building – dropping in posters, instruments, designer toys, and all kinds of fun stuff that’s in our real offices.

STAGE FIVE: Video Shoot

Once the final render was complete, we scripted out “micro” storylines for our staff to act out. We developed a shot list that outlined every action we needed to capture on set.

Next we constructed a 40’ x 12’ green screen stage and set up our HD cam and lighting. We used a sophisticated system for keying the live green screen video on the fly, so as we looked through the camera we could see the people as if they were in our 3D building. This allowed us to plan out complex walking paths and interactions. After three days of intense shooting and choreography, we had everything we needed to move on to compositing.

STAGE SIX: Flash Dev

In this stage we blended together all the elements into the master scene (3D building, video people, and background). We keyed all the videos and encoded them as FLVs, then brought the elements into Flash to prepare the scene for programming. Our developers spent the remaining months programming the interactions and ultimately bringing the site to life.

IN CLOSING

Working on this redesign has been an emotional roller coaster for everyone involved. At times we hit serious obstacles in design and technology, but we all knew how special this project was going to be so we kept pushing forward relentlessly. It took a lot of late nights and out-of-the-box thinking to pull it off. The final product is more than a website, it’s an immersive world that communicates the culture and strategic thinking at the forefront of AgencyNet.

We welcome you inside and hope you enjoy your stay.

For more Behind The Scenes content check out:
Mouse Gestures in a Usable Way

Not only are they pretty to look at, but they have many practical applications as well. Bézier curves are often employed to smoothly and naturally model the animation of objects. They’re also useful in vector art, allowing an image to be scaled infinitely without loss of quality. If you’ve worked with popular graphics and design applications, such as Photoshop, Illustrator, Flash, or InDesign, you may be familiar with Bézier curves as “paths.” Paths are vector-based curves whose underlying implementation builds upon the Bézier algorithm described here.

Up until recently, Bézier curves were some mathematical wonder that could only be represented with fancy calculus equations.

And while the Wikipedia Article on Bézier Curves didn’t seem to do much to refute this perception at first, the animated examples further down the page revealed the simplicity, straightforwardness, and beauty of the algorithm, which goes something like this:

First Order Beziers

To begin, pick the order of the curve you wish to draw, from 1 to infinity. This is where you may have seen the term “quadratic Bézier” or “cubic Bézier”, these are 2nd and 3rd order curves. Then pick and plot the anchor points that will be used to draw your 1st order curves. You should select an amount of anchor points equal to your order + 1.

Starting with your 1st order curves (which are actually straight lines), and all the way until the highest order curve, step through a position on the curve from 0 to 1. You can think of this as the percentage of curve completion, 0 being no curve, and 1 being a complete curve. You should select a small number to increment the step each round, such as 0.01.

At every step, calculate what I like to call the “midpoint” of the two points one level earlier. The term “midpoint” is technically misleading but makes the concept easy to visualize: a midpoint is the point halfway between two points. Instead of the halfway mark, though, we will be calculating the at Nth percent of the way from point 1 to point 2, where N is the current step; so that when our current step is 0.3, we calculate the point 30% of the way from point 1 to point 2, for example.

We can generalize the basic midpoint function (the easy case of 0.5 or 50%):

public function findMidpoint(p1:Point, p2:Point):Point
{
	return new Point((p1.x+p2.x)/2, (p1.y+p2.y)/2);
}

to:

public function findMidpoint(p1:Point, p2:Point, step:Number):Point
{
	return new Point((p1.x * step) + (p2.x * (1 - step)), (p1.y * step) + (p2.y * (1 - step)));
}

This function takes two points, and returns a new point where its components are closer to the first point when the step is closer to 0, and closer to the second point when the step is closer to 1.

If we plot these points, we will have something like this:

This simple routine is the basic building block of Bézier curves.

Quadratic Beziers

A quadratic, or 2nd order Bézier curve, takes, at every step, the current midpoint values of the 1st level lines (there are two of these), and gets the midpoint between those, as seen below:

Cubic Beziers

A cubic, or 3rd order Bézier curve, pictured in white below, takes, at every step, the current midpoint of the 2nd level curves before it, pictured in red:

5th Order Beziers

We can generalize the algorithm to the following: at every step, iterate from order 1 to order O, for every point of order O at index i, take the points i and i+1 at order O-1, and find the midpoints between them. Below is a fifth order Bézier curve (white), built iteratively from the earlier orders: 1st, not pictured; 2nd, red; 3rd, green; and 4th, blue:

8th Order Beziers

Processing power is the only limit! Here’s a larger example of 8th order Bézier curves, drawn perpetually. Be forewarned, this is hypnotizing.

Source Code

The source code for the larger, generalized example, is available on SVN.
(Your SVN client may ask you to authenticate, if so, use the word “anonymous” for the username and password)

That’s right, less than three. The textual emblem that stands for love. It is often used in text messages, IMs, and tweets. And when directed to a person it can say so much to the reader. Some say a picture is worth a thousand words. We feel the combination of two characters conveys much more.

But the beauty of this little exercise is to allow people to share the things they <3 most and, in turn, share in the expression of others through aggregation. Our goal wasn’t to set out to change the world, or create some crazy viral marketing initiative. We just wanted to share the things we <3.

Visit LessThanThree.AgencyNet.com and tell us what you <3.