How to use Screenflow to create video tutorials

Using Screenflow to Create Tutorials With Voice-Over Slides

 

Just last week I finished recording the videos for the start of the WP Web Designer Mastery Course. The course, which teaches web designers or developers to price, close, build, and deliver effective WordPress websites consists of 10 Modules and a total of 76 lessons! Each lesson has a video, a transcript, an assignment, and a quiz.

As I am now quite adept at doing video tutorials I thought I would make a post that walks you through the process if you’d like to give it a try.

Making video tutorials for blog posts or courses.

Slide Presentation Software

PowerPoint or Keynote: Create your presentation in either PowerPoint or Keynote. Try not to have a wall of text on the slides so that people don’t get distracted by the slides. A little text and a photo or graphic is all that’s necessary. It is important when planning to use slides for a video recording to create the presentation in 16:9 ratio. That is the most common aspect ratio for televisions and computer monitors.

Using this aspect ratio for your slides will fill up the entire width of the video screen rather than seeing a couple of inches of black on either side of the final product once recorded and uploaded to YouTube or Vimeo.

Video Screen Recording

Purchase and download ScreenFlow which now has versions for both Mac and PC. It’s fairly easy to use and there are many tutorials on YouTube if you get stuck. It allows you to capture high-quality recordings of your screen. After recording your computer screen with or without a little box showing your face recorded by your video camera, it shows your video and audio strip right there waiting for you to edit or save it as is. It will record what’s on your screen so you can move back and forth during the video recording between showing slides and showing your browser.

Video Recording of Face and or Screenshare

I use Zoom to create a recording when I want to show me talking. I set the meeting or webinar settings to record to the cloud.  I’ve found that I can create a transcript or outline of my presentation in Word. I set up the Word document with very large font, a wider than letter size (11 x 8.5) displayed near the top of my desktop under the video camera eye. This allows me to discretely scroll through the talk while primarily looking at the camera.

In Zoom, you can use the screen share feature with slides or the website browser but the resulting screen share isn’t as sharp as when using ScreenFlow.  I suggest using this method when you plan to spend most of you presentation talking directly to your viewers.

Video Storage

I use a Vimeo Plus Account as my choice to upload and store videos because I have more control over how they display. It is about $12 per month.  They provide settings for privacy as well as more options than YouTube offers as to how the videos can look when uploaded and displayed to your posts, pages or course site. If your purpose in making tutorials is to get traffic, you may want to use YouTube since they have a larger viewing audience that may find them more easily.  One of the differences that I like about Vimeo is the ability to have the play bar at the bottom of the video, rather than the play icon right in the middle of someone’s nose.

This is what a video looks like on YouTube with the play button in the center and the slides in the wrong aspect ratio with black sides.

This is a video posted to Vimeo with the play button at the bottom of the video and recorded with slides at the correct aspect ratio.

vimeo lesson

How to Record Your Slideshow with Screenflow

PART 1 – Screenflow Set Up

  1. Open the Screenflow App. A video icon will appear in the upper right menu bar on your Mac (I am not sure how this looks on a PC). Click the icon to get the dropdown menu.tutorial on screenflow 2. Configuring the Recording  Select Configure Recording on the dropdown menu. Before I record, I click the item Hide Desktop Icons. When you are finished recording you can select Show Desktop Icons to bring them back.

screenflow

  1. Select Configure Recording to have the following screen will appear. Select the items as I have below, unless you are using an external microphone. If you have an external Mike connected to your computer that option will show in The Record Audio From selection box.screenflow
  2. Next, select the send circle under Record Computer Audio.
  3. A new screen will pop up. Change the Record Desktop Framerate to 30 fps (frames per second). This consistency in frame rate will help the audio and video sync properly in longer videos.screenflow
  4. Next choose New Document from the left sidebar to set the size of the recording screen which will match your slides.5. You are now set up and when you have your slides set up you can select Record. Don’t worry if there is a period where you are recording before the slides are in full-screen slideshow mode, you’ll be able to start your voice over when the slides are ready and the recording is going. Afterward, you will be able to trim off the beginning to any place you want to start.

 

Part 2   PowerPoint Set Up

  1. Open PowerPoint and get your slides set up and ready to start the slideshow. You’ll want to have your slideshow set to be full-screen. Starting with the first slide and set PowerPoint to let you manually advance your slides.
  2. I recommend that you have a transcript for the video. Print out the transcript and mark it to show where the slide transitions happen. Then you can read the script and embellish it a bit. Be sure you are modulating your voice and try to be more conversational while still following the script.
  3. I always export all of the PowerPoint slides to JPG files. PowerPoint will create a folder with all of the slides. This comes in handy in case you make a mistake in your recording as to the slide order. If you have the JPG images you can insert one later when editing the recording so that the recording is showing the right slide.
  4. Create an opening slide template with your logo and the title of the video. If your video is part of a course or a series, create a closing slide telling your viewer what Module or Lesson is coming next.

 

Part 3   Tips for Recording Your Presentation

  • Remember you can edit out the beginning and the end of the video where you are setting up or stopping the recording.
  • When you are recording your presentation, if you make a mistake, don’t stop. Just pause and start over from the beginning of the section with the error. Make a note in your transcript of the spot that needs to be removed. When you are editing you can clip the mistake section out and the new section can be moved to replace it.
  • Even if you are reading a transcript, modulate your voice to speak more conversationally.

 

Part 4  Editing Your Screenflow Recording

 

When you are finished recording your video, navigate to FILE in the menu at the top left of the screen. Choose, save and give the recording a name.

 

When you save the file it will create the editing screen which will pop up for you to begin the editing process.

  • Playing the recording. Drag the red vertical bar with the circles at each end, over to the left side of the screen video You can play the recording by pushing the play button in the middle of the bottom area under the slide.
  • Cutting off the Beginning of the Recording.  To cut off the beginning of the video drag the red bar to the point where you want to cut the recording. Click in the audio bar and it will be edged in yellow, right-click and a menu will pop up and one of the options is to split the video clip. Go ahead and do this and then do the same process on the slide recording bar. Drag the red vertical bar over to where it needs to be, right at the same point that you cut the audio bar and select it with a click. Then right-click to get a menu that shows a Split clip. Do that and then click on the part of the audio recording you want to discard and delete. Do the same with the slide recording.
  • Closing the Gaps. Then put your cursor in the space that you created when you deleted that section of the audio feed and it will turn blue. Right-click and you will see the option to close the gap – choose that option. The remaining audio will move the left to close the gap. Do the same for the video recording.
  • Removing a section in the middle of the recording. Do the same as above but find the places before the error starts and after it ends. Do the same thing you did at the beginning but now you are making two cuts on each line of the recording. Remove the pieces and close the gaps.
  • Adjusting the size of the recording to edit. To make the recording easier to edit you can spread it out to give you more room to make the edits. At the bottom of the screen below where it says, “Screen Recording” there is a progress bar that you can move to spread the recording out or bring it back in. Give it a try.

 

  • To correct an error in the slide placement. Place the red bar where you want to insert the new slide. On the Screenflow navigation menu choose Insert. The dropdown will let you navigate to the JPG of the slide you want to insert (you will have had to export the slides to JPEGs first). Once you select a slide, ScreenFlow will create an additional row above the audio strip and drop the slide into your recording. It will take precedence over the normal slide.
  • Making the Slides the Correct Size. Note that when the slides are dropped in they won’t be the correct size. To fix this, click on the slide and see that it now has circles on the corners. Drag the circles at each corner to make it the full size of the existing slides.
  • Make the New Slide Continue to Show. Grab the right side of the slide with your mouse and pull it to the right, to cover the existing slides until the correct original slide is showing.  You can adjust the inserted slides accordingly.
  • Save When Finished Editing  Go to the Navigation Bar and select File then choose Save.
  • Upload the recording to Vimeo.  After saving at the bottom of the File menu item, one of the dropdowns is Publish. Selecting Publish allows you to choose where to publish the video, Choose Vimeo. You can also have a copy of the recording Saved to Disk. This means to your computer. Go ahead and select that option as well. As to Vimeo, you’ll be asked to configure the connection to Vimeo with your username and password. When you set it up once, it will be set for you in the future.

Continued Reading...

Need Help With Your Website?

Let’s talk. We can help.

Exciting News!

New Tricks is Joining Forces with ClockworkWP!