Jonathan Miles, Freelance Web Designer

New website design

September 11th, 2009

Crayons

My colourful new website design makes a change from the last one – you can see my previous designs over on the design page.

My starting point for this latest design was a blog post showing how to make abstract art with Illustrator. By using the twirl tool it’s possible to create some nice swirly effects, though I made sure not to get too carried away.

The new website design, viewed using a widescreen resolution

The new website design, viewed using a widescreen resolution

I wanted this design to be attention grabbing, so I wrote a jQuery script to make an animated TV screen effect. I used the Preload plugin, written by Ariel Flesler, to preload the images used by the TV. This means there’s no unsightly delay when changing between images, because the next one is already in the browser’s cache. Each image is loaded just before it’s needed, so the page isn’t bogged down with lots of concurrent image requests, which keeps everything fast.

Getting the first frame of FLVs

September 4th, 2009

FFmpeg

Videos often look best when the first frame is visible before playback begins – they’re known as poster frames. But until playback begins the first frame won’t have been downloaded. So a technique to achieve the desired effect is to initially display a static thumbnail image taken from the very first frame of video. When playback begins this preview image will disappear and the video will seamlessly start playing in its place. It’s the technique that the popular JW FLV Player uses.

But how do you create a JPEG from the first frame of a flash video?

FFmpeg is a great little tool for the job, describing itself as a “cross-platform solution to record, convert and stream audio and video”.

Capturing the first frame of an FLV is then a simple command line using FFmpeg:

1
ffmpeg -i myvideo.flv -ss 0 -vframes 1 -vcodec mjpeg -f image2 preview.jpg

If you’re using Windows, like me, you’ll need to navigate your terminal to the directory where you extracted ffmpeg.exe, before running the command (unless you’ve gone ahead and added it to your system path variable).

You’ll also need to replace “myvideo.flv” with the name of the actual video you want to extract a picture from. You should either put the video in the same directory as FFmpeg or make sure to specify the appropriate path to it. If everything goes right you’ll find “preview.jpg” created in the same directory as FFmpeg.

In case you’re wondering, the various switches given to FFmpeg in the above command have the following meaning:

-i myvideo.flv
Specifies that “myvideo.flv” is the input file
-ss 0
Starts from this moment in the video; can be either whole seconds or hh:mm:ss[.xxx]
-vcodec mjpeg
Forces the video codec to mjpeg
-vframes 1
Extracts 1 frame of video
-f image2
Forces the output file format to image2
preview.jpg
Name of the output file

You’ll find a complete description of all the possible FFmpeg parameters in the FFmpeg documentation.

As you can see you’re not limited to extracting just the first frame of video – you can extract whatever you want. So you may well decide that some other frame is a better representation of the video (and might be more enticing to viewers).

Update: 8th September 2009

Jakob Nielsen has briefly touched on what makes a good video thumbnail in his article about how social media outsourcing can be risky. In it he looks at the Massachusetts Governor’s website and shows how poorly chosen thumbnails can make it difficult for users to differentiate between several videos. If you pick a boring thumbnail then don’t be surprised if people don’t watch the video.

In my case I needed to use the first frame as a thumbnail to create the impression of a talking-head coming to life. Nielsen also has an opinion on that as well – talking-head video is boring.

WordPress switch complete

April 8th, 2009

Wordpress

I’ve completed the migration of my website to WordPress. This has been keeping me busy the last week or two, along with some freelance projects.

Previously my website was a collection of static files, generated using a bespoke system written in XSLT and XML. It was an approach that suited my needs for quite a while, and was a great way to keep in practice with the aforementioned technologies. I decided to migrate to WordPress however, as I wanted a website that was easier and quicker to update – no longer having to upload new pages via FTP is definitely a step in the right direction.

Another obvious benefit of using WordPress is that my own website is now another tangible example of my ability to customise WordPress via the creation of a bespoke theme. In fact, I’ve implemented my WordPress theme in such a way that you can easily change its appearance via the design page. If you like what you see then you might be interested in hiring my skills as a freelance web designer.

New York, New York

November 4th, 2007

Just over a week ago I was on holiday in New York. It was my first trip to America and I had a lot of fun. Below you can see a panoramic photo I took from the top of the Empire State Building (click the picture to see the large version). It’s a spectacular view, though you definitely need to get there early to avoid the queues. I went up before 9am on a Monday morning and it was relatively empty.

Manhattan, October 2007

If you’re ever on holiday in New York it’s worth picking up a City Pass. Even if you skip a couple of the museums, like I did, it’s still good value. I particularly liked the Circle Line Sightseeing cruise, which offers great views of the Lower Manhattan skyline. I went on the cruise back in October, so it was a bit cold at times when the wind swept across. I definitely should have taken a hat and scarf with me!

During my holiday I stayed in Hotel Pennsylvania. Its best feature is undoubtedly its location opposite Madison Square Garden and just a couple of blocks from the Empire State Building. The room I stayed in was nice, though I didn’t spend a great deal of time there – it wasn’t an especially long holiday so I had to try and do as much with each day as possible.

Now that I’m back in England work will resume on some small improvements to Fingerjig. I dare say that Fingerjig is almost at a point where I’ll be prepared to call it finished.