Flash button hide/show a DIV-Layer on a html page?

elamberdor

Hi All!
Trying to get a drop down hide/show div on a html page triggered by a button in flash.
(Intro: Very very Little experience in dynamic flash)

setup: html page, flash map on page, button on flash opens info underneath map in a separate div. div that has hide/show content is called "operator"

I found this code, but i'm not sure it's what I need, and it's not working...

Flash file>button on stage>script:

Expand|Select|Wrap|Line Numbers

 
on (release) {

import flash.external.ExternalInterface;

ExternalInterface.call("hideDiv", "operator");

}

And the code in the html file:

Expand|Select|Wrap|Line Numbers

 
<html>

<head>

<title>page title</title>

<script type="text/javascript">

function hideDiv(id)

{

   document.getElementById(id).style.display = 'none';

}

</script>

</head>

<body>

<div id="operator">

</div>

</body>

</html>

Does anyone have a better (working) way of getting a flash button to talk to the html page to *togggle* a hidden div?

Any ideas would be muchly appreciated!
Thankyou so much in advance!
=)

elamberdor

I eventually got it to work! (Flash8, I.E 7)
Here's the answer explained for anyone else that needs it!

But I changed it a little to make it toggle......

What i've done is made the "operator" div hidden on page load with a css class attached to the div to start with:

in css file:

Expand|Select|Wrap|Line Numbers

 
.clearfix:after {

content: "."; 

display: block; 

height: 0; 

clear: both; 

visibility: hidden;

}

then in flash:
ive got a button on the stage with:

Expand|Select|Wrap|Line Numbers

 
on (press) {

import flash.external.ExternalInterface;

ExternalInterface.call("toggleLayer", "operator");

}

(i'm still researching AS3 regarding on (release) button and still getting my head around the new script - its quite hard to grasp!)

then in the html file, ive got a link to the css file and the javascript in the header telling it to toggle:

Expand|Select|Wrap|Line Numbers

 
<head>

<link href="../css/SVW_css_test_1.css" rel="stylesheet" title="medium" type="text/css">

<script type="text/javascript">

function toggleLayer( whichLayer )

{ 

var elem, vis;

if( document.getElementById ) // this is the way the standards work

elem = document.getElementById( whichLayer );

else if( document.all ) // this is the way old msie versions work

elem = document.all[whichLayer];

else if( document.layers ) // this is the way nn4 works

elem = document.layers[whichLayer];

vis = elem.style;

// if the style.display value is blank we try to figure it out here

if(vis.display==''&&elem.offsetWidth!=undefined&&e lem.offsetHeight!=undefined)

vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block ':'none';

vis.display = (vis.display==''||vis.display=='block')?'none':'bl ock';

}

//-->

</script>
 
</head>

then i've got the div in the body with the class of clearfix to make it invisible on page load:

Expand|Select|Wrap|Line Numbers

<div id="operator" class="clearfix">

Thanks!!
=)

crabpot8

out of curiosity, do you know what this line does?

import flash.external.ExternalInterface;

that is a reallly useful thing to know!

elamberdor

Hi there!

Well ~ As far as I know (which with Dynamic flash is VERY limited)

You can call in images and swf's using the Load script into flash, but to do the opposite and use things in flash to affect things outside the flash file, you use the

Expand|Select|Wrap|Line Numbers

ExternalInterface.call() function

it is used to call things like Javascript functions on the flash's HTML page. Apparently it is a more advanced version of this:

Expand|Select|Wrap|Line Numbers

navigateToURL(new URLRequest("javascript:hideDiv('my_div_id');"));

xNephilimx

Hi, there.
Not quite, the ExternalInterface class lets you communicate with javascript back and forth.
Here is a pretty good explanation http://www.thescripts.com/forum/thread694359.html

Kind regards,
The_Nephilim

Quote:

Originally Posted by elamberdor

Hi there!

Well ~ As far as I know (which with Dynamic flash is VERY limited)

You can call in images and swf's using the Load script into flash, but to do the opposite and use things in flash to affect things outside the flash file, you use the

Expand|Select|Wrap|Line Numbers

ExternalInterface.call() function

it is used to call things like Javascript functions on the flash's HTML page. Apparently it is a more advanced version of this:

Expand|Select|Wrap|Line Numbers

navigateToURL(new URLRequest("javascript:hideDiv('my_div_id');"));

elamberdor

sounds good, i'll have a read!

miao

hi! thank you for these instructions. I followed them exactly but couldn't get it to work. (the button inside the div is already visible when the page is opened.)
I have been searching the web for days now cause I'm not very experienced in java and actionscript.
please help!

Flash button hide/show a DIV-Layer on a html page?

re: Flash button hide/show a DIV-Layer on a html page?

re: Flash button hide/show a DIV-Layer on a html page?

re: Flash button hide/show a DIV-Layer on a html page?

re: Flash button hide/show a DIV-Layer on a html page?

re: Flash button hide/show a DIV-Layer on a html page?

re: Flash button hide/show a DIV-Layer on a html page?

Similar Flash / Actionscript bytes

/bytes/development

/bytes/it

/bytes/about