| ThingMaker Documentation Chapter 6) Publishing

| Tutorial 10: Publishing ThingMaker Scenes This Tutorial takes you through the basics of publishing your ThingMaker Scene Files. It would be helpful if you already had a rudimentary understanding of HTML before publishing Scene Files on the Web. But even if you've never created HTML before, you will be able to work through this tutorial to its completion. If you want to create more than just this one Scene File page that you will need to understand some HTML, or have some kind of HTML editor to work with.

There are a wide range of HTML editors available. Some of these work directly on the text, while others provide a WYSIWYG (What You See Is What You Get) view. We don't recommend any specific tool; we use Notepad as the HTML editor in this Tutorial because we can assume everyone has it available as part of their Windows Desktop. In time, information about using WYSIWYG editors with ThingMaker will be made available at our website (www.thingworld.com).

Here are the steps you'll perform in this tutorial:

- Open an existing Scene
- Adjust the Scene Frame to match the contents of the Scene
- Publish the Scene
- Look at the HTML that's created

  Getting Started
  1. Run the ThingMaker application.
  If it's not already running, launch the application. If it is open, save your current Scene File.

  2. Open the File Tutorial3.tms
  It's contained in:
  drive:/Program Files/Parable/ThingMaker/Tutorial/Tutorial3.tms
  The Scene contains a single Thing.

  3. Open the Gallery Palette.

  4. Add a Thing from the Gallery to the Scene.
  This is just an experiment. You can use any Thing that you have in the Gallery.

  Place the Gallery so that it doesn't overlap the Dog Thing. We recommend this as a matter of course. Overlapping Things and Palettes makes the Scene harder to manage when preparing and publishing your Scene File.

  Remember that ThingMaker publishes Scene Files to the web and not individual Things.

  5. With the additional Thing selected, choose Fit Scene to Selection from the Edit Menu on the Scene Window Menu Bar.
  The Scene Frame changes to enclose the Thing you selected. The Scene Frame indicates the area of the Scene that will be visible on the web page.

  6. Click and drag one of the corners of the Scene Frame.
  Notice that you can drag it to adjust the area of the Frame.

  7. Choose Select All from the Edit Menu.

  8. Choose Fit Scene to Selection from the Edit Menu.
  The Scene Frame now adjusts to enclose both Things. Fit Scene to Selection will intelligently enclose the selected Things. For example, if a Thing has a Path attached to it, the Scene Frame will accommodate the Path. Then, when the Thing travels on the path, it will remain within the Scene Frame.

  Publishing
  ThingMaker's publish function will create an HTML page and a tag for the Scene that you have created.

  You have the following options:

- Create a copy of the Scene or a copy of the selected Thing
- Create a GIF File to be displayed if the user doesn't have ThingViewer.
- Create a Channel Definition File for Scenes that a user can subscribe to.
- Add JavaScript that detects whether the browser can support ThingViewer, especially useful for Macintosh and Windows 3.1 users.

  1. Click in the Scene Window so that neither Thing is selected.
  If you do select a Thing in the Scene, ThingMaker's Publish Dialog will create an HTML File and a new Scene File for that Thing only. Other Things in the Scene will be ignored. The new Scene and HTML Files will default to the name of the Thing.

  2. Choose Publish from the File Menu.
  The Publish Dialog lets you choose the options for publishing your Scene.

  For this tutorial, we are going to cover just the basics of publishing the Thing. If you want to add a GIF image or Channel Definition File, you'll want to see the Publish Chapter in the Reference.

  3. Click the Browse Button.
  This lets you choose where to place the HTML File and rename the file as well. We are going to rename the output file.

  4. Type mytest into the Dialog (or enter in the file path and title field).

  5. Click the Save Button.
  The Dialog closes. The name and the path change at the top of the publish Dialog. The name listed next to the HTML and Scene Files also changes.

  ThingMaker lets you create a copy of the Scene File, but you can also output the HTML File and use the current Scene File, as long as you don't want to rename it.

  6. Click the OK Button.
  ThingMaker saves the files and returns to the Scene Window.

  The HTML File
  ThingMaker should have saved an HTML File (.htm) and a Scene File (.tms) in your Tutorial directory (unless you chose another location in which to save the files). Now switch to the Windows Desktop and find the mytest.htm File. You can open this file using Notepad or your HTML editor.

  1. Open the mytest.htm File in Notepad or an HTML editor.
  If you use Notepad to open .htm Files, change the File Type in the Notepad Open File Dialog to All Files.

  The file should look something like this:

  `<!-- Generated by Parable ThingMaker : tag begin -->`

  `<html>`

  `<head>`

  `<title>ThingMaker</title>`

  `</head>`

  `<body bgcolor="#ffffff">`

  `<object id="mytest"`

  `name="mytest"`

  `classid="CLSID:F2D71283-BEE3-11d0-90AE-00A0C9270D87"`

  `codebase="http://www.thingworld.com/download/ie/`

  `ThingViewer.cab"`

  `width=151 height=187>`

  `<param name="SceneFile" value="mytest.tms">`

  `<param name="bgcolor" value="#ffffff">`

  `<EMBED type= application/x-Parable-Thing`

  `SceneFile="mytest.tms"`

  `width=151 height=187 bgcolor="#ffffff"`

  `pluginspage="http://www.thingworld.com/download/netscape"`

  `name="mytest">`

  `</object>`

  `</body>`

  `</html>`

  ``

  `<!-- Generated by Parable ThingMaker : tag end -->`

  This Tag contains the following major details:

  `<object id="mytest"`

  If you just need the tag, copy from here through to the line </object>

  The first set of parameters (up to the <EMBED tag) is the information used by Internet Explorer. The part of the tag that begins at <EMBED through to the end of the tag is used by Netscape Navigator and Communicator.

  `object id="mytest"`
  `name="mytest"`

  These two parameters are the name of the Scene File. They are used by ThingViewer when sending messages to JavaScript, and they should be the same but unique for the Web page.

  `classid="CLSID:F2D71283-BEE3-11d0-90AE-00A0C9270D87"`

  This is the identifier Microsoft Internet Explorer uses to identify the plug-in and determine if you have installed the correct version of the plug-in. This value must not be changed.

  `codebase="http://www.thingworld.com/download/ie/ThingViewer.cab"`

  This is the location of the cab file for the plug-in. This is a copy of the ThingViewer plug-in that Microsoft Internet Explorer will attempt to download and install if the user hasn't already installed it.

  In theory, this parameter is optional: that is, if you know that someone has the plug-in installed, it's not necessary. Still, we recommend that you always include it.

  `width=151 height=187`

  This is the width and height of the Scene that will be displayed on the page. This information comes from the Scene Frame.

  `<param name="SceneFile" value="mytest.tms">`

  This is the actual File name of the Scene File to be played. This information is passed to ThingViewer.

  `<param name="bgcolor" value="#ffffff">`

  This is the background color which will fill the Scene area on the web page when the Scene is being loaded, usually the same color as the background color of the page.

  `<EMBED`

  This is the beginning of the Netscape information.

  `type= application/x-Parable-Thing`

  This is the MIME type information for ThingViewer Files: this must not be changed.

  `SceneFile="mytest.tms"`

  This is the actual name of the File to be played.

  `width=151 height=187 bgcolor="#ffffff"`

  This is the width and height of the Scene that will be displayed on the page. This is information from the Scene Frame. The background color is used to fill the Scene area on the web page while the Scene is being loaded. This should be the same as the background color of the page on which the Thing sits.

  `pluginspage="http://www.thingworld.com/download/netscape"`

  This is the page that the user goes to if they get the message that says they don't have the necessary plug-in and they want to install it.

  `name="mytest">`

  Name of the Scene for JavaScript. Should be unique if you have multiple Scenes on a page.

  Where to go from here

  You can test the HTML page by opening it in your browser. You should find that it works almost exactly as it did when you used Scene Preview browser in ThingMaker.

  To get the HTML page and ThingMaker Scene File onto the web server you will probably need to use an FTP program. Contact your Internet Service Provider (ISP) for information about how to upload Files to the web server.

  You can copy the HTML tag and paste it into a web page to add the ThingMaker Scene to that page (simply copy the part from <object through to </object>).

  The Publish function, HTML tag and your publishing options are explained in more detail in the Reference section. Also, check ThingWorld for information about specific HTML editors.

  There are a number of books available on HTML (okay, make that hundreds of books). There are also some references available on the web. Use a Search Engine such as www.lycos.com or www.yahoo.com to search for help on HTML coding.

  <--Previous | table of contents | Next -->