How do I make a menu system with images

Report · Jan 24, 2014

Hi I would like to know how to make a menu system in flash. I would like to use the menu system to add a t shirt onto the stage that i can then drag, the issue is that i can't work out how to use the movieclips that i have in the components that i have tried as buttons. I guess that my main question would be can i use items in a tile list as buttons to addChild to the stage?

Report · Jan 24, 2014

you can add a listevent listener to your tilelist that can be used to determine which row,column was clicked (using the listevent's rowIndex and columnIndex properties):

tl.addEventListener(ListEvent.ITEM_CLICK,ff);

function ff(e:ListEvent):void{

trace(e.rowIndex,e.columnIndex);

}

Report · Jan 24, 2014

ok ill give that a try

Report · Jan 24, 2014

so i tried your suggestion and i got the error message: 1061: Call to a possibly undefined method rowIndex through a reference with static type fl.controls:TileList. the tile list has only one column. this is my code at the moment:

package
{

import flash.display.MovieClip;
import flash.events.MouseEvent;
import fl.controls.Slider;
import fl.events.SliderEvent;
import fl.controls.Label;
import fl.controls.NumericStepper;
import flash.events.Event;
import fl.controls.TileList;
import flash.display.DisplayObject;
import fl.events.ListEvent;

public class Main extends MovieClip
{
   //Variables
   var startPage:StartPage;
   var tutorialPage:TutorialPage;
   var maleSizePage:MaleSizePage;
   var femaleSizePage:FemaleSizePage;
   var maleDragDropPage:MaleDragDropPage;
   var femaleDragDropPage:FemaleDragDropPage;

   //clothes variables

   var tshirt1:tShirt1;
   var tshirt2:tShirt2;
   var tshirt3:tShirt3;
   var tshirt4:tShirt4;

public function Main()
{

    //Pages
    startPage = new StartPage;
    tutorialPage = new TutorialPage;
    maleSizePage = new MaleSizePage;
    femaleSizePage = new FemaleSizePage;
    maleDragDropPage = new MaleDragDropPage;
    femaleDragDropPage = new FemaleDragDropPage;

    //clothes
    tshirt1 = new tShirt1;
    tshirt2 = new tShirt2;
    tshirt3 = new tShirt3;
    tshirt4 = new tShirt4;


    addChild(startPage);

    //Event Listeners Buttons
    startPage.startButton.addEventListener(MouseEvent.CLICK,startButtonClick);
    tutorialPage.continueButton.addEventListener(MouseEvent.CLICK,tutorialContinueButtonClick);
    maleSizePage.continueButton.addEventListener(MouseEvent.CLICK,maleSizeContinueButtonClick);
    femaleSizePage.continueButton.addEventListener(MouseEvent.CLICK,femaleSizeContinueButtonClick);

    //Size Page Event Listeners
    maleSizePage.heightSlider.addEventListener(SliderEvent.CHANGE,heightSlChange_M);
    maleSizePage.neckSlider.addEventListener(SliderEvent.CHANGE,neckSlChange_M);
    maleSizePage.chestSlider.addEventListener(SliderEvent.CHANGE,chestSlChange_M);
    maleSizePage.waistSlider.addEventListener(SliderEvent.CHANGE,waistSlChange_M);
    maleSizePage.armSlider.addEventListener(SliderEvent.CHANGE,armSlChange_M);
    maleSizePage.legSlider.addEventListener(SliderEvent.CHANGE,legSlChange_M);
    maleSizePage.heightValue.addEventListener(Event.CHANGE,heightVChange_M);
    maleSizePage.neckValue.addEventListener(Event.CHANGE,neckVChange_M);
    maleSizePage.chestValue.addEventListener(Event.CHANGE,chestVChange_M);
    maleSizePage.waistValue.addEventListener(Event.CHANGE,waistVChange_M);
    maleSizePage.armValue.addEventListener(Event.CHANGE,armVChange_M);
    maleSizePage.legValue.addEventListener(Event.CHANGE,legVChange_M);
    femaleSizePage.heightSlider.addEventListener(SliderEvent.CHANGE,heightSlChange_F);
    femaleSizePage.bustSlider.addEventListener(SliderEvent.CHANGE,bustSlChange_F);
    femaleSizePage.hipSlider.addEventListener(SliderEvent.CHANGE,hipSlChange_F);
    femaleSizePage.armSlider.addEventListener(SliderEvent.CHANGE,armSlChange_F);
    femaleSizePage.waistSlider.addEventListener(SliderEvent.CHANGE,waistSlChange_F);
    femaleSizePage.legSlider.addEventListener(SliderEvent.CHANGE,legSlChange_F);

    //Drag and Drop page Listeners
    maleDragDropPage.menuBar.stop();
    femaleDragDropPage.menuBar.stop();
    maleDragDropPage.menuBar.topsButton.addEventListener(MouseEvent.MOUSE_DOWN,topsMenuShow_M);
    maleDragDropPage.menuBar.trousersButton.addEventListener(MouseEvent.MOUSE_DOWN,trousersMenuShow_M);
    maleDragDropPage.menuBar.shoesButton.addEventListener(MouseEvent.MOUSE_DOWN,shoesMenuShow_M);
    maleDragDropPage.menuBar.maleTops.rowIndex(1).addEventListener(ListEvent.ITEM_CLICK,addTshirt1_M);

    }


   //Event Button handlers

   function startButtonClick(event:MouseEvent):void
   {
    addChild(tutorialPage);
   }
   function tutorialContinueButtonClick(event:MouseEvent):void
   {
    if (startPage.maleSelection.selected == true)
    {
     addChild(maleSizePage);
     removeChild(startPage);
     removeChild(tutorialPage);
    }
    if (startPage.femaleSelection.selected == true)
    {
     addChild(femaleSizePage);
     removeChild(startPage);
     removeChild(tutorialPage);
    }
   }
   function maleSizeContinueButtonClick(event:MouseEvent):void
   {
    addChild(maleDragDropPage)
    removeChild(maleSizePage)
   }
   function femaleSizeContinueButtonClick(event:MouseEvent):void
   {
    addChild(femaleDragDropPage)
    removeChild(femaleSizePage)
   }

   // slider handlers

   function heightSlChange_M(event:SliderEvent):void
   {

    maleSizePage.heightValue.value = maleSizePage.heightSlider.value;
    maleSizePage.maleCharacter.height = maleSizePage.heightSlider.value + 280;

   }
   function neckSlChange_M(event:SliderEvent):void
   {

maleSizePage.neckValue.value = maleSizePage.neckSlider.value;
maleSizePage.maleCharacter.neck.width = maleSizePage.neckSlider.value + 40;

   }
   function chestSlChange_M(event:SliderEvent):void
   {

maleSizePage.chestValue.value = maleSizePage.chestSlider.value;
maleSizePage.maleCharacter.chest.width = maleSizePage.chestSlider.value + 141;

   }
   function waistSlChange_M(event:SliderEvent):void
   {

    maleSizePage.waistValue.value = maleSizePage.waistSlider.value;
    maleSizePage.maleCharacter.waist.width = maleSizePage.waistSlider.value + 140;
   }
   function armSlChange_M(event:SliderEvent):void
   {
    maleSizePage.armValue.value = maleSizePage.armSlider.value;
    maleSizePage.maleCharacter.leftArm.height = maleSizePage.armSlider.value + 180;
    maleSizePage.maleCharacter.rightArm.height = maleSizePage.armSlider.value + 180;
   }
   function legSlChange_M(event:SliderEvent):void
   {

    maleSizePage.legValue.value = maleSizePage.legSlider.value;
    maleSizePage.maleCharacter.rightLeg.height = maleSizePage.legSlider.value + 250;
    maleSizePage.maleCharacter.leftLeg.height = maleSizePage.legSlider.value +250;
   }
   function heightVChange_M(e:Event):void
   {
    maleSizePage.heightSlider.value = maleSizePage.heightValue.value;
    maleSizePage.maleCharacter.height = maleSizePage.heightValue.value + 280;
   }
   function neckVChange_M(e:Event):void
   {
    maleSizePage.neckSlider.value = maleSizePage.neckValue.value;
    maleSizePage.maleCharacter.neck.width = maleSizePage.neckValue.value + 40;
   }
   function chestVChange_M(e:Event):void
   {
    maleSizePage.chestSlider.value = maleSizePage.chestValue.value;
    maleSizePage.maleCharacter.chest.width = maleSizePage.chestValue.value + 141;
   }
   function waistVChange_M(e:Event):void
   {
    maleSizePage.waistSlider.value = maleSizePage.waistValue.value;
    maleSizePage.maleCharacter.waist.width = maleSizePage.waistValue.value + 140
   }
   function armVChange_M(e:Event):void
   {
    maleSizePage.armSlider.value = maleSizePage.armValue.value;
    maleSizePage.maleCharacter.leftArm.height = maleSizePage.armValue.value + 180;
    maleSizePage.maleCharacter.rightArm.height = maleSizePage.armValue.value + 180;
   }
   function legVChange_M(e:Event):void
   {
    maleSizePage.legSlider.value = maleSizePage.legValue.value;
    maleSizePage.maleCharacter.leftLeg.height = maleSizePage.legValue.value + 240;
    maleSizePage.maleCharacter.rightLeg.height = maleSizePage.legValue.value + 240;
   }

   function heightSlChange_F(e:Event):void
   {
    femaleSizePage.heightValue.value = femaleSizePage.heightSlider.value;
    femaleSizePage.femaleCharacter.height = femaleSizePage.heightSlider.value + 250;

   }
   function bustSlChange_F(e:Event):void
   {
    femaleSizePage.bustValue.value = femaleSizePage.bustSlider.value;
    femaleSizePage.femaleCharacter.chest.width = femaleSizePage.bustSlider.value + 150;

   }
   function waistSlChange_F(event:SliderEvent):void
   {

    femaleSizePage.waistValue.value = femaleSizePage.waistSlider.value;
    femaleSizePage.femaleCharacter.waist.width = femaleSizePage.waistSlider.value + 140;
   }
   function armSlChange_F(event:SliderEvent):void
   {
    femaleSizePage.armValue.value = femaleSizePage.armSlider.value;
    femaleSizePage.femaleCharacter.leftArm.height = femaleSizePage.armSlider.value + 180;
    femaleSizePage.femaleCharacter.rightArm.height = femaleSizePage.armSlider.value + 180;
   }
   function legSlChange_F(event:SliderEvent):void
   {

    femaleSizePage.legValue.value = femaleSizePage.legSlider.value;
    femaleSizePage.femaleCharacter.rightLeg.height = femaleSizePage.legSlider.value + 250;
    femaleSizePage.femaleCharacter.leftLeg.height = femaleSizePage.legSlider.value +250;
   }
   function hipSlChange_F(event:SliderEvent):void
   {
    femaleSizePage.hipValue.value = femaleSizePage.hipSlider.value;
    femaleSizePage.femaleCharacter.hips.width = femaleSizePage.hipSlider.value + 160;
   }
   function heightVChange_F(e:Event):void
   {
    femaleSizePage.heightSlider.value = femaleSizePage.heightValue.value;
    femaleSizePage.femaleCharacter.height = femaleSizePage.heightValue.value + 280;
   }
   function bustVChange_F(e:Event):void
   {
    femaleSizePage.bustSlider.value = femaleSizePage.bustValue.value;
    femaleSizePage.femaleCharacter.chest.width = femaleSizePage.bustValue.value + 150;
   }
   function hipsVChange_F(e:Event):void
   {
    femaleSizePage.hipSlider.value = femaleSizePage.hipValue.value;
   }
   function waistVChange_F(e:Event):void
   {
    femaleSizePage.waistSlider.value = femaleSizePage.waistValue.value;
    femaleSizePage.femaleCharacter.waist.width = femaleSizePage.waistValue.value + 140;
   }
   function armVChange_F(e:Event):void
   {
    femaleSizePage.armSlider.value = femaleSizePage.armValue.value;
    femaleSizePage.femaleCharacter.leftArm.height = femaleSizePage.armValue.value + 180;
    femaleSizePage.femaleCharacter.rightArm.height = femaleSizePage.armValue.value + 180

   }
   function legVChange_F(e:Event):void
   {
    femaleSizePage.legSlider.value = femaleSizePage.legValue.value;
    femaleSizePage.femaleCharacter.rightLeg.height = femaleSizePage.legValue.value + 250;
    femaleSizePage.femaleCharacter.leftLeg.height = femaleSizePage.legValue.value +250;
   }

   //Drag and Drop handlers

   function topsMenuShow_M(event:MouseEvent):void
   {
    maleDragDropPage.menuBar.gotoAndStop(2);
   }

   function trousersMenuShow_M(event:MouseEvent):void
   {
    maleDragDropPage.menuBar.gotoAndStop(3);
   }

   function shoesMenuShow_M(event:MouseEvent):void
   {
    maleDragDropPage.menuBar.gotoAndStop(4);
   }

   function addTshirt1_M(event:MouseEvent):void
   {
    this.maleDragDropPage.addChild(tShirt1 as DisplayObject);
    this.maleDragDropPage.removeChild(tShirt2 as DisplayObject);
    this.maleDragDropPage.removeChild(tShirt3 as DisplayObject);
    this.maleDragDropPage.removeChild(tShirt4 as DisplayObject);
   }
}
}

Report · Jan 24, 2014

this makes no sense: maleDragDropPage.menuBar.maleTops.rowIndex(1).addEventListener(ListEv ent.ITEM_CLICK,addTshirt1_M);

you check the rowIndex property of the listevent just like i showed in my code. your listevent is in the addTshirt1_M listener function and the listener should be added to the tilelist component, not the objects in the tilelist:

function addTshirt1_M(event:MouseEvent):void

{

trace(event.rowIndex,event.columnIndex);

// you will use these two values to determine what object to add to the display.

}

Report · Jan 24, 2014

i did what you suggested and now i have this error

TypeError: Error #1009: Cannot access a property or method of a null object reference.

my code is identical to what you have written there:

maleDragDropPage.menuBar.maleTops.addEventListener(ListEvent.ITEM_CLICK,addTshirt1_M)

function addTshirt1_M(event:ListEvent):void

{

trace(event.rowIndex,event.columnIndex)

}

Report · Jan 25, 2014

that error is unrelated to my suggestion.

to find it, click file>publish settings>swf and tick "permit debugging". retest.

the line number with the non-existant object will be in the error message. if you don't understand how to fix the problem with that info, copy and paste the error message and show the line of code mentioned at the top of the error message.

Report · Jan 25, 2014

this is the error that i get:

TypeError: Error #1009: Cannot access a property or method of a null object reference.

at Main()

and this is the line that it references:

maleDragDropPage.menuBar.maleTops.addEventListener(ListEvent.ITEM_CLICK,addTshirt1_M)

Report · Jan 25, 2014

if that's line 84 in Main.as

maleDragDropPage.menuBar.maleTops, maleDragDropPage.menuBar or maleDragDropPage

doesn't exist when your code executes.

Report · Jan 26, 2014

i now have the values for the different items on the list but i am unsure how to get them to appear on the page when i Click on them.

Report · Jan 26, 2014

you can create an object that associates your list items and your objects. for example:

var obj:Object={};

obj[0+"_"+0]=tShirt1;

obj[0+"_"+1]=tShirt2;

etc

and

function addTshirt1_M(event:MouseEvent):void

{

trace(event.rowIndex,event.columnIndex);

addChild(obj[event.rowIndex+"_"+event.columnIndex]);

}

Report · Jan 26, 2014

after inserting the code that you suggested i now get this Error

TypeError: Error #1034: Type Coercion failed: cannot convert tShirt1$ to flash.display.DisplayObject.

at Main/addTshirt1_M()

at flash.events::EventDispatcher/dispatchEventFunction()

at flash.events::EventDispatcher/dispatchEvent()

at fl.controls::SelectableList/handleCellRendererClick()

Report · Jan 26, 2014

cast it as a displayobject like you've already done in your code.

Report · Jan 26, 2014

how do i do that?

Report · Jan 26, 2014

just like you did in the code above:

var obj:Object={};

obj[0+"_"+0]=tShirt1;

obj[0+"_"+1]=tShirt2;

etc

and

function addTshirt1_M(event:MouseEvent):void

{

trace(event.rowIndex,event.columnIndex);

addChild(obj[event.rowIndex+"_"+event.columnIndex] as DisplayObject);

}

Report · Jan 26, 2014

Ok I'll try that in the morning

How do I make a menu system with images

1 Correct answer