Sunday, June 29, 2008

Sustainable Industries 2008 Top 10 Green Products


Sustainable Industries released their annual supplemental issue - 2008 Top 10 Green Products. Our Blue Marble Project division is proud to have played a role in the creation of this year's issue by supplying Sustainable Industries with the 3D computer models that were embedded in the downloadable PDF version of the issue. 

The 3D models, which were modeled in SketchUp, can also be downloaded from the Google 3D Warehouse. The 3D PDF (.u3d) models were exported from SketchUp using the RPS 3D PDF Exporter.

Note: In order to see the 3D models that are in the PDF, you'll want to be sure to open the file with Adobe Acrobat Version 8.0+.
 

YouTube Video of Our Google 3D Basecamp Presentation


Some of the videos from Basecamp are starting to go up on YouTube. Here's the vid they shot of our presentation. I was actually a little nervous to give this presentation. It was kind of outside of my usual comfort zone of SketchUp stuff. But it was really fun to have the chance to talk about all the great projects we've got going on at Igloo. Thanks again to Google for putting on a great event and inviting us out there. And thanks to everyone who showed up for our presentation. We were glad that we weren't presenting to an empty room. 

Click Here to check out more videos from the 2008 Google 3D Basecamp. The SketchUp and Green Design presentation was really cool. Hoping to get Peter Ellis on the set for a few SketchUp Show episodes and find out more about the EnergyPlus: Energy Design Plugin (especially once they release a MAC version).

Saturday, June 14, 2008

Google SketchUp Basecamp 2008 presentation

Thanks to everyone that attended our Google SketchUp Basecamp 2008 presentation! We've included our slideshow below. Please contact us at info@igloostudios.com with any questions.



For more photos from Google SketchUp Basecamp, check out this SketchUp Photo Blog.

Wednesday, June 11, 2008

Embed High Quality YouTube video

In this post I want to show you how to 1) Embed a YouTube video onto your website or blog, and 2) Trick your browser to embed the high quality YouTube video using a small snippet of code. I will be using our re:Source educational network about sustainable design + build as our case study.

First, let's talk about embedding a YouTube video:
  1. Create a YouTube account
  2. Upload a video to that account
  3. Navigate to the video on YouTube - in this case, we'll use our re:Source trailer which can be found on YouTube here: http://youtube.com/watch?v=qSEH5_TS-Sw
  4. To the right of the video there is a field with the Embed code in it. Copy that code on your clipboard.
  5. Open up your HTML document for your website, or make sure that you are editing the HTML for your blog, and paste that code. For me, that embed code looks like this:

    <object height="344" width="425"><param name="movie" value="http://www.youtube.com/v/qSEH5_TS-Sw&amp;hl=en"><embed src="http://www.youtube.com/v/qSEH5_TS-Sw&amp;hl=en" type="application/x-shockwave-flash" height="344" width="425"></embed></object>
Once you publish this embed code, you should have a video on your page that looks something like the video below:



Success! We've got the video in there. Now onto the important part - how do we make it look better?

Well I happen to know that we shoot re:Source in 1920x1080 high-definition, and we export it using a high quality codec so that it looks great on the web. Hardly the same thing that we are looking at above. So here are two tips to make sure that the video plays in high quality and the proper aspect ratio.
  1. Change the width and height numbers in the embed code to match the width and height of the source video that you originally uploaded to YouTube. In our case, the source video was 640 (width) x 360 (height). I'll adjust the height a few pixels more to adjust for the player controls and come up with the following code:

    <object height="385" width="640"><param name="movie" value="http://www.youtube.com/v/qSEH5_TS-Sw&amp;hl=en"><embed src="http://www.youtube.com/v/qSEH5_TS-Sw&amp;hl=en" type="application/x-shockwave-flash" height="385" width="640"></embed></object>

  2. To force YouTube to serve the high quality source video, you need to add the following snippet of code to the URLs listed in the embed code: &ap=%2526fmt%3D18

  3. Once doing that, my source embed code now looks like this:

    <object height="385" width="640"><param name="movie" value="http://www.youtube.com/v/qSEH5_TS-Sw&amp;hl=en&amp;ap=%2526fmt%3D18"><embed src="http://www.youtube.com/v/qSEH5_TS-Sw&amp;hl=en&amp;ap=%2526fmt%3D18" type="application/x-shockwave-flash" height="385" width="640"></embed></object>

  4. Paste that code back into the HTML document or into my blog and now I will see this much better version of my video

Embed Google Maps

There are two ways that we use Google Maps to promote our work, and I'll touch on both below. The first method involves creating homemade map on the Google Maps website (no programming knowledge necessary), and the second method incorporates the Google Maps API (some programming knowledge needed).

The Home Made Google Map (click on the bubble below)


View Larger Map

In order to create your own Google Map and embed it on your website or blog, follow these steps:

  1. Go to http://maps.google.com
  2. Just underneath the Google Logo in the upper left hand corner of the screen, click on "My Maps"
  3. Under My Maps, click on "Create New Map"
  4. On the Map, you can click on the Blue Balloon icon and click again anywhere on the map to set a Placemark
  5. Give the Placemark a Name and Description
  6. Once you have set your Placemarks (and possibly other Lines and Shapes), go to the far left column on the page, in the middle of that column, and enter a Title and Description for the map and be sure to click Save.
  7. Go to the upper right hand corner of the map and click on "Link to this Page"
  8. Copy the code in the second field, the field titled "Paste HTML to embed in website"
  9. Paste that code into your Blog or Website to get something like what you see above.

Using the Google Maps API

(click on the image below to go to the School website for a live example)



For the School website, we used the Google Maps API to connect the Placemarks on the map to our database of SketchUp Training Classes that we hold around the country. Our database of classes is constantly changing, so this would be a pain to remake the map by hand each time we changed the schedule. Check out the Google Maps API blog for ideas and help incorporating Maps API onto your site, or feel free to contact us.

Embed 3D Warehouse Images


For SketchUp designers, its important to promote your work by uploading it to the Google 3D Warehouse and then create visual links back to that content on your website.

Our Blue Marble Project division creates SketchUp models of buildings and products for a variety of clients. Once we create these models, we help our clients promote their buildings or products by placing them in the Google 3D Warehouse.

For product manufacturers, the 3D Warehouse is a great place to get noticed by architects and designers looking for 3D models of real world products for their designs. Chances are if you make it into their designs then your products will get purchased for the final project.

For buildings like stores and hotels, your SketchUp models can be geolocated, or smart about where they exist in the world. When you upload them to the 3D Warehouse, that means that they will also be loaded into the 3D buildings layer of Google Earth - another great promotional avenue.

Now, onto the 3D Warehouse link tutorial:

  1. Navigate to the Google 3D Warehouse
  2. Search for "Charleston, SC"
  3. Look down the results, find "City Hall" and click on the thumbnail image
  4. Beneath the large image, click on the "Include" button
  5. Copy the Embed code in the field that pops out
  6. Paste that code into the HTML document for your web page or into your HTML editor for your blog and publish. You should see an image like you see below. If you click on that image, you will link directly back to the model on the 3D Warehouse.

Use the SketchUp Web Exporter (Beta)

Google recently released a new plugin that allows SketchUp users to export an image for the web that allows viewers to click/drag to spin objects 360 degrees. The plugin is only available for PC users right now. See below for an example that we grabbed from the Form Fonts website (click and drag on the image below):



You can download the plugin at the following Google SketchUp web URL: http://sketchup.google.com/download/plugins.html

Embed a Picasa Image Slideshow



This is an embedded slideshow of one of the Picasa Web albums that we created to showcase the portfolio of projects from our Blue Marble Project division. Blue Marble is the SketchUp modeling services part of our biz that models everything from building projects to real estate developments. 


Our Blue Marble Project website.