Archive for June, 2006

The Cat Un-Bagged

For those of you that follow this blog, you may remember some posts awhile back in which I referred to a “secret project” that I was in NYC for. Well, after months of having to keep my big trap shut, the proverbial cat is finally out of the bag:


That’s right, the first Total Training series ever to be hosted by two bass players. Not that it necessarliy has any bearing on quality (or wait, maybe it does — you do know what they say about bass players . ..)

Jason & I managed to each make a trip back East after NAB, as we figured it’d be a good time to fly under the radar since everyone was still hung over. The fruits of our labor are this 17 hour (!) training series, spanning 3 DVDs, that shows you how to take a project from capture to delivery using Adobe Production Studio Premiium.

So, you can get some deailed info right here. This is my first one of these (I’ve written books & magazine articles, but never something like this) so I’m really interested in any & all feedback (shouts of “hey Bob, you suck!” echo through my head already). I’ve been using Total Training’s products since Brian Maffitt did the first “Total AE” series back in ’97 or so. I’ve always been a big fan, and consider it a major honor to be in such good company.

HOW, it’s done.

The HOW Design Conference wrapped up yesterday in Las Vegas, and thus I survived my 2nd trip to that town so far this year. It was a close one, though, as the conference was inexplicably held at the same place and time as the eBay Live! conference, and though the hallways were extremely packed with people it was no problem telling who was going to what conference (believe me).

It was actually one of my favorite speaking gigs of the year — I delivered some presentations on taking existing design assets from Photoshop and Illustrator and animating them in After Effects. The HOW attendees are largely graphic designers working in the print medium (although many work in web & video as well), and most had never seen this sort of thing before.

After the sessions, I got a lot of questions regarding the animated posters that I showed in my talks (Adobe had a poster design competition for the conference and here are some of the winning entires).


These posters were created with Photoshop and Illustrator, and we brought them into After Effects with their layers intact and animated the individual layers to great effect. I’m currently not able to post the finished video files, but I did want to post instructions on how we did the animated masks for the animated poster below (designed by Rozina Vavetsi):


Animating masks is one of the fundamental techniques in After Effects, and this is a very basic example of how to do it.

First, you need to import your Photoshop or Illustrator file as a Composition, which will keep all of its layers intact. With Illustrator files, it can be a good idea to import the file as “Composition-Cropped Layers” if you have many layers since it makes it easier to select your layers in the AE Composition Viewer when you’re animating.

This menu appears in the bottom-left of the File Import dialog when you are importing an Illustrator file. Make sure to select “Composition” or “Composition-Cropped Layers” when importing layered Photoshop or Illustrator files if you want to work with the individual layers.

You will then see a new Composition in the After Effects Project Panel, as well as a folder containing the layers of your PS or AI file. Double-click the Composition, and the timeline will show all the layers of your original file.

The four layers of the Illustrator file in the After Effects Timeline.”

So, with the “Tree Lady” poster above, we animated masks to reveal the branches, to make it look like they were growing out of the woman’s body. Each of the branches was on its own layer, and we did several masks on each to reveal each segment of the branch individually. So, using this example, here’s how you animate a mask. First, select the Pen tool from the Toolbar.

The AE Pen Tool (keyboard shortcut is the letter G).

Then, select the layer in the timeline you want to mask, and draw a simple mask around the area of the image you want to reveal over time. Start by drawing the mask where you want it to be at the end of the animation, and then we’ll back up in time and change it to where it’s going to be at the beginning.

Click on the first mask point you created to close the mask (Left), and only the portion within the mask will be visible (Right).

To animate the mask, hit the M key on your keyboard, which will reveal the Mask Shape property for your layer in the Timeline. Decide how long you want the animation to last (this example is 10 frames), and move the Current Time Indicator in the Timeline ahead in time by that many frames. Click on the stopwatch icon for Mask Shape to set a keyframe (this represents where the mask will be at the end of its animation).

The inital keyframe in the timeline.

Then, drag the Current Time Indicator to its original position. Select the Selection Tool in the Toolbar (shortcut: letter V key on the keyboard), and one-by-one, select and drag the mask points to where you want them to be at the beginning of the animation. In my example, I dragged the 2 upper points down and to the left. As soon as you make a change, you’ll see a new keyframe on the timeline, where the Current Time Indicator is positioned.

The beginning mask shape of the animation (Left), and its keyframe in the Timeline (Right).

Hit the spacebar on your keyboard, and you’ll see your mask animate. You can add as many masks as you want to each layer, so the next step would be to draw a mask for the next branch on the layer, and have it begin animating as soon as the first animation ends.

Once you’re finished, you can control the timing of the whole shebang by nesting this Composition into another Composition and using Time Remapping, but that’s a whole other can of worms and I’m putting the “Gone Fishin” sign on the office door for the weekend.

Will The Convergation Please Rise

So all of a sudden, I’m inventing words. Long weeks can do this sort of thing to you, but in any case the whole “Media Convergence” thing has been on my mind lately. I attended my 8th NAB this year, and I can think back to the first one I went to in ’99 when everyone was saying TV was going to the internet. Major players in the industry bet the farm on that theory and most got visits from the repo guys soon thereafter.

Well, now we’re finally here. You can stream or download TV shows, video podcasts, baseball games (I’m addicted to my MLB.TV subscription), and all sorts of things that aren’t fit to mention in polite conversation. What’s more interesting is how all this video content is being pushed onto mobile devices as well. We’re not seeing it so much here in the USA today, but when I went to Seoul, Korea earlier this year, I was amazed to see people on the subway staring into their cellphones immersed in the TV News, a soccer match, and a game show in which a guy wearing a suit covered with fish was being lowered into a tank of live giant crabs.

So this leads me to the whole content authoring thing — we already know that Creative Professionals are gradually becoming a more generalist species. Print designers are learning web design, video editors are learning motion graphic design, and eventually we’ll all be learning to design stuff for mobile phones & the like. If you’re using Flash Professional 8, you might not know it, but the tools for authoring content are already in there, and the Flash Lite platform comes pre-installed on mobile phones & devices made by companies like Nokia & Sony-Ericsson

The best way to have a look at this feature, is to open a sample project that comes with Flash Professional 8 and test it in the Emulator.

The “Cafe Townsend” project in the Flash Lite emulator, showing a Nokia 6620.

First, you need to open the file named cafe_tutorial_complete.fla located in the /Samples and Tutorials/Tutorial Assets/Flash Lite/Cafe/ folder where you installed Flash Professional 8 (for example, C:/Program Files/Macromedia/Flash 8/Samples and Tutorials/Tutorial Assets/Flash Lite/Cafe/).

Next, select Control>Test Movie to load the project in the Emulator. Click on the buttons of the phone to navigate & select (it’s pretty intuitive), and you can use the pulldown menu in the upper-left corner of the Emulator to select different mobile phones & devices to test the application on.

When you’re ready to get started trying your hand at building a Flash Lite app for a mobile phone, select Help>Flash Help, and then scroll down to Getting Started with Flash Lite.

I’ll be using my “Crackberry” mobile device quite a bit next week when I’m in Vegas presenting at the HOW Design Conference. If you’re there, make sure to say “hi”.

Lost in Expressions

Years ago, I did a bit of work in Web Design. This was before there was a Dreamweaver or GoLive, when you had to write all the HTML code manually. That was enough to send me running for the hills, and that’s why I got into Broadcast Design where you didn’t have to deal with any of that.

Well, After Effects has had a Javascript-based programming language called Expressions for a couple of versions now. It’s something that I avoided like the plague at first — I mean, how do you make heads or tails of something like this:

columns = 10; //number of columns in grid
tHold= .2; //hold time (must be less than tmin)
tMin = .5; //minimum cycle time (can’t be zero)
tMax = 1; //maximum cycle time
gap = this_comp.width/columns;
origin = [gap,gap];
xGrid = columns – 1;
yGrid = Math.floor(this_comp.height/gap) – 1;
start = 0;
end = 0;
j = 1;
while (time >= end){
j += 1;
start = end;
end += random(tMin,tMax);
targetX = Math.floor(random(0,xGrid));
targetY = Math.floor(random(0,yGrid));
x = random(); //this is a throw-away value
oldX = Math.floor(random(0,xGrid));
oldY = Math.floor(random(0,yGrid));
if(targetX == oldX && targetY == oldY){
origin + [oldX,oldY]*gap;
}else if (time – start < tHold){
origin + [oldX,oldY]*gap;
deltaX = Math.abs(targetX – oldX);
deltaY = Math.abs(targetY – oldY);
xTime = (end – start – tHold)*(deltaX/(deltaX + deltaY));
yTime = (end – start – tHold)*(deltaY/(deltaX + deltaY));
if (time < start + tHold + xTime){
startPos = origin + [oldX,oldY]*gap;
targetPos = origin + [targetX,oldY]*gap;
easeOut((time – start – tHold)/xTime, startPos, targetPos);
startPos = origin + [targetX,oldY]*gap;
targetPos = origin + [targetX,targetY]*gap
easeIn((time – start – tHold – xTime)/yTime, startPos, targetPos);

OK, I know some of you programmers out there are gonna write me and say “oh that’s grade-school level”, but for the rest of us it’s enough to make us put our heads in a 500 degree oven.

Well, the reality is that simple Expressions are actually easy and can save you loads of time when creating animation while opening up a wide range of creative possibilities.

First off, you can use the Expressions LIbrary to have AE plug the code in for you. When you Alt+Click (Opt+Click on Mac) on the Stopwatch icon to set a keyframe for a property, it opens the Expressions Editor for that property. You’ll then see a fly-out menu icon (the little circle with the triangle in it). Click it, and you’ll see all the categories of Expressions.


In addition, some really useful Expressions are very easy. Take “Wiggle”, for example. This puts random motion on a property over time, and the code looks like this:


Not as daunting as that first set of code, eh? What the (4,10) represents, is the frequency & amplitude of the wiggle (frequency=4, amplitude=10). So let’s say you apply this to the Position parameter of the layer, it will move it at a frequency of 4 times per second, at a maximum of 10 pixels each time. Give it a try and see the results. If you want it to move more frequently, set a higher frequency — if you want it to move over a larger area, set a higher amplitude.

If you haven’t already figured it out, I didn’t write the Expression at the beginning of this post. That one came from the AE Expressions Lab on an incredibly useful Expressions & Scripting resource called This site, created by Dan Ebberts, has a set of pre-baked Expressions that you can simply copy & paste into your AE projects. This is probably one of the easiest ways to get started with Expressions, and no, not all of Dan’s Expressions are as complex as the one I pasted above.

One last thing — there’s a hidden goodie in one of the Project Templates included with AE7. Go to File>Browse Template Projects, and once Bridge launches, double-click the thumbnail that looks like this:


What you’ll find in Template Project is a set of comps that have loads of neat Expressions (also created by Dan Ebberts) that you can copy & paste into your own projects.

The World’s Fastest After Effects User

If you’ve been to any of Adobe’s Digital Video exhibits at conferences like NAB or Siggraph, you’ve probably seen the venerable Steve Holmes presenting on our stage (the handsome English guy with the buzz-cut). Steve is one of the world’s foremost After Effects experts (he hosts Total Training’s After Effects series ), and runs his own design shop, Energi Design in Sausalito, CA.

When he’s not sitting at the machine designing up a storm, you can usually find him riding his bike on the unfathomably steep Mt. Tam (whereas you can usually find me dodging and weaving my bike through SF traffic trying not to get turned into taco meat by an SUV). Steve is an incredibly accomplished bike racer, and he’s about to start a 6-day coast-to-coast race on a team which is made up entirely of riders who have Type 1 Diabetes.


On their 3,052 mile cycling race across the United States, Team Type 1 will be “racing to help cure Diabetes”. They’re attempting to raise $1,000,000 in this effort, and you can support the team by making a donation here.

If you want to see the work Steve does when he’s not racing, take a look at his demo reel.