Well… Hello! Thanks for visiting my humble little site… you’re catching it mid re-vamp!

That’s right. What you see is totally in progress, everything from the design to the content, is being re-created from the ground up to achieve maximum awesomeness. So what you’re looking at right now is basically a skeleton. Try not to judge… I know, it’s hard.

For those of you who’ve been following me for a while… I have some big plans for this bad-boy. Not only do I have some good ideas for new content but I’m going through all my past posts to tighten them up and add fresh visual flavor as well as sexy new “About” and “Folio” pages. Stay tuned and get excited!

Email me if you’d like to be notified when everything is up and running.

I recently wrote a tutorial on behalf of RED for the February issue of .net magazine on how to combine AE and AS3 to create an Experience style page build. It’s no longer available at news-stands, so I thought it safe to post a reprint.

Here’s the example file I created: RED Ultimate Pong Championschip

Here’s a ZIP of the PSD and Flash source to play with: Download

Combine AE and AS3 to create an experience style page build

• What you’ll learn: Bring an environmental interface design to life by combining broadcast quality video effects with standard Flash animation. Create a unique page build that you’re more likely to expect in a television commercial than on a Flash site, while maintaining a reasonable filesize (http://ff0000.com/dotNet/upc).
• Knowledge needed: Photoshop, After Effects, Basic AS3, Soundbooth
• Requires: Photoshop, After Effects, Flash, Soundbooth
• Project time: Depends how far you want to take it.

Today I’m going to walk you through the basic foundation of building an experience site page build, similar to many of the micro-sites we (RED) have done for the UFC. It should be understood that this process doesn’t reflect the actual process that RED undergoes when building full-functioning micro-sites for our clients, this is more like a snapshot of how it might be done if you had to tackle the job yourself.

Generally the interface for an experience site is very environmental, especially one that showcases characters or people. For the purpose of this tutorial I’ve built the virtual environment of a mythical ping-pong tournament, showcasing two RED employees that were helpful enough to let me use them as models.

Design

There’s a few things to keep in mind when designing an experience site.

• First of all. You likely want to utilize the entire browser window -  Open index.html from the folder on your .net CD to run the example (or view: http://ff0000.com/dotNet/upc). When you resize your browser, the header, footer and background images are pinned to the edges, making for an experience custom to your resolution. I’ve provided the code to accomplish this in the source files.
• Secondly. You want to have three layers of depth (minimum), in any virtual environment – that means a foreground, middle-ground and background. The contrast should be highest on the foreground while the background elements fade the further away they get.
• Thirdly. You want a semi-symmetrical composition. This doesn’t mean that the right and left side are identical, but it’s important that they compliment each other, without one side being heavier than the other. I included the PSD in the source so that you could see the exact breakdown of all the elements and get a peak inside the process of laying them out. Generally you can evaluate the quality of your design based on the width of your grin when you’re putting on the final touches. No grin = no good.

Get in the habit of naming your layers and grouping them into folders. This will help both for navigating around your PSD and for when it’s time to export individual graphics as JPEG and PNG files for Flash.

Overview

We’re going to break the design down into portions that can be animated with a simple slide/fade in Flash and elements which would be better served with that extra broadcast style love that you can only achieve in After Effects. We export our AE animations to FLV, then, using the current industry standard tweening plugin Tweenlite, we’ll synchronize the transition animation of all our elements with AS3. We’ll finish it off with just the right sound effects to maximize the wow-effect and get people excited about the ULTIMATE PONG CHAMPIONSHIP 1, because it’s extremely exciting.

Plan Ahead

When you’re composing your design you want to consider how you’re going to animate it – generally it works back to front, finishing with the primary focal points, in this case the RED peeps. During this process you need to decide which of these elements deserve an After Effects transition and which can get away with standard sliding and fading of Flash. The main concern being the additional file size of AE.

• As I was looking over this design, I determined there were three main elements that required eye-catching animation – the RED pong-players, the UPC logo, and the table. Next step was to decide whether it’s worth the extra file-size to create each individual animation in AE, or if I could make them look just as good as I wanted, entirely in Flash.

• I knew I wanted the players to reveal themselves organically so that was a simple decision – AE all the way.

• Looking at the Logo, it just seemed natural to have the background elements fade/scale/rotate in, then make one of the guys hit the pong ball – making it an AE/Flash hybrid, done.

• The table felt like it should construct itself somehow, from the ground up, which you might think should be done in AE, but I figured a way to do it purely in Flash, which I’ll reveal, LATER!!

After Effects

For the players, I used one of my standard go-to moves, the ink-on-paper style reveal you see in the UFC 78 microsite (http://78.ufc.com/). Why? You might ask… because I’m not about to use new material on a tutorial… geez.

When you pour ink on watercolor paper it spreads out gradually. Speed this up and use it as a mask to reveal your graphic and you have a decent effect. I flip the mask for the player on the right so that their reveal isn’t identical, then publish both movies as Quicktime files with an alpha channel. You never want to publish directly to FLV from After Effects because you can get some random sub-par results, so it’s worth the extra step to publish to MOV then convert to FLV with Adobe’s Media Encoder.

After Effects is able to use video masks to reveal graphics, giving you more power than Flash for organic non-vector un-masking effects.

The logo animation reveals itself like it’s one element, but in fact the first portion is in Flash and the part beginning with the actual UPC text, is AE. I separated the pong-guy’s arms onto a different layer than his body, then rotated it 100% along the horizontal axis. When you watch it quickly, it looks like he’s smacking the ball. I did this in AE because the easing, blurring and rotation tools are much more powerful and I wanted it to look hot, so it adequately represent our super-RED guys!

After Effects is able to use video masks to reveal graphics, giving you more power than Flash for organic non-vector un-masking effects.

The table is all Flash, I just broke it up into three graphics and converted each to a Movieclip. Left side, right side, and the legs. Everything is a slide out from a mask, giving it the impression of being built out of the ground. Tricky, huh? I know… I’m tricky. I animated this on the timeline in Flash because it’s faster than building it with script.

By breaking objects into pieces and revealing them one at a time, you can create the illusion of the object being built from the ground up.

Bringing it Together

• Now that I’ve gone over the creation of all the assets, which have been provided for you on the CD… we’re going to open the final file and I’m going to walk you through how I made this come to life in a way that you can apply to your own design and graphics.
• Copy the folder on the Disc to your hard drive. Open up shell.fla. The timeline consists of two frames, the first one has the graphics and code for the loader and the second one contains the graphics and code for the splash page that we’re focusing on.

Graphics & Stage

The graphics are placed within container Movieclips designated by their alignment to the stage. The layer name coincides with the instance name of the container Movieclip, keeping everything clear. This file isn’t that complex but it becomes important as you work on bigger projects. The Movieclip titled topLeft contains the graphics that are pinned to the top, left corner of the browser. The hero graphics that we want to focus on are within a Movieclip aligned to the center, called centerMain. Within this container Movieclip we have the table, logo and players – along with all the other center aligned graphics.

Library Organization

The library is organized into four folders, BITMAP, FLV, MOVIECLIP and SFX. I like to title these in all caps for clarity when browsing, again, this is important when your project is bigger and your library becomes huge. The Movieclip names begin with a three word suffix to keep them grouped and organized. Graphics are gfk, buttons are btn, and Movieclip containers that hold other Movieclips are con. This gives me an indication of what these Movieclips are used for at a glance, and groups them together in the library, making it easier to find what I need later.

Code Organization

You should get in the habit of organizing your code into classes but for the purpose of clarity I’ve kept my code in the timeline and broken it up into different layers. We’re going to focus on the Default Graphic State and Transition In code layers.

When you nest movieclips within movicelips often, it becomes essential to incorporate a naming convention that allows you to navigate throughout your flash file quickly and

easily. This becomes essential when sharing fla’s between work mates.

Default Graphic State

In the beginning, I don’t bring any of the FLV’s into Flash, I use bitmaps of their endframe to keep things simple while I figure out the timing of my animation. I will however put a stop action into those movieclips in anticipation of them containing FLV’s. I set the visibility of all graphics to false and their alpha to 0. When a graphics visibility is false, it doesn’t affect Flash’s rendering time, improving performance, which is key as we have a lot of overlapping graphics to animate in and things can quickly get bogged down.

So far the code we have for one graphic looks something like this:

//CODE//

centerMain.playerLeft.stop();

centerMain.playerLeft.alpha = 0;

centerMain.playerLeft.visible = false;

//END CODE//

Transition In

Moving into the layer where we’ll code our animation – we’re going to import the very powerful tweening class Tweenlite from Greenstock. This will allow us to control the x/y position, alpha, visibility, scale, rotation and many more parameters of our Movieclips through Actionscript. We can also use it to send the playhead to a specific frame in our Movieclips containing timelines. Make sure you have the greenstock folder containing the Tweenlite class in the same directory as your fla. See the source files included on the Disc.

The import code looks like this:

//CODE//

import com.greensock.*;

import com.greensock.easing.*;

import com.greensock.plugins.*;

TweenPlugin.activate([AutoAlphaPlugin, VisiblePlugin]);

TweenPlugin.activate([FrameLabelPlugin, FramePlugin]);

//END CODE//

Now we begin animating each graphic. We give them all a tween of autoAlpha, which animates the opacity and visibility simultaneously. For starters, each graphic will tween (animate) in half a second, and we’ll stagger those animations by a quarter of a second, so they overlap. This will allow us to view the general pacing of our build out with a lot of flexibility, then make decisions based on what we see. Remember, we don’t just animate the fun stuff, everything from the edge graphics to the main content gets a treatment of some sort. This might seem like extra work for details people won’t notice but trust me, everyone notices whether they know it or not.

Sample code for our preliminary test animations looks something like this:

//CODE//

TweenLite.to(centerMain.table, .5, {autoAlpha:1, delay:1.5})

TweenLite.to(centerMain.tableLights, .5, {autoAlpha:1, delay:1.25});

TweenLite.to(centerMain.padRight, .5, {autoAlpha:1, delay:1.5});

TweenLite.to(centerMain.playerRight, .5, {autoAlpha:1, delay:1.75});

TweenLite.to(centerMain.logo_backElements, .5, {autoAlpha:1, delay:2});

TweenLite.to(centerMain.logo_star, .5, {autoAlpha:1, delay:2.25});

TweenLite.to(centerMain.upcLogo, .5, {autoAlpha:1, delay:2.5});

//END CODE//

Lead the User

At this point we’re able to make decisions about how we want to lead the users eye around the page. My initial inclination was to build in the edges, then the background elements, then the table center, then the logo just over the table, and finally the players on either side. Once seeing it though, it didn’t look right having the left player fade in, then the right player immediately after, and it left the users eye on the right side of the page with nowhere to go. I thought it made more sense to have the left player fade in, then the table, then the right player – breaking up the animation style, then leading their eye back to the center by revealing the logo.

Once we make these changes and we’re happy with the timing, pacing and composition of the build out, we begin to import our FLV’s, create our timeline animations, speed-up/slow-down specific animations, and add x/y position, scale and rotation animation to our tweens where needed. We animate the movieclips containing FLV’s and timeline animation by adding a frame label on the last frame titled end, then use Tweenlite to animate the playhead to that label.

As an example, the final logo animation script looks like this. As you can see, the background elements fade in, the star rotates and scales up, then the FLV with the pong-guy hitting the ball, plays. It runs so fast it looks like one seamless animation but there’s actually 3 totally different animation styles taking place under the hood:

//CODE//

TweenLite.to(centerMain.logo_backElements, .5, {autoAlpha:1, delay:3.5});

TweenLite.to(centerMain.logo_star, .5, {scaleX:1, scaleY:1, rotation:0, delay:3.75});

TweenLite.to(centerMain.upcLogo, 2.25, {frameLabel:”end”, delay:4});

//END CODE//

Bitmap Caching

The Flash player redraws faster when you cache your Movieclips as bitmaps, however if you have bitmap caching turned on when you animate the alpha, scale or rotation of a Movieclip it will severely hamper performance – so we want to turn it on for all Movieclips once our transition animation has fully completed. To accomplish this we create a function called allMcCacheTrue, that converts all the movieclips to cache as bitmap. We use Tweenlites onComplete method to call this function after the last tween has completed. It’s functionality like this that makes Tweenlite extremely powerful and the common way for contemporary Flash developers to animate their Movieclips, and we’re just scratching the surface of what it can do.

An example of this:

//CODE//

TweenLite.to(centerMain.infoRight, .5, {autoAlpha:1, frameLabel:”end”, delay:5.75, onComplete:allMcCacheTrue});

//END CODE//

Add Sound

Sound effects bring everything to life and make your animation pop, so while they’re usually left for last, it’s important to give them the attention they deserve. Instead of bringing in separate sfx and trying to synchronize them with the right animation, I bring them into Adobe Soundbooth and create one sound file out of the multiple effects. It saves time, filesize and most importantly keeps things simple, which I can’t stress enough – is key when your projects become bigger.

The code for the several sfx of the intro animation is only a couple lines. Nice:

//CODE//

var sfx_transitionIn:TransitionIn = new TransitionIn();

var sfx_subButton:SubButton = new SubButton();

//END CODE//

It’s much more convenient to build a sound effects sequence in a software program like Soundbooth and play it once at the beginning of your animation, than to import each sfx separately and try to time it with Tweenlite’s onStart method.

Additional Notes

In order to build a fully functioning micro-site that doesn’t require any back-end integration or dynamic content, all the AS3 you really need to understand is Functions, Event Handlers, and a tweeing class like Tweenlite… the rest is totally up to your imagination and creativity. Have fun.

Being one out of only two people in a 40+ Digital Agency who was planning to get the iPad the day it came out, I’ve had a lot of conversations about its value leading up to this weekend. Now that I’ve had it in my hands for two days, everything I thought about it is accurate, plus a ton more potential that I didn’t even realize.

First of all let me just get this out of the way… no one ‘needs’ the iPad. It isn’t attempting to fill the space of necessity. That question has come up repeatedly in the preceeding weeks. I want it because for me and people like me, it will improve the quality of our lives.

Secondly, the iPad will not replace any of your other technology devices, it’s not intended to. Yes, it’s basically a big iPod touch, that’s a good thing. If you’re a certain type of person, it will fill in the gap between your laptop and your mobile phone. You’ll still use your phone for communication and finding information quick. You’ll still use your laptop to work on the go*. You’ll use the iPad to consume information.

* Example: I began writing this article on my iPad, with the WordPress App. It was slow and annoying, even after I paired it with my wireless keyboard… so now I’m writing it on my laptop. For this task, my laptop is the best tool.

WHAT IT’S GOOD FOR:

Reading

If you work on a computer, you probably don’t read nearly as much as you used to. The reason is because most of the literature I’m interested in is online, and I spend so much time working at my computer, I don’t feel like reading there as well, at least not for hours in a row. The iPhone is an amazing device and I read emails and documents on it constantly, but not for pleasure… it’s too small. As convenient as my laptop is, it’s ergonomically shaped for writing, not reading… it’s not comfortable reading for long periods unless I’m sitting at a desk. Now with the iPad, my news, blogs, articles, magazines, books, internet and soon-to-be limitless amount of information based apps will all be on one device that’s portable and designed specifically for the comfortable consumption of media. If you’re an information junkie like me, your world is about to change.

Apps

If you’ve had your eye on the app store lately you’ve noticed the slew of iPad apps pouring in. Once you play on this thing you’ll realize that this is just the beginning. If you get an iPad, the amount of iPhone apps you use is likely to shrink by about 80%, to just the ones you find useful, on the go. You’ll still use those other apps, plus many more on your iPad. It’s hard to explain why until you’ve used it so I’ll just sum it up like this… If I had a child between the ages of 7 – 13… they would currently have an iPad.

3 months from now I’ll wonder what life was like without it. It was worth the $500… for me.

If you’re the type of creative that enjoys strategizing and interacting with people as well as jamming with your headphones on, it’s important you incorporate copywriting skills into your arsenal. Here’s why:

If you want your career to evolve into something outside of pure production work, you need to gradually take steps toward incorporating creative strategy into your role, assuming you have the mind for it.

The most obvious way to develop and showcase your ability to think creatively is through copywriting and from what I can tell, it’s also the quickest avenue for a creative to contribute more than the visual expression of the idea, but also help shape the idea itself and ultimately incorporate ideation into their role. While coming up with the supporting verbiage of a campaign, you’ll be evolving the big idea for the campaign itself.

The good news is, as a creative you’ve been exposed to digital marketing & culture your entire career by personally producing it with your own two hands – giving you the strongest possible foundation to become a strategic thinker because a good creative leader will always have at least one foot in the trenches at all times. Digital trends are constantly changing so being a part of that is worth 100 x the experience any marketing degree could have gotten you years ago.

My current role at Red is ideal for me as it’s about a 70/30 mix of production work to creative strategy. This makes the maximum use of my experience and core skill-set,while allowing me to evolve my expertise in a broad sense.

As one of three agencies sponsoring this years event, RED had a significant presence at Adobe Max ’09. A group of us spent a couple days soaking up the inspiration.

I pulled my Flip out from time to time and caught some nice moments that were later stitched together into a little montage.

Highlights:

• I enjoyed the SODA session immensely and spent a lot of time listening to the discussions in their UnConference area.
• The Vasava session was fantastic, they demonstrated their process from beginning to end, including sketches, storyboards, everything. Really spoke to the artist within me.
• RED session kicked ass as expected, led by Donny Makower and Aaron Buchanon.
• Mark Hammill (Luke Skywalker) presented the MAX awards, which was super fun because, he’s just… a trip.
• The food was great and Adobe were smart enough to keep a modest amount of alcoholic beverages flowing, lending nicely to a social vibe.

Working with a client like The UFC is fun because of our long standing relationship with them. Their trust in us to create a unique site that promotes their event in the most immersive way possible, creates positive-pressure in the design team and fuels our desire to push the limitations of what we can produce. All the projects we do at Red are extremely collaborative but this one in particular felt like an absolute creative mesh. 

UFC 100 created by Red Interactive, 2009

The lead creative team consisted of Christian Harden (Chief-Developer), J.R Fabrito (Designer & Papervision-Stud) and a host of other superstars. If any one of them had been swapped out for another equally talented Creative, who-knows how different the project may have turned out. Once the design and tone of the campaign had been set, each member took that styling and ran with it to build individual pieces that each had their unique touch, but collectively worked in the overall unit.

Choose an Effect and Let it Ride

A general rule of thumb I’ve used for years now is to find a cool animation style and use it as the theme for the transitions and button rollovers, which dictate all the other animation in the site. This aspect of the process has become such a staple for me that I ‘ve amassed a library of animation effects that are always on hand just waiting for the right project. For UFC 100 it was what I call, the “force glitch”. I bought an After Effects plugin from VideoCopilot about a year ago called Twitch, and this seemed like the perfect opportunity to bust it out.

A Few Design Tips for Papervision

• 3 Layers. In developing this navigation we remembered that Papervision always looks coolest with at least three levels of depth. We placed imagery in the foreground (splotches), middleground (nav) and background (wall). We would’ve like to have added more elements, like the swirly graphics behind the fighters you see in other sections of the site, but we were already walking the performance line by then.
• Handheld Camera. We attempted to re-create the reality camera style that’s currently dominating movies and television. We kept the camera randomly moving to give the feeling that someone’s actually holding it rather than it being part of a pristine digital world.
• Figures Facing Camera. Subtle but important is to ensure that all images containing figures should always remain facing the camera, no matter how the user rotates the scene. When the images don’t face the camera they look like paper cut-outs, which reveals the simplicity of the 3d environment.

Take Inspiration

I’m constantly inspired by the media around me – I think it’s a real talent to allow your work to be shaped by art that moved you. For UFC 100 we were directly inspired by the teaser trailer for one of our favorite video games, Modern Warfare 2. This simple trailer inspired the foundation of the Art Direction. Another good example would be UFC 94, designed and developed by Jared Kroff and Adam DeVincent. They payed homage to the Artwork of Sin City to create a fresh design with its own individual creativity.

Do you come home from work tired and stressed? You may be feeling pressure that you’re not even aware of. Below I’ve outlined several problems I’ve observed myself and my colleagues encounter in a typical work day – then I’ve given you suggestions on how to deal with them.

Problem:

• Low energy, can’t concentrate. Keep trying to focus on one thing only to find a few minutes later you’ve lost your train of thought. Usually after lunch.

Solution:

• Start your day be deciding what you want to accomplish and hammer each task out in order of importance. Take short breaks to keep yourself in the zone. If you want energy that lasts throughout your workday, get enough sleep and eat nutrient-rich foods in small amounts. Take a Green-Liquid-Multi-Vitamin as part of your late morning routine. If you need a boost, try a natural product like 5-hour-energy or have a FRS energy drink, just remember to only consume one – or you’ll experience hi’s and low’s throughout the day which is ultimately not good.

Problem:

The Lion in Winter
• Dragging your ass into work hungry and tired. Takes you 45 minutes just to get into a consistent groove.

Solution:

• Get started early and develop a morning routine. I recommend jogging or stretching. First thing in the morning is a great time to deal with bills and personal tasks. You start your day on the right foot when you’ve already done something productive for yourself before your day begins. If you hate coming into work, then your only priority in life should be to find a new job.

Problem:

• Constantly interrupted with work-related issues. Can’t make headway on one particular task because you’re being pulled in different directions.

Solution:

• Keep your desk uncluttered. Turn off phones, email notification, instant messaging, anything that will break into your focus and make you jump from one thing to another. Don’t constantly switch between tasks. Focus on one task at a time and really lose yourself in it – then move on to the next.

Problem:

• Bored. Not feeling passionate about the project you’re currently working on. Client feedback has you stressed and overwhelmed.

Solution:

• Take breaks to go for a walk or mini-meditate. It breaks up the day, calms the mind and gets the blood circulating. Putting out occasional fires is part of your job, how you handle it says a lot about you. Make a conscious effort not to allow yourself to be irritated. The process is always changing, what’s important is how your react to it. Acknowledge what’s happened and make calm decisions about next steps. Whatever you do, don’t allow other peoples stress to affect you.

Also known as Single Point of Truth, is an OOP philosophy intended to remove the process of repeatedly writing the same code. The theory is that duplication decreases clarity and increases the chances of inconsistency through interpretation.

Also kind of seems like a decent life philosophy as well, in terms of the company you keep. I find the more I have to repeat myself, or explain what I mean to someone, the less likely we’re on the same level.

When the DRY principle is applied successfully, a modification of any single element of a system (like a specific function within an AS3 class), doesn’t change other logically-unrelated elements. Additionally, elements that are logically related all change predictably and uniformly, and are thus kept in sync.

If you’re like me, you probably have a lot of personal passion projects that are in your mental queue. Time goes by without you ever executing these ambitions. The reason is because there’s more than one step. When you consider investing your spare time toward these creative ventures, the sheer volume of work needed to reach your goals dissuades you from beginning and you opt to start it another time.

If you’ve read books like “Getting Things Done: The Art of Stress-Free Productivity” by David Allen… you know,  the road to achievement is by defining long term goals comprised of short term goals.

I recently researched a variety of Task Management Software for OSX, my operating system of choice – and I like “Things“. It’s simple and intuitive and does the job that’s needed to bridge the gap between idea and execution. It gives you the opportunity to create a project, then slice it up into individual tasks. Tasks that you can complete in a 2-4 hours period, like say… an evening.

baker the dvdrip

We use a very detailed and effective process at my work – why not employ the same strategy to my personal projects?

I’ll give you an example of why I’m so pumped about this software.

My original talent is that of an illustrator. I felt like quite the little protege and once thought was one of the top of my class at a school world-renowned for it’s illustration program. However with my career in full swing, interactive, motion graphics design and 3d – very rarely do I spend any time drawing or painting anymore.

For a few years now I’ve been meaning to tap into my talents to compose an animated, illustrated narrative. Some cool, motion graphics piece with an intense storyline that creates an emotional reaction because of the compelling idea and execution. I feel like I’m part of a small majority that can write it, illustrate, design and animate it front to back myself and compete at the highest level. Yet year after year… I don’t.

Once I downloaded and installed Things, the first project I put together was this Illustrated Narrative that’s been circling around in the back of my mind for a while – and I very quickly got the satisfaction of discovering exactly why I haven’t begun it, even though it’s been calling my name for so long – which was a lack of process – I wasn’t sure where to start and how long it would take.

• download king of new york dvd

Design and Animate an Illustrated Narrative

• Seek Inspiration - Find a magazine article or a news topic that speaks to you. Use it as your idea source and build a concept around that.
• Write a Script – Create a context by writing some sort of storyline. Make decisions around whether you want it to be more dramatic or humorous.
• Define a Style - Research and find illustration and design styles you’d like to emulate, log and refer to them.
• Find Reference Material - Find a photo shoot with the right kind of images to use as reference, or if possible take the pictures yourself.
• Sketch Your Characters – Start drawing out a style and lead characters to focus on. Take your time and get this down.
• Build a Storyboard – Draw out your animation loosely on paper so that you can plan the flow and vibe. Complete the story through images.
• Sketch Detailed Screens – Draw each screen. Do as many drawing as needed to get each screen right.
• Create the Screens in Photoshop – Paint / Design the screens that need to be imported from Photoshop into After Effects. Do them one at a time.
• Animate in After Effects – Import your screens and build the narrative through animation.
• Publish and Post – Render out the animation and post in your portfolio. Perhaps submit to some film festival.

Above is what my project looks like. I broke the beginning stage down into very detailed steps that I could accomplish in an evening or more. Now I can march my way through this task at my leisure, with the fulfillment of knowing where I’m at in the process, which I think was the missing link.

• In Cold Blood movie full

I don’t watch a lot of music video channels anymore… I’m not sure if they got younger or I got older but, I just can’t relate to the general vibe of today’s popular artists. Every so often though, I stumble across a real piece of art.

divx d a r y l

A good example would be Beyonce’s “If I were a Boy“, which I totally judged as not-my-cup-of-tea, based on it’s childish title.

• American Psycho II: All American Girl video

Great song of course, but the video was beautifully acted, art directed and even had a message that was kind of insightful. Made me wonder how many other masterpieces I may have missed since Jay-Z’s “99 Problems

”