Screencasting as Art: Exploring Cinematic Techniques
Posted by Brooks in Screencasting on Sep 10th, 2009 | 14 commentsScreencasting has a problem–it hasn’t evolved all that much over the 10 years or so since its inception. We still record the computer screen from a stationary position (dead centered) and we still present this flat, banal presentation to users sitting at their computers, which in and of itself presents problems (you’re looking at a computer screen on a computer screen–where does one end and the other begin).
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.
14 Responses to “ “Screencasting as Art: Exploring Cinematic Techniques”
Leave a Reply
Oh my goodness. Amazing insight. I really think you have hit the nail on the head. I’ve been avoiding consuming screencasts for as long as I can remember; they just haven’t been a medium that I have enjoyed. But I was in the tv/film industry for years before turning to RIA and while I have tried to apply some of the same ideas to Application Design (where will the user’s eye land when this is happening/moving) I have never really considered the (overwhelmingly positive) implications of applying the same techniques to something so . . . boring. This really changes my opinion of what can be delivered by a screencast.
Excellent post and video, Brooks. As the guy who taught media production classes at Hope College used to say, “the technology changes all the time, but the principles you learn here are timeless.” (In 1996, we had one Mac workstation with Adobe Premiere 4.0—which ate the only project I tried to do on it, along with an entire weekend—but we edited nearly all projects on 3/4″ U-matic tape using a massive editing suite.)
Anyway, I wholeheartedly agree that the underlying principles of lighting, framing, proportion, camera movement, pace, and storytelling apply regardless of the subject matter and medium.
If I had any quibbles, I guess they’d be that the jump cuts (e.g., 3:27 and 3:43) detracted from the experience for me as someone who is unfamiliar with the After Effects interface. I think smooth camera movement would have been a preferable way to change camera angles while maintaining continuity.
Also, I remain unconvinced that the keyboard cutaways really add anything to the experience. I found them a bit jarring and disproportionately prominent relative to the amount of benefit derived. I’ve thought a bit about whether to blame the execution or the concept, but I think it’s the latter. So I’ll toss a question back to you: what contribution does this cutaway make beyond aesthetics?
I don’t need really help finding the “v†key on my keyboard. :-) So is it teaching me a new keyboard shortcut? Helping me better comprehend and track with you?
I think by cutting away from the screen to show the action in isolation you lose the mental association between the keypress and the tool change. So if the benefit is to teach or reinforce a useful hotkey, might there be some way to show both things simultaneously and thereby strengthen the association in the viewer’s mind?
Thanks again for posting; this is good stuff to consider and discuss!
-Daniel
P.S. – Was your earlier tweet about a 6-hour render in reference to this screencast?
@ Daniel- Thanks for the thoughtful response. I’m a big believer in not doing big moving pans unless there’s a real storytelling reason to do so. Most of the time panning is a distraction, slows down pacing and doesn’t do any storytelling (that’s why you see so much camera POV shifting in modern video). I don’t think panning from one side of the After Effects interface to the other tells you much about the interface or otherwise aids in the storytelling. I wasn’t intending for the camera POV to represent the person giving the tutorial and there shouldn’t be any position continuity issues that would crop up if I was showing someone looking over the subject’s shoulder and then and punched into the computer screen over the shoulder. In short I’d argue the “jump cuts” do way more for visual interest and pacing than is lost with other concerns. Now that’s not to say there aren’t spots in this video where a wide, medium or short shot might have been more appropriate (there are).
The keyboard shortcuts are admittedly experimental. I believe the arguments you level against them (I don’t need to know where the “s” key is) effectively undercut graphical overlays or stills as well. The position I take is I’m trying to think of this whole screencast as though I was filming it with a real world camera. In that scenario I’d probably pull back or cut to the keyboard shortcuts to “show” what was being done rather than just relying on the audio. If I had real world camera footage of the presenter I’d probably cut away to medium shots of the subject several times to add visual interest, help viewers connect to the presenter and reinforce esoteric ideas that aren’t clear from the screen video or audio. The larger point is you shouldn’t be afraid to use cutaways as an additive / enhancement for your story and since we’re talking about video that means the opportunity to use b-roll footage.
Yes, this is the rendering I was tweeting about. I ended up doing four, six hour renders to look at the pan & scan / lighting footage. I tried previewing it with Dynamic Link, but it was dropping almost all of the frames. We’ll see though, there could be other workflow optimizations I uncover the next time I start experimenting.
I love this article, and would really love a post on the “how to”… maybe a screencast ;-)
Seriously though, this is great and would really like to know how you did it!
@Austin – Thanks. The process is pretty involved. I was hoping to get some time to do some more exploration and get a handle on what can be made more efficient. The short answer is lots of After Effects work (cameras & lights). On a side note, I went to austinholt.com to try and get a handle on who I’m talking to. Now my question is what’s the angle a cat with your background has on cinematic effects and screencasting? Or is it the application of the techniques to other mediums?
I asked Bob Kaplitz, former CBS investigative reporter extraordinaire, to provide a “storytelling critique” of this video and blog post. For the benefit of all, here’s his feedback:
Hi Brooks:
Thanks for your note. Intriguing concept and refreshing approach to what many fail to see as an art, so it’s exciting to see you plow new ground and show capabilities.
To your question:
I figured it would be involved; thanks for the reply. I’ll look forward to a potential AE tutorial someday! Because of my performing background, I also do online promotion. Sometimes people ask me “how do I get famous in __ (insert desired field of choice)?” and I say “it’s not something you do, it’s something you are…” which is just me messin with them a little because I really can’t just explain what I do in one paragraph. Actually, I probably could just answer with “Get good, build a base, be cool, and give people what they want!” but I’d like to use pretty pictures to tell that tale. Thanks again!
Yeesh. Now I feel like even more of a rank amateur than before.
How well do you think some of these techniques and approaches work across an Enterprise? I’m concerned that some of this may not work so well when you’re trying to explain to a group of secretaries how the new purchasing tool works.
I’m also curious about applying this to a screencast composed entirely of PPT slides – at a certain point there’s not a ton you can do to perk up 20 slides on the new benefits package.
Thanks for this post – it’s given me a lot to think about.
PS I’m a historian by training – to say I don’t know a single thing about film making is being generous.
I think that some of the point of the post is the idea of stepping outside of just a series of Power Point slides. The procedure needs to start before you’ve gotten to that point. Or if you’re already there then start over. “Perking up” PP slides is just polishing a turd.
I think that especially for the non-technically inclined (your group of secretaries) this type of presentation would be especially helpful. The amount of production involved would be substantially more than a few slides so you have to think of your audience and return of investment Is this for two or three people? Slides + personal help would be more efficient. Hundreds or even dozens? High quality production would be a better use of your time.
I think the mindset we need to enter isn’t just “use these techniques to make your screencast or slideshow better” but instead get us to think about our topic and the BEST way to portray that information. Slideshows and old fashioned screencasts just don’t move info into brain very well.
Agreed, especially about the Turd Polishing aspect (generally we use the lipstick + pig analogy around here), but I think that’s where my first question becomes important. Clearly the high quality, more communicative (?) production is the best option; but how do you develop those kinds of productions as efficiently as possible? Especially when last minute project + impatient requestor + poor planning = get it done yesterday anyway.
Like everything else it’s priorities, I guess – what really needs the full treatment vs. what you can live with as a polished piece of crap. If there’s a question in this I’d ask if there’s some guidelines or shortcuts that could be applied to every production (regardless of time pressure) so at least the polish is at a high gloss?
[...] recently read a good post by Brooks Andrus on combining cinematography with video tutorials. He mentioned incorporating a variety of cinematic techniques to keep the audience’s attention. [...]
Brooks,
This is a great, thought provoking post. I like how you set the framing and lighting on these. And while I agree that we need to experiment with our effects, I’m not sure I agree with the Comic effect here.
Some of the “prettiest” screencasts I’ve seen are from BeeDocs, the makers of the gorgeous Mac timeline tool. They choose natural settings and make great use of lights, cuts, and sound effects. You can see them at http://www.beedocs.com/movies/ The 101 and What’s New videos in particular are well done.
I’m experimenting with more green screen effects because I believe it’s important for listeners to “see” the speaker. It allows you to establish rapport–and no, I don’t mean in a little cutout windows. You can see an example at http://macscreencasting.com/green-screen-video-in-screencasts.html Your eyes and smile convey a sense of trust and compassion; they make you real.
The downside, as you expressed in your own personal fears, is that it can turn viewers off if we’re not one of the “pretty people.” I’ve shared with others that I think it’s a trade off. Will some people be turned away? Perhaps. But, so what? Let ‘em go. Others will immediately identify with you. I’ve had more than one person say, “I feel like I can trust you.” That more than makes up for those that might be put-off by looks.
The challenge for all of us is the trade-off on production time. I know your 5-minute tutorial took A LOT longer than 5 minutes to produce :-) We’ll have to determine when it warrants an entire day to plan, shoot, and edit a screencast. Maybe that’s for another post.
In the meantime, great job and you gave me lots to think about. Thanks.
Scott
[...] Brooks Andrus This is the blog of Brooks Andrus. Here, at irregular intervals, you may find digital noise centered around the activities of an early 21st century technologist. I work for TechSmith Corporation, but this web space and the views found on it are entirely my own. Skip to content ThumbGenie – An AIR Thumbnail Generator for MPEG4-AVC Videos « Screencasting as Art: Exploring Cinematic Techniques [...]
[...] of the more frequent questions I’ve gotten as the result of the Screencasting as Art project is “how do you do pull off those lighting effects.” It’s a valid question [...]