asked on

AS3 Movie Clip buttons

Helllo-

For my site i have multiple Movie Clip buttons that navigate through the website by way of Actionscript 3. I need a clicked movie clip Button to stay in the over state to relay to the viewer what page that they are on. Then when another movie clip button from the menu is clicked I need the new movie clip button to be in the over state and the previous pressed button to go back to its up state. How do you do this? Please provide me with a commented out Fla that shows how to do this action. If possible please make more than five buttons so that I can see how to do this with multiple buttons.

Thanks in advance!

blue-genie

create a movieclip with the different states. if you're placing your movieclips on the stage manually you don't need to do the dynamic placement.
but this will handle you over/out states.

import flash.events.MouseEvent;
 
/*  menu settings
1. menuOrientation:String - vertical or horizontal
2. numButtons:Number - as many as you want but make sure it will fit on the stage.
3. startX:Number - specify start X position on stage 
4. startY:Number - specify start Y position on stage
5. gap:Number = specify spacing between individual button objects.
*/
 
var menuOrientation:String = "vertical";
var numButtons:Number = 4;
var startX:Number = 10;
var startY:Number = 10;
var gap:Number = 10;
var buttonLabelsArr:Array = new Array("btn1", "btn2", "btn3", "btn4");
 
// DON'T CHANGE ANYTHING BEYOND THIS
 
var buttonArray:Array = new Array();
 
function createMenuItems() {
	//use a for loop to add the buttons to the stage.
	for (var i:Number = 0; i<numButtons; i++) {
		var btn:menuButton = new menuButton();
		
		buttonArray.push(btn);
		addChild(btn);
		
		with(btn) {
			//place the buttons.
			btn.name = "btn"+i;
			
			btn.selected = false;
			if (menuOrientation == "vertical") {
				btn.y = startY + (i*btn.height) + (i*gap);
			} else {
				btn.x = startX + (i*btn.width)+ (i*gap);
			}
			
			btn.label_txt.text = buttonLabelsArr[i];
			//add the listeners
			btn.addEventListener(MouseEvent.MOUSE_OVER, doOver);
			btn.addEventListener(MouseEvent.MOUSE_DOWN, doDown);
			btn.addEventListener(MouseEvent.MOUSE_OUT, doOut);
			
		}
		
	}
	
}
 
//FUNCTIONS TO HANDLE STATES OF MOVIECLIP
//reset buttons when you click another item - selected item must be false.
function resetButtons() {
	
	for (var i:Number =0 ;i<buttonArray.length; i++) {
		buttonArray[i].selected = false;
		buttonArray[i].gotoAndStop(1);
	}
	
}
function doOver(evt:Event) 
{
 
		evt.currentTarget.gotoAndStop(2);
	
}
 
function doDown(evt:Event) {
	resetButtons();
	evt.currentTarget.selected = true;
	evt.currentTarget.gotoAndStop(3);
}
function doOut(evt:Event) {
	if (!evt.currentTarget.selected) {
		evt.currentTarget.gotoAndStop(1);
	} else {
		evt.currentTarget.gotoAndStop(3);
	}
}
 
createMenuItems();

Open in new window

scooby_56

Here's a nice tidy one that uses only the buttons alpha property as an example to distinguish the clicked one

//create a button in the Library
//drag as many instances onto the stage or add with actionscript. 
//give instance name like... btn1, btn2, btn3 etc...
 
//keep all button in array so we can access them easily in a loop
var myButtons:Array = [btn1, btn2, btn3, btn4];
 
//call function to set alpha "normal" state
initAlpha();
 
for (var i=0;i<myButtons.length;i++){
	myButtons[i].addEventListener(MouseEvent.MOUSE_UP, buttonClicked)
}
 
//on clicking the button reset all alphas to "normal" then set the clicked one to 100%
function buttonClicked(e:MouseEvent):void{
	initAlpha()
	e.currentTarget.alpha = 1;
}
 
//sets alpha to 80%
function initAlpha():void{
	for (var i=0;i<myButtons.length;i++) myButtons[i].alpha = .5
}

Open in new window

scooby_56

Alpha buttons example fla
Untitled-1.fla.txt

radiii

ASKER

My movie clip buttons have rollover state that are all in AS3. Do i need to make arrays? I am including the code that I have for the file buttons. Here is a link to my server where the site is on:

www.radiii.com/StThomas_index.html

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
 
var exitTween:Tween;
var currentPage:MovieClip = new home();
var prevPage:MovieClip;
currentPage.x = 175;
currentPage.y = 122.0;
addChild(currentPage);
 
home_mcButton.addEventListener(MouseEvent.CLICK, homePage);
calendar_mcButton.addEventListener(MouseEvent.CLICK, calendarPage);
christianFormation_mcButton.addEventListener(MouseEvent.CLICK, christianFormationPage);
community_mcButton.addEventListener(MouseEvent.CLICK, communityPage);
contactUs_mcButton.addEventListener(MouseEvent.CLICK, contactUsPage);
fellowship_mcButton.addEventListener(MouseEvent.CLICK, fellowshipPage);
ministries_mcButton.addEventListener(MouseEvent.CLICK, ministriesPage);
music_mcButton.addEventListener(MouseEvent.CLICK, musicPage);
contactUs_mcButton.addEventListener(MouseEvent.CLICK, contactUsPage);
outreach_mcButton.addEventListener(MouseEvent.CLICK, outreachPage);
photoTour_mcButton.addEventListener(MouseEvent.CLICK, photoTourPage);
staff_mcButton.addEventListener(MouseEvent.CLICK, staffPage);
nursery_mcButton.addEventListener(MouseEvent.CLICK, nurseryPage);
worship_mcButton.addEventListener(MouseEvent.CLICK, worshipPage);
youth_mcButton.addEventListener(MouseEvent.CLICK, youthPage);
 
function homePage(e:MouseEvent):void
{
	exitTween = new Tween(currentPage,"x",Regular.easeOut,currentPage.x,809,12,false);
	prevPage = currentPage;
	currentPage = new home();
	currentPage.x = 809
	currentPage.y = 122
	addChild(currentPage);
	exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);
}
 
function calendarPage(e:MouseEvent):void
{
	exitTween = new Tween(currentPage,"x",Regular.easeOut,currentPage.x,809,12,false);
	prevPage = currentPage;
	currentPage = new calendar();
	currentPage.x = 809
	currentPage.y = 122
	addChild(currentPage);
	exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);
}
 
function christianFormationPage(e:MouseEvent):void
{
	exitTween = new Tween(currentPage,"x",Regular.easeOut,currentPage.x,809,12,false);
	prevPage = currentPage;
	currentPage = new christianFormation();
	currentPage.x = 809
	currentPage.y = 122
	addChild(currentPage);
	exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);
}
 
function communityPage(e:MouseEvent):void
{
	exitTween = new Tween(currentPage,"x",Regular.easeOut,currentPage.x,809,12,false);
	prevPage = currentPage;
	currentPage = new community();
	currentPage.x = 809
	currentPage.y = 122
	addChild(currentPage);
	exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);
}
 
function contactUsPage(e:MouseEvent):void
{
	exitTween = new Tween(currentPage,"x",Regular.easeOut,currentPage.x,809,12,false);
	prevPage = currentPage;
	currentPage = new contactUs();
	currentPage.x = 809
	currentPage.y = 122
	addChild(currentPage);
	exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);
}
 
function fellowshipPage(e:MouseEvent):void
{
	exitTween = new Tween(currentPage,"x",Regular.easeOut,currentPage.x,809,12,false);
	prevPage = currentPage;
	currentPage = new fellowship();
	currentPage.x = 809
	currentPage.y = 122
	addChild(currentPage);
	exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);
}
 
function ministriesPage(e:MouseEvent):void
{
	exitTween = new Tween(currentPage,"x",Regular.easeOut,currentPage.x,809,12,false);
	prevPage = currentPage;
	currentPage = new ministries();
	currentPage.x = 809
	currentPage.y = 122
	addChild(currentPage);
	exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);
}
 
 
function musicPage(e:MouseEvent):void
{
	exitTween = new Tween(currentPage,"x",Regular.easeOut,currentPage.x,809,12,false);
	prevPage = currentPage;
	currentPage = new music();
	currentPage.x = 809
	currentPage.y = 122
	addChild(currentPage);
	exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);
}
 
 
function nurseryPage(e:MouseEvent):void
{
	exitTween = new Tween(currentPage,"x",Regular.easeOut,currentPage.x,809,12,false);
	prevPage = currentPage;
	currentPage = new nursery();
	currentPage.x = 809
	currentPage.y = 122
	addChild(currentPage);
	exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);
}
 
function outreachPage(e:MouseEvent):void
{
	exitTween = new Tween(currentPage,"x",Regular.easeOut,currentPage.x,809,12,false);
	prevPage = currentPage;
	currentPage = new outreach();
	currentPage.x = 809
	currentPage.y = 122
	addChild(currentPage);
	exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);
}
 
function photoTourPage(e:MouseEvent):void
{
	exitTween = new Tween(currentPage,"x",Regular.easeOut,currentPage.x,809,12,false);
	prevPage = currentPage;
	currentPage = new photoTour();
	currentPage.x = 809
	currentPage.y = 122
	addChild(currentPage);
	exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);
}
 
function staffPage(e:MouseEvent):void
{
	exitTween = new Tween(currentPage,"x",Regular.easeOut,currentPage.x,809,12,false);
	prevPage = currentPage;
	currentPage = new staff();
	currentPage.x = 809
	currentPage.y = 122
	addChild(currentPage);
	exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);
}
 
 
function worshipPage(e:MouseEvent):void
{
	exitTween = new Tween(currentPage,"x",Regular.easeOut,currentPage.x,809,12,false);
	prevPage = currentPage;
	currentPage = new worship();
	currentPage.x = 809
	currentPage.y = 122
	addChild(currentPage);
	exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);
}
 
function youthPage(e:MouseEvent):void
{
	exitTween = new Tween(currentPage,"x",Regular.easeOut,currentPage.x,809,12,false);
	prevPage = currentPage;
	currentPage = new youth();
	currentPage.x = 809
	currentPage.y = 122
	addChild(currentPage);
	exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);
}
 
function animateOn(e:TweenEvent):void
{
	new Tween(currentPage,"x",Regular.easeOut,809,175,12,false);
	removeChild(prevPage);
}
 
var startWidth:Number = home_mcButton.buttonHighlight_mc.width;

Open in new window

scooby_56

The only reason i used arrays was to keep it tidy and reduce duplicate code.

applying to your code you could create all screens initially then push each screen into array. Then loop all in the array setting properties and making invisible

on clicking a particular button, loop all screens making them invisible then afterwards set the appropriate screen visible.

var homePage = new HomePage();
var calandar = new Calandar();
 
var myScreens:Array = [homePage, calandar];
for(var i=0;i<myScreens.length;i++){
  myScreens[i].x = 809;
  myScreens[i].y= 122;
  myScreens[i].visible = false;//make all invisible initially
}

Open in new window

radiii

ASKER

If i sent you the file would you be able to do that to two or three of the links so that I can see exactly what I need to do to make this happen??

scooby_56

Add .txt to the end of the file extention so that it can be posted here.

radiii

ASKER

Okay. Here it is
StThomas-index.fla.txt

scooby_56

I get "unexpected file format" when trying to open

can you repost in CS3 compatibility if not already?

radiii

ASKER

could I just email it to you??

radiii

ASKER

Here is the cs3 version
StThomas-index.fla.txt

scooby_56

im not sure of the board policy for that. The idea is that if anyone else has a similar issue to yourself they can see the soultion.

radiii

ASKER

Did you get the file to work?

scooby_56

i reduced the seperate onpress function to a single function...
replace your code on frame 1 with the snippet here.

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
 
var exitTween:Tween;
 
var currentPage:MovieClip
var prevPage:MovieClip;
 
var home_mc = new home();
var calendar_mc = new calendar();
var christianFormation_mc = new christianFormation();
 
var arrNavigation:Array = [{button:home_mcButton, page:home_mc},{button:calendar_mcButton, page:calendar_mc},{button:christianFormation_mcButton, page:christianFormation_mc}]
 
//add screens to stage and set properteis
for(var i=0;i<arrNavigation.length;i++){
	arrNavigation[i].button.addEventListener(MouseEvent.CLICK, buttonClicked);	
	
	arrNavigation[i].page.x = 800;
	arrNavigation[i].page.y = 122;
	//arrNavigation[i].page.visible = false;	
	addChild(arrNavigation[i].page);
	
}
//default page
currentPage = home_mc;
currentPage.x = 175;
 
function buttonClicked(e:MouseEvent):void{
	prevPage = currentPage;		
	exitTween = new Tween(currentPage,"x",Regular.easeOut,currentPage.x,809,12,false);	
	//find current page using e.target (button)
	for(i=0;i<arrNavigation.length;i++)	{
		if(arrNavigation[i].button == e.currentTarget) 
			currentPage = arrNavigation[i].page;
		else
			arrNavigation[i].button.buttonHighlight_mc.width = 0;
	}
	exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);
}
 
 
function animateOn(e:TweenEvent):void{
	new Tween(currentPage,"x",Regular.easeOut,809,175,12,false);
}
 
var startWidth:Number = home_mcButton.buttonHighlight_mc.width;
//var startHeight:Number = outreachHomePage_mcButton.sunriseHighlight_mc.height;
 
home_mcButton.buttonMode = true;
home_mcButton.addEventListener(MouseEvent.ROLL_OVER, buttonOver);
home_mcButton.addEventListener(MouseEvent.ROLL_OUT, buttonOut);
home_mcButton.buttonHighlight_mc.width = 150
worship_mcButton.buttonMode = true;
worship_mcButton.addEventListener(MouseEvent.ROLL_OVER, buttonOver);
worship_mcButton.addEventListener(MouseEvent.ROLL_OUT, buttonOut);
staff_mcButton.buttonMode = true;
staff_mcButton.addEventListener(MouseEvent.ROLL_OVER, buttonOver);
staff_mcButton.addEventListener(MouseEvent.ROLL_OUT, buttonOut);
christianFormation_mcButton.buttonMode = true;
christianFormation_mcButton.addEventListener(MouseEvent.ROLL_OVER, buttonOver);
christianFormation_mcButton.addEventListener(MouseEvent.ROLL_OUT, buttonOut);
music_mcButton.buttonMode = true;
music_mcButton.addEventListener(MouseEvent.ROLL_OVER, buttonOver);
music_mcButton.addEventListener(MouseEvent.ROLL_OUT, buttonOut);
fellowship_mcButton.buttonMode = true;
fellowship_mcButton.addEventListener(MouseEvent.ROLL_OVER, buttonOver);
fellowship_mcButton.addEventListener(MouseEvent.ROLL_OUT, buttonOut);
calendar_mcButton.buttonMode = true;
calendar_mcButton.addEventListener(MouseEvent.ROLL_OVER, buttonOver);
calendar_mcButton.addEventListener(MouseEvent.ROLL_OUT, buttonOut);
tidingsNewsletter_mcButton.buttonMode = true;
tidingsNewsletter_mcButton.addEventListener(MouseEvent.ROLL_OVER, buttonOver);
tidingsNewsletter_mcButton.addEventListener(MouseEvent.ROLL_OUT, buttonOut);
photoTour_mcButton.buttonMode = true;
photoTour_mcButton.addEventListener(MouseEvent.ROLL_OVER, buttonOver);
photoTour_mcButton.addEventListener(MouseEvent.ROLL_OUT, buttonOut);
contactUs_mcButton.buttonMode = true;
contactUs_mcButton.addEventListener(MouseEvent.ROLL_OVER, buttonOver);
contactUs_mcButton.addEventListener(MouseEvent.ROLL_OUT, buttonOut);
outreach_mcButton.buttonMode = true;
outreach_mcButton.addEventListener(MouseEvent.ROLL_OVER, buttonOver);
outreach_mcButton.addEventListener(MouseEvent.ROLL_OUT, buttonOut);
ministries_mcButton.buttonMode = true;
ministries_mcButton.addEventListener(MouseEvent.ROLL_OVER, buttonOver);
ministries_mcButton.addEventListener(MouseEvent.ROLL_OUT, buttonOut);
community_mcButton.buttonMode = true;
community_mcButton.addEventListener(MouseEvent.ROLL_OVER, buttonOver);
community_mcButton.addEventListener(MouseEvent.ROLL_OUT, buttonOut);
youth_mcButton.buttonMode = true;
youth_mcButton.addEventListener(MouseEvent.ROLL_OVER, buttonOver);
youth_mcButton.addEventListener(MouseEvent.ROLL_OUT, buttonOut);
 
nursery_mcButton.buttonMode = true;
nursery_mcButton.addEventListener(MouseEvent.ROLL_OVER, largeButtonOver);
nursery_mcButton.addEventListener(MouseEvent.ROLL_OUT, largeButtonOut);
 
function largeButtonOver(e:MouseEvent):void
{
	new Tween(e.currentTarget.largeButtonHighlight_mc, "width", Strong.easeOut, startWidth,startWidth+175,8,false);
}
 
function largeButtonOut(e:MouseEvent):void
{
	new Tween(e.currentTarget.largeButtonHighlight_mc, "width", Strong.easeOut,e.currentTarget.largeButtonHighlight_mc.width,startWidth,8,false);
}
 
 
function buttonOver(e:MouseEvent):void
{
	new Tween(e.currentTarget.buttonHighlight_mc, "width", Strong.easeOut, startWidth,startWidth+175,8,false);
}
 
function buttonOut(e:MouseEvent):void
{
	var currentButton;
	//find current button based on currentPage
	for(i=0;i<arrNavigation.length;i++)	if(arrNavigation[i].page == currentPage) currentButton = arrNavigation[i].button;
	if(e.currentTarget != currentButton) new Tween(e.currentTarget.buttonHighlight_mc, "width", Strong.easeOut,e.currentTarget.buttonHighlight_mc.width,startWidth,8,false);
}
 
//outreachHomePage_mcButton.buttonMode = true;
//outreachHomePage_mcButton.addEventListener(MouseEvent.ROLL_OVER, mcbuttonOver);
//outreachHomePage_mcButton.addEventListener(MouseEvent.ROLL_OUT, mcbuttonOut);
//ministriesHomePage_mcButton.buttonMode = true;
//ministriesHomePage_mcButton.addEventListener(MouseEvent.ROLL_OVER, mcbuttonOver);
//ministriesHomePage_mcButton.addEventListener(MouseEvent.ROLL_OUT, mcbuttonOut);
//communityHomePage_mcButton.buttonMode = true;
//communityHomePage_mcButton.addEventListener(MouseEvent.ROLL_OVER, mcbuttonOver);
//communityHomePage_mcButton.addEventListener(MouseEvent.ROLL_OUT, mcbuttonOut);
//youthHomePage_mcButton.buttonMode = true;
//youthHomePage_mcButton.addEventListener(MouseEvent.ROLL_OVER, mcbuttonOver);
//youthHomePage_mcButton.addEventListener(MouseEvent.ROLL_OUT, mcbuttonOut);
//
//function mcbuttonOver(e:MouseEvent):void
//{
//	new Tween(e.currentTarget.sunriseHighlight_mc, "height", Strong.easeOut, startHeight,startHeight+40,8,false);
//}
//
//function mcbuttonOut(e:MouseEvent):void
//{
//	new Tween(e.currentTarget.sunriseHighlight_mc, "height", Strong.easeOut,e.currentTarget.sunriseHighlight_mc.height,startHeight,8,false);
//}

Open in new window

radiii

ASKER

It works for some of the buttons but i am not sure how to make the other buttons work. Could you comment the code so that i have a better idea of what you did? I am still tryin to make the transition from timeline to all actionscript.

ASKER CERTIFIED SOLUTION

scooby_56

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

radiii

ASKER

I can get all of the buttons to stay highlighted except for one and that is the nursery button. I had to use a different sized highlight because it was 2 lines. how do i fix this?

radiii

ASKER

actually i figured out how the answer to the previous question that I just asked. But, I was wondering if there was anyway to remove the pages off of the movie after it has animated off of the stage?

Also if i wanted to do the same thing where the buttons stay on the screen when clicked for the sub nav buttons would the ActionScript look the same?

If you want me to do this for more points I will. You have been very helpful. Thank You so MUCH!

scooby_56

I'd be happy to help... just raise as a new question so anyone with similar issues can find the solution also

radiii

ASKER

radiii

ASKER

what would i have to do to the code if I wanted to make the pages animate on to the screen fading in and out for the transition? I have not ever used arrays so i am not familiar with the code that you used so i am not able to make the changes needed to make that happen. Please comment the code so that I see what you are doing and can learn how to use this ActionScript again. Thanks!

By the way I have added a related question on the board by the name of :

Creating a disolve off and Disolve on transition of the pages with the button staying active

this is pretty much the same question as the one that I am asking you right here only for points.