Chess Sample

This is one of the two sample HTML files shipped with the plug-in which was installed to your local drive. In addition, there are the corresponding Micrografx Designer™ DSF files which were installed to your local drive.

Note: Print this page.

Before you read any further, print this page so you have a hard copy to refer to when working with the samples.

1. Open the file CHESS.HTM located in the Samples folder of the Ready Use folder in your browser. The chessboard graphic is a single Designer file embedded in the HTML file.
2. Move your cursor over the words BEGIN GAME and notice the cursor change to a hand. This is an example of an OnMouseEnter event calling a CursorShape Hand command.
3. Click BEGIN GAME. This text is an object in the Designer file named "Begin" which has three event properties and command values associated with it which control its actions. When you clicked on BEGIN GAME, the RESET BOARD object changed colors from gray to black, the text object E2-E4 and a red arrow displayed, and the BEGIN GAME object changed from black to gray. These actions were performed instantly, without the screen redrawing or a new HTML file opening.
4. Click E2-E4. You have made your first move. The pawn object moved from E2 to E4, the first move changed to gray and the red arrow displayed next to the second move. Once again, these objects moved and changed on the fly.
5. Click E7-E5 and then finish the chess match by clicking the remaining moves. In each instance, objects interact through simple property events and corresponding command values.
6. Click on RESET BOARD after the word CHECKMATE displays. You are ready to replay the chess match again.
7. Move your cursor over the red star in the lower left corner of the graphic. Notice the status line reads "Maximize the Designer File."
8. Click the red star. This closes the CHESS.HTM file and opens the Designer CHESS.DSF file. Since your browser displays the DSF file, you don't need to know HTML to display your Designer drawing on the Web. If you resize the browser window you'll notice the graphic scales to fit the size of the window. This is not possible with raster images.

If you want to "look under the hood" to see how Designer makes this interactivity possible, close your browser and open CHESS.DSF in Designer. Select an object, and on the Object menu choose Properties. You can see the associated event properties and command values for each object. For more information on scripting properties and values, see "Developing Web Content with Micrografx QuickSilver."

"Learning with Samples," online version. © 1997 by Micrografx, Inc.