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