video

Seriously.js

Seriously.js is a real-time, node-based video compositor for the web. Inspired by professional software such as After Effects and Nuke, Seriously.js renders high-quality video effects, but allows them to be dynamic and interactive.

Editing Flip camera footage in Final Cut Pro

I love my Flip camera – it’s portable, instant-on nature makes it ideal for throwing into my pocket whenever I might have something to film in a hurry.

Because it records in an MPEG 4 format though, it doesn’t provide the easiest files for editing. The software provided with the camera is OK for most things (and it’s great to be able to upload directly to YouTube et al), but when it comes to editing which involves anything more complex than just stringing a bunch of clips together, I need to fall back on something more powerful.

Final Cut Pro is my primary weapon of choice when it comes to video, but it doesn’t natively handle MPEG 4 files very well – and nor should it: MPEG 4 is a hefty codec intended for distribution.

So I’ve had to come up with a little workflow to convert that lovely Flip footage into something which will play nicely with Final Cut Pro. MPEG Streamclip to the rescue!

I love MPEG Streamclip – it’s my swiss army knife for doing any kind of video file wrangling. It’ll handle pretty much any file conversion job you can throw at it, and always comes to the rescue when I need to format A isn’t playing nicely with format B.

So, to get that Flip footage working with FCP, it’s just a case of firing up MPEG Streamclip and opening the a source Flip file (once you’be got them saved to a folder on your hard drive). Then just follow these simple steps:

  1. Go to the “File” menu and choose “Export to Quicktime…”
  2. In the “Compression” drop-down choose “Apple DVCPRO HD 720p60″
  3. Select “Make Movie”, choose a location for your output file, and that’s it.

It couldn’t be simpler!

Why the DVCPRO HD 720p60 codec? Well, the native Flip video format is 720p HD, with a frame rate of 30fps – this is the best fit for conversion. DVCPRO will give you excellent quality video without losing too much in the conversion.

Now, to edit this footage in Final Cut, all you need to do is create a sequence using the “DVCPRO HD 720p30 preset, and you’re away.

Adobe shows off Flash-to-HTML5 conversion tool

Ars Technica report about the recent demo of an Adobe tool for converting Flash to HTML5:

Even though its Flash technology is used as a punching bag by Web standards fans, Adobe has been building tools that embrace HTML5. The company recently released its own HTML5 video player, and Adobe Illustrator and Dreamweaver CS5 now contain a number of new HTML5 export tools.

Now it seems Flash might be joining the party. At Adobe’s MAX conference this week, Adobe engineer Rik Cabanier showed of a demo of tool that converts Flash animations to HTML5 (well, technically it looks like a combination of HTML5, CSS and images).

Yes, it’s great that Adobe are slowly shifting towards the HTML5 camp, but they’re really late to the party. The demo of this tool, although technically quite clever, really is a horrible semantic butchery job. And again, this is Adobe pitching HTML5 as an umbrella term for a mish-mash of modern technologies – even John Nack, the Adobe employee who originally posted the video of this demo, is flagrantly open about this mis-appropriation:

Someone will probably start quibbling with the use of “HTML5″ as a stand-in for SVG, CSS3, Canvas, etc. I know, I know. I use the umbrella term in the loose, commonly understood sense: “Flash stuff without Flash.

Sigh. Is that really how they think about next-generation standards at Adobe? “Flash stuff without Flash”?

North: website design process

I made this a while ago, but due to my slackness in updating the old blog for quite some time, it’s never made it on here.

As part of the North project we’re developing in partnership with folly I needed to produce a new web presence. It was quite a quick job, as time and resource were at a premium, but I thought it would be fun to do a screen capture of the design process. I’ve condensed the entire process, which was about 5 hours spread over 3 days, into just under three minutes.

You can watch it below, or head over to Vimeo to see it in glorious HD.

This was a really quick job, implementing a design which is flexible and which can be developed over time. The foundation is a fairly rigid grid system with a strong emphasis on typographic style. I went through three different iterations before arriving at the final blue/green version. Most of the work was done in Photoshop, with some of the graphical elements sketched in Illustrator.

I really liked the second iteration, with the paper plane sketches, but it just wasn’t cutting it with the rest of the team. I’ll shelve that idea for a future project though, as I really like the aesthetic.

I hope this is an interesting little insight into the way I develop concepts when working on a new design. Feel free to let me know what you think, and whether you found it useful/interesting.

If you want to see the finished design in all it’s HTML markup glory, or just want to know more about North, then head over to the website.

Working in New Media

On 9th May 2008, I spoke to students at Lancaster University as part of the “Insight to Creative & Media Careers” event.

The two-day event was organised by CEEC (Centre for Employability Enterprise and Careers) and included a wide range of speakers from different areas of the media industry.

As an experienced practitioner in New Media, I introduced a brief history of the industry, and then explored the 10 commandments for following a good work ethic, before concluding with some of my ideas about where the industry is heading in the future.

We filmed the presentation, and you can watch the whole thing, right here, right now.