Groups | Blog | Home
all groups > flash actionscript > january 2006 >

flash actionscript : JavaScript, Actionscript, and Layers


David Stiller
1/5/2006 3:28:39 PM
metazai,

[quoted text, click to view]

This opening statement turns out to be pretty ambiguous. Words like
"frame" and "layer" have significantly different meanings in ActionScript
from those they have in HTML. Based on your sample code, I *believe* you're
trying to communicate with the HTML document in which the SWF is embedded.

[quoted text, click to view]

Generally, this occurs when a scripting language cannot reference an
object, for some reason or another.

[quoted text, click to view]

Let's take a swing at it. :)

[quoted text, click to view]

First off, let's clarify. The word "layer" in Flash means horizontal
rows in a timeline. You create layers in the Timeline panel of Flash and
add artwork and/or ActionScript to frames of a layer. The word "layer" in
HTML could mean anything from the non-standard Netscape <layer> tag to a
generic concept that refers to a combination off CSS and block level HTML
elements (often <div>, but practically any element).

[quoted text, click to view]

So far, we have two CSS (Cascading Style Sheet) rules defined in an HTML
document. Each seems to define the style of what might be called a "layer"
in the HTML sense.

[quoted text, click to view]

Here, we have three lines of ActionScript in a Flash movie. Line 3
stops the timeline in which this script lies. Lines 1 and 2 invoke the
getURL() function, using javascript: as the protocol. The javascript:
protocol is perfectly valid, and its purpose is to communicate with the
SWF's host (presumaby an HTML document, in this case).

These two lines are your problem. The CSS above (in your <style>
elements) are not an example of JavaScript. They are CSS, which isn't a
programming language. When your browsers complain that certain objects are
not defined, they're doing so because, in fact, you haven't defined anything
in JavaScript at all.

It looks to me like you're trying to use JavaScript to turn one HTML
"layer" off and another on. You'll need to write a JavaScript function in
your HTML document itself that handles this, then invoke that JavaScript
function from your ActionScript.

Leave the CSS as is. Here's how your JavaScript might look ...

<script type="text/javascript">

function toggleHtmlLayers() {
document.getElementById("flashopen").style.visibility = "none";
document.getElementById("Layer2").style.visibility = "visible";
}
</script>

Here's how your ActionScript might invoke the new JavaScript ...

getURL("javascript:toggleHtmlLayers();");


David
stiller (at) quip (dot) net
"Luck is the residue of good design."

David Stiller
1/5/2006 4:56:39 PM
metazai,

[quoted text, click to view]

Thanks!

[quoted text, click to view]

Okay, I'm testing now, too.

[quoted text, click to view]

Okay, this tells us that the visibility property of the style object of
the element specified is not yet populated. Here's what you need to do. I
guess when CSS gets loaded from your style element, it doesn't populate the
parallel style object in each element of the DOM (document object model).
So you just need to initialize the visible property of your two CSS rules
via JavaScript first.

<script type="text/javascript">

document.getElementById("flashopen").style.visibility = "visible";
document.getElementById("Layer2").style.visibility = "hidden";
function toggleHtmlLayers() {
document.getElementById("flashopen").style.visibility = "none";
document.getElementById("Layer2").style.visibility = "visible";
}
</script>

You can even leave the visibility property out of your CSS rules, if you
like, since the JavaScript will take care of it for you. In any case, once
JavaScript can "see" this property in each of your rules, it can access it
later.


David
stiller (at) quip (dot) net
"Luck is the residue of good design."

metazai
1/5/2006 8:02:16 PM
Greetings!

Trying to get the last frame of my javascript to replace the layer my flash is
in with a static html layer on the page.

As to the error, Firefox says flashopen and Layer2 are not defined. IE says
'visible' is undefined.

I'm confused, and need another few sets of eyes on this. Any help or comments
would be appreciated.

Here's the layers:

HTML Code:

<style>
#flashopen {
position:relative;
width:906px;
height:471px;
z-index:1000;
left: 0px;
top: 0px;
visibility: visible;
}
#Layer2 {
position:absolute;
width:906px;
height:471px;
z-index:1000;
left: 0px;
top: 0px;
visibility:hidden;
}
</style>

Here's the actionscript:

Code:
getURL("javascript:flashopen.style.visibility=none;");
getURL("javascript:Layer2.style.visibility=visible;");
stop();
metazai
1/5/2006 8:50:50 PM
Brilliantly explained, and I appreciate your time and effort.

Unfortunately, it still doesn't work. The code was rewritten with your
suggestions, then rewritten again, then finally I just cut and pasted your
suggestions from the bottom of your post. Still no go.

I'm getting this in IE: Could not get the visibility property. Invalid
Argument

And this in Firefox: Error: Error in parsing value for property 'visibility'.
Declaration dropped.

AddThis Social Bookmark Button