Welcome to ToonKit!
TOONKIT CARTOON BUILDER HELP
ToonKitsm Cartoon Builder v. 1.0
This page created: 8th September 1999
What's New
Use ToonKit Now!
What Is ToonKit?
What Is ToonKard?
Step-By-Step Guide
ToonKit Help
Click To Download!
Put ToonKit on YOUR site - it's free!
Link To ToonKit
Regsiter Your ToonKit
Feedback
Visit The ToonKit Gallery
Creating New Components
ToonKit White Papers
ToonKit Corporate Solutions
About The Creators

Instructions For Installing ToonKit On Your website.

Installing ToonKit Cartoon Builder on your website is a fairly straightforward task. There are four basic steps which are outlined in this section. These steps assume that your website is referenced using the URL "http://www.mysite.com/" and that the root directory for your website is just "/". The library provided contains all of the required code and automatically generates the Dynamic HTML required to place ToonKit Cartoon Builder on the web document. The four installation steps are outlined below:
  1. Create a directory in your webspace called toonkit which is used to hold ToonKit Cartoon Builder library files and graphics. For example, use the command "mkdir toonkit" (UNIX systems) or "MKDIR toonkit" (DOS or Windows 95/NT) if you are in the root directory.

  2. If you are reading this file you may have extracted the file from the zipped archive. All files from the archive should be put into the newly created "/toonkit" directory. Do not change the names of any of these files. All of the graphics files (.GIF format) should be in uppercase. All other files should be in lowercase (.html and .js files). Currently both gzip (UNIX) and WinZip (Windows 95/NT) format archives are avaialble from the ToonKit website: www.toonkit.com.

  3. You must now modify all web documents which will contain a copy of ToonKit Cartoon Builder. These files may be anywhere in your webspace. It is recommended that you do not place these files in the newly created "/toonkit" directory. For example, if you wish to place a ToonKit Cartoon Builder in a file called "index.html" which resides in your root directory, then open the file with your favorite text editor (for example notepad in Windows 95/NT or vi in UNIX), and insert the following lines of HTML into the document:

    • In the <HEAD> section of the document insert the following line of HTML (note the the SRC attribute points to the "toonkit.js" library now residing in the newly created "/toonkit" directory in your webspace):

      <SCRIPT LANGUAGE="JavaScript1.2" SRC="
      http://www.mysite.com/toonkit/toonkit.js">
      </SCRIPT>


    • In the <BODY> section of the document insert the following line of HTML (note the the parameters passed to the "StartToonKit()" function shown declared in the "toonkit.js" specify the top-left location of ToonKit Cartoon Builder in the document, and to start with the bigger logo specified by the parameter "bigLogo"):

      <SCRIPT LANGUAGE="JavaScript1.2">
      StartToonKit(100,100,bigLogo);</SCRIPT>


      It is also possible to set the third parameter to "smlLogo" if you wish to use the smaller startup logo. The top-left positioning is absolute - it is not possible to place ToonKit Cartoon Builder in the flow of the HTML.

    • Insert the following fragment of HTML/JavaScript in the <BODY> tag of the document:

      onLoad="toonkitLoaded();"
      Here are examples of before and after <BODY> tags

      before: <BODY BGCOLOR="BLACK">

      after: <BODY BGCOLOR="BLACK" onLoad="toonkitLoaded();">


  4. Copy the file "resource.js" from the newly created "/toonkit" directory into the same directory as the documents containing ToonKit Cartoon Builder (in this example in the file would be copied to the root directory). Open the "resource.js" file with your favorite editor and make the following changes:


    • Locate the following line of the file

      var myToonkit=
      "http://www.toonkit.com/index.html";


      This line gives the name of the document containing ToonKit Cartoon Builder. When you send a ToonKard electronic postcard to a friend, the recipient is informed that they may use this document to launch the ToonView electronic postcard viewer. If you leave this line unchanged the recipient will be informed that they may view their electronic postcard at the ToonKit website. To change the document replace the URL between the quotes with the URL of your document, for example,

      var myToonkit=
      "http://www.mysite.com/index.html";


    • Locate the following line line of the file

      var myLibrary=
      "http://www.toonkit.com/toonkit/";


      This line gives the location of ToonKit Cartoon Builder library. It is extremely important that the location of the library is correctly specified otherwise the software will not work. The location is specified as the URL of the newly created "/toonkit" directory in your webspace. To change the library location replace the URL between the quotes with the URL of the newly created library, for example,

      var myLibrary=
      "http://www.mysite.com/toonkit/";

In order to use ToonKit Cartoon Builder all the viewer has to do is load the document (index.html) with their favorite DHTML enabled browser (either Microsoft Internet Explorer 4.0+ or Netscape Navigator 4.0+). If you wish to put a ToonKit Cartoon Builder on another document, for example, "other.html" then it is only necessary to repeat step 3 above if "other.html " resides in the same directory as "resource.js". If "other.html" is in a directory which does not already contain a "resource.js" file, for example "/otherdir", then steps 3 - 4 must be completed.



Customising Your Personal Copy Of ToonKit Cartoon Builder

There are three ways in which to customise your personal copies of ToonKit Cartoon Builder. For example, it is possible, for each ToonKit Cartoon Builder in your webspace to:

  1. Customise the default Welcome Message shown when ToonKit Cartoon Builder is first opened.
  2. Customise the default Toon shown when ToonKit Cartoon Builder is first opened.
  3. Customise the graphics used in each copy of ToonKit Cartoon Builder in your webspace.

Most of the customizations just require modification of parameters in the previously mentioned "resource.js" file. The steps involved are shown below:
  1. In order to change the Welcome Message locate the following line in the "resource.js" file in the directory containing the web document featuring a ToonKit Cartoon Builder:
    • var myGreeting = "Welcome to ToonKit!";

    Change the text between quotes to change the Welcome Message, for example,

    • var myGreeting = "This is my ToonKit!";

  2. In order to customise the default Toon shown when ToonKit Cartoon Builder is first opened the following steps must be undertaken:

    • Design the Toon using the Cartoon Builder and when you are happy with your masterpiece press "Ctrl-t" (the Control and t keys). A small window should open which contains an automatically generated document which describes the current Toon (in fact the document is a JavaScript function which tells ToonKit how to re-draw this toon). Using the mouse copy the entire contents of this window, or save it to disk as a text file.

    • The "resource.js" contains a default function with the same structure that is used to draw the default Toon. Replacing the functon in the "resource.js" file with the code just copied from the automatically generated window changes the default Toon. Locate the following section of code in the "resource.js" file and replace it with the code copied from the automatically generated window:

      function myToon() {
      var s='_41._342=75%3B';
      s+='_41._343=90%3B';
      s+='_41._346=9%3B';
      .
      .
      .
      s+=''; _303(s,_52,_51,'this.')
      }


      replaced with contents of window

      function myToon() {
      var s='_41._342=45%3B';
      s+='_41._343=70%3B';
      s+='_41._346=9%3B';
      .
      .
      .
      s+=''; _303(s,_52,_51,'this.')
      }


    The next time ToonKit Cartoon Builder is opened it will start with the newly specified Toon as the default.

  3. Customising the style of graphics used in any particular copy of ToonKit Cartoon Builder is also possible. First it is necessary to generate a set of graphic components which must be copied to the directory containing the ToonKit library and graphics files. The component files are referred to as "Kontact Sheets" which describe the style of the heads, hairstyles, eyes, eyebrows, pupils, ears and mouths. Making these Kontact Sheets is quite a task and is described elsewhere (see the Kontact Sheet Submission Guidelines at the ToonKit website: www.toonkit.com/newcomp.html). ToonKit v1.0 is supplied with one set of Kontact Sheets (the CLASSIC Kontact Sheets - or the "C" Sheets). In order to change the style of the graphics, perform the following steps:

    • Design and make your ToonKit Kontact Sheets using the prodecures described in the Guidelines. This procedure includes a step which assigns a name to the Kontact Sheet group, for example, "VALENTINE".

    • Install the Kontact sheet group in the ToonKit library directory, for example, "/library", for example, VALENTINE-EYES.GIF, VALENTINE-EYES.GIF, etc.

    • Locate the following line in the "resource.js" file:

      var myKontact = "C";

      and replace the default Kontact Sheet name with the name of the new group, for example,

      var myKontact = "VALENTINE";

    The next time ToonKit Cartoon Builder is opened it will start with the newly specified Kontact Sheet group as the default.





Copyright © 1999, John G. Keating & Gerard O'Grady First time visitors, please read the Legal document.