AECbytes Tips and Tricks Issue
#46 (September 25, 2009)
Touring Google Earth with a SpaceNavigator
Scott Onstott Book & Video Author
I recently purchased an inexpensive SpaceNavigator input device from 3DConnexion (a Logitech company). In about five minutes, this truly amazing device had me flying around in Google Earth and SketchUp like never before. There's a new feature in Google Earth 5 that allows you to record tours, and it's just the thing needed to play back the trajectories flown using the SpaceNavigator.
In the course of doing research on how to get what I was doing on screen into this article, which I accomplished in Adobe Flash, I also stumbled upon a way to embed Google Earth in a web page. I'll share all of the above with you in this article.
Pictured below are my favorite input devices. The black SpaceNavigator, illuminated by an internal blue light, is resting on my trusty Wacom Intuos 3 tablet with its stylus. The SpaceNavigator doesn't replace a pointing input device; it's only used for 3D camera transformation. I prefer the Wacom tablet to any mouse, but that's another story.
The SpaceNavigator is compatible with over a hundred 3D programs according to its manufacturer. It works on Mac and Windows. SpaceNavigator has 6 degrees of freedom or 3-axis control, just like the pitch/roll/yaw flight controls in an aircraft. These are all intuitively discovered by pushing the handle left/right, forward/back, pulling up/down, twisting CW/CCW, rocking left/right, and rocking front/back. It comes mounted on a heavy machined metal base that keeps it from moving around on your desk. There are also 2 side buttons that you can configure as you like in System Preferences (Mac) or in a Control Panel (Windows). I haven't tried playing games with the SpaceNavigator but that is probably worth attempting.
When I first started flying around in Google Earth, the responsiveness was nice and smooth but way too slow for the amount of ground I wanted to cover. You can configure the buttons to increase and decrease sensitivity in Google Earth. The greater the sensitivity, the slower you will move in Google Earth. Below is the Mac version of how you configure the device. Notice that the settings you make here are specific to the chosen application.
Recording Google Earth Tours
In Google Earth 5 there is a tool on the toolbar that allows you to record a tour. Play around in Google Earth for a while to get used to how the SpaceNavigator works. When you are ready, click the Record a Tour button.
A small toolbar appears at the bottom of the screen.
Click the Microphoneicon if you want to enable audio recording. Click the Redbutton to start recording and then use the SpaceNavigator to fly around your building site. Try to keep your hand steady because every tiny force you apply to the SpaceNavigator's strain gauges translates into your flight path. It took me a few attempts to get the video you'll see later in this article.
When you're done touring, quickly use your other input device (mouse or tablet, as the case may be) to click the Redbutton again to stop recording. The toolbar will change to the play head as shown below:
Play the tour and if it's a keeper, click the Save to Disk icon (far right). A dialog box appears prompting you to save the tour place mark. The button with arrows on it means loop the tour. You can also playback the tour in reverse by clicking the rewind button, or scrub the time slider forward/back in time. Google Earth tours saved in this way are only a few KB in size because the tour is merely a text list of coordinates recorded at some small time interval. Press Command+S (PC: Ctrl+S) to save the tour to disk as a KML (Keyhole Markup Language) file.
Tip: Google SketchUp (Free and Pro) can export to KMZ. KMZ is the zipped version of KML. Google Earth opens KMZ files and displays them on the Earth. Using the SpaceNavigator, you can actually fly around and even inside buildings once you have some practice. The combination of SpaceNavigator and Google Earth make a powerful visualization system.
Recording the Screen
There are many ways to record the screen. Google Earth Pro ($400) allows you to record the screen directly. Other solutions include Camtasia from TechSmith on Windows; Mac solutions include SnapZ from Ambrosia Software (images and MOV), ScreenFlow from Telestream (features timeline editing), and iShowU from ShinyWhiteBox, to name a few.
Play your saved Google Earth tour and use your chosen screen recording solution to save the video on your hard drive. I chose to save a MOV using SnapZ on a Mac. You can now play the video on your computer during a Powerpoint presentation, or burn it on DVD, or save it on flash memory and give it to someone else who doesn't know how to use Google Earth.
Embedding a Flash Video in a Web Page
You might think that once you have a video file on your hard drive, you're ready to post it on the web, but it's usually not that simple. Web videos have to be small, so you could upload it to YouTube and let it get compressed automatically, or do the job yourself using some kind of video compression software. If you have Adobe Flash, then you can embed a small FLV video by following these steps. I'm still using Flash CS3 Professional so I'll give you the steps for that version. (Note that the currently released version is Flash CS4 Professional.)
1. Open your video file (mine was an MOV) in the separate Flash Video Encoder application and save it as a much smaller compressed FLV file.
2. Launch Flash Professional and create a new flash file. Chose File > Import > Import Video. Choose the FLV video from step 1. Click Continue.
3. Choose Progressive download from a web server and click Continue.
4. Select a skin and click Continue.
5. Click Finish and save the flash project FLA file.
6. Choose File > Publish Settings. On the Flash tab, uncheck Compress movie because it was already compressed in step 1.
7. Chose File > Publish and you'll get an HTML and SWF file in the same folder where you saved the FLA file in step 5.
8. Now you'll have to use web design software (like Dreamweaver) or a plain text editor to integrate the code from the HTML file into your web page. How to do that goes beyond the scope of this article. The HTML references the SWF which in turn points to the FLV.
9. Post all the above to your webserver and surf to your page's URL to view the result, which is embedded below:
Click the gray Play button above to watch the pre-recorded flash video (the white timeline is part of the screen-captured video and is not functional). This video was flown using the SpaceNavigator, recorded as a Google Earth tour, captured as a video, compressed into FLV, referenced in an SWF and embedded in HTML. I "flew" it all by hand in real-time with about 15 minutes of practice on the SpaceNavigator. Whew!
The slight hesitations you see in the video are due to the relatively low end graphics card on my older Macbook Pro that I was using in Google Earth during the original recording.
The advantages/disadvantages of this method include:
Flash is ubiquitous so almost everyone can play the video in a browser.
The canned flight path is fixed and the user gets exactly the experience you record.
The canned flight path is fixed and the user only gets the experience you record.
The quality and file size of the video is controlled by how much video compression you apply.
Embedding a Google Earth tour in a web browser
An alternative approach to displaying a tour is to embed an instance of Google Earth in your browser. The great advantage of this approach is that there is no video to record, compress, convert, code, post, and test. Instead, the Google Earth API renders the experience using client hardware and bandwidth.
The chief disadvantage here is there is a plug-in required. Most people will not install plug-ins so this method isn't for the general public. However, your client may be amenable to installing a plug-in as per your request. The quality of the experience is bound in part by the viewer's bandwidth, since it is rendered in real-time as it would be in Google Earth itself.
A vexing problem I ran into is that some of the buildings on Google Earth's Photorealistic 3D layer hover a short distance above the ground (the Louvre pyramid is a case in point). This isn't a big issue when you're navigating with a mouse, but the SpaceNavigator lets you get so up-close and personal with the 3D models that this became a big issue in the kind of fly-through I intended to do. To work around this problem, I downloaded the individual photorealistic models I wanted to display from the 3Dwarehouse and brought them back into Google Earth through SketchUp in the Flash video presentation. So in other words, I did NOT use Google Earth's Photorealistic 3D layer in the Flash video shown earlier. However, I DID use it in the version which follows.
2. Using a mouse or SpaceNavigator, record a tour in Google Earth. Save it to disk as a KML (or KMZ) file.
Tip: I was able to get the red and blue lines that you'll see below as well as certain 3D buildings in the embedded tour by placing their nodes into a folder within Google Earth that also contained the tour itself. I then saved the entire folder as a KMZ file that was referenced in the embedded tour.
3. Upload the KML file from step 2 to a web server. I used Google's free Sites feature (http://sites.google.com) for some free web server space.
4. Click here to open a web page that lets you configure an embedded tour. You'll need the URL of the KML from step 3. You don't have all the functionality of the Earth application but a smaller subset in the API. Here's a screen capture of the available options:
5. Copy and paste the code that the page in step 4 generates into your HTML file. You can use web design software like Dreamweaver or a plain text editor to accomplish this.
6. Upload the HTML from step 5 to your web server and you're done. Below is the result.Note that you will see it only if you have the Google Earth plug-in installed. Please try playing/pausing the tour and navigating around Paris yourself (by dragging the cursor and mouse wheel). If you navigate away from the canned flight path, it's no problem. Clicking Play will automatically bring the camera back to the path.
Unfortunately the SpaceNavigator does not work in the Google Earth API, so you can't use it fly around in the above embedded control. This is a limitation of the Google Earth API and not the SpaceNavigator.
I hope this article gives you some ideas for how you might use the SpaceNavigator, Google Earth, and/or Flash in some complex ways to create compelling urban and architectural visualizations.
About the Author
Scott Onstott has a degree in architecture from UC Berkeley and worked in several prominent architecture, engineering, and interiors firms in San Francisco. In addition, he taught AEC software to thousands of students at several Bay Area universities.
Scott has written and edited scores of books, magazine articles, and video tutorials. He can be reached via ScottOnstott.com.
If you found this article useful and have not
yet subscribed to AECbytes, please consider
doing so. Subscription
is free, and more subscribers will allow this
publication to provide more of such content