Find us on Google+ Using Autodesk 360 to Create an Interactive View on a Webpage ~ Inventor Tales

Sunday, April 07, 2013

Using Autodesk 360 to Create an Interactive View on a Webpage

“A pessimist only sees the dark side of the clouds, and mopes; a philosopher sees both sides and shrugs; an optimist doesn't see the clouds at all--he's walking on them.”
Leonard L. Levinson

Sometimes, the most interesting and unique things happen completely by accident.  And I'm going to discuss an instance of that here.

Over the last few months, I've been delving deeper into the use of my Autodesk 360 site, and exploring it's capabilities a little more deeply.

And there's a lot that can be done.  It can store files, it can control who has permissions to view and download files, it can be used to run, analysis, simulation, and rendering projects, as well as product life cycle management.   It can even be used as an online view for someone who needs to see your data.

In this post, I talk about a subtle capability that can add a lot of bang for the buck.  Embedding a viewable dwf file in a website.

A 3D dwf can do a lot to help make a design to life.  The viewer can zoom rotate, pan, and interact with the file.  These capabilities can add a lot of clarity, and value, to a proposal, or to the evolution of a design process.

So how can you create the embedded code into a webpage, like I've done above?

First, create a dwf from the source file.  In my example, I'm using a dwf of the 4 sided die I created a few months ago. 

Once the dwf is exported, switch to your Autodesk 360 account, and prepare to upload the file to the account.  In my example, I've created a folder called "Blog Shares".  But you can name the folder anything you want.  It's not necessary to create a folder, but I prefer to.  It helps organize things

Browsing into this folder, I'll go ahead and select "Upload" to begin the process of selecting and uploading the file.

 This opens up the window to browse to the file to upload.  Files can be dragged and dropped, or folder browsing can be used to add the files.  Multiple files can be added using this method as well.

In this case, I'm only adding one file, so I'll select it, and hit the "Upload Now" button.

The file will upload, and after a few minutes, the dwf file will generate it's view.  However, it's completely locked down, and nobody but the person who created it can see it.

In order to share the file, I'm going to move my cursor over the dwfx file.  I'll see icons for a Preview, Assign Categories, Actions, and Add Comments.

I'll select "Actions", choose "Sharing", and then choose "Public Sharing"

A dialog box will appear where Public Sharing can be turned on.  A link is created where the file can be downloaded, e-mailed, previewed, and finally, embedded.

Choosing "Embed", Autodesk 360 creates html code that can be used to copy and paste into a webpage (like this one!) and create the embedded preview above

So that's how Autodesk 360 can help amp up your website.  If you haven't checked out Autodesk 360 yet, it's worth taking a look at.  You get 3GB of storage just for starting it up!

One thing to note, I did edit the code to make the view fit better on my page.  But that's the only alteration I made.

And for the video version of this, take a look at that embedded file below!

<iframe width="545" height="409" src="" frameborder="0" allowfullscreen></iframe>

1 comment:

  1. Interesting article. Would advise reading and will try it out.