Knowledge Base

Important! All new questions are usually answered within the next business day.

Drop Down (Tree) Menu V3

(views: 11474)

Drop Down Menu V3 and Drop Down Tree Menu V3 are xml flash accordion menus featuring customized states, customized transitions and tweens. Here are all known issues for Drop Down Menu V3 and Drop Down Tree Menu V3, they should be similar, since basically it is the same component. If you have any questions that you think we should discuss here please let us know.



Drop over HTML content

(2007-09-21 - views: 14572)

Q: How can I expand the Drop Down (Tree) Menu V3 over an HTML content.
A: Here is an example of the Drop Down Tree Menu V3 expanded over an HTML content.

In this case there is a JavaScript function ("changeSize")) that gets called from Flash, which resizes the Flash clip embedded into the HTML page. The function is called when the mouse rolls out from the menu component. Below is the source code of the HTML page:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Create Drop Down Tree</title>
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    <script type="text/javascript">
      function changeSize(id, valueHeight) {
        document.getElementById(id).style.height = valueHeight + 'px';
      }
    </script>
  </head>
  <body leftmargin="0" topmargin="0">
    <table width="500" border="0" cellspacing="0" cellpadding="0" align="left">
      <tr>
        <td>
          <div id="flashMenu" style="position:absolute; overflow:hidden; width:500px; height:20px;" onmouseover="changeSize('flashMenu', 180);">
            <script type="text/javascript">
              AC_FL_RunContent(
                'codebase','http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
                'width','400',
                'height','300',
                'id','create_drop_down_tree',
                'align','middle',
                'src','create_drop_down_tree',
                'wmode','transparent',
                'quality','high',
                'bgcolor','#ffffff',
                'name','create_drop_down_tree',
                'allowscriptaccess','always',
                'pluginspage','http://www.macromedia.com/go/getflashplayer',
                'movie','create_drop_down_tree'
              ); //end AC code
            </script>
            <noscript>
              <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" style="position:absolute" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="400" height="300" id="create_drop_down_tree" align="middle">
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="movie" value="create_drop_down_tree.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="wmode" value="transparent" />
                <embed src="create_drop_down_tree.swf" wmode="transparent" quality="high" bgcolor="#ffffff" width="400" height="300" name="create_drop_down_tree" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
              </object>
            </noscript>
          </div>
        </td>
      </tr>
      <tr>
        <td height="19" bgcolor="#666666">&nbsp;</td>
      </tr>
      <tr>
        <td height="62">Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here
        </td>
      </tr>
      <tr>
        <td bgcolor="#999999">&nbsp;</td>
      </tr>
    </table>
  </body>
</html>


And here is the code from the .fla file (componentInstance is the name of the drop down menu instance):

componentInstance.addEventListener(MouseEvent.ROLL_OUT, rollOutHdl);

function rollOutHdl(ev:MouseEvent):void {
    if (ExternalInterface.available)
        ExternalInterface.call("changeSize", "flashMenu", 20);
}
Files: DDTM_dropOverHTML.zip 


User Comments

Is there an updated version of how to do this?
posted by mlahatte on 2008-02-12

Is there an updated version of how to have Drop Down Tree drop over HTML content? Dreamweaver CS3 updates the Runcontent for IE and messes it all up. I'm trying to put a 800 x 165 pixel swf menu centered in a table and have it drop over HTML content.
Replace the code from Dreamweaver
posted by negush on 2008-02-13

After you finish editing your HTML page with Dreamweaver, try to replace the appropriate code for the Flash content with the one presented in our example.
Help!
posted by mlahatte on 2008-02-15

Dreamweaver does this to the code:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>create_drop_down_tree</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body leftmargin="0" topmargin="0">
<table width="500" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td>
<div style="position:absolute">
<script type="text/javascript">
AC_FL_RunContent(
'codebase','http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
'width','400',
'height','300',
'id','create_drop_down_tree',
'align','middle',
'src','create_drop_down_tree',
'wmode','transparent',
'quality','high',
'bgcolor','#ffffff',
'name','create_drop_down_tree',
'allowscriptaccess','sameDomain',
'pluginspage','http://www.macromedia.com/go/getflashplayer',
'movie','create_drop_down_tree'
); //end AC code
</script>
</div>
<script type="text/javascript">
AC_FL_RunContent( 'style','position:absolute','codebase','http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','width','400','height','300','id','create_drop_down_tree','align','middle','src','create_drop_down_tree','wmode','transparent','quality','high','bgcolor','#ffffff','name','create_drop_down_tree','allowscriptaccess','sameDomain','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','create_drop_down_tree' ); //end AC code
</script><noscript><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" style="position:absolute" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="400" height="300" id="create_drop_down_tree" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="create_drop_down_tree.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" />
<embed src="create_drop_down_tree.swf" wmode="transparent" quality="high" bgcolor="#ffffff" width="400" height="300" name="create_drop_down_tree" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></noscript></td>
</tr>
<tr>
<td height="19" bgcolor="#666666">&nbsp;</td>
</tr>
<tr>
<td height="62">Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here </td>
</tr>
<tr>
<td bgcolor="#999999">&nbsp;</td>
</tr>
</table>
</body>
</html>

How do I get it back working?
Support for Flash only
posted by negush on 2008-02-18

We do not offer support for Dreamweaver related issues. If you have problems with one of our components, you can post it here on our site, post a question in our knowledge base or write us at support[at]jumpeyecomponents.com and someone will get back to you.
The Example Code provided works good in IE. However, with FireFox it disables the links that the fl
posted by mike3838 on 2008-05-16

The Example Code provided works good in IE. However, with FireFox it disables the links that the flash would normally cover up. So if the first text in the example provided had a hyperlink on it, it would not be clickable in FF.
Move mouse out of the flash clip surface
posted by negush on 2008-05-19

The code above works for Firefox too, but you need to completely roll the mouse out of the <div> tag that holds the flash clip (move the mouse out of the entire flash clip surface - the expanded menu).
how can i move the menu to the center?
posted by jimmyisme on 2009-02-20

Sorry, if it's a dumb question
is it possible move flash menu to the center?
how can i move the menu to the center?
posted by florodebat on 2009-02-24

Hello

You will have to add this line(left:50%;margin-left:-200px;top:50%;margin:-150px) of code in the <div> node which will move the component to the center. So the new <div> node should look like this:
<div style="position:absolute;left:50%;margin-left:-200px;top:50%;margin:-150px">
bug?
posted by jimmyisme on 2009-02-25

Thanks for answer my questions!!
however, there is another question.
I made a link under the drop down menu on this , but it seems that SWF block the link (unable to click on it), even though it's transparent already. Is there a way to solve this problem? (IE don't have this problem, but Firefox does)

<td height="62"><a href="#">Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here Your HTML content here </a></td>
</tr>
How to make the menu to allow acces to the html content?
posted by florodebat on 2009-03-02


To make the menu to allow acces to the html content you will have to call a JavaScript function (changeSize) to resize the <div> which contains the menu swf to it's initial size when the RollOver is made.
All you have to do is to use the code below inside of your fla file :

componentInstance.addEventListener(MouseEvent.ROLL_OUT, rollOutHdl);

function rollOutHdl(ev:MouseEvent):void {
if (ExternalInterface.available)
ExternalInterface.call("changeSize", "flashMenu", 20);
}

(componentInstance is the name of the drop down menu instance)

How to put it on the top
posted by pipechaves on 2009-03-26

well as we see it appears well but how do i put it on the flashon the top of the page?
Thanks

How to put it on the top
posted by florodebat on 2009-03-27

In our example the menu is already on the top off all the html layers. Unfortunately I am not sure I understand what do you mean by "on the flashon the top of the page".
Please open a new support ticket and write a detailed description of what you want to do and we will try to help you.
Here you can find more information about how to open a new support ticket:

https://www.jumpeyecomponents.com/support/open.php


Thank you


AS2
posted by pipechaves on 2009-03-28

Im trying to make this work so I can acces to the html content
It seems its AS3
is there a way to make it work on AS2

componentInstance.addEventListener(MouseEvent.ROLL_OUT, rollOutHdl);

function rollOutHdl(ev:MouseEvent):void {
if (ExternalInterface.available)
ExternalInterface.call("changeSize", "flashMenu", 20);
}

I was trying

onRollOut = function () {
try {
ExternalInterface.call("changeSize", "flashMenu", 100);
} catch(e:Error) {
trace(e)
}

};

without luck.
AS2
posted by pipechaves on 2009-03-28

Im trying to make this work so I can acces to the html content
It seems its AS3
is there a way to make it work on AS2

componentInstance.addEventListener(MouseEvent.ROLL_OUT, rollOutHdl);

function rollOutHdl(ev:MouseEvent):void {
if (ExternalInterface.available)
ExternalInterface.call("changeSize", "flashMenu", 20);
}

I was trying

onRollOut = function () {
try {
ExternalInterface.call("changeSize", "flashMenu", 100);
} catch(e:Error) {
trace(e)
}

};

without luck.
AS2
posted by florodebat on 2009-03-30

Unfortunately you can not use that method for the AS2 version of the DropDownMenu because the rollOver event is dispatched for each item of the menu separately.
The only solution is to call the "changeSize" function on the mouse out event of the div . All you have to do is to add the next line of code in the div node :
onmouseout="changeSize('flashMenu', 20);"
Question
posted by simpson77 on 2009-07-16

When I copy the Actionscript:

componentInstance.addEventListener(MouseEvent.ROLL_OUT, rollOutHdl);

function rollOutHdl(ev:MouseEvent):void {
if (ExternalInterface.available)
ExternalInterface.call("changeSize", "flashMenu", 20);
}

I get the following error:

The class or interface 'MouseEvent' could not be loaded.
----

Am I missing something here?
Mouse Over HTML moving up
posted by simpson77 on 2009-07-16

Your directions for creating a mouse over html are pretty clear except how does one set up code so that the menu is at the bottom and one wants the submenus to move upwards over html?
Changing back size
posted by simpson77 on 2009-07-24

Just a heads up, if you are using this menu to drop over another flash movie, one might want to change:

onmouseover="changeSize('flashMenu', 180);

to

onmouseover="changeSize('flashMenu', 180); onmouseout"changeSize('flashMenu', 15),"

I used 15 because that is the original size of my menu. You should change it to match your original size. The reason for this is that any links or interactive regions within the flash portion of your movie will be dead because the menu bar is covering it. So, this works.
fla file
posted by shireen on 2009-08-29

hi,

can any one help me,
i cant find the fla file
plase send it to me at my mail; shereen_mna@yahoo.com
fla file
posted by florodebat on 2009-09-01

That example is made with the AS3 version of the component. Unfortunately the AS3 version does not have a free trial version and we can not attach the fla file here. However if you purchased the component, you could open a new support ticket and ask there about that file and I am sure you will get it. Please click the link bellow in order to open a new support ticket.

http://www.jumpeyecomponents.com/support/open.php
Not working in Safari 4.0.3 MAC
posted by ktan902 on 2009-09-30

Hi,
The above example does not work in Safari 4 for Mac...the javascript seems to be messing with the Flash menu. Is there a workaround for this?

Thanks!
kj
works fine for me
posted by florodebat on 2009-10-01

I have tested that example with Safari 4.0.3 and it worked fine for me. I am not sure what certain could be wrong on your side but please make sure that the Flash Player from your Safari browser is up to date. If this information does not helped you out please open a new support ticket and write there about that issue and someone will get back to you as soon is possible.


Login to post your comment login to post your comment

Other questions in this item:

Call JavaScript from XML Open menu item pages into target - "_self" Item description from XML Disable-Enable Drop Down (Tree) Menu Initiate Drop Down Tree Menu V3 through ActionScript Displaying the submenu horizontally instead of vertical Adding a checkbox to a menu Hand cursor Referencing item's textfield in Drop Down (Tree) Menu V3 Centering the titles on the Drop Down (Tree) Menu V3 Different text formats and anti alias Load movies on item select Navigate through scenes Go to different frames by pressing a menu item setXML() generates error message Changing Design Adding a separating gap between menu items Autoexpand on start Open menu items upwards Initiate DropDownTreeMenuV3AS3 by ActionScript code Load movies on item select Correct width of the main menu


Back

Knowledge Base Search

Enter keywords below:
Advanced Search
FlashEff 2.0
Create professional flash photo slideshows online

FREE Flash Stuff

Check out these free, fully functional AS3.0 Flash components by Jumpeye:

FlashEff 2.0 Free
(free for non-commercial use)

JC Panorama
(free for non-commercial use)

JC Play List
(fully free)

Basic Menu Pack V3
(free AS3 version)

MCTE V3
(free AS3 version)

JC Player
(free for non-commercial use)

JC Flash Map
(free for non-commercial use)

Flash Bookmarks
(fully free)

ActionScript Bridge AS2-AS3
(fully free)

JS Charts
(free for non-commercial use)

Free Trial Versions

The trial versions do have a major limitation. They will ONLY run into debugger flash player versions, such as the Flash IDE player and the activeX FP used by developers.

Switch from Free Trial version to Full version.

You can switch from Trial to Full versions in a blink of an eye.
See this tutorial in order to find out how.

We accept Google Checkout

Google Checkout Acceptance Mark

Secured by VeriSign