Here’s the plan:

• Get footage to use Motion Tracking on
• Import into After Effects and track it
• Apply tracked movements to a null object
• Parent camera to null object
• Make sure all layers are in 3D space for the best outcome

1. If at all possible, choose as plain as possible of a background and have two very clear points of visual contrast on it. If you have access to a large marker/chalk board, you may try drawing two large dots on it (with several feet of distance between them if possible). Stand back from the board and get both the points in your camera’s view, then shoot as much footage as you think you’ll need. Keep in mind that you can re-use chunks of footage for multiple shots. (As animation doesn’t tend to have epic-long shots, you could technically re-use the same 15-second-long footage over and over). It’s important to keep your hand steady as to not have too frenetic movements, but enough conscious movement that it feels as though the balance is being fought.

2. Next, import the footage into After Effects. Drag it into your main composition and size it up so it takes up a good majority of your stage. Open up your motion tracker by going Window > Tracker if you haven’t already.

3. Make a Null layer, and make sure it’s on top (Layer>New>Null Object). Also make it a 3D layer. Select your motion tracking movie layer, and then Track Motion under the Tracker. This’ll bring up just that layer (movie). You’re able to track position, rotation and scale. I generally go for position and rotation (though scale can be useful depending on your needs, and rotation can be a hindrance if you want your camera to remain horizontally stable). The motion tracker will bring up two points. Dragging the center box will allow you to move it around to the point of contrast that you want to track. The outer box tells After Effects the spatial boundary range that it can search for the point defined in the center box. Dragging the corners of the boxes will define their size. (Dragging the center box can also define the outer box’s range). Make sure that it’s very clear within the center box what the point of visual contrast is that you’re using to track. Try to choose objects that are a distance from each other, for better tracking results. The larger the spaces defined, the more processing power it’s going to take (aka time) for After Effects to track your motion.

4. Set your target: Edit Target > Select the Null object layer.

5. Go to the first frame that you want to track and hit the Analyze: > (play) button under the Tracker! Watch as it tracks your motion, and make sure you’re happy with it… If it loses track of a point, you may need to go back to the first frame and adjust the size/placement of the tracking boxes and then re-analyze it. If the clip expands the duration of your comp, you may need to hit the stop button. If you’re happy with the way your tracking went, click the Apply button (and then make sure X and Y is selected)  to give all the motion-tracked information to the Null.

6. There’s a chance that your motion tracking went pretty well overall, but there were a few pops/jumps that didn’t make sense with the overall footage. You can select the Null’s layer and either delete those keyframes or edit their position on the Stage. Use the arrow tool and drag and drop them around until you’re happy with the movement. This is zoomed in 800%:

7. Do you have a camera set up yet? If not, Layer>New>Camera! Also make sure that all your layers are set up in fancy 3D space so you’ll get some nice depth.  Then parent your camera to the Null Object layer and take a look through it.

8. You may decide to do camera moves with the handicam; if so, make another Null Object layer (let’s call it ‘Camera Move’). Activate the layer’s 3D property. Set up your parenting structure so:

Camera > Camera Move > handicam null

Use the Camera Move layer to navigate the camera around in 3D space (pans/trucks/all that good stuff).

Comment with questions! Hope this is useful

After reading an article on Smashing Magazine, I thought I would try my hand at making an animated Favicon. And guess what– it worked! However, there’s a slight handicap to having an animated Favicon: only newer browsers will recognize its animated nature and decide to display it. Older browsers, however, will take one whiff of the .ico file and instantly reject that whiff that is of animation. For those users who are on older browsers, they’ll get a general� page logo, as opposed to a site-specific Favicon.

But let’s promote newer web browsers (like the recently-released Firefox 3.0) and allow ourselves to make animated Favicons! Often I find a simple solid color with a logo/letter is not unique enough to each site…. (Facebook, Myspace and now Google all share blue-and-white Favicons). If we’re able to animate, we can change color– which further means greater diversity in Favicons, hence giving YOUR site more individuality!

The programs I used to pull this off are Adobe Photoshop, Adobe ImageReady and Dreamworks. I’m sure you can pull it off with other programs, but due to their popularity I’ll demonstrate with these.

For one, you don’t want your Favicon to be too distracting. A fast-paced, obnoxiously-flashy and convulsion-inducing Favicon is, in the end, more likely to be a quick identifier for your site, but may give your design skills 50 un-cool points for annoying your visitors. So keep it simple!

First, make a 16×16 document in Photoshop. Hopefully you’ll have in mind something that you want to animate– say, a static image with its hue changing, or perhaps your site’s name scrolling marquee-style.

You can scale down any previous image you have and� work with that, if you want. But I’ll make a marquee in this demo.

My bottom layer is a simple vertical green-dark green gradient. I have a text layer on top which says “Tahnee.com”.

Once you’ve got your layers set up for all that you want to have incorporated/animated in the final icon, hit the export to ImageReady button:

Once ImageReady opens, make sure your Animation timeframe is open. (Window>Animation). This is what we’ll be dealing with:

Arrange your layers so that the composition is how you want it to look for your first frame. As this is a marquee, I’ve set it up so my text is not visible– but for convenience purposes, I have it set up centered, just to the very right of the ‘scene’ (or whatever’s visible in this frame). Once you have your first frame looking like you want it to, hit the new frame icon at the bottom of the Animation editor; it’s to the left of the trash can, it looks like a page with its bottom corner turned up. This creates a new frame. So long as your current frame is selected, you can re-edit your composition to what you want it to look like. Using the arrow tool, I have my “Tahnee.com” text layer selectedand using the left arrow key, I nudge that whole layer to the left by a pixel. (Remember, we’re only on a 16×16 pixel canvas, so moving things around won’t take too much time and effort). I want my “Tahnee.com” text to scroll to the left, so after I nudge it to the left by one pixel, I make a new frame, then nudge, make a new frame, nudge, make a new frame….. and so on.

Here’s a progresion of what my frames ended up looking like.� Remember, this is only ONE way to go about making an animation– you could speed up the scrolling process (and hence save yourself on download time) and nudge each frame two or three times, instead of just one. But this offers a slow, not-too-distracting(yet interesting) Favicon.

Once you’re happy with your animation (you can hit the little play/stop button to test it out in the Animation editor– watch the actual image itself because that’s what animates)� you’re ready to export! Go File>Same Optimized As and then save your file as a .gif.

Next, copy and paste your .gif into your website’s main directory. I opened up Dreamweaver and in the file manager, found my favicon.gif file and renamed it to favicon.ico . That’s really IMPORTANT! I’m not sure if a browser will quite read a .gif as a favicon, because they expect a .ico file. So make sure to turn that .gif into a .ico! (However, some browsers do read .gif and .png files, so you may be able to leave it as a .gif and try working with that).

And then, upload it to your site’s root.

Now, so far as I know, browsers magically discover the favicon.ico file and automatically display it. However, it doesn’t hurt to throw in some code in the event that doesn’t happen.

<link REL=�SHORTCUT ICON� href=�http://www.yourdomain.com/favicon.ico�>

Copy and paste that code in between the <head> and</head> tags of your html document(s) and you should be good to go.

Apparently IE won’t recognize .png and .gif favicons (and my old IE6 doesn’t like the current animated favicon.ico), but other browsers may catch onto these alternate codes:

<link rel=”icon” href=”/favicon.png” type=”image/png”>

<link rel=”icon” href=”/favicon.gif” type=”image/gif”>

Then, view your site– be sure to hit the refresh button on your browser to get the new favicon into your cache… or else go directly to the favicon itself (www.tahnee.org/favicon.ico, for instance) and then try viewing your site. Hopefully all goes smoothly with a new, animated favicon

–Do note that for tahnee.org’s new favicon, I chose to duplicate my original image layer, and then modify the hue on the second layer. In ImageReady I adjusted the opacity by 10% for every frame, allowing it to ‘settle’ five frames on each extreme (blue and green). You could move elements around, you could draw out new frames. But let’s put some animation into our bookmarks and tabs!