Why we love ScreenFlow: screen capture for the Mac

by | May 14, 2012 | Social Signal

If you spend any time teaching people about online tools, or documenting them, or pitching them, chances are you’ve thought about screen capture software. And last week, a post on the Web of Change email list asked for recommendations on just that topic.

I weighed in on the side of Telestream’s ScreenFlow, and I’m sharing it here in case you’re looking for something for your next computer or Internet tutorial:

I have a two-year torrid love affair with ScreenFlow (although Darren Barefoot has actually proposed to marry it, so consider me trumped). It’s Mac-only, but if you’re in the Apple universe, you get an awful lot for the $99 pricetag.

Here’s some of what I like:

  • A simple, intuitive editing interface that – for me, at least – beats the more recent versions of iMovie for making sense right off the bat
  • Fast and easy creation of callouts (that is, highlights, with background blurring and darkening, and foreground zooming)
  • Fast and easy annotation with text and shapes
  • Easy addition of new recordings
  • Simple adjustment of playback speed

And here’s some of what I’d like to see:

  • Clip masking or cropping (Update: Lynn from ScreenFlow comments below that you can crop a clip by selecting it and then ctrl-dragging the sizing handles. Huzzah!)
  • Integrating edited clips into one, so you can then apply affects to the whole
  • Customizable presets for text, annotations and callouts
  • More customization in the export settings, especially publishing
  • Better HTML5 support in publishing

Check out some of the other feature requests from the user community.

A note: because its export function relies on QuickTime, you’re limited to Apple’s selection of video formats (of which H.264 is probably the most universal). So if you have your heart set on WebM or Ogg, you’re out of luck.

How about you? Got a favourite screen capture tool? Do you use QuickTime’s free screen recording feature on the Mac? CamStudio on Windows? Camtasia? Jing? Make your case in the comments!*

* Vendors, you know we love you, but please leave this conversation for users and customers. Thanks!

A bookmarklet to hide the Drupal 7 administration toolbar

by | May 11, 2012 | Social Signal

The (barely-tested) bookmarklet: Drag this link to your browser’s bookmarks bar: Hide toolbar | Restore toolbar

I love the administration toolbar that comes with Drupal 7, the one that puts the admin menu within easy reach at all times. It’s one of the most convenient developments in my online life.

But there are times when it’s really inconvenient – like when you I want to show an unpublished page the way an ordinary mortal will see it when they visit. There’s a shortcut bar underneath it, which you can hide or show at will… but that toolbar stays there, come hell or high water, as long as you’re logged in.

Short of installing a module (which would be rude of me, if I’m not the guy actually developing the site), I’ve resorted to hiding the toolbar by manually editing the CSS properties in my browser. A little “display:none” here, a sprinkle of “padding-top:0px” there, and we’re in business.

But that gets old pretty quickly. How about handling it in one click? The JavaScript is actually pretty straightforward (this is on a site where the body‘s CSS “padding-top” value is zero throughout):

javascript:document.getElementById(“toolbar”).setAttribute(“style”, “display:none”);void(document.body.style.paddingTop=”0px”);

It works by hiding the contents of the toolbar, and resetting the body‘s padding-top value to zero.

I tested it successfully in Safari, Firefox and Chrome, but I ran it through John Gruber’s JavaScript bookmark builder to work its magic encoding on the spaces and punctuation just to be safe. It now looks like this:

javascript:document.getElementById(%22toolbar%22).setAttribute(%22style%22,%20%22display:none%22);void(document.body.style.paddingTop=%220px%22);

Of course, you might want the toolbar back again. So:

javascript:document.getElementById(“toolbar”).setAttribute(“style”, “display:block”);void(document.body.style.paddingTop=”65px”);

…and, encoded:

javascript:document.getElementById(%22toolbar%22).setAttribute(%22style%22,%20%22display:block%22);void(document.body.style.paddingTop=%2265px%22);

Limitations:

  • It only disables the toolbar until you reload the page or navigate to another one.
  • I haven’t tested it in anything except the Mac versions of Safari 5.1.5, Firefox 11 and Chrome 19.0.1084.46. Oh, and I’ve tested it on all of one Drupal site.
  • It assumes the body‘s padding-top CSS value is zero pixels.

Let me know if it works for you – or if you’ve found a more useful/robust solution.

Bookmarklets: Hide toolbar | Restore toolbar (or, if you get easily frustrated, Die, toolbar, die! | Restore toolbar)

A bookmarklet to hide the Drupal 7 administration toolbar

by | May 11, 2012 | Everything Else, Social Signal

The (barely-tested) bookmarklet: Drag this link to your browser’s bookmarks bar: Hide toolbar | Restore toolbar

I love the administration toolbar that comes with Drupal 7, the one that puts the admin menu within easy reach at all times. It’s one of the most convenient developments in my online life.

But there are times when it’s really inconvenient – like when you I want to show an unpublished page the way an ordinary mortal will see it when they visit. There’s a shortcut bar underneath it, which you can hide or show at will… but that toolbar stays there, come hell or high water, as long as you’re logged in.

Short of installing a module (which would be rude of me, if I’m not the guy actually developing the site), I’ve resorted to hiding the toolbar by manually editing the CSS properties in my browser. A little “display:none” here, a sprinkle of “padding-top:0px” there, and we’re in business.

But that gets old pretty quickly. How about handling it in one click? The JavaScript is actually pretty straightforward (this is on a site where the body‘s CSS “padding-top” value is zero throughout):

javascript:document.getElementById(“toolbar”).setAttribute(“style”, “display:none”);void(document.body.style.paddingTop=”0px”);

It works by hiding the contents of the toolbar, and resetting the body‘s padding-top value to zero.

I tested it successfully in Safari, Firefox and Chrome, but I ran it through John Gruber’s JavaScript bookmark builder to work its magic encoding on the spaces and punctuation just to be safe. It now looks like this:

javascript:document.getElementById(%22toolbar%22).setAttribute(%22style%22,%20%22display:none%22);void(document.body.style.paddingTop=%220px%22);

Of course, you might want the toolbar back again. So:

javascript:document.getElementById(“toolbar”).setAttribute(“style”, “display:block”);void(document.body.style.paddingTop=”65px”);

…and, encoded:

javascript:document.getElementById(%22toolbar%22).setAttribute(%22style%22,%20%22display:block%22);void(document.body.style.paddingTop=%2265px%22);

Limitations:

  • It only disables the toolbar until you reload the page or navigate to another one.
  • I haven’t tested it in anything except the Mac versions of Safari 5.1.5, Firefox 11 and Chrome 19.0.1084.46. Oh, and I’ve tested it on all of one Drupal site.
  • It assumes the body‘s padding-top CSS value is zero pixels.

Let me know if it works for you – or if you’ve found a more useful/robust solution.

Bookmarklets: Hide toolbar | Restore toolbar (or, if you get easily frustrated, Die, toolbar, die! | Restore toolbar)

A bookmarklet to hide the Drupal 7 administration toolbar

by | May 11, 2012 | Social Signal

The (barely-tested) bookmarklet: Drag this link to your browser’s bookmarks bar: Hide toolbar | Restore toolbar

I love the administration toolbar that comes with Drupal 7, the one that puts the admin menu within easy reach at all times. It’s one of the most convenient developments in my online life.

But there are times when it’s really inconvenient – like when you I want to show an unpublished page the way an ordinary mortal will see it when they visit. There’s a shortcut bar underneath it, which you can hide or show at will… but that toolbar stays there, come hell or high water, as long as you’re logged in.

Short of installing a module (which would be rude of me, if I’m not the guy actually developing the site), I’ve resorted to hiding the toolbar by manually editing the CSS properties in my browser. A little “display:none” here, a sprinkle of “padding-top:0px” there, and we’re in business.

But that gets old pretty quickly. How about handling it in one click? The JavaScript is actually pretty straightforward (this is on a site where the body‘s CSS “padding-top” value is zero throughout):

javascript:document.getElementById(“toolbar”).setAttribute(“style”, “display:none”);void(document.body.style.paddingTop=”0px”);

It works by hiding the contents of the toolbar, and resetting the body‘s padding-top value to zero.

I tested it successfully in Safari, Firefox and Chrome, but I ran it through John Gruber’s JavaScript bookmark builder to work its magic encoding on the spaces and punctuation just to be safe. It now looks like this:

javascript:document.getElementById(%22toolbar%22).setAttribute(%22style%22,%20%22display:none%22);void(document.body.style.paddingTop=%220px%22);

Of course, you might want the toolbar back again. So:

javascript:document.getElementById(“toolbar”).setAttribute(“style”, “display:block”);void(document.body.style.paddingTop=”65px”);

…and, encoded:

javascript:document.getElementById(%22toolbar%22).setAttribute(%22style%22,%20%22display:block%22);void(document.body.style.paddingTop=%2265px%22);

Limitations:

  • It only disables the toolbar until you reload the page or navigate to another one.
  • I haven’t tested it in anything except the Mac versions of Safari 5.1.5, Firefox 11 and Chrome 19.0.1084.46. Oh, and I’ve tested it on all of one Drupal site.
  • It assumes the body‘s padding-top CSS value is zero pixels.

Let me know if it works for you – or if you’ve found a more useful/robust solution.

Bookmarklets: Hide toolbar | Restore toolbar (or, if you get easily frustrated, Die, toolbar, die! | Restore toolbar)

Mastodon