Exporting Animation

for Web Playback


One of the export options in SketchUp is as Animation. This would often be used in order to show someone else an animated fly-through of your design. The viewer may be your client, who doesn't use SketchUp, but is able to view videos online. Your goal then is to produce a good looking animation that can be played by the majority of Internet users, or at the very least, by your client!

Potential Issues

The two main difficulties to overcome are:
  1. Exporting the best possible quality animation.
  2. Compressing the animation in a format that most people can view.

We all know that SketchUp is amazing at doing the things that are unique to SketchUp, but it's not so good at doing some of the purely graphical things. In particular, the animations it does do are very linear, you're raced off in one direction and then come to an abrupt stop. Also, the quality of the edge lines are not a very high quality, as can be seen here:

Shown there it may seem a subtle difference, so here is a close up of the lines:

The levels of gray used in the SketchUp PNG export is only two shades most of the time, with one or two places where two other shades appear. The higher quality line is using a range of 8 shades. The improvement is very noticeable in animations, and especially so after the animation has been processed through a video compression stage.

This antialiasing issue can easily be worked around by exporting much larger images, and then scaling them down as part of the compression process.

The normal animation motion that SketchUp does can be improved quite a bit by using the Smooth Step Animation plugin. The Ruby script is located here: Smooth Step Animation

Creating the uncompressed version

There are a few ways to get from the SketchUp scene to the point where you have an uncompressed animation file. Which way you go depends on the operating system you're using, and whether you use the Smooth Step Animation plugin. As of SketchUp 7.1 there is still a problem when exporting an animation under Windows. Although you appear to have a choice of video codec to use, whatever you select, the final movie is using Cinepak. Cinepak was one of the earlier video codecs, and was developed around 1992. The developer of the codec used Star Wars clips as test material, and so Cinepak (which was named CompactVideo at the time) was optimized for high contrast scenes, to make those TIE fighters and starry scenes look their best! It's a fine codec, and in many ways it's a good choice for SketchUp scenes, but things have progressed in the last 17 years, so there are better choices now for showing things on the web. Unfortunately, you can't successfully choose those better codecs under SketchUp for Windows.

Smooth Step Animation exports an image sequence, not a video file. So, if you're on Windows, or using Smooth Step Animation on either platform, you would export a sequence of images. If you're using a Mac, and the standard SketchUp export, you can go directly to a video file, and set the compression options to give a perfect image in the video file.

For the example settings shown below, the animation is intended to be a final size of 1024x576 (it's a 16:9 ratio that will look impressive in a web browser), and the images are being exported at four times that size, to give the later scaling down a good chance to make nice looking edges. You could perhaps use figures more intended for HDTV, say 3840x2160, which you would scale down to 1920x1080 for Blu-Ray use, and 960x540 for web use. Here are the settings to use for exporting to an image sequence, for each of the two cases (selecting Export Smooth Animation from the plugin menu, or using the Export as Animation from the File menu, and choosing PNG as the image type):

For the Mac, where you can export straight to a perfect quality QuickTime movie, you have choices as to which codec to use. Many will give very good results, and yet take up a lot less drive space. For now though, these are the settings to use to get a perfect lossless image (this would appear if you had chosen File/Export/Animation/QuickTime Movie/Options/Expert..):

You can increase the key frame spacing if you like, that may save some drive space, depending on the nature of the animation.

If you have gone the route of exporting an image sequence, you now need to combine those into a video file. If anyone has some good suggestions of a program that can do that, please speak up! Meanwhile, one program that certainly can do it is QuickTime Player, but only if you have paid for the extra features you get with QuickTime Pro ($29+tax). If you have, then in QuickTime Player's File menu will be an Open Image Sequence... menu item, choose that and point to the first file in the image sequence, and when asked for a frame rate, select 24 frames per second. Once the images are imported, do a Save As, Movie to QuickTime Movie, and save that onto your hard drive somewhere, just so that you don't have to go through importing steps again later, should you wish to try other export options from QuickTime Player.

Note for Mac OS 10.6 users (A.K.A. Snow Leopard): these features are not in 10.6's QuickTime Player, you will need to install the optional QuickTime Player 7 application, and use that instead. You'll find it will install into the Utilities folder.

Which format to use for the web?

In a moment we'll go over the export settings to use, but first let's see what the options are for file formats that can be viewed in a browser. Here are the main three contenders:

WMV. These are files intended to play in Windows Media Player. The actual video compression can be several different types, but is often one called WMV9. It has pretty good quality, and you can be fairly sure that a majority of Windows users will be able to view the animation. Many Mac users will also be able to see them, either with the Mac version of Windows Media Payer, or by using a QuickTime add-on called Flip4Mac.

QuickTime. These can be played in a browser window, or in QuickTime Player. All Mac users will be able to view them without any problem, and all Windows users who own iPhones or iPods will! The list of possible video codecs is impressively long.

Flash. Everyone, more or less, can view these. Historically the video quality hasn't been highly praised, if you think of the early YouTube videos as an example, but for several years the quality has been a lot better, and in the last two years Flash has been able to play even better quality video files.

So how many people are we talking about? Here's an independent study, from July: web plugin survey

As you'll see, Flash is rated at over 95%, Windows Media at over 74%, and QuickTime at over 62%. Based on that, you might decide to just go with Flash, but there are difficulties in getting the Flash version set up, and it would be hard for a client to download a version to play while offline.

Fortunately, there is a file format that all three of these, plus Real Player, can all play: MPEG-4 with H.264 as the video codec, which also happens to be one of the best quality options. So forget about any other choices for now, we'll just make one of those, and will be able to give people a choice of what they play the file in.

Meanwhile, back in QuickTime Player...

If you recall, you had gotten to the point of having an animation in uncompressed format, either having gone via an image sequence, or directly to a QuickTime movie. Open that movie in QuickTime Player, and from the File menu choose Export... select Movie to MPEG-4, and click on the Options button. Here's what it looks like, with all of the options set to work for our test case:

The data rate entry is one that you might play around with, to see what effect it has on file size and quality. 2000 kbits/sec is a good starting point, it should give fairly good quality, but is at a rate that lower end broadband can manage to play immediately. For comparison, a lot of the smaller sized video you see online is at around 700 kbps, and HD trailers are at 6000 kbps and above, so 2000 kbits for our 1024x768 video should do ok.

Click OK, and give the file a sensible name (say, "myepicdesign.mp4"), and click Save. You now have a file that you can post online, and all QuickTime users, Windows Media Player users, and Real Video users, can play. That should have hit about 80% of all people.

But what about those other 15% who are into viewing media on the web, but for some reason don't have a normal video plugin? Well, let's make a Flash version that 95% of people can view...

Making a Flash version

I happen to program in Flash full time, so I can make my own little players to play these videos. It ends up being about ten minutes of work, and involves three additional files that get created. If you happen to have Flash, the steps are simply (for the case of a 24 fps 1024x576 video):
  • Open Flash, and make a new Flash File (ActionScript 3.0) document.
  • Set the stage to 1024x618 (extra vertical space for the video controller) and the frame rate to 24.
  • Import to Stage, and select your MP4 file.
  • Choose a video controller that you like, and set its color.
  • Make sure the top left of the video element is at 0,0.
  • Save.
  • Set the Publishing Settings to make Flash be version 9, and HTML to be "Flash Only - Allow Full Screen".
  • Publish.
You then gather the html, the two swf files (your new file, plus the video controller file), and the MP4 file, and put them all online together, and send someone the link to the html file.

That's all very brief, but it's because anyone who uses Flash will know those steps (or understand them enough to know what to do), and anyone who doesn't know Flash would need a LOT longer explanation! So that will do for now.

For anyone who doesn't have Flash there are at least two good free options. Look at these two sites:

Both offer a free Flash video player. You'll no doubt need to take some time to understand how to set them up, but the players that you end up with are quite rich feature-wise.

See Also

Editing History

Colin Holgate