Producing, Recording, Editing, and Sharing Animated Videos on iPad


A significant part of my pedagogical approach involves the creation of short, animated videos that convey statistical concepts. Students watch these videos and answer a few quiz questions, which I can then use to make better use of the time we have in class together.

Initially, I would record these videos using Keynote on my Mac, edit them on my Mac, and post them online on my Mac. Over the past year or two, I’ve shifted the entire process onto my iPad – recording with an external mic, editing it in its entirety, and uploading it using Safari. I’m documenting that process in this post for my future self and for anyone else that is interested in doing this too.

Recording

Video

Recording a Keynote presentation has become possible since iOS 11 introduced screen recording to Control Center. Now, I can tap record, go through a Keynote presentation, write on slides as I go1, and end up with a high quality recording of my presentation.

One thing to keep in mind is that I always use presentations with a 16:9 (widescreen) aspect ratio. This way the annotation tools don’t show up on the presentation as I go, and when I export the final video in widescreen all the UI is hidden from the viewer (more on that later).

Audio

iOS’ screen recording feature also allow you to keep the microphone on while recording, so that you can narrate over your slides. However, if you’re in a noisy environment or have a very hot mic (I’m looking at you, Blue Yeti), you might want to add a noise gate and some gain control. Luckily, if you use an app that can send your mic input through your headphones while in the background, iOS screen recording will pick up the processed audio!

I use GarageBand for this. It’s free, it’s reliable, and it integrates with third party apps.

Here’s what my GarageBand file looks like. It’s a single, flat audio track taking in my mic input and feeding it through the monitor (which is set to on). You’ll notice that I keep the gain level pretty low on the left.


Now for the fun part. If you tap the track control buttons on the top left and tap “Plug-ins & EQ”, you can add a noise gate, change the EQ, or utilize any number of third party effects.


One app I highly recommend is Brusfri. Once you record a few seconds of silence, you can let Brusfri listen to your recording and filter out background noise for when you record your video.


Editing

Video

Once your recording is complete, it’s time to edit.

Editing video on the iPad has become pretty easy since the introduction of LumaFusion. To begin with, LumaFusion allows you to create a video in the 16:9 aspect ratio, which immediately gets rid of all UI elements from my video (if you want to use a simpler solution like iMovie, I suggest Video Crop as an inexpensive app that will impose the aspect ratio that you need). Once your video is in LumaFusion, the world’s your oyster. You can create crossfades, add titles, or do whatever chopping and screwing your heart desires.

Audio

Two things worth noting about audio editing. First, iOS apps sometimes take a screen recording video and play it back with no audio at all. After a helpful exchange with the developers of Ferrite, I learned that this is because the video file actually has two tracks: whatever sounds the iPad itself produced via software, and the microphone input. Some apps simply ignore the mic input. I’ve found that using the “Detach” button in LumaFusion fixes this2:


Second, if you didn’t do any noise reduction/voice boosting before recording, you can share your video to Brusfri or Ferrite to clean up the audio, and then drop the audio file into LumaFusion alongside the video.

Uploading

Once this is all done, you’re ready to upload. While LumaFusion integrates with many video services and services, I need an actual file to upload to Kaltura, the video hosting platform that my institution uses, so I choose iCloud Drive and save the video in the Files app. Once I go to my media uploader in Safari, I simply select that file using the Browse option (any website with a standard file uploading interface should let you choose your video file via Browse):


A fully functioning system

At this point, 100% of my needs with respect to this workflow are satisfied by my iPad. This means that I have a fully mobile recording studio, and it’s quite easy to make a high quality video in a relatively short amount of time. Hope others will find this useful and, as always, please let me know if you have questions or thoughts.


  1. Though I really wish Apple would beef up these annotation capabilities ↩︎
  2. I’ve also noticed that any app that compresses the video will mix all the audio to one track, which also fixes the problem. ↩︎

iWork gets LaTeX equation editing

In April of last year, Apple released an update for Pages that supported rendering equations entered using LaTeX or MathML. I was really impressed that Apple chose to support not one but two standards for entering equations1, but was pretty bummed to learn that equation rendering was specific to Pages.

Today that changed. All three iWork apps now support equation rendering (even Numbers!). This is a big, big deal for me; it’ll be a huge timesaver2 and enable for much richer math-based animations in my presentations.

If you combine this with handwriting apps like MyScript Nebo, you can hand draw equations, copy them as LaTeX code, and paste them right into your iWork document.

On a different note, iWork on iOS is really growing up. Keynote now supports the editing and creation of paragraph styles and master slide layouts. I still work with Keynote most efficiently on MacOS, especially when editing animations in bulk, but the iOS apps are becoming more and more self-sufficient with each update.

  1. Especially in comparison to Microsoft’s equation syntax, which is just close enough to LaTeX to be infuriating to use.
  2. I used to create equations in a Pages document, then pasted them into Keynote as images. It worked, but it was kludgy as heck.

Summer Podcasts

This summer I was lucky enough to guest on two podcasts.

MPU

The first was a return visit to Mac Power Users. We got into the nitty gritty of the teaching workflows that I’ve developed in the past year, including:

  • How I set up reminders that alert me during class when it’s time to move on to the next section;
  • How I automate the creation of teaching reflections after every class;
  • How I combine PDF files to post to my class via Workflow.

We also got into some music nerdery towards the end. All in all it was great fun, and hopefully interesting to listeners. the

Teaching in Higher Ed

My second guest appearance was on the Teaching Higher Ed podcast, hosted by Bonni Stachowiak. This one was much more pedagogy-oriented, and focused on presentation techniques that I have found to be useful as a teacher.

Hope you enjoy them, and please get in touch if you have feedback.

Mac Power Users #319

This week I was on Mac Power Users to talk about my workflows related to teaching and academic research. I’m a huge fan of MPU so it was quite an honor to be on.

Have a listen – feedback always welcome.

Mac Power Users #319: Teaching Workflows with Teddy Svoronos

Annotating Screenshots in iOS with Mail

Gabe Weatherhead has an awesome post about how he uses the awesome Pixelmator to annotate screenshots. It’s awesome.

Gabe’s discussion of the limitations of all the many different existing iOS apps to annotate screenshots got me thinking about another option: the Markup extension in iOS Mail.

In addition to being built in, the Markup extension has some nice properties:

  • it has excellent shape recognition, including arrows;
  • it’s pressure sensitive using 3D Touch on the iPhone 6s and the Pencil on the iPad Pro;
  • it has a very simple and easy to use interface.

There’s just one big downside to markup: for reasons I cannot fathom, it’s only available in Mail[1]. This is in spite of the fact that it exists in the action extension share sheet in Mail:


Despite this major limitation, the usability of the markup extension makes it worth using by sharing a photo via Mail, then saving the sent image back to your photo library.

First, share an image via Mail and tap on the image to get the Markup option (I sometimes have to tap it more than once):


You can then edit the image to your heart’s content including shapes (notice the nice shape recognition option at the bottom), text, and even a magnifier callout:


Once that’s done, you can either send it to yourself and save/share the image from iOS mail, or you can use this handy dandy IFTTT recipe to email it to IFTTT which saves it back into your photo library, annotated and all. A bit roundabout, but it works.


  1. That’s right, not even Notes or Messages. Maybe in iOS 10?  ↩

A Good Day to Keynote Hard

Keynote on iOS got an update yesterday, with a zillion improvements, the biggest of which are multitasking and Bluetooth keyboard support. These are features that are being added to lots of iOS 9 apps, but on Keynote they enable three fantastic use cases during presentations.

Use a Bluetooth Clicker to Control Your Presentation

The new update brings lots of keyboard shortcuts to Keynote. If you have a Bluetooth keyboard connected, hold the ⌘ key to see a few:

Keyboard shortcuts on Keynote for iOS.

What isn’t as obvious is that keyboard shortcuts work while presenting as well. As far as I can tell, they almost perfectly correspond to the OS X version of Keynote. It occurred to me that most bluetooth clickers just map their buttons onto keyboard keys, so I picked up this bluetooth clicker from Staples to test it out despite the fact that it said Windows/Android only on the box.

IMG_5276
And, lo! I could advance and backtrack slides, and even mute the screen (the equivalent of pressing the “b” key). In the past this has required some wacky workarounds using Accessibility features that broke between versions. This feels much better.

Use (Almost) Any App for Presenter Notes

When using Split View, only the “main” app can use features like the microphone, camera, and, most relevant to this post, video out. This means that if you’re using Keynote as your main app while Airplaying or using a dongle to project your iPad onto an external screen, only the Keynote presentation will be visible to your audience. This means you’re free to keep OmniOutliner (pictured), Notes, or any other Split View-enabled app on the side of your screen while presenting. As someone who prefers to have my full outline available to me rather than slide-specific Presenter Notes, this is huge.

Presenter Notes on Steroids.

Control Two Screens at Once

This may not be relevant to a lot of people, but I’m lucky enough to teach in an environment where I have a main, centered projector and an LCD screen on either side of it. I generally use an Apple TV to project a version of the class handout from my iPad running GoodNotes[1] onto the main screen, and Keynote slides from my iPhone on the side screens (either conceptual slides to provide context or formulas for students to reference).

Traditionally, this has meant controlling both my iPad and iPhone simultaneously, which can get a bit hairy. With Split View, this is no longer an issue.

Since GoodNotes has a video out mode, keeping it as the main app on my screen projects only the handout via Airplay. I can then use Keynote’s remote function as the side app to control my iPhone on the side screens. It sounds a bit complicated, but having it all on one screen makes this feel surprisingly smooth.

Main app: GoodNotes. Side app: Keynote

Better, Faster, Lighter

Over the years, I’ve increasingly preferred my iPad for presentations over my Mac. With these new features[2], my iPad is now capable of creating presentation environments that my Mac simply cannot. Can’t wait to see what’s next.


  1. An amazing, wonderful, great app. I should write a post on it.  ↩
  2. The bluetooth clicker feature is a win for anyone with an iOS device. The other two features require an iPad Air 2, iPad mini 4, or iPad Pro to activate Split View. People with some older devices can still use Slide Over instead, which preserves most of the fluidity of what I’m describing.  ↩

Showing Context with Magic Move

I use Keynote for all of my presentations. It’s a hassle to have to run them off of my own devices instead of using a venue’s PC (though it’s getting easier), but it’s worth it for one reason: making animations is incredibly easy in Keynote.

Fitting In

When I say animations, I don’t mean dissolves and smash cuts. I mean moving objects within a slide in a way that shows them in a new light or reveals more context.

For example, here’s a graph showing changes in global surface temperatures over the past thirteen ears (which looks flat), which I then frame in terms of a much longer timescale (which shows temperatures rising at an increasing rate):

Here’s another example from my dissertation work. My research involves taking randomized trials and analyzing them as an interrupted time series analysis. This can be a little difficult to understand conceptually, so I use an animation to visually show the difference between the two analytic strategies:

To me, these animations are useful because the objects of interest never disappear from the screen. They are simply reframed in a different context, allowing the audience to make the leap from one setting to another.

I’m sure there’s some great literature on why this is more compelling, but all I can say is that it has worked very well in my experience. Better still, the time cost of making these is much lower than you might think.

From Transitions to Animations

I made a toy example that builds a diagram using three methods: a simple dissolve transition, an animation, and an animation with an additional delay that I find appealing. Here they in sequence:

And here they are next to one another (I timed it so that the actual length of transitions is the same for all three):

Here’s a link to the Keynote file, if you’d like to play with it further.

From Dissolve to Magic Move

Going from the dissolve transitions to the animated transitions is as simple as changing the transition between slides from “Dissolve” to “Magic Move”. Magic Move is a Keynote-specific transition that detects identical objects between two slides, then transitions between the slides by having those objects move from their place in Slide 1 to their place in Slide 2. The easiest way to make this happen is as follows:

  1. Duplicate Slide 1 and change its transition to “Magic Move”;
  2. Move around the objects in the duplicated slide as you’d like;
  3. Profit.

It can be a little finicky at times, especially if you have lots of similar objects (I’ve had this problem when there were lots of arrows on a slide – more on that later), but for most situations it works.

From Magic Move to Delayed Transitions

The jump in quality from Dissolve to Magic Move is enormous; now let’s talk add some frills. I often like to have the objects in Slide 2 that are brand new to fade in after the initial movement has taken place, as opposed to during. Doing this requires a few more steps:

  1. Select all the objects in Slide 2 that aren’t part of the Magic Move transition;
  2. Give them each a “Fade In” animation (I tend to use Dissolve with a short duration);
  3. Click on Build Order;
  4. Decide if you want these objects to fade all at once or one at a time, and make the appropriate adjustment;
  5. Make sure that the first animation in Build Order is set to start “After Transition”.

This may seem like a lot of steps for a small change, but there’s an added benefit: by having objects fade in after the transition, you remove them from Magic Move’s detection algorithm. So, if you’re noticing that Magic Move is choosing the wrong objects to move, you can remove them from the equation by having them fade in afterwards. Bingo!

From Slides to Videos

In my opinion, these animations make presentations a much more valuable tool to convey complex information in a comprehensible way. So valuable, in fact, that I’ve taken the additional step of making them full fledged videos. Almost all of the materials in the Teaching section of my website were made using Keynote. After setting up animations to my liking, I use the “Record Slideshow” function to add a voiceover and export it as a video file. But that’s for another post.

Save files on iOS with Workflow

I like getting work done on my iPhone and iPad. At times it gets impractical (I’m looking at you Stata), but there are lots of simple actions that I can do from my iOS devices, oftentimes faster than I can do on my Mac. One task that I always thought I should be able to quickly do from my iOS device is save a file from Safari, Mail, or any other app to a folder on Dropbox. This has been a pretty clunky process involving using the “Open In…” menu, opening a file in the Dropbox app, choosing a folder, tapping Save, and returning to the original app.

With the release of Workflow, I can finally say that it’s just as easy to save a file on iOS as it is on my Mac.

If you haven’t heard about Workflow, it’s a $2.99 app that lets you build custom actions that you can run from your device. Unlike previous workflow apps like Pythonista and Editorial, Workflow is extremely easy for non-programmers to use. Lots has been written about it since its release in December, ranging from the simple to the extensive to the extremely nerdy. This app can do a million things, but in this post I will focus on an extremely useful, and extremely simple to set up, action to save a file.

The final product

I often come across a PDF in Safari that I’d like to save. With Workflow, I tap “Open In…,” select “Run Workflow,” and choose one of three actions that I’ve set up:

These actions, in increasing order of both complexity and flexibility are:

  1. Save the file to a folder in my Dropbox called “1Read,” where I save PDFs for later reading;
  2. Save the file to an arbitrary folder in Dropbox;
  3. Save the file to a folder in iCloud Drive, Dropbox, Box, Google Drive, or any other third party service that supports document provider extensions in iOS 8.

Here’s a collection of screenshots that show the 1Read workflow (1), the Dropbox workflow (2), and the iCloud Drive (3a) or third party document provider (3b) workflow:

Workflow (1) has zero additional steps; it saves it to the 1Read folder and that’s it. Workflow (2) has the additional step of selecting a Dropbox folder in which to save the file. Workflow (3) involves first choosing a document provider, then choosing a folder[1].

The crazy part

“That’s fine for a PhD student, but setting this up must take a lot of time, energy, and frustration.”

I hear you, dear reader, but fear not.

I give you, in its entirety, the setup for each of these three workflows:

Some notes:

  • As you can see, Workflows (1) and (2) are identical, except for the toggle “Ask Where to Save.”
  • If you have a frequently used “inbox” folder, it’s worth setting up a separate workflow just for that folder.
  • Make sure you specify these workflows as “Action Extensions” so that they show up in the Share Sheet.
  • Workflow (3) is one that I’ve come to rely on quite a bit. Besides the third party providers, iCloud Drive is actually a nice save location, since if you don’t have an internet connection at the time of saving, it’ll save it locally and upload it once you get a connection.

If you check out the @WorkflowHQ twitter page or the Workflow Gallery, you’ll find lots and lots of other Workflows. But this is one that’s easy to set up, easy to use, and fills a real need in my work habits.


  1. You may notice that Dropbox is a document provider that shows up in Workflow (3). Since I use it so much, and since the native document picker will sometimes crash, I made a separate Dropbox-only action.  ↩

How I will write my dissertation

In the spirit of getting my procrastinating done during the holidays (that’s how procrastinating works, right?), I thought I’d share how I choose to write complex papers. For my purposes, “complex” means any paper that involves some combination of:

  • citations linked to some bibliography manager;
  • equations;
  • internal links (a.k.a. “cross references”).

For simpler papers, I really do like Pages. It makes formatting relatively easy, it has (basic) EndNote and MathType support, and it looks lovely on high resolution displays. More recently, I’ve become smitten with Apple’s new Handoff feature that works with iOS 8 and OSX Yosemite devices. Being able to work on a paper at my desk, then pick up where I left off on my iPad as I move to the couch, then switch to my iPhone so I can stretch my legs, is pretty neat. Maybe this will get old someday, but for now it’s the bee’s knees.

Then there are the problems. In addition to the inability of Pages to satisfy my need for numbered equations, Apple is developing a bit of a reputation for poor backward-compatibility. I am terrified by the prospect of trying to open my dissertation in a few years and getting an alert like this (source: Google+):

This is totally unacceptable, and I hope Apple understands what a massive detterent this is.

The opposite end of the usability vs. flexibility spectrum, there’s LaTeX. LaTeX combines the longevity of plain text with a robust bibliography management system, not to mention the fact that LaTeX was conceived for the purpose of printing mathematical formulas. But, as the above links may suggest, LaTeX tools won’t be winning any awards for UI design.

Enter multimarkdown. Developed by Fletcher Penny, MMD allows me to use one of the hundreds of markdown[1] text editors for iOS using a syntax that can be exported as LaTeX. This export process does take some time to set up (see here for details), but once it’s read I simply have to prepend this metadata to the beginning of a file to make it export-ready:

Title: Title of my document
Author: Teddy Svoronos
latex input: /path/to/header/mmd-teddy-header
latex footer: /path/to/footer/mmd-teddy-footer
Base header level: 2
Bibtex: /path/to/bibtex/file/bibfull
Biblio Style:plain

I may get into the details of this setup in a later post; let me know if there’s any interest.

My editor of choice is Byword (which was recently updated to support Handoff), though I use Fletcher’s own MultiMarkdown Composer when I need to get in the weeds of internal links, table creation, and using the app’s native table of contents viewer.

The only potential rub in this setup is if my advisors want to use Word track changes to provide comments. In this case, I’ll have to export my file as rich text and do some manual futzing to make it presentable. Not great, but those occasional costs are outweighed by the benefits outlined above.

Boy, I’d better get writing.


  1. For background on markdown, see Gruber’s original specification. For an introduction to the syntax for non-coders and why you should use it, I recommend David Spark’s excellent iBook.  ↩