JONATHAN TORRES

A simple navigation example with Robotlegs

By Jonathan on November 25, 2011

Hey all! I know things have been a bit slow in here, (jezz haven’t posted anything in about 2 months!) but I’ve been very busy doing work and playing with some new stuff. Will post details on all those things pretty soon ;)

In the meantime I’ve been (for some time now) trying to create a standard navigation system for my Flash related projects using Robotlegs, something to re-use on every project I get my hands on, just to try to standardize things. I’ve been looking for an easy way to create navigation functionality, to navigate from section “x” to section “y” with ease. Even though the “navigation” itself is NOT something dynamic, I’m not trying to create a Flash-CMS here, just some easy code to re-use to get to the same goal.

So, for most of my project I tend to use the amazing Robotlegs framework, to make my life easier. So, I created a simple Model that holds the current “Section” (this is a Sprite) displayed. In case you wonder, this could be anything, a Sprite or MovieClip whatever you use to display or organize your sections. Bottom line here are the steps in detail:

1. By default (or when the application starts) the Model holds the “Home” section.
2. When the user clicks a button (this is in a navigation bar) the Model updates to a reference of this clicked Sprite, the Model also holds the previous viewed Sprite (in case you wish to animate it out of the way)
3. We’re back to square one, just click another button to update the Model again.
4. If you click the same button again, nothing happens.

I could explain it better with code: Here is the Model, currentSection holds the Sprite that is being viewed and changeTo holds the Sprite or “Section” that the user wants to go to:

Here’s the Mediator of the Navigation Bar, sectionChangeSignal is a Signal that get’s dispatched with a click of one of the navigation buttons:

And here’s the Command that updates the Model according to the section that was clicked:

I might implement SWFAddress to this navigation, but didn’t added it because I wanted to use this example whether the target project needs SWFAddress or not.

The whole code is on GitHub you can grab it here. To see a live demo please click here.

Posted in Flash | 2 Responses »