Categories

drZoode · 03-11-2001, 01:31 AM

Flash, JavaScript and the HTML DOM (dHTML)

After receiving some emails about the tutorial that I have written [ How to Change the Background Color of the Html Page from the Embedded Flash Movie (Two Techniques: Using the getURL action and using the FSCommand action) ], I have decided to start a forum thread related to Flash, JavaScript and HTML DOM (dHTML).
Hopefully this thread will be a place to share our findings, experiences and experiments related to this subject.

Today I will post the answers (if I have them) to some of the questions related to my tutorial. Please post your related questions, answers, findings, ideas here.

The example files (HTML, JavaScript, .fla, .swf) related to this posting can be found in this zip archive:
http://zoode-ds.hypermart.net/deposi...Progress01.zip

Q01: This techniques are not working with Opera 5.
A01: The Flash Command should not work with Opera, but the getURL technique should work, I am checking this (the script).

Q02: It is not working with Macintosh IE 4.5.
A02: I have found this in a Macromedia technote: "Macintosh Internet Explorer 4.5 does not allow a JavaScript function to be called with a Get URL action". And Flash Command is not working in Mac IE (lack of ActiveX).

Q03: How to change the bgcolor of the html pages in a frameset.
A03: Here is the explanation.
Let's say this is your frameset:

<html>
<head>
<title>Frame Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset rows="80,*" frameborder="YES" border="2" framespacing="0">
<frame name="frameSimple" scrolling="NO" noresize src="frameSimple.html" >
<frame name="frameMovie" src="frameMovie.html">
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
</html>

You have two frames named frameSimple (which does not contain a Flash movie) and frameMovie (which contains a movie). I will embed the Flash movie in the frame named frameMovie and I will add the JavaScript code to that HTML and when we will click a button in this movie, the bgcolor of both of the frames will change accordingly.

First the HTML of frameSimple (frameSimple.html):

<html>
<head>
<title>frameSimple</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#CCCCCC" text="#000000">
<p>Frame name: frameSimple</p>
<p>This frame has no Flash movie</p>
</body>
</html>

And the HTML of frameMovie (frameMovie.html):

<html>
<head>
<title>frameMovie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">

</script>
</head>
<body bgcolor="#CCCCCC" text="#000000">
<p>Frame name: frameMovie</p>
<p>This is the frame with the Flash movie </p>
<p>


<OBJECT classid="clsid

27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
WIDTH=350 HEIGHT=100>
<PARAM NAME=movie VALUE="bgColorFr.swf">
<PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=wmode VALUE=transparent>
<PARAM NAME=devicefont VALUE=true>
<PARAM NAME=bgcolor VALUE=#CCCCCC>
<EMBED src="bgColorFr.swf" menu=false quality=high wmode=transparent devicefont=true bgcolor=#CCCCCC WIDTH=350 HEIGHT=100 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>
</p>
</body>
</html>

Here I have used the same movie (bgColor.swf) that I used in the sample of the first technique (you can also download it from Actionscripts.org site) just change the name to bgColorFr.swf and it will work.
In the movie the actionscript code is like this: (it is called by a button)
on (press) {
getURL ("JavaScript:changeBgColor('#336600')");
}

When you look to the JavaScript you see a little difference:
function changeBgColor(newBgColor) {
if (window.document && window.document.bgColor) {
top.frameSimple.document.bgColor = newBgColor;
top.frameMovie.document.bgColor = newBgColor;
}
}

The top property is a synonym for the topmost browser window, frameSimple and frameMovie are
the children of the topmost window. I am referencing to the child frames by using their names. When this function is called both of the frames are affected.
Alternatively you can use the parent.frameName if you want to refer to the sibling frame from another sibling.

Q04: How to change the bgcolor of an IFRAME.
A04: Technically the same thing. (Note that IFRAME tag (HTML 4) is not supported by Netscape 4.x)
Let's say this is your HTML page (it contains an IFRAME which has a SRC="myIframe.html" attribute):

<html>
<head>
<title>Frame Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">

</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<IFRAME name="myIframe" src="myIframe.html" width="400" height="200"
scrolling="auto" frameborder="1">
[Your browser does not support frames or iframe.]
</IFRAME>
<p>


<OBJECT classid="clsid

27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
WIDTH=350 HEIGHT=100>
<PARAM NAME=movie VALUE="bgColorFr.swf">
<PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=wmode VALUE=transparent>
<PARAM NAME=devicefont VALUE=true>
<PARAM NAME=bgcolor VALUE=#CCCCCC>
<EMBED src="bgColorFr.swf" menu=false quality=high wmode=transparent devicefont=true bgcolor=#CCCCCC WIDTH=350 HEIGHT=100 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>
</p>
</body>
</html>

This is the HTML of myIframe.html:

<html>
<head>
<title>myIframe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#CCCCCC" text="#000000">
<p>This is an IFRAME.</p>
</body>
</html>

Here I have used the same movie (bgColor.swf) that I used in the sample of the first technique (you can also download it from Actionscripts.org site) just change the name to bgColorFr.swf and it will work.
In the movie the actionscript code is like this: (it is called by a button)
on (press) {
getURL ("JavaScript:changeBgColor('#336600')");
}

When you look to the JavaScript you see that I refer to the IFRAME by using the top.childFramesName approach. Once you name your IFRAME it's easy to target it in your scripts.

Q05:How to change the visibility of a DIV (in the parent window) from a Flash movie embedded in an IFRAME.
A05: Here is the answer. (Note that IFRAME tag (HTML 4) is not supported by Netscape 4.x)
Also note that the JavaScript code uses a DOM collection
if (document.getElementById) {
// statements
}
So it should work with IE4+ and NS6. (And Opera5?)

This is the HTML of the main page:

<html>
<head>
<title>Frame Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<IFRAME name="theIframe" src="theIframe.html" width="400" height="200"
scrolling="auto" frameborder="1">
[Your browser does not support frames or iframe.]
</IFRAME>
<p> </p>
<div id="div01" style="visibility:hidden"> <b>Vertigo (1958)</b><br>
Directed by: Alfred Hitchcock <br>
Writing credits: Pierre Boileau, Thomas Narcejac <br>
Genre: Drama / Thriller</div>
<div id="div02" style="visibility:hidden"> <b>Plot Summary for Vertigo (1958) </b><br>
San Francisco police detective Scottie Fergusson develops a fear of heights
and is forced to retire when a colleague falls to his death during a chase.
An old college friend (Gavin Elster) hires Scottie to watch his wife Madeleine
who has become obsessed with the past. Scottie follows her around San Francisco
and is drawn into a complex plot. </div>
</body>
</html>

This main document has two DIV, and their visibility is set to hidden.
This document also contains an IFRAME which has a SRC="theIframe.html" attribute.
Our Flash movie (which will control the visibility of the DIVs) will reside in theIframe.html.

This is the HTML of theIframe.html:

<html>
<head>
<title>Frame Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">

</script>
</head>
<body bgcolor="#cccccc" text="#000000">
<p>


<OBJECT classid="clsid

27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
WIDTH=350 HEIGHT=100>
<PARAM NAME=movie VALUE="visibility.swf">
<PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=wmode VALUE=transparent>
<PARAM NAME=devicefont VALUE=true>
<PARAM NAME=bgcolor VALUE=#CCCCCC>
<EMBED src="visibility.swf" menu=false quality=high wmode=transparent devicefont=true bgcolor=#CCCCCC WIDTH=350 HEIGHT=100 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT> </p>
</body>
</html>

Before checking the JavaScript code, some info about the Flash file:
The movie named visibility.swf has two buttons, one of them is associated with this action:

on (press) {
getURL ("JavaScript:changeVis01()");
}

and the other is associated with that action:

on (press) {
getURL ("JavaScript:changeVis02()");
}

When we press the first button visibility of the first DIV is set to visible and the visibility of the second DIV is set to hidden.
When we press the second button visibility of the second DIV is set to visible and the visibility of the first DIV is set to hidden.

The clumsy looking JavaScript code is like that:
function changeVis01() {
if (document.getElementById) {
top.document.getElementById('div01').style.visibil ity = "visible";
top.document.getElementById('div02').style.visibil ity = "hidden";
}
}
function changeVis02() {
if (document.getElementById) {
top.document.getElementById('div02').style.visibil ity = "visible";
top.document.getElementById('div01').style.visibil ity = "hidden";
}
}

We have two functions which are doing opposite changes in the top document. Here we use the top property because the Flash file is embedded in an IFRAME.
The DIVs have IDs as "div01" and "div02". We target those DIVs and we change the visibility attribute of their style.

(This is working with IE5.5 and NS6)
This technique can be taken to its logical extent. For example you can make a navigation bar in Flash and you can put it in an upper frame, and you can put your contents in different DIVs in a lower frame. You can position your DIVs using CSS and they can be overlapping. Their visibility can be changed from the Flash navbar. So you don't have to download different HTMLs.

Q06: How to save the user preferences (about the bgColor for example) in a cookie and how to retrieve them.
A06:Flash and cookies are a powerful yet complex subject. I'm working on an example, I will post it next time (probably in a week).

That's all for today.
Regards,


<zoode>Ahmet Zorlu</zoode>

cazzon · 03-11-2001, 08:35 PM

Thanks for your both useful and interesting tute, Ahmet; now is time to see how it works, for me....

Cheers....
Biagio.

drZoode · 03-23-2001, 01:11 AM

If you are interested in JavaScript cookie Flash interaction you can check my example:

http://zoode-ds.hypermart.net/flash/...kieCrumbs.html

Note: If you reload the page very often (i.e. less than 10 seconds), in order to make things work you may have to press the delete cookie button. This can be due to connection speed/ CPU speed/ browser capabilities etc...

Source files available in my site (in the Experiments section)
(www.zoode.cjb.net)

In this example we ask the user to choose a favorite background color, and when a button is pressed we send the argument to the JavaScript engine (via getURL action) and the color preference is saved in a cookie file, when the user visits that page again, the JavaScript passes the cookie value to Flash using the query string variables.
Optionally we also change the bgColor of the HTML page too.
(All the OBJECT/EMBED tags are written dynamically)

This works with Netscape 4.7, Netscape 6.0, IE 5.5 (on Windows). Theoretically it should work with IE 5 on Mac, and in Unix systems. But I need your feedback.

cazzon · 03-23-2001, 06:17 PM

Hello Ahmet.

Well, what can i say? Just this; that's another great experiment!

Thanks always,
Biagio.

P. s.; improvement.... Nevermind on how to cookie-store the current selected frame of a movieclip via buttons from flash?

Cheers again,
B..

Quote:

Originally posted by drZoode
If you are interested in JavaScript cookie Flash interaction you can check my example:

http://zoode-ds.hypermart.net/flash/...kieCrumbs.html

In this example we ask the user to choose a favorite background color, and when a button is pressed we send the argument to the JavaScript engine (via getURL action) and the color preference is saved in a cookie file, when the user visits that page again, the JavaScript passes the cookie value to Flash using the query string variables.
Optionally we also change the bgColor of the HTML page too.
(All the OBJECT/EMBED tags are written dynamically)

drZoode · 04-03-2001, 03:30 AM

Cookie Crumbs version D is released.
This is an example of interaction between JavaScript cookies and Flash movies.
The cookie stores the username, the language preference and the background color preference of the user in a query string. When the page is loaded, the OBJECT/EMBED tags of the Flash movie is written dynamically by JavaScript and the query string (the cookie values) is added at the end of the movie name.
The Flash movie displays the username in a dynamic text box, loads a text file in the specified language (English, French or German) and sends the background movie-clip to a specific key-frame according to the user's choice.

You can check it here:
http://zoode-ds.hypermart.net/flash/...ieCrumbsD.html

Issues and bugs:
-It works flawless in IE 5.5 on Windows.
- It works almost flawless in Netscape 6.0 on Windows (after setting the cookie, reloading the page is not enough to make it work, you have to close the window and reopen it again a few minutes later.)
- In Netscape 4.7 on Windows it works flawless Offline, but for some reason it is not working Online (the cookie string returns undefined) I do not know if it is related to my server or to my configuration (there is no JavaScript error).
- I couldn't test it with other browsers and operating systems (IE on Mac etc..)

Source files are available at my site:
http://www.zoode.cjb.net

Any comments are welcome.

mad_A · 05-27-2002, 12:13 PM

The links in this forum are dead. Can you post new ones?

thanx

drZoode · 05-28-2002, 12:10 PM

http://zoode-ds.hypermart.net/zexp/z...ieCrumbsF.html

Note: Unfortunately, our ISP's JavaScript code is interfering with our code, so the online version may seem non-functional. I suggest you to download the source files, test it offline and / or upload to your web server and test it from there.

Good luck,

mad_A · 05-28-2002, 11:01 PM

many thanks!

dontfergetme · 07-10-2008, 09:15 PM

Hi,
If anyone is an expert on this stuff, maybe they can help me out...

So I have a string that's come from an html page that displays numbers in a table (in html). I want to be able to take out everything that's between the table tags and then use what's in the rows and columns and put all that information in an array. (All of this is using ActionScript).
So someone recently told me to use HTML DOM. Now, I've found this line that would make sense to do what I want to do:

node.getElementsByTagName("tagname");

So, I put this in:

var table1:String = str.getElementsByTagName("TABLE");

But, it showed me an error message. So, am I not supposed to be searching through a string? Is that where I'm going wrong?

Or is the format that I'm trying to put the information that's between the table tags wrong? (I'm trying to put it into a string).

Please help me!
Thanks!
-Alex

mad_A · 07-11-2008, 08:54 AM

I'm far from an expert, but at first glance I would wonder if you are mixing your data types - treating a string as an XML object...

Should you not create an XML object of the string, and then search it by node name as you were trying already?

Categories

Featured Jobs