History menu

In the stills section of this site:
it is a cool navigation menu.
Anyone know a tutorial, source or something. I want to make something like this.



I tried to incorporate this into the whole project but I have to go back to you for help. So, my project has About, Gallery, Contact, Section - let’s call this mainmovie. I tried to use this hystory menu in the gallery section. The gallery will have 4 different categories.

The general idea is that I want my project recycles your beautiful script, rather than create 4 differents galleries and then load them into mainmovie. Each button will load different xml correspondence to the button. So, for example, if the About button is released, it will load the About page ( connected via about.xml, and so on).

I’ll appreciate if you can enlighten me for this following questions:

  1. Instead of loading this hystory menu automatically, how to call this hystory menu from button? - Because the first page that I want to show is the About page - which is only text file, you know a kind of introduction to the project.

  2. To load the external file, is it possible that the main button (About, Gallery, and Contact) using similar function with different xml from the as layer. Can you point me which function to load external file?

  3. Although I am pretty sure that I can load any kind of file, just to make sure can I load any kind of file ( text, html, jpg) into the “menu” or “ContentComponent” movieclips?

  4. How can I make the first image automatically loaded in the gallery section without to have to press the thumbnail.

Thanks…and many thanks before

Continuing Beebs’ questions, how would I put links in the actionDisplay field?

beebs, we might need to go slower than than mate :slight_smile:

  1. you need to expalin, I dont follow
  2. you need to explain this too
  3. you can load in swf’s or jpg’s only
  4. easy. I’ll do that last

I think it’s best to solve these one at a time.

nice job hga.

and thp video was kewl… :slight_smile:

Sorry about it hga if it sounds rushing… ( hmm only fools rush in),

Ok, to explain number 1, and 2, I think I better attach my file. Please find attached.

  1. If button “About”,“Links”, and “Contact” is released I want them to load text file from content Folder directory. It is a little bit dissapointing to know that I can’t upload html file, because within one of Description file I want to put e-mail link…

  2. If button “Desert”, “Bushfire”, “Birds&Bush”, and “Last Millenium” is released, I want them to load thumbnail of each categories - like the version 2 that you made.

I am ready if you can guide me.

Ok Beebs, there was some misunderstanding! You can load html here, I though you meant embding/loading an html page, but yeah, you can use html code within the text files to add links.

You cannot load text directly:
The way I normally do this, (like an about page that only contains text) is to have an swf that contains the text. So then you would load that about.swf. So, I have added a links.swf, contacts.swf and about.swf. Each loading its relevent text. Remember that if you run those swf’s seperatly (ie. not within the main/index movie clip) then they will NOT load the text. This is because of the way I have set up the paths for you, since you only need to load them through the main movie. Just wanted you to know.

Now about the galleries, you have mentioned about having a single gallery that could be adopted for all four galleries. This ofcourse is possible. But not required here at all. You are only dealing with four galleries. If it was that you had about 30 seperate galleries, then it would make sence to have a single swf gallery that would load the required xml, because otherwise you would need to create 30 swf’s! But as i mentioned, you only need to create four. And thats not that hard :wink:

Finally, I added a ‘contentHolder’ mc to your main/index movie, along with the code to load the seperate sections. Check it :wink:

btw Beebs, I like the way you created your menu using the stack script. Great work :slight_smile:

thanks bodyvisual :wink:

Thanks hga, Al clear now. I still need your help:

  1. How to make the first page automatically opened/load? (- The About Button goes up and the content is loaded in contentHolder? )I tried to change the code in the line 27: buildMenu(); to buildMenu(0); - but it doesn’t give any effect? - This answer will be important for my other gallery which I am going to load in the Gallery Section?

  2. My idea, is that on the released button the lbl_txt in the button is change the colour. I add the code in the line 137:this._parent._parent.txt_lbl.textColor=0x990000; - but this is does not give any effect at all.

When are you coming to Sydney? I obviously will be your guide…
Thanks and many thanks

Beebs i’m in a rush now, i’ll get back to you later

Thanks for the invite :slight_smile:

Take your time…

beebs, I’ve updated your fla.

cool AS hga77
u know find out that u can conbined it with other effect and it works fine

thanks sipher :wink:

what effect did you use it with?

i used the fade function and the Brightness function and both works fine… i could use others too…

Thanks hga,

I want to make this project even more elegant yet versatile. The next steps that I need you to help me are :

Is it possible to declare new attributes within this following code snippets ( from line 16 - 26) :

		var vt = this.varTarget;
        var root = this.firstChild;
        vt.menuObj = new Object();
		allItems = root.childNodes;
        var i;
        for(var i=0; i<allItems.length; i++)
            vt.menuObj["item" + i] = new Object();
            vt.menuObj["item" + i].itemName = allItems*.attributes.name;
            vt.menuObj["item" + i].itemPath = allItems*.attributes.action;

Of course, I have to change the gallery_setup.xml to be assigned to the new attributes there, but is this possible?

My idea is actually, I’ d like to declare as much functions as I want wether it’s built-in or home-made functions. Let’s say,


-do That

so that in the gallery_setup.xml I just need to declare different action to the different action nodes like action=“action_1” or action=“action_2”

that is very excellent, I think this thread is going to be soon in “Best of Kirupa”

I dont follow beebs, but sounds really interesting to work on…

Try to explain again and throw in some functionality examples. If I think your idea is good, I’ll take it on :wink:

bombingpixel, We’ll see how this one goes. I think it would be really interesting if I make various examples of how this nav system could be used, that would be nice :wink:

Allright thanks,

The idea is coming from Senocular xml tutorial at this link

I write down the menu.xml here :

<?xml version="1.0"?>
<menu name="example">
	<item name="EXAMPLE" action="message" variables="this shows an example menu with no real functionality" picture="image.03.jpg" />
	<menu name="submenu">
		<menu name="submenu">
			<item name="item"/>
			<item name="item"/>
			<item name="item"/>
		<menu name="submenu">
			<item name="item"/>
			<item name="item"/>
			<item name="item"/>
		<item name="item"/>
	<menu name="submenu">
		<item name="item"/>
		<item name="item"/>
		<item name="item"/>
	<item name="item"/>
	<item name="item"/>
	<menu name="load menu">
		<item name="example" action="newMenu" variables="xmlstuff/menu1.xml"/>
		<item name="messages" action="newMenu" variables="xmlstuff/menu2.xml"/>
		<item name="links" action="newMenu" variables="xmlstuff/menu3.xml"/>

Please have a look at :

<item name=“EXAMPLE” action=“message”

the item “name =EXAMPLE” has an action=“message”. The “message” function is declared within this following scripts:

GenerateMenu = function(container, name, x, y, depth, node_xml) {
	var curr_node;
	var curr_item;
	var curr_menu = container.createEmptyMovieClip(name, depth);
	for (var i=0; i<node_xml.childNodes.length; i++) {
		curr_item = curr_menu.attachMovie("menuitem","item"+i+"_mc", i);
		curr_item._x = x;
		curr_item._y = y + i*curr_item._height;
		curr_item.trackAsMenu = true;
		curr_node = node_xml.childNodes*;
		curr_item.action = curr_node.attributes.action;
		curr_item.variables = curr_node.attributes.variables;
		curr_item.name.text = curr_node.attributes.name;
		if (node_xml.childNodes*.nodeName == "menu"){
			curr_item.node_xml = curr_node;
			curr_item.onRollOver = curr_item.onDragOver = function(){
				var x = this._x + this._width - 5;
				var y = this._y + 5;
				GenerateMenu(curr_menu, "submenu_mc", x, y, 1000, this.node_xml);
				var col = new Color(this.background);
			curr_item.arrow._visible = false;
			curr_item.onRollOver = curr_item.onDragOver = function(){
				var col = new Color(this.background);
		curr_item.onRollOut = curr_item.onDragOut = function(){
			var col = new Color(this.background);
		curr_item.onRelease = function(){

Createmainmenu = function(x, y, depth, menu_xml){
	GenerateMenu(this, "mainmenu_mc", x, y, depth, menu_xml.firstChild);
	mainmenu_mc.onMouseUp = function(){
		if (mainmenu_mc.submenu_mc && !mainmenu_mc.hitTest(_root._xmouse, _root._ymouse, true)){
CloseSubmenus = function(){

Actions = Object();
Actions.gotoURL = function(urlVar){
	getURL(urlVar, "_blank");

//**This is the message action**

Actions.message = function(msg){
	message_txt.text = msg;
Actions.newMenu = function(menuxml){

menu_xml = new XML();
menu_xml.ignoreWhite = true;
menu_xml.onLoad = function(ok){
	if (ok){
		Createmainmenu(10, 10, 0, this);
		message_txt.text = "message area";
		message_txt.text = "error:  XML not successfully loaded";

Senocular’s scripts have : gotoURL, message, and newMenu function. Any function that we want to call we just change the xml.

You have created two differents “hystory menu”, one is without thumbnail, the other one is having thumbnail in it. I have studied carefully both of your beautiful code, and I found that actually there are only slightly additional line of code there.

So I come to the idea, if there is no such big different I think it’s better we combine both of those code and calling them through “action” in the xml ala Senocular script above.

If this can be done, it will postulate “the recycling your script” I mentioned earlier in the post #…before.

Why, it’s recycling?

  1. I can call any function that I like to serve different purpose. This will create big efficiency.

To give an example of this point, please have a look the way Senocular load different menu in the “load menu” section. The menu will change because “load menu” is loading different xml.

Applied to your scripts, then, I can call different xml to different purpose ( to buildMenu() or to createThumbnail() ).

In practice, if I want either to build the menu or create thumbnai, I do not need to create new (flash) file. What I need is just to point out to the different xml and it will generate the thumbnail inherit all the functionality.

  1. Again, Senocular idea, provide huge freedom to create any external file(xml,text,jpg) to be loaded in the flash movie, without having to create new flash movie.

While you read this post, I think I will create some dummy project to support my idea above.

Thanks a lot