Navigation menu using AS3

[bdavey311]

I have a Navigation/Menu MovieClip on my main timeline that then has the interactivity/buttons/as3 inside of that. When I click on the button I want it to go to the main timeline and gotoandPlay the respective label that I tell it to go to. Obviously a "root" and "parent" issue while inside this movieclip.

I've been told someting to the effect of using this
Code:

function onClickHandler(event:MouseEvent) {
MovieClip(this.root).gotoAndPlay("KnowledgePAGE");
}


but that doesn't work. What else could it be? Thanks in advance and new to AS3 so bare with me!

Brian

[chemicaluser]

mybutton.addEventListener (MouseEvent.ROLL_OVER, f_rollover);
function f_rollover (evt:MouseEvent) :void {
mybutton.gotoAndPlay ("over")
}

check out

http://www.actionscript.org/forums/showthread.php3?t=180901 (check out the example by snickelfritz or
http://www.actionscript.org/forums/showthread.php3?t=180896

[bdavey311]

I just don't think I'm explaining myself correctly or I am just making AS3 too hard. I've attached my FLA of the setup I'm looking for. Will this work or should I do something else to support AS3.

Thanks and Hopefully this works!

Brian

[chemicaluser]

So it works fine for me. One thing that I did is add a stop(); at the end of the intro... so that your knowledge page (which has the blue rectangle) is not displayed until the button is clicked, when clicked it plays the frame that you want.

[bdavey311]

Thanks a lot man. You've saved my sanity.

Brian

ps! I lied -I thought it should work when I implemented it into the rest of my FLA piece. See above for the issue!

[snickelfritz]

Attached is a basic frame navigation solution for you to examine.
Uses TweenMax (http://blog.greensock.com/tweenmaxas3/) for the button rollover effects etc... (I recommend that you install this class immediately, if not sooner)
I can explain how to construct page in/out transitions as well, if you want.

[bdavey311]

First off. Thanks for the quick reply and your version of the buttons because that rules. Second, I seem to still be having the problem from my previous response from Chemicaluser once I implemented it into my entire FLA. I dumbed down my last FLA upload because that's all I thought I needed to do. But now, I've included everything that actually was already using TweenMax for some animation before hand. So when I put the TweenMax class in there it doesn't work. Attached is my entire FLA. And! If you can, I would love to understand more about the construction of page in/out transitions. Thanks once again and let me know if you run into the same problems as I did.

Brian

[snickelfritz]

I'm not sure I fully understand your goals and construction methods for the site navigation.
Is the ring-thingy going to be moved off the stage when the content pages are loaded?
Please explain in simple layman's terms, what you want the site to do.

Regarding the content in/out transitions, here is the basic concept:

CLICK calls the play() method.
Existing content is unloaded or "outro'ed".
Playhead advances to next stop() method.
Function is called that sends the playhead to a specific frame label.
New content is "intro'ed".
Playhead stops on the next stop() method.
The loaded content is displayed.


btnGroup.addEventListener(MouseEvent.CLICK, btnClick, false, 0, true);

// this is the variable that captures the button instance name within the btnClick function.
var btnName:String = "";

function btnClick(event:MouseEvent):void
{
btnName = event.target.name;
unloadPage();
}

function unloadPage():void{
// this will begin playing the animation or tween ("outro") that is on the next frame of the timeline.
// place a stop() method at the end of the outro, and call the loadPage() function.
play();
}

function loadPage():void{
// this sends the playhead to the frame label that matches the value of btnName variable.
gotoAndPlay(btnName);
}

[bdavey311]

I'm shooting for something simple for now, just to get it to work.

Once Knowledge is clicked on, the Rings will move half-way to the right, the Knowledge text moves to the top, and then the Expertise link shrinks to fit in the middle of the rings so it's still clickable. The content will be displayed on top of the left-half of the Rings (masterfully of course ;). The Rings never go away and sit in the background.

Then once Expertise link is clicked, the Rings will move to the left with my portfolio being placed on top of the Right Half of the Rings. Then Knowledge will be move to the center of the Rings showing that it's still a link. That's it.

Just two options. Two movements. and some well placed content over rings that never go away. You can kind of tell what movement I'm looking for if you scrub under "KnowledgePAGE". It moves till the center is just inside the 1024x768 magenta border. The same goes for the Expertise side.

I appreciate this very much and look forward to seeing how it's set up to learn some AS3! You are too kind. Thanks again.

Brian

[snickelfritz]

Attached is a basic setup for your site on a single frame.
It will certainly need some tweaking and maybe some changes to the layout, but it seems to function correctly.
Includes liquid GUI.

[bdavey311]

That's perfect to work with. I've got some work to take care of but wanted to let you know I'll be play with this all night. Thanks again and way to pass on some AS3 knowledge. Props.

Brian