Flash Menu Driven By Xml

Joined: 11/28/2008

Merry CHRISTmas everyone!

I pray you are having a wonderful and blessed year.

I am building an XML driven Flash Menu for my site.

I have the SML file built:

menu.xml

[/font][font="Arial"]

<?xml version="1.0"?>

<menu name="Menu">

<item name="Home" action="gotoURL" variables="http://www.tsgcomputers.net"/>

<item name="Foum" action="gotoURL" variables="http://www.tsgcomputers.net/forum"/>

<item name="Chatroom" action="gotoURL" variables="http://www.tsgcomputers.net/index.php?pid=15"/>

<item name="Downloads" action="gotoURL" variables="http://www.tsgcomputers.net/index.php?ind=downloads"/>

<item name="Links" action="gotoURL" variables="http://www.tsgcomputers.net/forum/index.php?action=links"/>

<menu name="Media">

<item name="Music" action="gotoURL" variables="http://www.tsgcomputers.net/player/music"/>

<item name="Video" action="gotoURL" variables="http://www.tsgcomputers.net/player/video"/>

<item name="Audio Bible (KJV)" action="gotoURL" variables="http://www.tsgcomputers.net/bible/audio"/>

</menu>

<menu name="Resources">

<menu name="Christian">

<item name="Bible Tools" action="gotoURL" variables="http://www.tsgcomputers.net/index.php?pid=2"/>

<menu name="Bible Translations">

<item name="-=Under Construction=-" action="gotoURL" variables="http://www.tsgcomputers.net/index.php?pid=2"/>

</menu>

</menu>

<menu name="Online Tools">

<menu name="Converters">

<item name="-=Under Construction=-" action="gotoURL" variables="http://www.tsgcomputers.net/index.php?pid=1"/>

</menu>

<item name="Xara3D Banner Maker" action="gotoURL" variables="http://www.tsgcomputers.net/index.php?pid=20"/>

<item name="ClusterMap" action="gotoURL" variables="http://www3.clustrmaps.com/counter/maps.php?url=http://www.tsgcomputers.net"/>

</menu>

</menu>

<menu name="Account/Contact">

<item name="Register" action="gotoURL" variables="http://www.tsgcomputers.net/forum/index.php?action=register"/>

<item name="Invite" action="gotoURL" variables="http://www.tsgcomputers.net/forum/index.php?action=invite"/>

<item name="News" action="gotoURL" variables="http://www.tsgcomputers.net/index.php?ind=news"/>

<item name="Comment?" action="gotoURL" variables="http://www.tsgcomputers.net/index.php?pid=17"/>

</menu>

</menu>

In flash 8 I have several items created:

arrow ((movieclip) used to denote a submenu within a button)
background ((movieclip) used as the button background image)
menuitem ((movieclip) an invisible box surrounding the button showing the item as a whole)
name ((text field) used by the XML to name each button used)

I attempted to following kirupta's tutorial:

http://www.kirupa.com/developer/actionscri...opdown_menu.htm

I got as far as 'Generating a Menu'.

THen it starts to talk about variables, arguments, and other things pertaining with the ActionScript.

Although I would like to do this from scrap, I need assistance.

I;ve gotten used to HTML and CSS but ActionScript eludes me.

Any assistance would be appreciated.

If it would be easier for you to write the ActionScript, be my guest.

God bless, Merry Christmas and have a blessed hew year,
Johnathan

Do you want to learn more about the Christian Worldview or need some prayer or other support? Go to:
Joined: 11/28/2008
I personally would not have

I personally would not have my site's navigation be written solely in flash, especially because there are many ways to accomplish what you're doing with simple xhtml markup with just a touch of css. (Not even mentioning the dramatic impact this will have on Search Engine Optimization)

I think you might be trying to put the cart before the horse. ActionScript is a huge part of generating dynamic content from xml in flash. (Or any dynamic content in flash) If you really want to do things this way, I would start taking some action script tutorials to begin getting comfortable with variables and arguments before your proceed any further as you're going to need to use them... a lot.

If you've attempted to write the menu and have gotten stuck, post the Action Script that you're written so far so that we can see were your code has gone awry.

Joined: 11/28/2008
Paul,Thanks for the reply...I

Paul,

Thanks for the reply...

I realize that I can do this in JS and in HTML.

The reason is this:

Right now I am using HTML. If you go onto my site: http://www.tsgcomputers.net

You will see a 'Show Menu' button on the upper right of your page. It is setup to use the HTML that I have placed at the top of the <body> of the page. Well I have two other menus that do the same thing except since the site uses both HTML and PHP I've had to result to using the same code two times in different places. So whe I have to update one, I have to update the other.

That is the 1st thing I want to get rid of, updating the same code twice or more.

Also, you see that I've used a button to show and hide the menu. I wanted this allow the user easy navigation no matter where they were in the site/forum. This is how I knew it could be done but with the least pain... through HTML.

That is the reason for flash...

I wanted to create a flash, cross browser, navigation system and I can update easily and from one location without having to change code ever again. Plus it can look cool with fading/shading and other effects.

Here is the code that currently makes up the HTML button menu:

CODE
<!-- BUTTON MENU START -->
<script type="text/javascript" src="http://www.tsgcomputers.net/scripts/fixed.js"></script>
<script language="JavaScript" type="text/javascript">

<!--
(document.getElementById) ? dom = true : dom = false;

function showmenu() {
  if (dom) {document.getElementById('layer1').style.visibility='hidden';}
  if (document.layers) {document.layers["layer1"].visibility='hide';}
  }
function hidemenu() {
  if (dom) {document.getElementById('layer1').style.visibility='visible';}
  if (document.layers) {document.layers["layer1"].visibility='show';}
}
// -->
</script>

<span id="layer" style="position:fixed; top:0px; right:10%; width:250; height:90; visibility:show">
<script language="JavaScript" type="text/javascript">
<!--
function menubuttonText(type) {
  if (type=="Hide Menu ") {document.menu.button.value="Show Menu";}
  else {document.menu.button.value="Hide Menu ";}
   showmenu();
  if (document.menu.button.value=="Hide Menu ") {hidemenu();}
}
// -->
</script>

<form name="menu">
<input type="button" name="button" onClick="menubuttonText(value);" value="Show Menu" alt="Shows the navigation menu for the site." />
</form>
</span>

<style type="text/css">
<!--
.menu {font-family:Arial; font-size:10pt; font-weight:none; color:#000000}
-->
</style>
<script language="javascript">
<!--
function movein(which,html){
which.style.background='#EEF1FF'
description.innerHTML=html
}

function moveout(which){
which.style.background='#E8F1FF'
description.innerHTML='&nbsp;'
}

-->
</script>
<!-- Place code above between your head tags-->

<!-- Place code below between your body tags-->
<div id="layer1" style="position:fixed; top:20px; right:8%; width:250; height:90; visibility:hidden">
<table bgcolor="black" border="0" cellpadding="2" cellspacing="0" width="150" align="right">
<tr>
<td class="menu" bordercolor="black" id="choice1" style="cursor:hand;background-color:#ececec"

onMouseOver="movein(choice1,'Home')" onMouseOut="moveout(choice1)" onClick="location.href='http://www.tsgcomputers.net'">
<div align="center">Home</div>
</td>
  </tr>
<tr>
<td class="menu" bordercolor="black" id="choice2" style="cursor:hand;background-color:#E8F1FF"

onMouseOver="movein(choice2,'TSGC Community Forum')" onMouseOut="moveout(choice2)"

onClick="location.href='http://www.tsgcomputers.net/forum/index.php'">
<div align="center">Forum</div>
</td>
  </tr>
<tr>
<td class="menu" bordercolor="black" id="choice3" style="cursor:hand;background-color:#E8F1FF"

onMouseOver="movein(choice3,'IRC Based Chatroom')" onMouseOut="moveout(choice3)"

onClick="location.href='http://www.tsgcomputers.net/index.php?pid=15'">
<div align="center">Chatroom</div>
</td>
  </tr>
<tr>
<td class="menu" bordercolor="black" id="choice4" style="cursor:hand;background-color:#E8F1FF"

onMouseOver="movein(choice4,'Downloads for registered users.')" onMouseOut="moveout(choice4)"

onClick="location.href='http://www.tsgcomputers.net/index.php?ind=downloads'">
<div align="center">Downloads</div>
</td>
  </tr>
<tr>
<td class="menu" bordercolor="black" id="choice5" style="cursor:hand;background-color:#E8F1FF"

onMouseOver="movein(choice5,'Play Online MP3s')" onMouseOut="moveout(choice5)"

onClick="window.open('http://www.tsgcomputers.net/player/music');return false">
<div align="center">MP3 Player</div>
</td>
  </tr>
<tr>
<td class="menu" bordercolor="black" id="choice6" style="cursor:hand;background-color:#E8F1FF"

onMouseOver="movein(choice6,'Play Online Videos')" onMouseOut="moveout(choice6)"

onClick="window.open('http://www.tsgcomputers.net/player/video');return false">
<div align="center">Video Player</div>
</td>
  </tr>
<tr>
<td class="menu" bordercolor="black" id="choice7" style="cursor:hand;background-color:#E8F1FF"

onMouseOver="movein(choice7,'Various Resource Links')" onMouseOut="moveout(choice7)"

onClick="location.href='http://www.tsgcomputers.net/forum/index.php?action=links'">
<div align="center">Links</div>
</td>
  </tr>
<tr>
<td class="menu" bordercolor="black" id="choice8" style="cursor:hand;background-color:#E8F1FF"

onMouseOver="movein(choice8,'Invite others to the site!')" onMouseOut="moveout(choice8)"

onClick="location.href='http://www.tsgcomputers.net/forum/index.php?action=invite'">
<div align="center">Invite Others</div>
</td>
  </tr>
<tr>
<td class="menu" bordercolor="black" id="choice9" style="cursor:hand;background-color:#E8F1FF"

onMouseOver="movein(choice9,'Register for a FREE account!')" onMouseOut="moveout(choice9)"

onClick="location.href='http://www.tsgcomputers.net/forum/index.php?action=register'">
<div align="center">Register</div>
</td>
  </tr>
<tr>
<td class="menu" bordercolor="black" id="choice10" style="cursor:hand;background-color:#E8F1FF"

onMouseOver="movein(choice10,'Do you have any suggestions of comments?')" onMouseOut="moveout(choice10)"

onClick="location.href='http://www.tsgcomputers.net/index.php?pid=17'">
<div align="center">Suggestions / Comments?</div>
</td>
  </tr>
<tr>
<td class="menu" bordercolor="black" id="choice11" style="cursor:hand;background-color:#E8F1FF"

onMouseOver="movein(choice11,'Resources for Christians')" onMouseOut="moveout(choice11)"

onClick="location.href='http://www.tsgcomputers.net/index.php?pid=2'">
<div align="center">Christian Resources</div>
</td>
  </tr>
<tr>
<td class="menu" bordercolor="black" id="choice12" style="cursor:hand;background-color:#E8F1FF"

onMouseOver="movein(choice12,'Useful Tools and Utilities')" onMouseOut="moveout(choice12)"

onClick="location.href='http://www.tsgcomputers.net/index.php?pid=1'">
<div align="center">Tools</div>
</td>
  </tr>
<tr>
<td class="menu" bordercolor="black" id="choice13" style="cursor:hand;background-color:#E8F1FF"

onMouseOver="movein(choice13,'Latest News from the WebMaster')" onMouseOut="moveout(choice13)"

onClick="location.href='http://www.tsgcomputers.net/index.php?ind=news'">
<div align="center">Website News</div>
</td>
  </tr>
<tr>
    <td bordercolor="black" bgcolor="white" height="18"><font id="description" face="arial" size="1"></font></td>
  </tr>
</table>
</div>
<!-- BUTTON MENU END -->

As you can see it already uses soem JS for the show and hide functions. Then HTML is used for everything else. Would you suggest a better way of doing this... like a JS file to create and maintain the menu and thus will onyl have a <script> element in my PHP and HTML pages/site?

Merry Christmas and God bless,
Johnathan

Do you want to learn more about the Christian Worldview or need some prayer or other support? Go to:
Joined: 11/28/2008
Oh and also, I am expanding

Oh and also, I am expanding my menu. So I will also have submenus as well.

Thanks again.

Do you want to learn more about the Christian Worldview or need some prayer or other support? Go to:
Joined: 11/28/2008
Also, I did create a menu

Also, I did create a menu that worked really well, however it used the <li> element and it could not use the pictures that I added to it.

Do you want to learn more about the Christian Worldview or need some prayer or other support? Go to:
Joined: 11/28/2008
Hello,OK, I've created a

Hello,

OK, I've created a JavaScript Menu.

But I have an issue... positioning...

I have figured out how to potition according to pixel by changing the values in this string:

'block_top':0,'block_left':0

But I want to use %s as each browser window isn't the same.

How can I do this in JavaScript OR can I add an the position in the HTML that I will add to the site to show the menu?

God bless,
Johnathan

Do you want to learn more about the Christian Worldview or need some prayer or other support? Go to:
Joined: 11/28/2008
Oh and BTW,you can preview

Oh and BTW,

you can preview the menu by going to this URL:

http://www.tsgcomputers.net/menu/menu.html

It is currently using the values in java script:

'block_top':0,'block_left':760,

Do you want to learn more about the Christian Worldview or need some prayer or other support? Go to:
Joined: 11/28/2008
Also, currently I have a

Also, currently I have a working menu that is being positioned in HTML...

http://www.tsgcomputers.net

If you look in the upper right corner you will see a 'Show Menu' button. This is fixed so it does not move no matter where you go in the site. I want the new Java menu to do the same.

Do you want to learn more about the Christian Worldview or need some prayer or other support? Go to: