How to create a pop up window in flash CS4 using javascript

This entry is part 24 of 32 in the series Flash CS4 Tutorials

How to create a pop up window in flash CS4 using javascript

We are not going to focus on the simple pop-up window in flash, there is a way in your action script that you can watch a very simple pop-up window but you don’t have any control over the properties of that window, you can’t adjust the width and height, you can’t turn off the scroll bars or the menu bar.
So using flash CS4 let us draw a simple button as shown below.
How to create a pop up window in flash CS4 using javascript
and let us call the instances of the button click_btn as shown below.
How to create a pop up window in flash CS4 using javascript

on one layer and call that layer button,
How to create a pop up window in flash CS4 using javascript

Now go to our actions layers and click on frame1 and press F9 to open up our actions we have this code written
How to create a pop up window in flash CS4 using javascript

As you can see the click_btn is the instance of the button and then onRelease means that when you click on it, you will run this function ie;  geturl http://bestwebdesignz.com.

In simple words, anything within the curly bracket {} is going to be executed when clicked on the button.
Well if you want bestwebdesignz.com to open up in a different window, you have to write it with a coma after the bestwebdesignz.com and in quotes “_blank” like you see above. This would open up the bestwebdesignz.com in a brand new pop-up window.

But as we told you before  you don’t have any control over the properties of that window, you can’t adjust the width and height, you can’t turn off the scroll bars, location bar or the menu bar etc.,

So to do all of this we have to use JavaScript, unfortunately you cant do it in flash cs4 along, so we have to use flash cs4 in conjunction with JavaScript, so we will rewrite our action script, instead of writing the http://bestwebdesignz.com, _blank etc.,

So we are using the same url function, but in-between our quotation marks we are not typing in just the url, but we are typing in a JavaScript function and later on we are going to publish the swf file and the html file and in that html file we are going to write a java script function and in that getURL function we are going to call the JavaScript function  the name of our function click, and we are going to send our function to an url which is bestwebdesignz.com
How to create a pop up window in flash CS4 using javascript

Before we go further let us go ahead and save this file and lets us call this popup.fla
Now go to file on the main menu in flash cs4 and select the publish settings and check on flash and html boxes and click on publish and ok.
How to create a pop up window in flash CS4 using javascript
Now we need to go to our html function, so open up notepad and go to the directory, you will see a swf, fla and html files and open selecting all files and click on the popup.html file, you will see codes written.

Go to the code where the title ends and the head starts and insert some blank spaces and insert our function, so in order to type in your JavaScript into your html, we first need a script tag and language=JavaScript, write JavaScript in quotation marks and skip a couple of lines and close the script tag. Now inside the script tags we will write our functions, it is pretty much similar to the way you declare a function in action script, so type in function and write the name of your function, in this instance it is click and inside the click function, we are going to create a variable, because this click function is receiving a variable, we will call  the variable page.

Now just like action script any function should be within a curly bracket so we are going to create a java script to open up in a new window, so we will create another variable and call it openwin and set this equal to this open which is used to open a new window and in corenthesis you must call for the url ( ie: bestwebdesignz.com) so type in page first, then type in the title of the page in quotation, and then a list of all the properties that the new window we are opening up in quotations. Then lets us say we want to turn off the tool bar, so type in toolbar=no, then turn off the menu bar, so type in menubar=no, you also want to turn off the scroll bar, to type in scrollbars=no, if you want to turn off the location bar, type locationbar=no, and now type in your width and height, to type in width=550 and lets say you want the height=250, and also if you want to specify where you want your popup to appear on your screen you can type top=250 and left=250.

So remember the open function is expecting three things, first is the page variable which is the url, secondly the title of your url, and finally our properties variable.
How to create a pop up window in flash CS4 using javascript

After this you need to upload this file to your server and test this movie clip, we need to upload this because of security sense in flash, that is why we cannot test it locally.

So save the popup.html file, and upload the html file and swf file to your server, having uploaded, switch to your browser window and type in your url, you will see the page there. You will see the button there, when you click on it, your url will be called for, like in this case, bestwebdesignz.com will popup. That’s it.

Series Navigation«Learn to create a customizable pop-up window using Flash CS4.How to get an url in a blank window in a flash CS4 action script»
Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • E-mail this story to a friend!
  • LinkedIn
  • MySpace
  • StumbleUpon
  • Technorati

Tags:
Posted in Flash CS4 Tutorial | 1 Comment »


One Response to “How to create a pop up window in flash CS4 using javascript”

  1. By Ramesh on Oct 26, 2009 | Reply

    Hi,

    I have learned Flash CS4 using this site, its simply super to learn the back stuffs.

    Great job!!!

    Regards

    Ram

Post a Comment