Pop up Flash menu

[Sircharles]

Hi just looking for a simple menu tab that pops up with a few buttons inside As3.

Can't seem to get the code anywhere.

Thanks
graham

[samac1068]

Basically you are using the Tween or Y position of three movieclips. On roll over, make sure the remaining two clips are down and the third will animate upwards. You can do this via the timeline or through code.

Give it a try and we can help you through the bumps.

[Sircharles]

Thank you for the reply.

I will upload my effort tomorrow.

[Sircharles]

Hi so far I've been able to create a button which when rolled over - plays a movie which houses my other buttons. Roll OVER - brings tab up. Roll OUT tab down.

However I do not seem to be able to target the buttons inside this tab movie.

Also How do I keep the tab menu up whilst user is scrolling through the menu?

Thanks for efforts.

B1.addEventListener(MouseEvent.ROLL_OVER, menuUp);
B1.addEventListener(MouseEvent.ROLL_OUT, menuDown);

function menuUp(event:MouseEvent):void { 
menu_mc.gotoAndPlay("Up");
}

function menuDown(event:MouseEvent):void { 
menu_mc.gotoAndPlay("Down");
}

P1.addEventListener(MouseEvent.CLICK, Print1);
function Print1 (evtObj:MouseEvent)
{
	SoundMixer.stopAll();
	container.source = "PRINT_1.swf";
	}
P2.addEventListener(MouseEvent.CLICK, Print2);
function Print2 (evtObj:MouseEvent)
{
	SoundMixer.stopAll();
	container.source = "PRINT_2.swf";
	}

[samac1068]

I can't view your fla here, I'm only using CS3 at work, so you may have to explain a little. The tab that animates up and down, does it contain the other buttons? If not, then that is the reason. Moving your cursor onto any other stage object will constitute a rollout for the tab. You have to have the sub menu button in the same movieclip as the tab, this way tapping another sub button will not fire the rollout event.

[Sircharles]

Hi - Thanks again.

Ya B1 is the main hit area button.
menu_mc is the tab
and P1, P2, P3 etc are the buttons inside the tab.
These are place simply on a layer inside menu_mc.

However my main timeline has code as above and is not recognising P1, P2 etc
Before you could target them, but alas.

Again when I roll out from B1 the tab goes away, so how to rectify this as well?

[Sircharles]

this is bull****. As3 is just a complete mess. Nothing works.

[samac1068]

LOL. I understand your frustrations with AS 3.0. I experienced them also when I moved from 2.0 to 3.0, but the change will improve your skills along with providing you a increased number of capabilities that were not previously available. I'll through a quick menu together so you can see what I'm talking about.

Separating the movieclips is where you are running into problems.

[Sircharles]

hey if you can. id really appreciate it.

I don't understand why my buttons nested in this movie clip can't seem to target the main timeline either. Im trying to change source of a UrlLoader.

[samac1068]

No problem. Okay here is what I put together. Sorry it took so long, I waited until I got home and did it on my computer which is running CS5. Here is the code I used (there are items in my library).

//Imports
import flash.events.Event;
import flash.events.MouseEvent;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

//Global Variables
var btnArr:Array = new Array(tab1, tab2, tab3);

//Using a loop to perform the same action multiple times
for(var i:int = 0; i < btnArr.length; i++)
{
    MovieClip(btnArr[i]).addEventListener(MouseEvent.ROLL_OVER, tabOverHandler);
    MovieClip(btnArr[i]).addEventListener(MouseEvent.ROLL_OUT, tabOutHandler);
    
    //Ensure that the movieclip acts like a button
    MovieClip(btnArr[i]).buttonMode = true;
    
    var mc1:MovieClip = MovieClip(btnArr[i]);
    
    //Make sure to assigned any control the sub menu items
    for(var j:int=0; j < 3; j++)
    {
        var mc2:MovieClip = mc1["sub" + (j+1)] as MovieClip;
        
        //Provide the correct label
        mc2.btnLabel.text = "Sub button " + (j+1);
        
        //Provide function
        mc2.invisBtn.addEventListener(MouseEvent.ROLL_OVER, subOverHandler);
        mc2.invisBtn.addEventListener(MouseEvent.ROLL_OUT, subOutHandler);
        mc2.invisBtn.addEventListener(MouseEvent.CLICK, subClickHandler);
        mc2.invisBtn.buttonMode = true
    }
}

//Functions for the handler
function tabOverHandler(me:MouseEvent):void
{
    var tabTween:Tween = new Tween(me.currentTarget, "y", None.easeNone, me.currentTarget.y, 46, .5, true);
}

function tabOutHandler(me:MouseEvent):void
{
    var tabTween:Tween = new Tween(me.currentTarget, "y", None.easeNone, me.currentTarget.y, 176, .5, true);
}

function subOverHandler(me:MouseEvent):void
{
    MovieClip(me.currentTarget.parent).gotoAndStop(2);
}

function subOutHandler(me:MouseEvent):void
{
    MovieClip(me.currentTarget.parent).gotoAndStop(1);
}

function subClickHandler(me:MouseEvent):void
{
    MovieClip(me.currentTarget.parent).gotoAndStop(3);
    //Place click event code here.
}

That represents a bulk of the code. I have a stop command on the submenu buttons since I wanted rollover changes. I've attached the full FLA file also. Hope this helps, let me know if you have any questions.

[Sircharles]

oh man, that looks exactly what Im after. Any chance you could save it back to cs4?

And its for my website www.sircharlesgraham.tv.

This will be its new home!

Your A ROCKSTAR.

[samac1068]

No problem. Here it is.

[Sircharles]

A real Gent.

Im altering it now, so I can slot it in.

Is there a way to be able to name each Sub Button individually. At the moment they are
mc2.btnLabel.text = "Sub button " + (j+1);

Id like to be able to have any text in there. Then the rollover would change the text colour?

Graham

[samac1068]

Yes. The way I built it allows you to name it anyway you like. You can either do it from an array or you can do it manually. Completely up to you.

[Sircharles]

http://sircharlesgraham.tv/Tab_edit.html

my efforts so far.

Im wondering how to execute something different for each Click of the sub buttons?

[samac1068]

Lookin good. To have a different action for each button, you have a couple of options, but depends on what you want it to do. Lets say you want the links to all go to a different web link. Well, the easiest method would be to add a switch statement within the subclick handler and based on the some button identification (I don't think I added that in), have the link selected from there. So one click, determine which button was clicks, then execute the link.

The same holds true if you want a different function to happen. On second thought, even if you have a mixture of functions and link to be called, using a switch statement within the subclick handler will reduce the headache.

To add an identifier for each button, I would try this: (Untested)

for(var j:int=0; j < 3; j++)
    {
        var mc2:MovieClip = mc1["sub" + (j+1)] as MovieClip;
        
        //Identify this button
        mc2.name = "Tab" + (i+1) + "Sub" + (j+1);

        //Provide the correct label
        mc2.btnLabel.text = "Sub button " + (j+1);
        
        //Provide function
        mc2.invisBtn.addEventListener(MouseEvent.ROLL_OVER, subOverHandler);
        mc2.invisBtn.addEventListener(MouseEvent.ROLL_OUT, subOutHandler);
        mc2.invisBtn.addEventListener(MouseEvent.CLICK, subClickHandler);
        mc2.invisBtn.buttonMode = true
    }

And then adding a switch statement looking for the naming format above will help specify who was pressed. For example:

function subClickHandler(me:MouseEvent):void
{
    var subBtn:MovieClip = MovieClip(me.currentTarget.parent);
    subBtn.gotoAndStop(3);
    
    switch (subBtn.name)
    {
        case "Tab1Sub1":
            getURL("http://www.google.com", "_blank");
            break;
        case "Tab1Sub2":
            getURL("http://www.yahoo.com", "_blank");
            break;
        case "Tab1Sub3":
            getURL("http://www.verizon.com", "_blank");
            break;
        case "Tab2Sub1":
            //Some Code here
            break;
        case "Tab2Sub2":
           //Some Code Here
           break;
    } 
}

I didn't test either block of code, so you'll need to verify and tweak until you get what you want.

[Sircharles]

hmm, comes up with a timeline error. Im tryng to change the source of a UrlLoader(container) on timeline. here is my code with your tailorings..
Fla file attached.

//Imports
import flash.events.Event;
import flash.events.MouseEvent;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

//Global Variables
var btnArr:Array = new Array(tab1, tab2, tab3);

//Using a loop to perform the same action multiple times
for(var i:int = 0; i < btnArr.length; i++)
{
	MovieClip(btnArr[i]).addEventListener(MouseEvent.ROLL_OVER, tabOverHandler);
	MovieClip(btnArr[i]).addEventListener(MouseEvent.ROLL_OUT, tabOutHandler);
	
	//Ensure that the movieclip acts like a button
	MovieClip(btnArr[i]).buttonMode = true;
	
	var mc1:MovieClip = MovieClip(btnArr[i]);
	
	//Make sure to assigned any control the sub menu items
	for(var j:int=0; j < 3; j++)
	{
		var mc2:MovieClip = mc1["sub" + (j+1)] as MovieClip;
		
		  //Identify this button
        mc2.name = "Tab" + (i+1) + "Sub" + (j+1);

        //Provide the correct label
        mc2.btnLabel.text = "Sub button " + (j+1);
		
		//Provide function
		mc2.invisBtn.addEventListener(MouseEvent.ROLL_OVER, subOverHandler);
		mc2.invisBtn.addEventListener(MouseEvent.ROLL_OUT, subOutHandler);
		mc2.invisBtn.addEventListener(MouseEvent.CLICK, subClickHandler);
		mc2.invisBtn.buttonMode = true
	}
}

//Functions for the handler
function tabOverHandler(me:MouseEvent):void
{
var tabTween:Tween = new Tween(me.currentTarget, "y", None.easeNone, me.currentTarget.y, 312.5, .5, true);
}
function tabOutHandler(me:MouseEvent):void
{var tabTween:Tween = new Tween(me.currentTarget, "y", None.easeNone, me.currentTarget.y, 386.55, .5, true);
}

function subOverHandler(me:MouseEvent):void
{
	MovieClip(me.currentTarget.parent).gotoAndStop(2);
}

function subOutHandler(me:MouseEvent):void
{
	MovieClip(me.currentTarget.parent).gotoAndStop(1);
}


function subClickHandler(me:MouseEvent):void
{
    var subBtn:MovieClip = MovieClip(me.currentTarget.parent);
    subBtn.gotoAndStop(3);
    
    switch (subBtn.name)
    {
        case "Tab1Sub1":
            container.source = "PRINT_1.swf";
            break;
        case "Tab1Sub2":
             container.source = "PRINT_2.swf";
            break;
        case "Tab1Sub3":
             container.source = "PRINT_3.swf";
            break;
        case "Tab2Sub1":
            //Some Code here
            break;
        case "Tab2Sub2":
           //Some Code Here
           break;
    } 
}

[samac1068]

Can you be more specific with the error? What error are you getting, and when does the error occur?

[Sircharles]

Fla should be attached there. but ya its this..

Error: Error #2078: The name property of a Timeline-placed object cannot be modified.
	at flash.display::DisplayObject/set name()
	at Tab_edit_CS3_fla::MainTimeline/frame1()

[samac1068]

Opened your attached, and the first thing I noticed was the introduction of a container variable without it being instantiated previously. What is container and where does it get added to the stage?

Also, I'm looking into the issue with the name property. Not sure why it would give an error.