How do you make buttons that have a specific length? - arrays

Question

I'm having difficulty using a customlistrenderer class and homescreen class.
Here's my Homescreen class that contains the function generateData(), which is supposed to display a scroller of 22 buttons.
private function generateData(): void{
var list: List = new List();
list.width = 235;
list.height = 380;
list.name = "HomeScreenList";
this.addChild(list);
var rows:int = 6;
var iterator:int = 0;
var num:int = 22;
var counter:int = 0;
var obj:Object;
var heroName:Array = ["ana", "bastion", "d.va", "genji", "hanzo", "junkrat", "lucio",
"mccree", "mei", "mercy", "pharah", "reaper", "reinhardt", "roadhog", "soldier76", "symmetra",
"torbjorn", "tracer", "widowmaker", "winston", "zarya", "zenyatta"];
var temp:Array = []
obj = new Object();
while(iterator < rows){
obj.name1 = heroName[counter];
obj.image1 = myResource.getImage(heroName[counter]);
obj.name2 = heroName[counter+1];
obj.image2 = myResource.getImage(heroName[counter+1]);
obj.name3 = heroName[counter+2];
obj.image3 = myResource.getImage(heroName[counter+2]);
obj.name4 = heroName[counter+3];
obj.image4 = myResource.getImage(heroName[counter+3]);
temp.push(obj);
counter+4;
iterator++;
}
var collection:ListCollection = new ListCollection(temp);
//assign the renderer
list.itemRendererType = CustomMenuListRenderer;
list.dataProvider = collection;
list.addEventListener(Event.CHANGE, onChange);
this.addChild(list);
list.validate();
}
and the CustomMenuListRenderer class, under the initialize() function
super.initialize();
firstButton = new Button();
this.addChild(firstButton);
firstButton.x = 20;
firstButton.y = 100;
firstButton.scale = 0.60;
secondButton = new Button();
secondButton.x = 92;
secondButton.y = 100;
secondButton.scale = 0.60;
thirdButton = new Button();
thirdButton.x = 163;
thirdButton.y = 100;
thirdButton.scale = 0.60;
fourthButton = new Button();
fourthButton.x = 235;
fourthButton.y = 100;
fourthButton.scale = 0.60;
firstButton.addEventListener(Event.TRIGGERED, onTrigger);
secondButton.addEventListener(Event.TRIGGERED, onTrigger);
thirdButton.addEventListener(Event.TRIGGERED, onTrigger);
fourthButton.addEventListener(Event.TRIGGERED, onTrigger);
The problem is since the loop displays the 4 buttons each loop, an error occurs at the 23rd button(since I only specified 22 buttons but I declared 4 buttons on the CustomMenuListRenderer class) in the 6th row.
My question is how do I fix this issue?

Answer 1

First question, why define num manually and not use heroName.lenght? Is more secure
var heroName:Array = ["ana", "bastion", "d.va", "genji", "hanzo", "junkrat", "lucio",
"mccree", "mei", "mercy", "pharah", "reaper", "reinhardt", "roadhog", "soldier76", "symmetra",
"torbjorn", "tracer", "widowmaker", "winston", "zarya", "zenyatta"];
var num:int = heroName.lenght;
To fix your error, you have to check is heroName index exists before to get it.
Something like :
obj = new Object();
while(iterator < rows){
var objCounter:int = 1;
while(objCounter <= 4 )
{
if( counter < heroName.lenght )
{
obj["name"+objCounter] = heroName[counter];
obj["image"+objCounter] = myResource.getImage(heroName[counter]);
}
objCounter++;
counter++;
}
temp.push(obj);
iterator++;
}