Using Flash and JavaScript to create customized pop ups

J_Paul · #1 (**permalink**) 09-05-2003, 12:03 PM

With Flash it is quite common to have a customized pop up window to hold your flash movie. This is almost always done using HTML and JavaScript. Well, what about having buttons in your flash movies that will open customized pop up windows?

In this tutorial I am going to show you how to incorporate Flash and Java to do the same effect from a Flash movie.

First we need to create our button. For this tutorial to make things as simple as possible we are going to create a very simple button. With your rectangle tool draw a rectangle.

Now highlight the button and hit F8, which will bring up convert to symbol dialog box. Check button and hit OK.

To add our actions we are going to right click the button and select actions.

In our actions pane we want to add the follow action script code:

on (release) {
getURL("javascript:popup();");
}

Now save your movie and publish. Go to File and Publish.

Now we are going to add our JavaScript to our HTML file. Just copy and paste the code below changing the options as necessary for your project. You will need to replace the http://flashnewz.com with the url that you want to use for the pop-up window.

Java Script to be inserted in the <head> tag of your HTML.

<SCRIPT LANGUAGE="JavaScript">
function popup() {
window.open('http://flashnewz.com','','toolbar=no,location=no,status=n o,menubar=yes,
scrollbars=no,resizable=no,width=10,height=10,left =0,top=0');
}
</script>

And that's all folks!

Let me know if you have any questions

M.Maucci · #2 (**permalink**) 09-05-2003, 02:40 PM

hello ,
you can directly put your script in your url,
try it in the adresse input of your naviguator, and do then same think in your get url

javascript:alert("bad day");

or

javascript:function killthenALL(){window.open('http://flashnewz.com','','toolbar=no,location=no,status=n o,menubar=yes,scrollbars=no,resizable=no,width=10, height=10,left=0,top=0');}killthenALL();

you can do that because
the texte after le "javascript:" word is interpréted by your navigator,

a over good thing you need to know :

after your call a firts time the geturl with the killthenAll() function in the url (like lines befaure ) , you can directly call it :
getURL("javascript:KillthenAll()");
because, it stay in memory, but, if the location change, the function will be delete of memory,

Have a good day
scuse, my english, i'm frensh.

Kevnn · #3 (**permalink**) 09-05-2003, 03:22 PM

First, I'd like to say that I appreciate all the help your site has provided. Great job guys!

Next, a Flash popup window is cool, but I thought it might be necessary to add a Flash movie without a new HTML window to hold it. I've recently been playing around with CSS, the DOM, and RPC to dynamically write database records to the screen. Using CSS and the DOM, we should be able to write Flash movies to the screen at will also, and without having to load a popup window. I haven't tested this, but if you were to create a Division in your webpage, with absolute positioning, and no content initially, you could have your Javascript function write something like this:

document.getElementById(strdivision).innerHTML = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0' width='113' height='103'>
<param name='movie' value='shopNow.swf'>
<PARAM NAME=wmode VALUE=transparent>
<param name='quality' value='high'>
<embed src='shopNow.swf' quality='high' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='113' height='103' window='transparent'></embed></object>"

As I said, I haven't tested it, but I see no reason why it wouldn't work. It would also open up a few new possibilities for the developer. Like having the content behind the division show through areas of your dynamically loaded Flash movie and adding a new layering dimension to the movie. I haven't had any jobs that required this yet, but it must be something close to what they do when you see the Flash ads popup on your screen.

M.Maucci · #4 (**permalink**) 09-06-2003, 09:23 AM

hello, Kevnn,
I am not sure that the innerhtml property will run , on all naviguator,
this property was introdut by mycrosoft internet explorer 4.0, in MSHTML.DLL, to allow IE to be use as an html éditor ( for more information about read next aricle :)
http://msdn.microsoft.com/workshop/b...htmleditor.asp

so i disadvise to you using it, except if all your customers uses IE.

Hav a goog day of woork

Kevnn · #5 (**permalink**) 09-06-2003, 06:34 PM

You may be right about the innerHTML, at least with older Netscape browsers. I had thought I had that working for Netscape 7 for awhile on the project I'm building right now. I haven't checked in awhile though and since this is an IE only project, it hasn't been a major concern. But since I hate to be told I'm wrong (even when I am), and hate it worse to let the computer win, I will see if I can make something work when I get a chance and post it back for you.

Ricardo Zea · #6 (**permalink**) 09-10-2003, 12:00 PM

J_Paul´s script didn´t work for me, but it did work M.Maucci´s script.

I prefer to put the code directly into the HTML so I can edit it easly afertwards, but for some reason it didn´t work, so I will have to work from within Flash.

This is the code it didn´t work:

---
<HTML>
<HEAD>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<TITLE>ventanaJavascript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function popup() {
window.open('http://www.google.com','toolbar=no,location=no,status=no, menubar=yes,
scrollbars=no,resizable=no,width=100,height=100,le ft=0,top=0');
}
</script>
</HEAD>
<BODY bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<A HREF=javascript:popup();></A>
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="550" HEIGHT="400" id="ventanaJavascript" ALIGN="">
<PARAM NAME=movie VALUE="ventanaJavascript.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="ventanaJavascript.swf" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400" NAME="ventanaJavascript" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
</BODY>
</HTML>
---

Did I put the javascript incorrectly?

Thank you very much.

J_Paul · #7 (**permalink**) 09-10-2003, 12:26 PM

You have to have the JavaScript in the Flash (SWF) actionscripts or it's not going to work unless you just want to make a static HTML link for your javascript above or below your swf.

This has to go in the actions of the button to call on the javascript.

on (release) {
getURL("javascript:popup();");
}

cmassa · #8 (**permalink**) 09-14-2003, 03:11 AM

Nothing happens. I get the little hand
as if the button is active but no action
I made the button with the action.

setting the window property would defeat the
purpose

I have Flash MX. I click on the button and it show the action there..

---------------------
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function popup() {
window.open('http://flashnewz.com','','toolbar=no,location=no,status=n o,menubar=yes,
scrollbars=no,resizable=no,width=10,height=10,left =0,top=0');
}
</script>
<meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
<TITLE>javascript-but</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">

<A HREF=javascript:popup();></A>
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="550" HEIGHT="400" id="javascript-but" ALIGN="">
<PARAM NAME=movie VALUE="javascript-but.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="javascript-but.swf" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400" NAME="javascript-but" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
</BODY>
</HTML>
----------------------------

any idea would be great. I could really use this.

thanks

chris

Sualdam · #9 (**permalink**) 09-14-2003, 11:22 AM

You could try this - it always works for me.

Put this code in the head tags of your HTML page:

Code:

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function openWindow(URL, winname, xtoolbar, xlocation, xdirectories, xstatus, xmenubar, xscrollbars, xresizable, xwidth, xheight, xleft, xtop) {
newWindow = window.open(URL,winname,"toolbar="+xtoolbar+",location="+xlocation+",directories="+xdirectories+",status="+xstatus+",menubar="+xmenubar+",scrollbars="+xscrollbars+",resizable="+xresizable+",width="+xwidth+",height="+xheight+",left="+xleft+",top="+xtop)
}
function closeWindow() {
newWindow.close()
}
// End -->

Now, from within Flash you can call a pop-up any time using (on a button, for example):

Code:

on (release){
    getURL("javascript:openWindow(\'yourfile.htm\',\'windowname\',0,0,0,0,0,0,0,350,400,0,0)", "");
}

You can see how each of the parameters in the Flash getURL call match with a Javascript command. In this example the file 'yourfile.htm' is opened in a new window called 'windowname'. It is 350x400 pixels and it doesn't have toolbars, menubars, scrollbars, and so on. Just change a '0' to '1' to turn on that feature.

cmassa · #10 (**permalink**) 09-14-2003, 12:58 PM

thanks I will.

What a great place.

chris

#11 (**permalink**) 12-08-2003, 06:29 AM

Okay, I am trying the same thing and I can't get it to work.

Would would be the javascript in flash to make an HTML popup

Flash file is test.swf and HTML is test.htm

Thanks

heathnavarre · #12 (**permalink**) 05-05-2004, 01:37 PM

I have been following this thread and I still am unable to get the flash button to open the java script window.

This is the last thing I tried as ans action script on my button in flash:

on (release){
getURL("javascript:openWindow(\'60ann/index.htm\',\'anniversary\',0,0,0,0,0,0,0,800,600, 0,0)", "");
}

and the code in the head of my html page is:

function openWindow(URL, winname, xtoolbar, xlocation, xdirectories, xstatus, xmenubar, xscrollbars, xresizable, xwidth, xheight, xleft, xtop) {
newWindow = window.open(URL,winname,"toolbar="+xtoolbar+",loca tion="+xlocation+",directories="+xdirectories+",st atus="+xstatus+",menubar="+xmenubar+",scrollbars=" +xscrollbars+",resizable="+xresizable+",width="+xw idth+",height="+xheight+",left="+xleft+",top="+xto p)
}
function closeWindow() {
newWindow.close()
}

Is there anything that you see wrong here?

Thanks,
Heath

Fitter · #13 (**permalink**) 05-08-2004, 02:52 PM

Hi

This is what I use in the head of my web page:-

<SCRIPT LANGUAGE=JavaScript>
function openNewWindow(URLtoOpen, windowName, windowFeatures) {
newWindow=window.open("http://www.macromedia.com/shockwave/download/alternates","_blank","Plugins","height=700,width=6 00,scrollbars=yes,scale=yes");
}
</SCRIPT>

And this on a button in flash:-

on (press) {
getURL("http://www.macromedia.com/shockwave/download/alternates","_blank");

}

Does this help?

Steev

ps. Please be careful with spelling and punctuation.

CodeJimmie · #14 (**permalink**) 06-21-2004, 06:15 PM

I am trying to create a flash movie that goes out of the bounds of the containing window. Much like the ones you see on Amazon.com, Accuweather.com, etc where a Flash movie pans all the way across the html page without an actual embedded flash movie that's visible in the page. Not sure if that description tells you enough. I can find some examples of it if I find one again, but the above two sites do not have any of these currently. Basically what it seems like is a JavaScript moves the flash movie across the page or something. I looked though the tutorials but I did not seen anything explaining this process. If you would be so kind, please as to tell me where to look for this, if you have a tutorial, what it is called, if anything or how to do this, I sure would appreciate it.

Tribalize · #15 (**permalink**) 09-28-2004, 10:26 AM

In Need Of Some Help

I Am Trying To Create A New Window Or Popup From A Swf File Database, Using Javascript In A Css File...

LOL Got Any Of That???

This Is The Code I Have Been Trying To Use To No Avail...

Code:

<SCRIPT LANGUAGE="JavaScript"> 
function popup() { 
window.open('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="{$game['gwidth']}" height="{$game['gheight']}">
        <param name="movie" value="./arcade/{$game['gname']}.swf?tgame=0" />
        <PARAM NAME="wmode" VALUE="transparent"/>
        <param name="bgcolor" value="#{$game['bgcolor']}" />
        <param name="quality" value="high" />
        <param name="menu" value="false" />
        <param name="width" value="{$game['gwidth']}" />
        <param name="height" value="{$game['gheight']}" />
        <param name="flashvars" value="location=./&gamename={$game['gname']}" />
        <embed src="./arcade/{$game['gname']}.swf?tgame=0" width="{$game['gwidth']}" height="{$game['gheight']}" bgcolor="#{$game2['bgcolor']}" window='transparent' quality="high" flashvars="location=./&gamename={$game['gname']}" menu="false"></embed>
        </object>')

} 
</script>

I Am Trying To Call It From

Code:

Click Here

The Problem Is This Is Not Just One Swf File But Many...

Any Help Would Be Appreciated