Kool Moves/ Javascript Score Keeper


Author: johnie Name


Page 1 :


Have you ever wanted to write a game in Kool Moves only to find out that you cannot manipulate variables like a score in the app.  Well we had the same problem but we are proud to tell you that with the help of this tutorial now you can.

Lets get started:


1. You are going to create a scoring shape in Kool Moves.  You do this by drawing a shape in Kool Moves and then hit the list  properties button.



Note:  The red circle is the properties button.

2.  Change your scoring shapes properties to is a Symbol=Yes, Is a Button=Yes, Has States= That one is up to you.


I personally would suggest using a completly transparent shape that sits on a higher layer than your drawing and leave the Has States=No.  Thats just me though.

3.  Double click the actions button and and click get URL



You assign multiple mouse states to this action.

4.  What we are interested in is URL section.  We are going to plop some Java Script in there.  Make sure you leave the target section alone- Putting things in there can cause some pretty weird behaviors.

the Java Script we are putting in there is this:

javascript:window.document.first_form.first_text.value=a;a=a+1;window.document.refresh

lets look at what we just did;

The first part of statement javascript: this tells the HTML to expect a javascript command

The second part window.document.first_form.first_text.value=a
is a call to the DOM.  We are changing the value of the object first_form.first_text to the value a. This object will live outside of the SWF on the HTML.

The third part a=a+1 changes the value of  a to a+1

The final part window.document.refresh is another call to the DOM telling it to refresh the document- this will update the score.

5.   Finish your work making sure that your score keeping shape is where it should be then export as SWF with HTML.


I saved mine as test5 in my example.

6. Now the fun starts.  Close out Kool Moves and find your HTML.  Double Click it open it then veiw source.  You could open it with notepad and get the same effect.

Note: If you are using Netscape open it with Notepad or Emac becuase you cannot edit HTML from the view source in Netscape.

the HTML will look like this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff">
<CENTER>


  <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" ALIGN="Center" WIDTH="320">
   <TR>
        <TD><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id=test5 width=550 height=300 codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=3,0,0,0">
<param name="movie" value="test5.swf">
<param name="quality" value="high">
<param name="play" value="true">
<param name="loop" value="true">
<param name="bgcolor" value="#ffffff">
<SCRIPT LANGUAGE=JavaScript>
<!--
var ShockMode = 0;
if (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"] && navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin) {
     if (navigator.plugins && navigator.plugins["Shockwave Flash"])
       ShockMode = 1;
} if (ShockMode ) {
  document.write('<embed src="test5.swf"');
  document.write(' width=550 height=300 bgcolor="#ffffff" quality="high" loop="true"');
  document.write(' TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/">');
document.write('</EMBED>');
} else if (!(navigator.appName && navigator.appName.indexOf("Netscape")>=0 && navigator.appVersion.indexOf("2.")>=0)) {   document.write('<IMG SRC="nonflash.gif" width=550 height=300');
}
//-->
</SCRIPT><NOEMBED><IMG SRC="nonflash.gif" width=550 height=300 BORDER=0></NOEMBED><NOSCRIPT><IMG SRC="nonflash.gif" width=550 height=300 BORDER=0></NOSCRIPT></OBJECT></TD>
   </TR>
  </TABLE>
</CENTER>
</BODY>
</HTML>


I would tell you what all of this HTML does but I believe that should be its own tutoriol.  There are a lot of neat effects you can do by manipulating it.

7.  The first thing we are going to do is declare the variable a.  We do this by adding this:
<script> var a=0</script> to the Head section of the HTML.  It is important to add this because many versions of IE will send back an error or crash  if you don't.

8.  The next thing you must add is the Form object that we refered to in step 4.  Do this by adding <form name="first_form">
<input type="number" name="first_text" value="">
</form>

to the Body section of the HTML before your SWF.  If you add it afterwards you will not be abble to refer to it becuase it exists after the SWF- A big No-No.  You could move its location by ussing stylesheets though-again another tutoriol.

9. Save your HTML.  If you used Notepad you must save as  "filename.html".  The qutes are real important.  If you leave them off then it will save it as a .TXT.

10.  The example:

<IMG SRC="nonflash.gif" width=550 height=300 BORDER=0>