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: