Video runs 3:57.

If you’d like to use the assets in this tutorial and view a completed After Effects sample project you can download the files here.

3d Screencasting Episodes

1. Episode I – It Ain’t Your Daddy’s Screencasting
2. Episode II – Rotoscope Our Problems Away
3. Episode III – Building a Screenshot / Screen Video Sandwich
4. Episode IV – The Magic of Inverted Masks
5. Episode V – Killer Animated Windows
6. Episode VI – Ultra Cool Shadows & Motion Blur

If you’d like to use the assets in this tutorial and view a completed After Effects sample project you can download the files here.

3d Screencasting Episodes

1. Episode I – It Ain’t Your Daddy’s Screencasting
2. Episode II – Rotoscope Our Problems Away
3. Episode III – Building a Screenshot / Screen Video Sandwich
4. Episode IV – The Magic of Inverted Masks
5. Episode V – Killer Animated Windows
6. Episode VI – Ultra Cool Shadows & Motion Blur

Now, I know what you’re thinking–this cat’s gone off the deep end. He’s read too many fantasy adventure novels and has swallowed the whole magical powers bit hook, line and sinker. You’re right about that last part, but in reality working with After Effects is akin to being handed Harry Potter’s wand, and the rotoscoping / masking techniques you’re learning in this series are a Defence Against the Dark Arts crash course. In 3d Screencasting Episode IV we’re going to be dashing around our screen footage, inverting masks and disappearing windows. It’s not learning. It’s magic! ;-)

Without further ado, it’s time to climb aboard my little screencasting wizards, we’re going for a magic carpet ride!

If you’d like to use the assets in this tutorial and view a completed After Effects sample project you can download the files here.

3d Screencasting Episodes

1. Episode I – It Ain’t Your Daddy’s Screencasting
2. Episode II – Rotoscope Our Problems Away
3. Episode III – Building a Screenshot / Screen Video Sandwich
4. Episode IV – The Magic of Inverted Masks
5. Episode V – Killer Animated Windows
6. Episode VI – Ultra Cool Shadows & Motion Blur

To build this sandwich, we’ll use the rotoscoping skills we acquired in Episode II to trim away screen video footage that we don’t want and expose our transparent window frame. Once we’re done editing we’ll pre-compose our layers together into a single composition (layer) that can be easily repositioned, scaled, or exploded (hells to the yah, as the kids in here in the States say). Whet your appetite and dig in!

If you’d like to use the assets in this tutorial and view a completed After Effects sample project you can download the files here.

3d Screencasting Episodes

1. Episode I – It Ain’t Your Daddy’s Screencasting
2. Episode II – Rotoscope Our Problems Away
3. Episode III – Building a Screenshot / Screen Video Sandwich
4. Episode IV – The Magic of Inverted Masks
5. Episode V – Killer Animated Windows
6. Episode VI – Ultra Cool Shadows & Motion Blur

If you’d like to use the assets in this tutorial and view a completed After Effects sample project you can download the files here.

3d Screencasting Episodes

1. Episode I – It Ain’t Your Daddy’s Screencasting
2. Episode II – Rotoscope Our Problems Away
3. Episode III – Building a Screenshot / Screen Video Sandwich
4. Episode IV – The Magic of Inverted Masks
5. Episode V – Killer Animated Windows
6. Episode VI – Ultra Cool Shadows & Motion Blur

To date, screencasting has been very utilitarian in practice and application. Cinematography,the art and craft of visual storytelling, is largely eschewed in favor of faithful description. The result is, all too often, a structureless, 2d, static point-of-view video that fails to emotionally connect and provides little to no visual stimulation. It’s a recipe for boredom. We need to change this stale, tired and lazy approach to screencasting and we need to change it now!

What if we could give our screencasts a sense of depth, bring windows, panels and other UI elements to life in a 3d like environment? We can and should give the screen a sense of energy and excitement for our viewers. In fact, it’s imperative for screencasts to visually stimulate the brains of the people watching them. Today, more than ever, with all the distractions and opportunities that exist on the Internet you must give people a reason to keep on watching.

If you’re interested in learning how to shake things up with crazy cool 3d screencasting techniques stay tuned for the next six screencasting episodes on my blog. In part one, Snagit Product Manager Tiffany Wood demonstrates how to use Snagit 10 to grab the transparent Aero windows we’ll use to begin creating 3d objects. Hold on to your hats screencasting nerds–we’re going to bring the fun. ;-)

If you’d like to use the assets in this tutorial and view a completed After Effects sample project you can download the files here.

3d Screencasting Episodes

1. Episode I – It Ain’t Your Daddy’s Screencasting
2. Episode II – Rotoscope Our Problems Away
3. Episode III – Building a Screenshot / Screen Video Sandwich
4. Episode IV – The Magic of Inverted Masks
5. Episode V – Killer Animated Windows
6. Episode VI – Ultra Cool Shadows & Motion Blur

The shell commands you’ll need to build your Automator apps:

defaults write com.apple.finder CreateDesktop -bool false
killall Finder

defaults write com.apple.finder CreateDesktop -bool true
killall Finder

*Update*

You can reduce this to a single Automator app that checks the current visibility and toggles to the opposite state using the following bash script:

# checks visibility and stores value in a variable
isVisible=”$(defaults read com.apple.finder CreateDesktop)”

# toggle desktop icon visibility based on variable
if [ "$isVisible" = 1 ]
then
defaults write com.apple.finder CreateDesktop -bool false
else
defaults write com.apple.finder CreateDesktop -bool true
fi

# force changes by restarting Finder
killall Finder

***************************************************************************

And for the truly lazy–a precompiled app that toggles visibility on or off:

http://www.brooksandrus.com/downloads/hide_icons.zip

After viewing you should understand which file streams in the recording application bundle contain audio. Luckily once you’re armed with this knowledge its a snap to import the audio streams along with the screen footage into the video tooling of your choice. Enjoy!

Sometimes limits are a good thing. Now to convince my friends on the Jing team. ;-)

Not so fast. I’m here to tell you that its not just possible, but downright simple to directly import and edit screen recordings made by Camtasia:mac in the video tooling of your choice on the mac. You heard that right – direct import without transcoding the video. No long wait times. No bloated file sizes. Lossless footage. For realz. It’s the shiznit. Check it out.

• Configure your After Effects workspace to handle working with elements in 3d space.
• Manipulate the x, y, and z position of your lights.
• Adjust cone angle, cone feather, light intensity and light color.
• Animate the position and light properties.

The video runs 7:05 – feedback welcome.

Screencasting notes:

In this video, I again focused on narrative structure, pacing and humanizing the videos, but I paid special attention to making the production value of the talking head footage much higher. I once again relied on my trusty Flip Mino HD, but decided to try and frame things up a bit better and feed the Flip some light (the Flip really struggles in low lighting conditions). So after convincing Santa Claus (my wife Nancy) that I needed a soft box or two, I set up in front of a bare section of wall in my living room and filmed a couple of talking head segments off the cuff. They turned out well and, much to Nancy’s chagrin, have led me to set up shop in the living room permanently. ;-)

• Humanizing your video.
• Using narrative structure.
• The editor’s role in pacing and its impact on audience attention.
• Lifting production value with sophisticated bumpers / credits.

As usual, we’ll begin with an exploratory screencast and then return to the article for a bit more color on the intent / techniques utilized.

Humanize

Screen video alone is not enough. You need to humanize your content by getting in front of the camera and engaging your audience. And no, I’m not talking about long-winded monologues either. Several 5-7 second talking-head elements can go a long way toward winning over and maintaining the interest of your audience. Let people see your face and don’t be afraid to be emotive / loose. Let them see the twinkle in your eyes and the smirk on your face. As social creatures its how we empathize and bond with each other.

Viewers are most alert at the beginning and end of your screencast (true whether its a meeting, presentation, or screencast). In a recent webinar, noted presenter / storyteller Andy Goodman emphasized how important it is to take advantage of these naturally occurring periods of high focus. That’s why its critical to let viewers see your face and make a connection with you at the beginning of the screencast. It’s also why there’s a talking-head call to action at end of the screencast (during the closing credits segment).

Structure

Screencasts aren’t just raw data spewing out of an organic database. Make your screencasts accessible by breaking them down into logical elements that together accomplish the emotional, psychological and instructive goals of your narrative. Structure can help you engage your audience, build your brand, send your message, and motivate your viewers to take action. In this screencast, the structure – intro, bumper, message, bumper – was deliberately constructed to: create rapport and pique viewer interest, establish credibility and build personal brand, teach software functionality, and build brand while motivating viewers to watch other screencasts.

Making a connection with viewers, getting them to watch, and teaching them something they want to know are obviously the most important elements of this screencast. However, by thoughtfully utilizing structure we can add credibility, build brand, and make calls to action in such a way that they actually reinforce / enhance our top level goals.

Pacing

In the context of filmmaking, pacing is the speed or rate at which the narrative happens, transforms, or develops. It’s important to realize that pacing is more about the viewers sense of narrative speed rather than the actual speed of the event itself. Pacing, then, can be controlled by the rate at which you change what or how the audience is seeing.

In typical filmmaking, lots of “coverage” (extra footage) is shot from a variety of different angles and distances. This allows the editor to control how long any single shot is used by cutting to other views of the scene. This cutting can give a sense of activity and motion, or be used to create dramatic impact. All of these elements keep the viewer more interested in the scene than they would otherwise be if a single camera from a fixed position was used.

How does this all apply to this screencast you might ask? Good question. In order get good “coverage” I did two things:

1. recorded the entire desktop
2. filmed all of the actual hand / keyboard interaction.

Recording the entire desktop allowed me to create a versatile array of wide, medium and tight shots. If you notice, the majority of the shots are either zoomed in (medium / tight shots) or zoomed out (wide shots) from the actual recording dimensions (you aren’t limited to just selecting quadrants of the screen at 1:1 scale). Filming the hand / keyboard interactions allowed me to cutaway to an alternate view of the scene (the hands interacting with the keyboard).

In order to control pacing I alternated between wide, medium, tight, and keyboard cutaway shots every 2-8 seconds (2-5 seconds is the optimum range). This technique creates visual interest and lends speed to the narrative by changing the shot frequently. In effect, I never let the viewer’s eyes get bored by frequently changing what or how they are looking at the scene and I get to “weight” the importance / impact of each shot by the length of time the shot is on the screen.

Production Value

Production value: A method, material, or stagecraft skill used in the production of a motion picture or artistic performance; the technical quality of such a method, material, or skill.

One of the simplest ways to improve the production value of a screencast is to use sophisticated bumpers and closing credits. The quality of these segments affects the perceived value of the enclosed content, reinforces the message, helps establish your credibility as an expert, and, as an added bonus, can help you define your personal brand.

Remember, you’re not just presenting static information. You’re selling it. You’re selling your authority as a subject matter expert. You’re selling the quality of the content the audience is about to watch. And, all the while, you’re establishing a style and building your image / brand.

High production values set your screencasts apart and give your audience another reason to believe in their investment in you. At the beginning of a screencast you’re looking to make your audience believe they should invest their time. At the end, you want to reinforce that the message they just heard was special and significant. Use these elements wisely and you can make all that effort expended recording, editing and compositing worth it.

It’s interesting to note that filmmaking itself started out on this same path by merely recording theatre productions from a stationary position in the audience. Viewers were presented with an an unmoving, uninteresting wide shot from a stationary position in the theatre. Fortunately for us, filmmakers quickly realized that this wasn’t all that interesting for viewers or themselves and thus began the art and science of cinematography.

cinematography – the art of making motion pictures, or as Blaine Brown says, “from the Greek roots meaning, ‘writing with motion.’”

In light of the parallels between early filmmaking and screencasting today I’ve begun to explore screencasting as an art form. How can we make screencasts more engaging? What can we learn from the masters of visual literacy, cinematographers, about pacing, depth, emotion and visual narrative? These sorts of questions are important to explore if we want people to engage with, learn from and, dare I say, enjoy our screencasts. That’s the mindset I think we need to establish for screencasting. We’re not just recording the screen, we’re telling a story and there is a well established historical record of the art and science behind motion picture narratives.

The screencast below, a tutorial on creating animated text-on-a-path in Adobe After Effects, is an early effort to explore this verdant terrain. After watching the video read on for an explanation of the some of the techniques used and the artistic intent behind them.

Cartoon effect. This effect is one part pure stylization, one part psychological effect on presenter and one part impact on the viewer. The latter two are the more interesting concepts, so I’ll try to break them down a bit more.

First, we know that many people are very uncomfortable with the sound of their own voice or with seeing themselves on screen and yet one of the best opportunities they have for connecting with their audience is to directly engage them in front of the camera. The cartoon effect (one of many that should be experimented with) takes some of the edge off of the presenter and diminishes the realism of the shot which is strangely reassuring to the presenter. For instance, while looking at the original footage I was super focused on how fat my face was, how pasty white I looked and how the lighting was too intense. After applying the cartoon effect I felt more comfortable with “me” being on the screen. This isn’t unique to regular schmoes like me, A-list hollywood stars often insist on being shot with filters / lighting that softens the skin–a less realistic viewpoint they’re comfortable with putting on the screen.

It seems likely that the viewer will more quickly identify with the cartoon effect as well. In fact, I’m just echoing concepts Scott McCloud puts forward in Understanding Comics: The Invisible Art. McCloud argues that cartoons are very basic depictions of people (lacking realism) that are much closer to the representation of self we carry around in our heads. Our ultra powerful brains immediately latch onto this representation allowing us to more closely identify with comic book characters. This engagement in turn makes the narrative more compelling. So the comic effect can help presenters be more comfortable and allows viewers to more closely identify with the presenter. Food for thought.

Establishing shot. Usually a wide or medium shot (sometimes a sequence of wide, medium, tight) that sets the scene and provides context (i.e. this screencast is taking place on a mac laptop at my desk). Notice I used the establishing shot during the intro and immediately after the headshot. There’s continuity there–I’m making sure the viewer doesn’t have to think about where they are, or how they got there.

Window matching / door matching (a cheat technique that assists continuity) is also used. Observe that when we zoom-in to the computer on the desk the office establishing shot fades away, but the desktop remains framed around the edges with what looks like a macbook pro aluminum case. As we move from point of view to point of view this frame is visible if the edge of the desktop is visible. In film this technique would be called window matching or door matching. For example, establishing shots are often shot on location (a person at a window is shot outside from street level). However, the film will immediately cut to the interior of the building where the character is–this is typically shot on a sound stage and so they recreate the window or door (or enough to fake it) seen in the previous shot. This provides continuity–the viewer doesn’t have to step back from the narrative to try and figure out where they are. We’re doing the same thing with the pseudo aluminum edges–whenever the edge of the screen is in view we give the viewer subtle reassurance about where they are rather than just dropping off into black filmspace.

Lighting. First off, the ambient light of all the screen footage is dropped way down. This of course has some impact on the feel of the piece. We want the viewer to feel like they’re watching something special and so ambient light becomes important (restaurants having been using this technique for ages). It also allows the spot lighting to work just as it does in a darkened photo studio or at a theatre performance. Think about how the lighting at a theatre impacts your attention and immersion–we’re trying to replicate that feel. Spot lighting is then used to focus the attention of the viewer and provide stylistic shadows. On a side note look at how Hulu allows you to dim the lights for the entire site–yep details like this matter…a lot.

Depth. Camera angle, framing and lighting are the key elements here. Much of the art and responsibility of the filmmaker is in trying to create, or recreate, 3d in a 2d space. We need to create something that’s visually interesting if we’re going to hold our viewers attention. If its a flat representation of a computer desktop that’s being watched on a computer desktop there’s nothing there to pull me into the narrative. Remember, we’re trying to help the viewer engage with the story which means we need to give their brains and eyes a reason to pay attention (there’s actually quite a bit of learning theory behind this concept). All this leads us to an understanding that we need to add depth. That’s why perspective is used on every single shot in this piece. Combine perspective (camera angle) with lighting and you start feeling like you’re not just looking at a flat 2d screen–you’re looking at something with depth, something interesting, something that makes your brain sit up and pay attention.

Framing (what is visible in the viewfinder and therefore the screen). This contributes to depth especially when combined with changing camera point of view. In fact, using wide, medium and tight shots has long been one of the most important narrative tools in the filmmaker’s bag of tricks. What you see in the frame can give you context, tell you what’s important and set the emotional tone. It’s normal to see today’s filmmakers change camera point of view and framing every three to five seconds unless there’s a very good reason to stay longer with a shot (a compelling narrative, a climax or emotional scene). Changing point of view and altering framing creates visual interest and can have dramatic impact on the pacing of the story (something hugely important for screencasts). It prevents us from getting bored and moving our eyes and brains on to something that’s more interesting.

Close-ups have a huge impact as well. We aren’t used to seeing the person (substitute application, window or screen area) this close–it’s a powerful signal to the brain that it should sit up and pay attention. Hitchcock had a rule of thumb that the objects on the screen should fill the frame relative to their importance to the narrative. This is a pretty good guideline for how wide or how close you should be on a particular element (much of the time you just want to be medium to tight). This goes hand in hand with the old photographers saw that for most shots you should, “first get close, then move closer still.” Our brains pay attention to close-ups and are remarkably good at sewing together context if medium or wide shots are thrown in occasionally.

Cutaways. In this piece, keyboard shortcuts are cutaway shots. You might think this would break continuity, but the shots actually show the action being described on screen and often the keys being pressed are synched to the audio recording of the keyboard. It takes less time to cutaway to the actual keyboard shortcut action than it would to display a message that the viewer would need to read and interpret. The very act of forcing the viewer to read a keyboard shortcut takes them out of the visual narrative whereas showing them the action via cutaway is an effective cinematic storytelling technique. In this case the first cutaway is actually poorly executed (the camera is moving enough to distract you), but the subsequent cutaways were filmed on a jerry-rigged tripod keeping the shot still (that’s what allowed us to move in and out of the cutaway very effectively).

Bumpers. We’ve become culturally conditioned to seeing cool titling and motion graphics on the front and back of video. The point is, bumpers suck unless they are, again, visually interesting or entertaining. There’s a huge opportunity to really work on creating cool bumpers viewers will watch that build your personal or corporate brand.

Whew, you made it through this deep dive into screencasting as art. I hope you enjoyed it, and maybe even learned a little something. If you have feedback, comments, insights or artistic quibbles please feel free to rage away in the comments.

Go fullscreen to see the video in 720p High Definition.

It’s that easy–time for y’all to get Jing Pro and set up a screencasting channel for your favorite piece of software or dev project!