Flash and Javascript

In order to have flash communicate with javascript there needs to be some javascript in an html file with an embedded shockwave file (.swf). So we are first going to create our flash movie and then work on the javascript. First, create a new Flash Movie. We are simply going to create some text and place a couple of invisible buttons so that we can interact witht the javascript. Like the example, make two static textboxes. One that says fullscreen and the other that says fixed size.

Once we have the text we need to add the buttons. Add an invisible button over each of your texboxes. If you don't understand how to make an invisible button, there is a tutorial I wrote for spoono that will explain it, but basically you make a button that only has a hit state. The up, down, and over states are left empty.

Lastly we need to add the code to each of the buttons that we will be using to address the javascript. On the button that you placed over your "fixed size" textbox place the following code:

  on(press) {
	getURL("javascript:fixedSize('http://www.spoono.com', 
	'', 'menubar=0, tollbar=0, scrollbars=yes, 
	resizable=0, width=800 height=600')"); 
  }
  

Now on the button that was laid over the fullscreen text place the following code:

on(press) {
	getURL("javascript:fullScreen()");
}
  

*NOTE: Type everything between the brackets on one line. I had to break it up to fit on this page. What we are doing here is calling the fixedSize function and the fullScreen function respectively from javascript by using the built in getURL() function in Flash. This makes it possible for us to call any javascript function that we have declared in the head tags of our html file.

Now that our buttons are setup we need to write the javascript. First you need to save your flash movie. Next you need to publish your flash movie so that we will get an html file. Hit shift F12, and this will export an swf and make an html file that has the flash movie embedded in it to the directory that you saved your flash file in. Open up the html file in dreamweaver, notepad or your favorite text editor and add the following code in between the head tags inside of script tags:

function fixedSize(url,name,features) {
	//This launches a new window and then
	//focuses it if window.focus() is supported.
	win = window.open(url,name,features);
}
function fullScreen() {
	window.open ('http://www.spoono.com', 
	'','fullscreen=yes')
}
  

Here we have two functions. One is the fixedSize function that will open up a browser based on the three variables, url, name, features, that will be passed in using flash. The other is a a fullScreen function that will open up a browswer window at fullscreen. I will not go into detail about the javascript because this is just to show how flash can communicate with Javascript, however if you have any questions please refer to the javascript section of Spoono for some really informative tutorials.

Now all you need to do is save your html file and you will be good to go. Don't forget that this file will not work if you open up the .swf. You need to open the .html file so that flash knows what javascript functions to run. If you open the .swf and try it you will get a blank browswer window.

Where to go from here. Hopefully you saw how easy it was to incorporate javascript with flash. There are almost limitless possibilites in how to incoroporate this with your movies. Javascript is a very powerful webprogramming tool and when incorporated with Flash you can get some really neat effects. Be sure to email me if you have any questions or commments about this tutorial.