Calling nested movieclips using arrays

Hello,
I have 12 movieclips within a scrolling menu. Here is the original code (not showing the scrolling part because I don’t need help with it so I’m keeping it clean):

face_menu.face_list1.lukia.addEventListener(MouseEvent.CLICK, chooseLukia);
function chooseLukia(event:MouseEvent):void
{
    gotoAndPlay("lukia");
}

The scrolling and clicking function works. However, I have 12 of these movieclips so therefore I want to clean up the code by putting it into an Array. Here is the new code:

var faceMenu = new Array(face_menu.face_list1.lukia);
for (var a=0; a<faceMenu.length; a++)
{
    faceMenu[a].addEventListener(MouseEvent.CLICK, faceClick);
}

function faceClick(event:MouseEvent):void
{
    switch (event.target.name)
    {
        case "face_menu.face_list1.lukia" :
            gotoAndPlay("lukia");
            break;
     }
}

This time, it doesn’t work…
When clicked, it doesn’t go to the designated frame. I thought maybe it’s because the movieclip is nested, but then how come it works in the simpler code. I even test it out by replacing the switch statement:

var faceMenu = new Array(face_menu.face_list1.lukia);
for (var a=0; a<faceMenu.length; a++)
{
    faceMenu[a].addEventListener(MouseEvent.CLICK, faceClick);
}

function faceClick(event:MouseEvent):void
{
    gotoAndPlay("lukia");
}

And it WORKS! So it’s not because it’s nested…
But obviously this means that every movieclip will go to the same frame, which is not what I want. Each movieclip will need to go to their own frame.

I have successfully code a menu using arrays before, but every buttons was on the same stage so it was easy. But in this case, they are nested.

If I can’t fix it then I’ll just go back to the original much much simpler code. But I do want it to look clean, organised and well-coded.

Any help would be great