Calling a JavaScript Routine from Flash | Macromedia Flash MX 2004 Game Programming (Premier Press Game Development)

With respect to the browser, you can do some things in JavaScript that you cannot do in Flash. However, by combining your Flash with a bit of JavaScript, you can get the browser to do nearly anything. Resizing the browser is an example of something possible with JavaScript that is not possible with Flash alone. And yes, you can call a JavaScript routine from ActionScript by using the same getURL call that you used for other browser manipulations.

Although JavaScript is beyond the scope of this book, I want to at least examine how a JavaScript routine can be called from Flash. To do this, I have created a simple JavaScript routine.

The JavaScript needs to go inside the HTML document that your Flash game is published with (the HTML tab of the publish settings). If you are unfamiliar with HTML, you should flip ahead to Appendix C, "HTML Primer." That appendix should get you up to speed enough with HTML to understand the way JavaScript is embedded inside the HTML document.

Tip

Actually, you'll probably want to publish once with HTML on so that you can get a raw file that is already set up to contain your .swf. Then uncheck the HTML box so that no future publishes will overwrite the HTML document you published the first time. From there, you can add JavaScript code to the HTML document without it being erased every time you republish your .swf.

The first thing you need to do is create a new .fla file. This time, your sample .fla is called javascript.fla. It resides in the Chapter 12 directory in a subdirectory called javascript. If you create your own file for this example, you'll want to make sure to go into the publish settings and uncheck the HTML box so that no HTML will be produced.

I have created two simple JavaScript functions. I have placed them inside the javascript.html file that will contain the javascript.swf when it's ready. I have placed the following JavaScript inside the <HEAD> tag of javascript.html:

 <SCRIPT LANGUAGE=" JavaScript">      function makeSmall(){           window.resizeTo(200,200);      }      function makeBig(){           window.resizeTo(screen.width, screen.height);           window.moveTo(0,0);      } </SCRIPT>

In this example, there are two functions in the JavaScript: one named makeSmall and one named makeBig . They resize the browser when called. The JavaScript is not the point of this section, it only represents some code embedded in your HTML document.

Now we have to get Flash to call this code. In javascript.fla, I have placed two buttons ”one for each JavaScript function in the HTML. Let's look at the ActionScript code that is used to call the JavaScript.

First we give the buttons some text:

 smallButton.myText.text = "Small"; bigButton.myText.text = "Big";

Then we need an onRelease handler for the smallButton :

 smallButton.onRelease = function(){       var myURL = "javascript:makeSmall()";       getURL(myURL); }

Caution

Depending on your browser, the previous JavaScript functions might not work exactly as intended. Because of the browser and operating system wars, some companies produce browsers that are intentionally incompatible with certain languages that are designed to manipulate the browser. This has caused the Web development community endless headaches trying to get some bit of functionality to work in every possible browser. The result is HTML documents that first check to see which browser is being used and then offer code specifically for that browser. As you might expect, this is a big mess.

As you can see, this is just a getURL call like our previous example. The difference is the URL field supplied to it. In this case, the literal string "javascript:makeSmall()" is used as the URL. When getURL sees that string, it calls the matching JavaScript function in the HTML.

We do this again for the other button and other JavaScript function:

 bigButton.onRelease = function(){      var myURL = "javascript:makeBig()";      getURL(myURL); }

As you can see, this is identical to the previous one except that this time, the JavaScript function being called is makeBig .

Tip

Other languages can be embedded into the HTML page, affect the browser, and do various other things that Flash is incapable of. If you are familiar with another language that has powers you need, use it. In most cases, you'll find yourself using a wide mix of languages based on what the browsers respond best to, along with restrictions given to you by your Web host as to what languages your server supports. We'll talk more about this in the next section.