And I’m not done. I’ll probably be migrating my gallery from Gallery2 (using the WPG2 plug-in for WordPress) to the NextGen gallery, since it integrates more cleanly. Of course, that’ll take quite a bit more time, so I’ll be backburnering that for a while still.

Wheeee!

So we’ve migrated the main Hand Turkey Studios website to a new backend using WordPress and a variety of other cool bits of software. One part of the process was revamping our Print and Animation portfolios to have more friendly navigation. In particular, we really needed to find a way to show our animated work in a single, unified framework. For all intents and purposes, this means Flash video. The FLV format is ubiquitous and nearly universally playable (even for Linux nerds like me).

Of course, being a Linux and open source geek, I really wanted to find a way to create and embed these Flash videos without ever needing to boot into Windows. Fortunately, there is a way. That way is a combination of ffmpeg, flvtool2, and a really cool tool called FlowPlayer. I’m not going to get into how to install and/or compile these tools since it varies across platforms. For that, you’d be better off going to the relevant app’s documentation.

Let’s start with the encoding first. There were some good suggestions on the FlowPlayer website, but ultimately, the quality of those files was far too low for my tastes. Here’s an abstracted version of the ffmpeg command I used:

# ffmpeg -i [input_video] -s [640x480|480x360|320x240] -qscale 4 -ar 44100 [output_video].flv

Alright… so what does all that mess mean? Most of it should be obvious, but I’ll go through some notes. The [input_video] can be nearly any format (ffmpeg recognizes quite a few), however, in my experience, it plays nicer with videos wrapped in .avi than videos wrapped in QuickTime’s .mov format. The next block scales the video… Since the majority of my source material is NTSC formatted, I used one of the 3 sizes up there to scale to a square-pixel size (think of them as large, medium and small). All of the videos in our Animation portfolio are scaled to 480×360.

The next bit is where I differed from the FlowPlayer encoding page. That page uses ‘-r 12′. This attribute sets the framerate to 12fps. I don’t want that. I want to maintain the same framerate, but compress things more. Removing that attribute from the command does indeed maintain the framerate of the source video, but there’s no control over the compression. Setting ‘-qscale 4′ solved this problem nicely for me. The rest of the command is pretty straightforward: setting the audio rate to 44.1 kHz and naming the output file.

So now the file is encoded, but it still won’t play nice with embedded Flash video players. It needs to have FLV metadata injected into it. Enter flvtool2. The command for this is very simple:

# cat [input_video].flv | flvtool2 -U stdin [output_video].flv

Note that [input_video] can be the same filename as [output_video] and everything will still work nicely. And with that, you should now have a Flash video file that can played by an embedded player.

“But Jason,” you say, “don’t you have to use Flash to make those neat Flash video players like they have on YouTube and MySpace?” NO. You don’t. This is where the beauty of FlowPlayer comes in. FlowPlayer is an embeded Flash video player developed without using the Flash authoring tool. Rather, it was made using as2ant and it comes with source code! Woohoo!

“That’s great n’ all, but how do I get it on my website?”

That’s actually the easiest part of this mess. After you’ve downloaded FlowPlayer to your machine, unpack it and upload FlowPlayer.swf to some publicly accessible directory on your web host (for our purposes here, we’ll assume you uploaded it to the root of your web directory). From this point it’s a simple matter of adding this code where you want to put a video:

    <object type="application/x-shockwave-flash" data="/FlowPlayer.swf" id="FlowPlayer" height="376" width="480">
      <param name="allowScriptAccess" value="sameDomain"></param>

      <param name="movie" value="/FlowPlayer.swf"></param>
      <param name="quality" value="high"></param>
      <param name="scale" value="noScale"></param>
      <param name="wmode" value="transparent"></param>
      <param name="flashvars" value="config={videoFile: '[video_file].flv'}"></param>
    </object>

This, of course, assumes that your .flv file is in the same directory as the FlowPlayer.swf file, though you could very easily place it anywhere and give the full path to it. There are a number of other attributes that FlowPlayer will recognize for loading a splash image, controlling auto-buffering, changing the look of the player, and even setting up playlists. For us, we did a little simple php and greybox and I think the result turned out quite nice. Hopefully this posting proves to be useful for you other open source software users interested in embedding Flash video on your websites without ever having to leave the comforts of your Linux environment.

And even cooler: you can embed flash across websites… like this:

So there you are. If you have any questions, feel free to post them in the comments section.

So you may or may not have noticed that a bucket-load of posts have been added here on sheep-dot. That’s because we’ve started a little internal syndication ring. From this point forward, anything we post on our own personal sites will automatically be aggregated and repeated here. That means Jason’s site (misaligned.net), Roberto’s site (idodont.com) and Warren’s MySpace blog (he might have a real website one day) will spill their contents forth on this very site, to be searched, archive, and ridiculed in one central location. Ain’t that somethin’?

Now, of course, as this is a pretty large change, there might be some changes that cause things to temporarily break… permalinks might change, categories may appear and disappear at random, and your cat might spontaneously catch fire. However, rest assured that the dust will settle and everything will be awesome.

The other purpose? I’m testing a new plugin I activated on sheep-dot, the FeedWordPress plugin. What’s it do? Basically, it aggregates RSS feeds into its own database. So, technically, this post should show up there, too. Pretty cool, huh?

Yup, that’s right. Hand Turkey Studios now has a presence on MySpace. Not only that, but each of the three of us have an account there as well. Granted, we registered somewhat begrudgingly and we all tend to grumble about it, but what’re you gonna do. Despite our own misgivings with the site, the number of people, resources, and randomly cool things that can be found there tend to outweigh our issues with the place.

At any rate… there’s yet one more place on this great interwebbernet where we Turkeys may be found.

We’ve been getting higher-than-average amounts of Comment and Trackback spam recently, so I’ve gone ahead and installed two WordPress plugins in an attempt to control the problem a bit better: Trackback Validator and Bad Behavior.

Of course, there’s always the potential for things to go whacky or for these things to issue false positives. If that turns out to be the case, send an email to me and I’ll do what I can to make things right.

Roberto took some time and gave us some new topic icons. They look great. Check ‘em out:

These are *much* better than the slap-dash ones I’d put up initially. Wouldn’t you agree?

Alright… I’m mostly happy with the layout of the site. I’ve implemented the RSS Import Plugin (see the sidebar for examples… we’re pulling headlines from Blender.org and Slashdot.org, and we’ll probably add a couple). Also, I went ahead and tweaked the Multi-Topic-Icon to display the multiple icons vertically instead of horizontally. In doing that, I also took out the align=”right” attribute from the image tags and wrapped the icons in a div with a class defined by the theme template (which happens to be based on the default Kubrick WordPress theme)… either alignleft or alignright, based on the config options.

Alright… sheep.handturkeystudios.com is now alive! In case the header wasn’t enough of a clue, this site will be the home of all of Hand Turkey’s side projects; things that are related to what we do, but not necessarily tied to the business side of things. You’ll see random sketches, full stories, code, tests, and occasional bits of pointlessness. And more importantly, you’ll be able to comment on all of it.

There’s still a little bit of work left to be done, administratively, with this site… mostly layout-related, but we’ll post more in this category as things get adjusted and changed. So far, we have WordPress with the following plugins installed: Email obfuscator, Image Browser, and Multi-Topic Icon. I’m currently looking into the Live Press plugin and bending the Slashdot Headlines plugin to my will to allow headlines from other feeds to be shown in the sidebar.

Also, I’ve tossed in a little png-transparency goodness (works in IE 5.5 and 6 with this hack).