Thumbnail - when to use a picture-in-picture effect

Q&A – Why Picture-in-Picture Is Effective for Video Tutorials

Picture-in-Picture Can Be Effective For Video Tutorials

It’s not necessary, but when used effectively, picture-in-picture can help enhance the learning context by giving non-verbal cues to online learners.



My thoughts about this is in constant evolution.  Just asI try different techniques every time I teach a live class or workshop, I try different techniques also in my online video presentations.  No one technique, however, is definitive.  Like many presentation styles, there are a variety of approaches that can be effective.  The main thing is that we keep trying different techniques AND keep reflecting on feedback from our network so that we can refine our technique for the next iteration.

Also, my choices about how I include picture-in-picture in my screencasts is also influenced by a desire to make each presentation as much like the “feel” of a classroom environment as possible.  In a classroom, the teacher/facilitator is always visible.  The teacher doesn’t have the luxury of visually fading out… although I know some lectures you and I have attended can certainly feel like that would be a benefit.

But my point is that, more often than not, there’s a benefit to seeing the instructor.  You and I, as students in a live classroom, often take our visual cues from the non-verbal mannerisms and gestures of the facilitator as much as we would from the verbal.  But, the question of how best to translate that same live classroom atmosphere to a video context is an ever evolving challenge — one that I think too many online teachers actually DON’T do well.

For example, too many online facilitators, I think, go too far the other way.  That is, they display NO PIP (picture-in-picture) overlays at all and rely exclusively on voiceover and screen recordings of PowerPoint slides.  Now, I’m not saying that’s wrong.  Because, you only have to go as far as a site like to see how effective pure voiceover instructional content can be.

But, my experience, too, is that in far too many pure-voicover style instructional videos–especially from folks who are trying this for the first time–is that the facilitator relies almost exclusively on PowerPoint and voiceover and ends up becoming too far removed from the learner.  And, in a way, I think that ends up sort of robbing the learner of non-verbal cues and facial expressions that can otherwise enhance the learning environment.

Now, I have some thoughts about what makes for an effective Picture-in-Picture overlay that I’ll follow up with later. But, for those of you in any of my online courses now, you can catch my thoughts about that in the introductory lecture about the Picture-in-Picture overlay in my Digital-Know-How course.

In the meantime, I’d love to hear your thoughts about this. For videos you’ve seen that use a picture-in-picture of the teacher, what is it that you did or didn’t like about them in general.  And, if you like the pure voiceover type videos (with PIP overlays), is there something specific you can point to that makes them particularly effective?

[Video] How to make the ‘Magnifying Glass Map’ effect in Screenflow

image-how to make the magnifying glass effect using screenflowIn a previous post (ref: How to Make the Magnifying Glass Map Effect Using Camtasia) I shared the tutorial of a colleague who made this animation using the green screen (“remove a color”) feature in Camtasia Studio v 8.1.  (Just a quick note: the “remove a color” feature wasn’t available in Camtasia Studio prior to version 8.1.)

Let’s Use Screenflow This Time

In this post, I wanted to share a few more details about making the effect work — and this time let’s use Screenflow (for Macintosh) to pull off the effect.


The gist of the effect is to use screencasting software to show a metaphor–in this case, a magnifying glass–move across a map.  As it does so, magnified areas of the map appear wherever the magnifying glass traverses the map.  In addition to applying this effect when screencasting map sequences, the effect can also work well for other screencasting projects in, say, biology and anatomy when tracing genomic sections.  In which case, perhaps a microscope metaphor might work.  Or, you could also apply it to financial scenarios where you might want to “drill-into” a spreadsheet cell and examine the underlying calculations.

The range of scenarios is obviously limitless.  The main thing is to use editing software that will allow for:

  • Chroma key-type effects (a.k.a., green screen or “remove a color”)
  • Multiple tracks in the editing timeline
  • And keyframe animations


0:15 The end-state of the magnifying glass effect we’re shooting for.

0:40 You have to make it in two passes. The first pass is to produce a reference video with a colored shape that you’ll later “punch a hole” through.

0:55 The second pass is to use the reference video with the colored shape as the starting point for a new Screenflow project. Then, “punch a hole” through the colored shape using the chroma key video effect in Screenflow.

1:15 The third step is to overlay the magnifying glass stock image in order to complete the metaphor.

1:30 Here I launch Screenflow to start creating the reference video. Here we used a map graphic snapped from Google Maps. Then, on top of that, we add a red-filled circle.

2:45 Animate the red-filled circle to trace out the path on the underlying map that you want your magnifying glass to trace.

3:15 A question for the Screenflow Product Managers at Telestream! (What’s the deal about not easily being able to create a color-filled circle?)

5:30 Export the animation to create the reference video.

5:50 Create a new Screenflow project and import the reference movie.

6:25 Use the Screenflow Chroma Key video filter to punch a hole in the red-filled circle in the reference movie.

7:15 A word you need to know about the “tolerance” setting in the Chroma Key Filter. Initially, Screenflow will attempt to make a transparency on all similarly colored objects on your screen — even ones you don’t intend. The Tolerance parameter in the Chroma Key filter can help you adjust this!

8:20 Add the magnified graphic to your timeline and underneath the reference movie. This will then be revealed through the “hole” in the reference movie above it.

9:45 You now need to animate the underlying (magnified) graphic on track 1 in order to sync it up with the “hole” in the reference movie on track 2.

10:55 New term: Definition of T.L.A.R.?

12:05 Now we complete the metaphor with the magnifying glass graphic. You can find these graphics from cost-effective royalty free media sites like Fotolia or Presentermedia.

13:30 A little tip about the differences between PNG and JPG files. And what’s the preferred file format if you want transparency included.

14:10 Importing, aligning and animating the magnifying glass image in order to sync it up with the “hole” in the top image and the magnified map underneath.

16:45 The completed magnifying glass effect is fully rendered.

How to make the ‘magnifying glass map’ effect using Camtasia

green-screen-backThe Green Screen Effect Ain’t Just For Talking Heads

In the Fundamentals section (Module 2) of the Digital-Know-How course and Section 2 of the Deep Dive Screencast training course (Camtasia Studio) on Udemy, I teach you how to make the so called “green screen effect” in Camtasia Studio.  However, in the course I model a scenario where we use a video of a live “talking head” subject in order to project him/her onto another background.  But, as you’ll see below, the green screen effect isn’t just for live subjects.  You can use it, too, to add some creative twists to your eLearning and screencast projects.

“The End”

Credit for this animation goes to David Demyan.  In the first video below, David shows a creative use of the visual properties and green screen (“remove a color”) features in Camtasia Studio 8 (for Windows).

Beginning with the end in mind, David first shows the end result of the effect that shows a magnifying glass graphic panning across a map.  As the  graphic pans across, a magnified section of the map appears inside the magnifying glass.  Brilliant!

The “Reveal”

Here’s how he did it.


  1. Use Camtasia to publish an initial “reference video” that includes the background and a green colored shape that you’ll use later as a mask.  This mask will later reveal a “hole” through which you’ll see a magnified image.
  2. Create a second screencast video project.
  3. Add a magnified version of the background graphic onto track 1.
  4. Add the reference video from Step 1 (the one that contains the green masking shape) and place it onto track 2.
  5. Use the “remove a color” effect in Camtasia Studio and apply it to the green shape in the reference video.

There are some additional overlays David uses to enhance the context and “theme” of his project.  In the second video above, for example, David uses a magnifying glass graphic as an overlay to the masking shape.  You can use other overlays that match your theme, but the gist of the steps are in the highlights above.

“What if I’m not using Camtasia Studio?”

I’ll follow up with another post that shows how you can produce the same effect in Screenflow (for Mac) and Camtasia for Mac.  But, essentially, just as long as your chosen screencast editor will support:

  • multiple tracks,
  • keyframe animations (a.k.a. “video action” in Screenflow; “add animation” in Camtasia)
  • and green screen features (a.k.a., chroma key in Screenflow, “remove a color” in Camtasia)

then you’ll be able to effect the same animation that David deftly manages above.


3 Simple Steps To Learn How to Draw For Graphic Note-Taking

Technically, I guess it’s called graphic recording

I’m not saying it’s the only way to take notes.  I’m not even saying it’s the best way to take notes.  All I’m saying is that it’s another way to take notes.  And, one that could help you internalize concepts better by the simple act of associating imagery with cognition.

In this video, Rachel Smith explains to a room full of Tedx conference attendees about the  value of graphic recording.  But, more than that, she facilitates a quick activity that you can also do in, like, 30 seconds, that will prove to you that you have the ability to draw.


(8:30) What’s the most common objection from folks who think they can’t learn how to graphically record?

(9:30)  Three Simple Steps:

  1. Pick a tool (9:40)
  2. Learn a few basic icons in your drawing vocabulary (10:40)
  3. Listen for and capture key points (12:00)

(13:28) “You don’t want to take too long…”

(15:00) Give it a try… (activity).  Draw a person.

Trace Your Way to a New Graphic Vocabulary

Basic icons for graphical recording

Click to enlarge. Courtesy: Rachel Smith.

That last point reminds me of another easy way to learn your graphic vocabulary.  A few weeks back I posted an article about the “Dummies Guide to Drawing Custom Sketch Graphics On the iPad.”  By using the same technique I showed there for drawing a simple ball (and a not so simple F-18 jet fighter), I’ve been steadily learning how to build my own graphic vocabulary.  You can do it, too; give it a try.

Take the image above (click to enlarge-courtesy: Rachel Smith) and, using the same technique I showed in the “Dummies Guide” post, import the image into your iPad Sketchpad app,  then use a (fun) little activity we all used to love in grade school:  Tracing.

Maybe once you and I become proficient with our basic “vocabulary,” we too can put more imagery in our notes.

Your turn

Give it a try.  Then tell me.  How long did it take you to draw a person?

What we’re learning from online education about personalized learning

“Big breakthroughs happen when what is suddenly possible meets what is desperately necessary.”

~Thomas Friedman, May 15, 2012, New York Times


1:40 – The cost of higher education tuition increased 559% since 1985.  Source: BLS

6:50 – Some of the learnings from these online (MOOC) courses:

  • You can break away from the monolithic 1 hour lecture
  • You can break up the content into smaller, consumable content
  • Students can take time to prep with pre-requisite content before attempting a segment
  • Students can revisit sections
  • Active learning can help increase student learning
  • Technology and “big data” can be used for personalization of learning content

7:45 – Retrieval Practice Produces More Learning than Elaborative Studying with Concept Mapping. J. Karpicke, J. Blunt. Science (2011)

9:45 – How can you use technology to grade the work of 10,000 students?

  • 11:15 Peer Grading — and perhaps even self-grading — is a surprisingly effective strategy. They correlate well with teacher-assigned grades.

12:15 – The median response time to student questions can be a lot faster than that of a physical classroom. Due to global nature of the community and global study groups.

14:05 – You can potentially collect a LOT of data.  Clicks, submissions, pages, communications. You can analyze root causes of student trouble-spots and refine the training to cater to those misconceptions. Can give prsonalized feedback.

16:00 – The opportunities of personalization. Summary of Benjamin Bloom’s “2 Sigma Problem: The Search for Methods of Group Instruction as Effective as One-to-One Tutoring.”  How can we use technology to help students achieve the levels of mastery and individual tutoring shown in Benjamin Bloom’s 2 Sigma analysis.

18:10 – Are universities now obsolete? Active learning, through personalization, can help improve learning. “Improved Learning in a Large-Enrollment Physics Class.” L. Deslauriers, E. Scheles, and C. Wieman. Science (2011).

19:27 – If we could offer a top quality education to everyone in the world for free, what would that do?

Your turn

What do you think?  Are MOOCs and online education the wave of the future?

[Q&A] “Should I get Screenflow? Or Camtasia for Macintosh?”

Here’s this week’s Q&A from my Digital-Know-How course, as well as the “Deep Dive” screencasting courses on Udemy (Camtasia Studio and Camtasia for Macintosh).


The questions we’re answering this week are:

  • Q&A #1. What’s better…Camtasia for Mac or ScreenFlow? Is it worth buying Camtasia if you already have ScreenFlow?
  • Q&A #2. Is it true that Camtasia for Macintosh supports much more functions than the Windows version?
  • Q&A #3. Mel, I have been thinking of getting a Macintosh, but I work in primarily a Windows environment. To date I have not found a MAC tool that allows me to load Windows like you have in all of your videos. Can you share what you are using?

Your turn

Which screencasting software do you prefer to use?