Global navigation: Showcase
February 25, 2009 by: ChristianI have put together a SWF showing the many possibilites and settings of the global navigation. Be sure to check the samples from top to bottom, as there’s always added some more options.
For example, there is not much code to setup the easiest case:
// import classes
import net.kaegi.navigation.NavigationManager2;
import net.kaegi.events.NavigationEvent;
// create Navigation: parse the xml file, create and layout buttons
var navigationManager:NavigationManager2 = new NavigationManager2(this, "global_navigation_demo1.xml");
// Listen for events
navigationManager.addEventListener(NavigationEvent.MC_ACTIVATED, btnActivateHandler);
function btnActivateHandler(event:NavigationEvent) {
trace("id: "+event.params.btnID);
trace("dispatch: "+event.params.dispatch);
}
The global navigation uses TweenLite to do the movement in a vertical navigation setup, when the new buttons need space (see example Number 9 in the SWF above). I recommend using TweenLite/TweenMax for your animations when fading in and out the button groups.
.
hello,
I cant seem to find the 4 action script files needed in the provided sample files. Where in the provided sample file structure are the following files: action navigationButton.as, navigationManager.as, navigationParser.as, and navigationEvent.as.
thanks
Hi butter
You can find the files here: http://www.flashcmsframework.com/docs/doku.php?id=global_navigation_download
The classes are in the first link: Download Global Navigation v1.57a Classes
I have updated the link in the post to go directly to the download section, thanks!
Hi,
First, thank you for all of your great work. I’ve a question I hope I can make clear, and if you’d rather it in a different section, please let me know. I’m using Global Nav 2 for a client’s real estate site. The main nav is setup and working well. My question is in regards to their “listings” page which will contain three columns of their different properties. Each column will have a vertical scrollbar attached.
Is it possible to make this sort of layout with Global Nav? Can the global nav be laid out into three columns with each column using a scrollbar?
Please let me know if this makes any since.
thank you,
rich
Hi Rich
I know exactly what you mean. I believe it is not possible at the moment. You could try to re-parent the buttons, I’m not sure. I have to take a look what this would require. I will definitly take this as a suggestion for the next release, I have just never come across this situation but it makes a lot of sense and provides a whole bunch of possibilities. I will check this and let you know, ok?
Rich, I just had an idea while making myself a coffee
You could use a scrollbar with an invisible mc as source that has the same height as your buttons of that level. Create a mask and listen to the scrolling events to move the single buttons of that level. What do you think?
Hey Christian,
I didn’t want to bug you again so soon, but I’ve been struggling with one specific point for the last few hours, so I was hoping you could point me in the right direction again.
I’ve gotten your Global Nav working fine with Gaia 3.16, except I can’t figure out how to get my streaming video to play when the video button is clicked. I used the same VideoPage.as and video.fla on a Gaia site without global nav and didn’t have any problems.
When I click on the video button now, I get error : Gaia Framework (AS3) v3.1.6
Error #2044: Unhandled NetStatusEvent:. level=error, code=NetStream.Play.StreamNotFound
I’m providing links to the mostly working site on the web along with a zip file of my actual project.
Thanks for all your help.
Sorry, I was trying to include the links with a href at the bottom of my last message, but I linked my thank you instead. Here are the addresses to cut and paste into a browser.
http://penczak.com/GaiaNavVid/bin
http://penczak.com/GaiaNavVid/a8GaiaABCVid.zip
Thanks, Mosk
Hi Mosk
I have downloaded your files and had a look, but I have to admit this would be getting too involved. I mean, this is no related to the global navigation and you should first try to fix the video problem itself, maybe outside of gaia, in a simple setup or so.
Christian
Hmm. I assumed it was tied in with the global navigation, because I had several videos working within the Gaia framework before adding in the global nav. In Gaia, I just had my streaming flvs as assets to my video page; wasn’t sure if it was a naming problem (both my page and asset had id of “video” which was okay in Gaia but wasn’t sure about Global Nav since every button needed unique id). Also wasn’t sure if I needed to link the video to a transition in event in Global Nav whereas that was already taken care of in my video.as in gaia.
If you have an example (with code) of a streaming flv getting loaded through a global nav button, I could probably work my way backward from there (or at least see if I’m structuring things correctly). If not, that’s ok. You’ve already been quite generous with your support, and I understand you can’t fully troubleshoot everyone’s problems.
Mosk
Hi Christian,
Thanks for the quick replies and sorry for the my late response, I had some airport/wifi woes for the last several days. Anyway, I’ll try your suggestion for the scrolling columns, seems like a feasible solution. I’ll let you know how it works out.
thanks,
rich
@mosk
It is really difficult to find out what is exactly the problem. But the loading of content has in fact nothing to do with the global navigation. I mean, not directly. There has to be something missing in your code. You have to chop away what is working piece by piece and what’s left should be your problem. I use to trace and debug a lot, I know how annoying it can be when you try to pin down errors… But as I said, it would be too time-consuming for me to sort this out for you, sorry. Good luck!
No problem. It’s kind of slow going for me, because Gaia has pushed me out of my comfort zone into more advanced uses of AS3. Definitely for the best in the long run, though, because AS3 seems to offer much more power when ‘wielded’ as external classes as opposed to coding every timeline independently, and learning about interfaces and XML opens up whole new avenues for streamlining the development of websites.
At any rate, after starting from scratch a few times, I’m now able to get multiple videos to load in conjunction with global navigation.
Thanks again for making your navigation available to the public, and good luck with your other releases.
Hi Christian,
First thanks for your great work.. I’m just at the point to decide either use gaia or flab framework for my companies website, and of course im in a very short deadline. i have been checking the properties of your framework and in one part i couldnt be sure going for it or not. I have top menu and each page has sub menus. each submenu expands and shows its own content below. Do you think I can create such structure using global navigation?
thanks.
kerem iseri.
Hi Kerem
I use the global navigation for any menu i can think of, so yes, of course you can do it. If you want you can send me your navigation structure so I can have a quick look to really assure you can do it. BTW, the first real Flebsite is already online: http://www.edigem.com. This was a Gaia Site before, but then the client wanted a language switcher, so I rebuilt it using Fleb Framework in less than 6 hours.
that was quick man, thanks a lot for you interest..
could you please send me an email, so that I can send back the design image rather than sharing it : )
kerem
Hi Christian,
I’ve been experimenting with the btnMakeRoomY feature of your Global Nav (version 2) in the context of Gaia v3.16 and I have everything working fine except for one thing. When my site first opens, the Home button is already expanded with its 3 children buttons overlapping the other site sections beneath it. Clicking on any section button works perfectly thereafter, and re-selecting the Home button makes room for its children.
I’ve uploaded the site so you can see what I’m talking about and a zip file in case you want to take a look at the code. Thanks for your help.
http://penczak.com/GaiaTurtlebiteNav/bin
http://penczak.com/GaiaTurtlebiteNav/a7GaiaABCWorking.zip
Never mind the above post. When I updated to Gaia 3.17 the problem went away and the makeRoom is behaving perfectly.
Hey Christian,
Turns out I’m still having problems with the btnMakeRoomY feature of your global navigation. When my site first opens, the button for my starting page is already showing its children and the buttons below it have not moved down to make room. The rest of the buttons make room properly, and if I click off my first page and then return to it, makeRoom works fine.
Note – I have set the set FadeInOnMouserOver to “false” as instructed in your documentation.
I’m providing links to the website, a zipped package (which is still pretty large) and the zipped xml in hopes you can take a look and tell me what I’m doing wrong. I’ve tried all sorts of permutations in the navig.xml and can’t get it working. (I’m using your Global Nav version 2 and Gaia 3.18 but have had the problems with 3.16 and 3.17 as well)
Thanks as always.
http://penczak.com/GaiaGlobal3/bin
http://penczak.com/GaiaGlobal3/bin/xml.zip
http://penczak.com/GaiaGlobal3/bin/ForTurtlebite.zip
Hi Mosk
I have downloaded your files. I only needed to add some code in navPage.as, you can download it here. The problem was, when the site first loads, the main buttons are animated. Because the sub navig of the first button is at the same time also animated, it tries to move the main buttons which should make room downwards. Now the buttons get kind of confused… 
. You have 3 ways to work around this: Remove the animation completely (in NavPage.as, change “navigationManager.setFade(true)” to “navigationManager.setFade(false)”), or just remove the animation of the first level of the buttons (I did this in the NavPage.as which you downloaded above), or you can create a delay for the sub navig when the site first loads: but this requires some coding.
Thanks for the bug report
Hope this helped!
Cheers, Christian
The new code works great. Thanks so much for taking the time to help me work this out.
Hi
The code you gave me fixed the makeRoom problem. Unfortunately, when I updated from your Global Nav v 2 to 2.03, I started getting a #1010 Term undefined and has no properties error on my five primary buttons. My sub buttons continue to work fine, but my primary buttons don’t update breadcrumbs or load the appropriate page.
Using trace statements, I pinpointed the error to the following line of code:
trace(navigationManager.getBranchForGaia(“b2″));
Looking through your changelog between 2.00 and 2.03, I saw that you added btns[t.btn.ID].data = t.data and btns[t.btnID].node = t.node As far as I know, this wouldn’t create my problem, and I haven’t experienced any difficulties when updating my other files.
So I’m guessing it has to do with the code you have me in the private function btnsFadeIn to work around my makeRoom problem:
if (btns[0].parentBtn == “_btnroot”) {
for (i = 0; i < btns.length; i++) {
btns[i].alpha = 1;
btns[i].visible = true;
btns[i].intro();
Is this snippet preventing my b2 from getting its name and therefor messing up my:
trace(navigationManager.getBranchForGaia("b2"));
Going back to Global Nav v2.00 fixes the problem, but I'd like to keep up to date with your excellent application, so I was hoping some other workaround / bugfix might come to mind.
Thanks. And in case you need the specific error I get when clicking one of my top level buttons, I zipped it up below.
http://penczak.com/v203Probs.zip
Hi Mosk
It looks like you are calling the method with the old btnID instead of the button id (which since v2.xx must equal Gaia page id). I’m not really sure, but shouldn’t it be something like navigationManager.getBranchForGaia(”authorTwo″) or so in your case? Let me know!
Christian
Hi, Christian..
Please take a look at the global navigation when the user clicks a child link, it goes to parent page and then child page, is there any way to avoid it.. your advice and help are most welcome, thanks again for your great work.. !!!
i have created my first gaia framework site with your global navigation.. i am not a as3 expert i did this with my little as3 knowledge, the matter i could not load the assets using your lite xml.. can you please show me the way to achieve this… here is my link in testing server.. its just in starting stage..
http://din_rocks.byethost15.com/#/home sorry forgot to paste
hi dinesh
In such cases I prefer to use a hidden button (btnHide=”true”) and remove the landing=”true” in the site.xml. So, instead of two sub buttons, you then have in fact 3, but the first one is invisible. There is a thread in the gaia forum somewhere about this.
Hi, Christian
thanks again for your co-operation, thanks a lot.. i will see how i can make better using your
guidence.. !!!!
Hi Christian
This looks fantastic, I have spent the last 48 hours just getting more and more confused by Gaia as i have no real coding background and was hoping this was a solution for designers that just want a working shell to place our artwork in. So i was hoping deconstructing your Global nav would help me a lot, however I have problems running the files from your download link.
I downloaded the gaia pack but when i test movie (using gaia extension 3.2.3) I get 6 error messages:
F:\——-\WEBSITE\turtlebite global navigation\src\pages\NavPage.as, Line 123 1046: Type was not found or was not a compile-time constant: NavigationEvent.
F:\——-\WEBSITE\turtlebite global navigation\src\pages\NavPage.as, Line 185 1046: Type was not found or was not a compile-time constant: NavigationEvent.
F:\——-\WEBSITE\turtlebite global navigation\src\pages\NavPage.as, Line 211 1046: Type was not found or was not a compile-time constant: NavigationEvent.
F:\——-\WEBSITE\turtlebite global navigation\src\pages\NavPage.as, Line 242 1046: Type was not found or was not a compile-time constant: NavigationEvent.
F:\——-\WEBSITE\turtlebite global navigation\src\pages\NavPage.as, Line 270 1046: Type was not found or was not a compile-time constant: NavigationButton2.
F:\——-\WEBSITE\turtlebite global navigation\src\pages\NavPage.as, Line 279 1046: Type was not found or was not a compile-time constant: NavigationEvent.
I thought maybe i had missed the classes download but when I downloaded I got 2 folders that were already in the Gaia download. I put these 2 folders in the project folder and this didnt work, I also tried replacing the com folder in the src folder and still get the same error.
After looking through your comments I saw that you updated the NavPage.as so i downloaded and replaced that and still get the same error.
Any help appreciated!
thx
Hi Warren
I can’t reproduce the errors. Try this:
- Go to the download page http://www.turtlebite.com/docs/global_navigation_download
- Download the Classes: “Download Global Navigation v2.14 Classes”
- Download the Gaia Files: “Download Global Navigation v2 for Gaia”
After unzipping the two files, move the folder “net” from “global_navigation2″ the the folder “src” in “global_navigation2_with_gaia_v3_2_3″.
Then compile “nav.swf”. (You will get errors there, because there are dependencies to main.swf)
After that compile “main.swf”. You should get no error.
That’s exactly what I did now to test your case, it’s been working fine, without errors.
Let me know if this helped!
Hi Christian.
Thanks for getting back to me so quickly, the whole issue was down to the fact I didn’t put the “net” folder in the “src” folder” – doh
So this is working now, and I am going to dive right in today and see if I can use it but my actionscript is not the best!
Thx.
Hi,
I’m using the latest version on Gaia and I’m having a little problem. I’m using something like exemple 9 but parent buttons are animated in their Y property. It works very well, but when I load the site from a submenu deeplink directly, the parent buttons after the submenu stay under the open submenu. This wont happen if I animate the buttons fadeIn in their X property or if I set delaySteps to 0.
Is there something I can do to solve this?
Thanks.
Hi Fana
Can you mail me a link to your project so I can have a look?
Hi Christian!
I have a question regarding global navigation.
Say that I have a top horizontal menu. Each button has a number of subbuttons.
What want to achieve is this. I want a second menu to appear (say that it is vertical positioned on the left) when I click any subbutton. This new second menu will only consists of the the current (active) submenu buttons.
So, when I click a subbuton, this subbuton is activated in both the top menu and the second menu. This happens, if I click either the top subbuton of the left menu subbuton. And of course these subbuttons point to the same page.
It’s a pretty common navigation method, I’m sure you’ve come accross it.
Do you have any suggestions/guidelines as to how I should move using your global navigation (and of course fleb)?
I hope I made myself clear.
Thanx for your time!
Cheers
Hi
I think I know what you mean, although I did not have a situation like this yet. But I would try this: create a completely decoupled group of buttons. Then, when you click on a button in this secondary group, use “activateBtn” (http://www.turtlebite.com/docs/global-navigation2-public-methods#activatebtn) to activate the subbutton in the global navigation. That, in turn, will send an event (http://www.turtlebite.com/docs/global-navigation2-events#mc_activated) which you listen to and then activate the button you just clicked. That way it doesn’t matter which button you click. Know what I mean?
Thanx for your quick feedback Christian! It’s pretty valuable!!! Still struggling though…
When you say “create a completely decoupled group of buttons”, you mean by creating another NavigationManager (a different one then the varCentral.flebNavigationManager)?
And these buttons should be in another xml or in the structure.xml (in the navigation node below the other buttons)?
One more thing!
I want to make a footer menu too, with 3 more buttons.
To make this happen, I have to insert them in the structure.xml, under the other buttons?
And then reparent these footer buttons to the desired footer holder?
What is the best way according to fleb’s logic?
Thanx again.
Completely decoupled means completely decoupled!
Make your buttons any way you like, a movieclip containing a few buttons. If you use xml as a source is up to you. The trick is, not to ativate the buttons when you click them, but instead activate the button in the global navigation, this fires an event, wait for this and then activate the button you just clicked. That way you even don’t have to click the button, you are free to use whatever trigger to activate buttons, e.g. a text link would also work.
You could do that, right. It depends on if the footer navigation should be visible all the time. There is another cool trick I like to use: Just use the logic of the global navigation and use it “from the outside”. First, create the buttons in the global navigation, but set them to be hidden (btnHide: http://www.turtlebite.com/docs/global-navigation2-xml#btnhide). Then, create your 3 buttons in the footer, again, they are decoupled and have no connection to the global navigation. Then use the “roundtrip” solution described in the previous comment: click the button in the footer, activate the hidden button of the global navigation, listen to the event, then activate the button in the footer.
As always, you set the things straight!!!!
I was also thinking about using btnhide, so now that you confirm it, I’ll definitely try it.
Thanx a lot! Now it’s all clearer in my messy head.
Cheers!
Global navigation rules…
Hi Christian!
I found a bug (maybe??).
Say that I want in the flebsite demo to insert a new subbutton inside the speedmaster plus subbtn.
I insert it in the xml, but when I test the HTML alternative version I have this problem (the flash version works fine).
If I click the speedmaster plus btn (which now has one child), all the other menu btns disappear, and in the menu stays only the new child btn and the lang btn.
Is it a bug in structure.php? Try it if you want to see what I mean.
Thanx in advance
PS. the new subbtn has the address ‘/en/products/speedmaster-plus/test/’.
Hi
Sorry for the late reply! I’ve tested it an it works as it should?