Combine videos side by side in QuickTime Pro

It’s fun to compare where an animation shot began and where it ended up. One way to do this is to create a video that plays the different stages side by side. QuickTime Pro can do this, although the menus are a little hidden.

Here’s one I prepared earlier:

Here is how I made it!

Open all the videos in QuickTime. Each will open in a separate window.

Screenshot of 4 videos open in QuickTime Pro

You will need to copy all the videos into a single file. In this tutorial, I’m going to copy them into the reference video. Let’s start by copying the finished shot. Go to the video you want to copy and select all. You can select all by dragging the handles, using ‘Select All’ in the ‘Edit menu, or with the keyboard shortcut: ‘Ctrl+A‘ (Windows) or ‘⌘+A‘ (Mac).

QuickTime Pro screenshot showing selection handles on time slider

QuickTime Pro screenshot showing Select All command in Edit menu

Got it selected? Now copy it. You know the keyboard shortcuts for copy? ‘Ctrl+C‘ (Windows) or ‘⌘+C‘ (Mac). They work in almost every program. If you like menus, ‘Copy’ is in the ‘Edit’ menu again.

QuickTime Pro screenshot showing Copy command in Edit menu

Go back to your first video (the reference video in this example). Do not use paste (anyone know what Paste does?) There’s a fancy option named ‘Add to Selection and Scale’. That’s the one we want. I’m not 100% sure here, but I suspect you want to make sure that (1) nothing in this movie is selected and (2) the movie you are adding is a similar size and length. Otherwise, you might need to tweak this step to suit.

QuickTime Pro screenshot showing the add to selection and scale command in the Edit menu

The ‘Add to Selection and Scale’ will drop the copied movie right on top of the original one.

QuickTime Pro screenshot showing one video pasted over the top of the original

Wait, that’s not what we want. We’ll need to move it so they are presented side by side. To do that, we need to edit the movie properties (found in the ‘Window’ menu as ‘Show Movie Properties’).

QuickTime Pro screenshot showing movie properties command in window menu

Click the second video to select it and go to the ‘Visual Settings’ tab.

QuickTime Pro screenshot showing the track selection in movie properties

The ‘Offset’ values are how you move the video tracks around in 2D space. In this example, both videos are 720 × 405 pixels in size.

QuickTime Pro screenshot showing the offset properties

Now, in my example I had the original video (reference) offset on right. We’ll actually need to select ‘Video Track 1’ for that. Let’s offset it 720px from the left. That’s how many pixels we need so we can see all of the other video (it’s 720px wide, so we leave a 720px offset for it).

You should see your movie shoot out to twice the size in the background (you may need to press ‘Tab‘ first).

QuickTime Pro screenshot showing editing the offset properties for a second video

Just close the properties box when you’re done. To add the other videos, you need to repeat the ‘Select All’, ‘Copy’ and ‘Add to Selection and Scale’ steps for each video. Open the properties and offset the video tracks.

QuickTime Pro screenshot showing editing the offset properties for a third video

QuickTime Pro screenshot showing editing the offset properties for a fourth video

You can do all the copying first and the offsets last, or offset each video as you add it. You can also scale (for insets), flip, make semi-transparent and more. Who knew so much power was tucked away in QuickTime?

To finish up, export your movie! (You probably don’t want to save over the original file.)

QuickTime Pro screenshot showing Export command in File menu

This tutorial was done with QuickTime Pro 7.7.6 on Windows. The ‘Pro’ version is a paid unlock for the free QuickTime player.


Sunday afternoon lego

This afternoon I put together the Heartlake Lighthouse Lego set.

It was super fun to build, even if I did mix up the doors at one point! 🙂

Heartlake Lighthouse, Sunday afternoon Lego project
Following the instructions! Building up to code now :)
Whoah: $100.05 is a lot of ice cream! But we have to recoup the building costs!
Heartlake lighthouse open for business! Parfaits for everyone :)

This was my first time assembling a set from the “Lego Friends” line. I love the brick colours!

Can Arc Touch Bluetooth Mouse…?

I’ve been meaning to blog more about my experience with the Surface Pro 3. I posted how the first one I got was a dud after it died the first night. The second one has been rock solid and a joy to work on. But this is not that post. This post is about the Arc Touch Bluetooth Mouse.

Arc Touch Bluetooth Mouse shown on (curved) and off (pressed flat)
Arc Touch Bluetooth Mouse shown on (curved) and off (pressed flat)

It’s a very cool mouse, especially for portability. It’s light, it’s flat (when not in use), and it’s comfy to use. No usb needed. The touch bit instead of a scroll wheel is perhaps a bit odd. I’m not sure how I feel about that yet, but it is definitely far superior to the trackpad on the typecover, and more precise than the touch screen (especially for apps that have tiny UI elements, those not built for the high DPI screen). Overall, great mouse and highly recommended!

It comes with a nifty windows 8 app to configure it. The app is also called ‘Arc Touch Bluetooth Mouse’ and the first time you use it, you will be pairing your new mouse to it and that’s when this dialog appears:

Screenshot of UI dialog
Can Arc Touch Bluetooth Mouse use your Arc Touch Bluetooth Mouse?

Can Arc Touch Bluetooth Mouse use Arc Touch Bluetooth Mouse?

Sounds like a trick question doesn’t it.

Is it me, or is it just as weird for an app to refer to itself in the third person as it is for real people to do so? Even weirder when the app shares the name of the subject of the sentence. Holy confusion Batman.

I’d ask an editor to bring some sanity to the sentence. You can too—excellent editing services available right now at East Edit, check ’em out 🙂

Slidedown transition with scaleY

Here’s another “non-height” approach to slide down transitions: use scaleY (I haven’t checked this for browser support yet, I think IE9 at least will need a prefix for transform-origin).

Neat, I kinda like this one too. The overshoot on the slide down (where it goes a bit further and bounces back) is a touch of exaggeration, easily achieved with cubic-bezier timing. That sounds confusing! But it isn’t all that hard! Use Lea Verou’s amazing preview tool. Here’s the curve I came up with:,.38,.72,1.3

So this approach is still different to animating the height. The jquery slidedown adjusts the box height, revealing more content. The scaleY property squeezes the content which may look weird. Again, a little fade in while sliding may help. Also, scale is more attuned to squash and stretch so, you know, that’s something to play with!

The new life of Ben!

Today I took a leap of faith (no, I’m not playing Assassin’s Creed) at work and resigned. I’ve been a “UI Specialist” in Queensland Government since 2008 (with a stint off in a management role, then project, in 2010) and it’s been an interesting time. Great people, great flexibility (hard to beat working from home 2 days a week!) and some interesting challenges (supporting IE6 was not one of them).

I have known for a long time that it was a great job, and not a career. Some folks can step up to the challenge of middle management in the public service. I’m part awed, part horrified, by their willingness to make the shift—but it’s not for me. I love coding, I love mentoring and now I’m loving animating. I really want to work in that kind of creative space. (You say management is creative? Um. Ok. In the public service? Not my cup of tea, thanks.)

The new life of Ben begins in TWO WEEKS! I’m hunting for the next job—wish me luck 🙂

ps: Resign from a job. Bucket list: tick!

Now, off to throw a frisbee…