How to customize Relevare navigation menu

programming flash
1

This navigation menu was originally used on http://www.relevare.com/site/ .

I got the source code from http://laco.wz.cz/tween/?page=examples , under the relevare.com navigation link. I’ve attached the fla and xml with this post.

I’ve managed to customize the labels for each box in the xml file, but can’t figure out how to put content like jpgs, swfs or even text in the boxes.

I’ve spent hours googling for tutorials on this without any luck. The company Relevare has ceased trading. The laco board doesn’t offer support for this example. There are a couple threads about this menu on Kirupa, but none of them say anything about customization.

This is a nifty menu I’d like to be able to customize. Any help would be much appreciated.

Here’s the as code:

ActionScript Code:



[FONT=Courier New][LEFT][COLOR=#808080]*#include "lmc_tween_as1.as"</p>*[/COLOR][/LEFT]

 
 
 
[LEFT]<p>init[COLOR=#000000]([/COLOR][COLOR=#000000])[/COLOR];</p>
<p>_global.[COLOR=#000080]out[/COLOR] = [COLOR=#000000]**function**[/COLOR][COLOR=#000000]([/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]</p>
<p>trace[COLOR=#000000]([/COLOR][COLOR=#0000ff]arguments[/COLOR][COLOR=#000000])[/COLOR];</p>
<p>[COLOR=#000000]}[/COLOR];</p>
<p>function init[COLOR=#000000]([/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]</p>
<p>data = [COLOR=#000000][[/COLOR][COLOR=#000000]][/COLOR];</p>
<p>srcfile = [COLOR=#ff0000]"menu.xml"[/COLOR];</p>
<p>loadXML[COLOR=#000000]([/COLOR]srcfile,[COLOR=#0000ff]data[/COLOR][COLOR=#000000])[/COLOR];</p>
<p>[COLOR=#000000]}[/COLOR]</p>
<p>function loadXML[COLOR=#000000]([/COLOR]file, [COLOR=#0000ff]data[/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]</p>
<p>var source_xml = [COLOR=#000000]**new**[/COLOR] [COLOR=#0000ff]XML[/COLOR][COLOR=#000000]([/COLOR][COLOR=#000000])[/COLOR];</p>
<p>var th = [COLOR=#0000ff]this[/COLOR];</p>
<p>source_xml.[COLOR=#0000ff]ignoreWhite[/COLOR] = [COLOR=#000000]**true**[/COLOR];</p>
<p>source_xml.[COLOR=#0000ff]onLoad[/COLOR] = [COLOR=#000000]**function**[/COLOR][COLOR=#000000]([/COLOR]success[COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]</p>
<p>th.[COLOR=#000080]parseXMLNode[/COLOR][COLOR=#000000]([/COLOR][COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]firstChild[/COLOR],[COLOR=#0000ff]data[/COLOR][COLOR=#000000])[/COLOR];</p>
<p>th.[COLOR=#000080]buildMenu[/COLOR][COLOR=#000000]([/COLOR]th.[COLOR=#000080]main_mc[/COLOR], [COLOR=#0000ff]data[/COLOR][COLOR=#000000])[/COLOR];</p>
<p>[COLOR=#000000]}[/COLOR];</p>
<p>source_xml.[COLOR=#0000ff]load[/COLOR][COLOR=#000000]([/COLOR]file[COLOR=#000000])[/COLOR];</p>
<p>[COLOR=#000000]}[/COLOR]</p>
<p>function parseXMLNode[COLOR=#000000]([/COLOR]node, data_arr[COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]</p>
<p>for [COLOR=#000000]([/COLOR][COLOR=#000000]**var**[/COLOR] i = [COLOR=#000080]0[/COLOR]; i<node.[COLOR=#0000ff]childNodes[/COLOR].[COLOR=#0000ff]length[/COLOR]; i++[COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]</p>
<p>var n = node.[COLOR=#0000ff]childNodes[/COLOR][COLOR=#000000][[/COLOR]i[COLOR=#000000]][/COLOR];</p>
<p>var nodeObj = [COLOR=#000000]{[/COLOR][COLOR=#000000]}[/COLOR];</p>
<p>for [COLOR=#000000]([/COLOR][COLOR=#000000]**var**[/COLOR] j [COLOR=#0000ff]in[/COLOR] n.[COLOR=#0000ff]childNodes[/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]</p>
<p>switch [COLOR=#000000]([/COLOR]n.[COLOR=#0000ff]childNodes[/COLOR][COLOR=#000000][[/COLOR]j[COLOR=#000000]][/COLOR].[COLOR=#0000ff]nodeName[/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]</p>
<p>case [COLOR=#ff0000]"label"[/COLOR] :</p>
<p>[COLOR=#808080]*//trace(n.childNodes[j].nodeType)</p>*[/COLOR]
<p>nodeObj.[COLOR=#000080]label[/COLOR] = n.[COLOR=#0000ff]childNodes[/COLOR][COLOR=#000000][[/COLOR]j[COLOR=#000000]][/COLOR].[COLOR=#0000ff]firstChild[/COLOR].[COLOR=#0000ff]nodeValue[/COLOR];</p>
<p>break;</p>
<p>case [COLOR=#ff0000]"data"[/COLOR] :</p>
<p>nodeObj.[COLOR=#0000ff]data[/COLOR] = n.[COLOR=#0000ff]childNodes[/COLOR][COLOR=#000000][[/COLOR]j[COLOR=#000000]][/COLOR].[COLOR=#0000ff]firstChild[/COLOR].[COLOR=#0000ff]nodeValue[/COLOR];</p>
<p>break;</p>
<p>case [COLOR=#ff0000]"subitems"[/COLOR] :</p>
<p>nodeObj.[COLOR=#000080]subitems[/COLOR] = [COLOR=#000000][[/COLOR][COLOR=#000000]][/COLOR];</p>
<p>parseXMLNode[COLOR=#000000]([/COLOR]n.[COLOR=#0000ff]childNodes[/COLOR][COLOR=#000000][[/COLOR]j[COLOR=#000000]][/COLOR], nodeObj.[COLOR=#000080]subitems[/COLOR][COLOR=#000000])[/COLOR];</p>
<p>break;</p>
<p>[COLOR=#000000]}[/COLOR]</p>
<p>[COLOR=#000000]}[/COLOR]</p>
<p>data_arr.[COLOR=#0000ff]push[/COLOR][COLOR=#000000]([/COLOR]nodeObj[COLOR=#000000])[/COLOR];</p>
<p>[COLOR=#000000]}[/COLOR]</p>
<p>[COLOR=#000000]}[/COLOR]</p>
<p>function buildMenu[COLOR=#000000]([/COLOR]timeline, [COLOR=#0000ff]data[/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]</p>
<p>[COLOR=#808080]*//</p>*[/COLOR]
<p>level = [COLOR=#000080]0[/COLOR];</p>
<p>pagew = [COLOR=#000080]100[/COLOR];</p>
<p>pageh = [COLOR=#000080]100[/COLOR];</p>
<p>positions = [COLOR=#000000][[/COLOR][COLOR=#000000]{[/COLOR]x:[COLOR=#000080]2[/COLOR], y:[COLOR=#000080]2[/COLOR][COLOR=#000000]}[/COLOR], [COLOR=#000000]{[/COLOR]x:[COLOR=#000080]2[/COLOR], y:[COLOR=#000080]1[/COLOR][COLOR=#000000]}[/COLOR], [COLOR=#000000]{[/COLOR]x:[COLOR=#000080]1[/COLOR], y:[COLOR=#000080]2[/COLOR][COLOR=#000000]}[/COLOR], [COLOR=#000000]{[/COLOR]x:[COLOR=#000080]1[/COLOR], y:[COLOR=#000080]1[/COLOR][COLOR=#000000]}[/COLOR], [COLOR=#000000]{[/COLOR]x:[COLOR=#000080]0[/COLOR], y:[COLOR=#000080]2[/COLOR][COLOR=#000000]}[/COLOR], [COLOR=#000000]{[/COLOR]x:[COLOR=#000080]0[/COLOR], y:[COLOR=#000080]1[/COLOR][COLOR=#000000]}[/COLOR], [COLOR=#000000]{[/COLOR]x:[COLOR=#000080]2[/COLOR], y:[COLOR=#000080]0[/COLOR][COLOR=#000000]}[/COLOR][COLOR=#000000]][/COLOR];</p>
<p>[COLOR=#808080]*//</p>*[/COLOR]
<p>timeline.[COLOR=#0000ff]setMask[/COLOR][COLOR=#000000]([/COLOR]mask_mc[COLOR=#000000])[/COLOR];</p>
<p>[COLOR=#808080]*//</p>*[/COLOR]
<p>&nbsp;</p>
<p>timeline.[COLOR=#000080]destx[/COLOR] = timeline.[COLOR=#000080]desty[/COLOR]=[COLOR=#000080]10[/COLOR];</p>
<p>timeline.[COLOR=#000080]desth[/COLOR] = timeline.[COLOR=#000080]destw[/COLOR]=[COLOR=#000080]300[/COLOR];</p>
<p>[COLOR=#808080]*//</p>*[/COLOR]
<p>timeline.[COLOR=#000080]label[/COLOR] = [COLOR=#ff0000]"perceptive planning"[/COLOR];</p>
<p>timeline.[COLOR=#000080]bg_mc[/COLOR].[COLOR=#0000ff]onPress[/COLOR] = [COLOR=#000000]**function**[/COLOR][COLOR=#000000]([/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]</p>
<p>main_mc.[COLOR=#000080]tween[/COLOR][COLOR=#000000]([/COLOR][COLOR=#000000][[/COLOR][COLOR=#ff0000]"_width"[/COLOR], [COLOR=#ff0000]"_height"[/COLOR], [COLOR=#ff0000]"_x"[/COLOR], [COLOR=#ff0000]"_y"[/COLOR][COLOR=#000000]][/COLOR], [COLOR=#000000][[/COLOR][COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]_parent[/COLOR].[COLOR=#000080]destw[/COLOR], [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]_parent[/COLOR].[COLOR=#000080]desth[/COLOR], [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]_parent[/COLOR].[COLOR=#000080]destx[/COLOR], [COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]_parent[/COLOR].[COLOR=#000080]desty[/COLOR][COLOR=#000000]][/COLOR], [COLOR=#000080]1[/COLOR][COLOR=#000000])[/COLOR];</p>
<p>[COLOR=#000000]}[/COLOR];</p>
<p>timeline.[COLOR=#000080]bg_mc[/COLOR].[COLOR=#0000ff]_alpha[/COLOR] = [COLOR=#000080]40[/COLOR];</p>
<p>createPages[COLOR=#000000]([/COLOR]timeline, [COLOR=#0000ff]data[/COLOR][COLOR=#000000])[/COLOR];</p>
<p>[COLOR=#000000]}[/COLOR]</p>
<p>function createPages[COLOR=#000000]([/COLOR]basepage, [COLOR=#0000ff]data[/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]</p>
<p>[COLOR=#808080]*// compute scale</p>*[/COLOR]
<p>[COLOR=#808080]*// attach clips</p>*[/COLOR]
<p>for [COLOR=#000000]([/COLOR][COLOR=#000000]**var**[/COLOR] i = [COLOR=#000080]0[/COLOR]; i<data.[COLOR=#0000ff]length[/COLOR]; i++[COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]</p>
<p>var page = basePage.[COLOR=#0000ff]attachMovie[/COLOR][COLOR=#000000]([/COLOR][COLOR=#ff0000]"page"[/COLOR], [COLOR=#ff0000]"page"[/COLOR]+i+[COLOR=#ff0000]"_mc"[/COLOR], basepage.$depth++[COLOR=#000000])[/COLOR];</p>
<p>page.$depth = [COLOR=#000080]0[/COLOR];</p>
<p>[COLOR=#808080]*//</p>*[/COLOR]
<p>page.[COLOR=#0000ff]_x[/COLOR] = positions[COLOR=#000000][[/COLOR]i[COLOR=#000000]][/COLOR].[COLOR=#000080]x[/COLOR]*pagew;</p>
<p>page.[COLOR=#0000ff]_y[/COLOR] = positions[COLOR=#000000][[/COLOR]i[COLOR=#000000]][/COLOR].[COLOR=#000080]y[/COLOR]*pageh;</p>
<p>page.[COLOR=#0000ff]_width[/COLOR] = pagew;</p>
<p>page.[COLOR=#0000ff]_height[/COLOR] = pageh;</p>
<p>[COLOR=#808080]*//</p>*[/COLOR]
<p>page.[COLOR=#000080]label[/COLOR] = [COLOR=#0000ff]data[/COLOR][COLOR=#000000][[/COLOR]i[COLOR=#000000]][/COLOR].[COLOR=#000080]label[/COLOR];</p>
<p>[COLOR=#808080]*//</p>*[/COLOR]
<p>var pt = [COLOR=#000000]{[/COLOR]x:[COLOR=#000080]10[/COLOR], y:[COLOR=#000080]10[/COLOR][COLOR=#000000]}[/COLOR];</p>
<p>page.[COLOR=#0000ff]globalToLocal[/COLOR][COLOR=#000000]([/COLOR]pt[COLOR=#000000])[/COLOR];</p>
<p>page.[COLOR=#000080]destx[/COLOR] = pt.[COLOR=#000080]x[/COLOR]+[COLOR=#000080]10[/COLOR];</p>
<p>page.[COLOR=#000080]desty[/COLOR] = pt.[COLOR=#000080]y[/COLOR]+[COLOR=#000080]10[/COLOR];</p>
<p>[COLOR=#808080]*//</p>*[/COLOR]
<p>page.[COLOR=#000080]desth[/COLOR] = page.[COLOR=#000080]destw[/COLOR]=[COLOR=#0000ff]Math[/COLOR].[COLOR=#0000ff]pow[/COLOR][COLOR=#000000]([/COLOR][COLOR=#000080]3[/COLOR], [COLOR=#0000ff]level[/COLOR][COLOR=#000000])[/COLOR]*[COLOR=#000080]900[/COLOR];</p>
<p>[COLOR=#808080]*//</p>*[/COLOR]
<p>page.[COLOR=#000080]bg_mc[/COLOR].[COLOR=#0000ff]_alpha[/COLOR] = [COLOR=#000080]20[/COLOR]+[COLOR=#000000]([/COLOR]i*[COLOR=#000080]5[/COLOR][COLOR=#000000])[/COLOR];</p>
<p>page.[COLOR=#000080]bg_mc[/COLOR].[COLOR=#0000ff]onPress[/COLOR] = [COLOR=#000000]**function**[/COLOR][COLOR=#000000]([/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]</p>
<p>goToPage[COLOR=#000000]([/COLOR][COLOR=#0000ff]this[/COLOR].[COLOR=#0000ff]_parent[/COLOR][COLOR=#000000])[/COLOR];</p>
<p>[COLOR=#000000]}[/COLOR];</p>
<p>[COLOR=#808080]*//</p>*[/COLOR]
<p>if [COLOR=#000000]([/COLOR][COLOR=#0000ff]data[/COLOR][COLOR=#000000][[/COLOR]i[COLOR=#000000]][/COLOR].[COLOR=#000080]subitems[/COLOR].[COLOR=#000080]length[/COLOR]>[COLOR=#000080]0[/COLOR][COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]</p>
<p>level++;</p>
<p>createPages[COLOR=#000000]([/COLOR]page,[COLOR=#0000ff]data[/COLOR][COLOR=#000000][[/COLOR]i[COLOR=#000000]][/COLOR].[COLOR=#000080]subitems[/COLOR][COLOR=#000000])[/COLOR];</p>
<p>level--;</p>
<p>[COLOR=#000000]}[/COLOR]</p>
<p>[COLOR=#000000]}[/COLOR]</p>
<p>[COLOR=#000000]}[/COLOR]</p>
<p>function goToPage[COLOR=#000000]([/COLOR]page[COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]</p>
<p>if [COLOR=#000000]([/COLOR]page != zoomed[COLOR=#000000])[/COLOR] [COLOR=#000000]{[/COLOR]</p>
<p>main_mc.[COLOR=#000080]tween[/COLOR][COLOR=#000000]([/COLOR][COLOR=#000000][[/COLOR][COLOR=#ff0000]"_width"[/COLOR], [COLOR=#ff0000]"_height"[/COLOR], [COLOR=#ff0000]"_x"[/COLOR], [COLOR=#ff0000]"_y"[/COLOR][COLOR=#000000]][/COLOR], [COLOR=#000000][[/COLOR]page.[COLOR=#000080]destw[/COLOR], page.[COLOR=#000080]desth[/COLOR], page.[COLOR=#000080]destx[/COLOR], page.[COLOR=#000080]desty[/COLOR][COLOR=#000000]][/COLOR],[COLOR=#000080]1[/COLOR],[COLOR=#ff0000]"easeinoutsine"[/COLOR][COLOR=#000000])[/COLOR];</p>
<p>zoomed = page;</p>
<p>[COLOR=#000000]}[/COLOR] [COLOR=#0000ff]else[/COLOR] [COLOR=#000000]{[/COLOR]</p>
<p>goToPage[COLOR=#000000]([/COLOR]page.[COLOR=#0000ff]_parent[/COLOR][COLOR=#000000])[/COLOR]</p>
<p>[COLOR=#000000]}[/COLOR]</p>
<p>[COLOR=#000000]}[/COLOR]</p>
<p>[/LEFT]
[/FONT]

And here’s the xml:

menu>
<item>
<label>about us</label>
<data></data>
<subitems>
<item>
<label>history 1</label>
<data></data>
<subitems>
</subitems>
</item>
<item>
<label>history 2</label>
<data></data>
<subitems>
</subitems>
</item>
<item>
<label>history 3</label>
<data></data>
<subitems>
</subitems>
</item>
<item>
<label>history 4</label>
<data></data>
<subitems>
</subitems>
</item>
</subitems>
</item>
<item>
<label>portfolio</label>
<data></data>
<subitems>
<item>
<label>portfolio 1</label>
<data></data>
<subitems>
</subitems>
</item>
<item>
<label>portfolio 2</label>
<data></data>
<subitems>
</subitems>
</item>
<item>
<label>portfolio 3</label>
<data></data>
<subitems>
<item>
<label>portfolio 3a</label>
<data></data>
<subitems>
</subitems>
</item>
<item>
<label>portfolio 3b</label>
<data></data>
<subitems>
</subitems>
</item>
<item>
<label>portfolio 3c</label>
<data></data>
<subitems>
</subitems>
</item>
</subitems>
</item>
</subitems>
</item>
<item>
<label>services</label>
<data></data>
<subitems>
<item>
<label>service1</label>
<data></data>
<subitems>
</subitems>
</item>
<item>
<label>service2</label>
<data></data>
<subitems>
</subitems>
</item>
<item>
<label>service3</label>
<data></data>
<subitems>
</subitems>
</item>
<item>
<label>service4</label>
<data></data>
<subitems>
</subitems>
</item>
</subitems>
</item>
<item>
<label>contact</label>
<data></data>
<subitems></subitems>
</item>
</menu>