Video Production for an Illustrated Drawing Video

I recently did a fun personal project illustrating and reciting nursery rhymes for my son with special needs, and other kids who need low-intensity entertainment.

At first glance there doesn’t seem to be much production effort involved – just a sketch book and a sharpie. Permit me to share a bit about the things unseen.

To the right of the filming area I kept the nursery rhyme book I was using. To the left was my laptop and microphone. I am sorry that I don’t have a picture at this time.

The video was filmed using a Nikon D90 digital SLR attached to a tripod, suspended over my work table. This worked nicely but was limited to filming 5 minutes at a time in the highest resolution. The other limitation was the camera’s microphone was neither high-quality nor positioned close enough to capture my voice very well.

For audio I used an AT2035 condenser microphone plugged into an M-Audio Fasttrack Pro sound capture board, which was in turn plugged into my Mac via USB. My recording software of choice was Audacity. After recording the high-quality audio, I used the Normalise and Noise Reduction filters (which were hardly needed) to make the quality top-notch.

Recording happened in a series of starts and stops. Sometimes I attempted a rhyme which did not lend itself well to drawing. Other times the camera would come to the end of its time limit and I would need to start over.

When finished recording I had a couple dozen video files from the camera, and I exported multiple MP3 files from Audacity. I imported the video and audio into iMovie and began to edit out the unwanted portions and add fade transitions between clips. I split the low-quality audio from the video track. This allowed me to see the waveform of the original audio and align them perfectly with the imported high-quality MP3 files beneath. Once that was done, I would put the audio level of the low-quality track above to zero.

I was not satisfied with the white balance of the video (it was too yellow) so I adjusted that easily using the iMovie controls.

I wanted a good quality title screen so I sped up the drawing portion of that, and spent a few minutes in GarageBand to record the jingle. After plugging into my electric piano via a USB MIDI convertor, I selected an appropriate keyboard voice from the many options. I had to start the recording in GarageBand, then switch to iMovie to start the video so I could play the jingle in time to the drawing. After doing that I exported an AIFF file and imported that into iMovie for the final cut.

iMovie has the wonderful option of publishing directly to YouTube, so I used that. It took quite a while to upload the 72-minute video but it went smoothly.

All told it was about a full day of work from start to completion. If you know of anybody who would enjoy the video, please share it with them!

Making do…thoughts from a Saskatchewan web developer

I wrote about my grandmother a while ago, so why don’t I bring up my grandfather with equal reverence for a bit?

Norman Dowdeswell was a Saskatchewan farmer who lived through the Great Depression. As such, he was somewhat resistant to buying something new when a bit of “fixer-upping” in the shop would result in getting something working again. He never threw anything remotely usable away. This was evidenced by his large piles of scrap metal in the yard and myriad jars and tins, filed with everything from used nails to retired drawer handles, lining the walls of his shop.

When we were doing farm work out in Grampa’s yard, my Dad and I would often have a chuckle at some of his make-do’s we discovered. Having a sore hip, Grampa made himself a cane for yard use by sawing off a hockey stick to the right length. He built a kids’ merry-go-round (known in our family as The Whirl-a-Gig) out of a big old tractor wheel. He made his own cab for the old Fordson tractor out of plywood and angle iron, and I couldn’t tell you how many items such as grain shovels which developed a hole at some period in their life and were later patched using braised brass.

So what does his grandson doing web design in Saskatoon draw from all of this?

1. New stuff can be a world of pain

Not only is new stuff an unnecessary driver of capitalism, it can be simply a recipe for heartache.

How many times have you upgraded your computer’s operating system for the Wonderful New Features it offers, only to discover that your other software and hardware ceases to work properly? What starts out as a free upgrade so often results in many hours and dollars spent on new software, driver upgrades, expensive dongle adapters, or new peripherals. And the old installation discs, manuals, and fully-functional hardware end up either recycled or in the landfill. Often there’s no going back.

Right now I am two OS versions behind on my laptop because I know if I upgrade, my whole Adobe Creative Suite will hit the toilet and I’ll need to upgrade that and start paying subscription fees. I’ve tried Illustrator CC on my machine and it is so slow as to be unusable. Are things good enough right now? You bet they are.

2. Sometimes new ain’t new enough

“What does it cost to migrate to WordPress?” These are words I often hear from people with perfectly good websites. Even when I could make a ton of money from an expensive upgrade, I’d much rather have a client get good value from what they already have.

Sometimes a user has a robust CMS such as Joomla, and finds the feature set is simply overwhelming. Often they don’t understand that Joomla is already preventing problems which are typical to other systems, and providing features they don’t have.

If the user needs simplicity, there are many options for easy editing in Joomla, whether it is custom administrator templates, using front-end editing, installing a blogging component, or simply having a training session. Good web developers should be training their clients properly when building a site, and stick around to guide their clients in managing it.

3. Know when to give in

I do my best to resist “the new” but the time will come when a major upgrade just makes sense. For example, I had a client with an older version of Joomla ask me if they should upgrade. For a couple years my answer was no, because there was no security concern. However, a security issue was recently uncovered which affected many old versions of Joomla. I was quick to recommend the upgrade.

My grandfather bought a new car in his later years. With his health declining, it just made sense to have a reliable vehicle for long road trips.

Thank you for reading this. I hope that 2017 will be a good trip for you!



New Confidant Website

I’ve had a slow couple of months business-wise, but the benefit of that is I can work on my own projects. I am happy to report that I have just completed a new website for myself. My WordPress blog (you are here) has not changed, but you will notice that my top-level site has been updated to be completely mobile-compatible using modern day technologies. My previous site used Flash for its primary experience and did have a mobile-compatible fallback but this was never ideal, especially as today’s browsers are making it more difficult to use Flash.

So—the new site is built using the UFront framework. This is a very interesting and useful tool because it uses the same Haxe source code which compiles for both client (Javascript) and server (PHP). The framework is able to cache resources such as the site template, and it builds pages client-side whenever possible. It will remotely load only the data it needs to build each new page. The result is that the site is super fast. If you watch your network activity as you browse my portfolio, you will see that each new page requires only a few kilobytes, and browsing previously viewed pages will have nearly no network activity at all. If JavaScript is disabled, the site looks identical and pages will be built server-side instead.

For graphics, the site detects high-resolution (e.g. “Retina”) devices and serves high resolution images to them if they are available on the server. The top-level site navigation features a single SVG graphic for the menu. The graphic is embedded in the site template, where it serves as a graphic library allowing me to have the same display code used for both the menu and the headers. Animation effects are achieved using only CSS3 transforms, which saves the user from having to download any JavaScript libraries.

Something I wish was different is that Webkit-based browsers like Chrome and Safari for desktop don’t render fonts nicely when perspective transforms are applied to page elements. I was able to remedy this fairly easily for portfolio items, but pages at the second level of my hierarchy are a bit fuzzy. My hope is that these browsers make improvements which remedy this for me.

As a benefit to the Haxe community and a thank you to other people who provided coding help, I have released my full UFront source code on Github.

Thanks for reading!