3rd MOOing Tutorial Sheet

Getting Graphical

Putting an image in the description of one of your objects

Whenever you look at an object in EnCore (it could be a room, a note, a recorder or you (a player)), the object opens up in the Xpress side of the MOO.  You can add an image to this “opened” view of an object very easily.

Here’s how:

          A) Go to OBJECTS and click LIST MY OBJECTS

          B) Select an object that you want to add an image to

          C) Click EDIT OBJECT and then click QUICK EDIT

          You will see the Xpress Object Editor:

D) In the text box for URL, put the web address for the graphic you want to display, as well as the size proportions you wish for the object.  Be sure to SAVE your changes by clicking the save button within the Xpress Object Editor window.

NOTE:  If you don’t have access to placing files on a webserver, you can find a graphics library for AlaMOO at this address: http://www.accd.edu/sac/english/lirvin/MOOstuff/Mimages/mooimg.htm
Simply put in the base URL of the graphics library and add the filename for the graphic

***It is bad practice to simply put the URL of a graphic that lives on another server.  You are stealing bandwidth from that server.  Bad jujoo.


Adding a unique graphical icon to an object. 

Every object in EnCore has a graphical icon that goes with it.  The icon for a player is a little person (and is pretty boring).  Perhaps you want to put your picture with your player object, so that when you enter a room the picture of you goes along with your object. Here's how:

A) Follow the sequence of steps above for doing a QUICK EDIT of the object you want to add an icon to (OBJECTS—select object—Edit—Quick Edit).

B) In the text box for ICON, add the web address for the graphic you want as an icon.  Be sure to set the size of the icon to the right size (say around 35 pixels).

After you are done, be sure to SAVE what you have done by clicking the SAVE button within the Xpress Object Editor window.


Making Web Pages through the MOO

What makes EnCore so unique is that it integrates the World-Wide Web and hypertextual, multi-media pages directly into the MOO.  You can also create web pages in the MOO!  It isn’t that hard (and you don’t necessarily need to know HTML).

Two ways exist to display web pages in the MOO:

1—as a Web Note (so that it displays as an Object in a room)

2—as a Web Room (so that it displays as a Link in a room and can contain objects like any other room).

Before going over detailed instructions for creating a web note or a web room, we should cover a few basic practices.  The way you will create a web note or room is by putting HTML code into the DESCRIPTION for the object.  I have found that the best way to get the HTML code into the description of an object is by COPYING and PASTING.

First, create the webpage in a web editor such as Dreamweaver, Netscape Composer, Frontpage, or even Microsoft Word. 

Remember, all the graphics (pictures, clipart, backgrounds, animated gifs...whatever) MUST have absolute addresses.  That means if I wish to have a background to my web page, I must put in the complete URL of the background graphic.  For those of you who don’t have access to posting graphics on a webserver, a graphics library exists for AlaMOO and is available at http://www.accd.edu/sac/english/lirvin/MOOstuff/Mimages/mooimg.htm

You can use a graphic from this library by putting in the full URL for the graphic you want to use whenever you Insert—Graphic.  (If you have a graphic you wish to use, send the file as an attachment to Lirvin@accd.edu --be sure it is a .gif or .jpg).

Also, you need to prepare a "web object" to display the web page that you create--either a Web Room or a Web Note. These objects need to be built BEFORE you paste in your HTML code into their description. See the instructions below for how to create these two objects.

Once you have your web page completed in the web editor, look at the source code (View—Source or in Dreamweaver you hit F10).  Select all this code and EDIT—COPY it (or Control-C). 


view of HTML source from a Dreamweaver document

Next, Edit the object in the Xpress Object Editor and delete any code that is in the Description textbox.  Then do an EDIT—PASTE (or Control-V).  Be sure to click the SAVE button below the description. 


Detailed Help Instructions for

How to Create a Web Page Room

1) When you are ready to create a Web Page, click the Object button. In the Xpress Object Editor window that opens, then click CREATE OBJECT. You will see a window asking you to name your room and where you want to link it to. Once you have named and connected your room, the object is created.

2) Next click EDIT OBJECT to include the HTML code in your room.

3) Write or copy the HTML code into the DESCRIPTION for the room.

Making changes to your web room:
Whenever you need to edit your web page, click the EDIT button in the MOO, type in the object number of the room or find it in your list of objects, and then copy out the HTML code from the Description for the room. Go to your web editor,view source, delete any code already there, and paste in the code. Make changes, then copy and paste out the new revised code back into the MOO.


How to Create a Web Note

At times you may wish to create a hypertext document that will show up as an object in a room, rather than as a link to another room.  Objects show up in the viewing area on the left side under the heading You see:

Step One—Create your webpage using the web editor of your choice.  

Remember that images and backgrounds must reside on a web server and tags must use the absolute address to these image files.

Once the webpage is completed, VIEW the HTML SOURCE.  Select ALL and COPY this HTML code.

Step Two—Creating a Generic Thing and then converting it to a Webpage

Login to the MOO, and go the room where you want this web object to be placed.

Next, use the Object Editor to create a generic thing (make a note of its object #).

Drop the object into the room of your choice.  Type:  drop <objectname>

Then, change the “parent” of the thing to a webpage, so that it will take on all the qualities of a webpage object.  Type: @chparent <object#> to $webpage

For example: @chparent #461 to $webpage
there is no space between @ and chparent

The MOO will return a message stating that the parent has been changed.

Step Three—Edit the object to include the HTML content

Go to the Xpress Property Editor by clicking the EDIT button.

In the WORK WITH OBJECT box on the upper left, type in the object number of our Webnote (be sure and type in the number symbol as well—like #461)

Click the QUICK EDIT.

Change the ICON setting from thing.gif to note.gif  (you could use another graphic of your choice)

In the Description box delete out any HTML code already there and then PASTE in the code from the web page you had created in step one. 

Last of all, scroll down to the bottom and SAVE GENERAL OPTIONS

Check your work by typing or clicking LOOK and then clicking on your new web object.  If the note is not showing in your room, perhaps you forgot to drop the object.  Type ‘inventory’ to see if you are carrying anything.


Generic HTML Code

Perhaps you don’t have access to a web editor such as FrontPage or Dreamweaver—you may find the code below helpful. In the code below, I have put areas where you might insert custom content in orange.  Simply copy and paste this text into a word processor (it may work best to paste it into NotePad).  Add your custom content and then copy and paste the HTML text into the Description of a Web object. 

<html>

<head>

<title>Your Title Here</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body bgcolor="#CCCCCC" background="http://www.entergraphicbackgroundURLhere.gif">

<p><font size="4"><b>Title</b></font></p>

<p>Here is a paragraph of some text that you can enter.</p>

<p>Here is another paragraph. This one has a <a href="http://www.cnn.com">link</a> inside it.</p>

<p><font face="Arial, Helvetica, sans-serif"></font></p>

</body>

</html>

Return to AlaMOO Portal Page