AS3 Change Frame/Instance within MovieClip - actionscript-3

Question

I am not a programmer, so please forgive me if my question is too noobish.
I created a MovieClip in my library called "skill". Then I added three instances of that MovieClip into my stage called "skill_01", "skill_02", and "skill_03" respectively. I selected all three instances and created another MovieClip called "diagram" to nest them inside it. I will later add more skill instances inside this MovieClip called "diagram" but for now, I need the basics to work with three instances.
The main timeline or stage only has 1 frame, and so does the "diagram" MovieClip instance. However, the skill instances all have two frames: in frame 1 I have an PNG image showing them as being locked/offline, and in frame 2 I have another PNG showing them as unlocked/online. I need to be able to toggle them by clicking and right clicking on them, just like in the example below (see link)
I am trying to make it so that when you left click the skill instances they toggle to Online/Unlocked by switching to the PNG image in frame 2, and when you right click them, it goes back to frame 1 (Offline/Locked). I've tried several different lines of code, including the ones recommended by Adobe itself, and others, and I can't figure out what I'm doing wrong. It will go to frame 2 and refuse to go back to frame 1 when right clicked.
This is the code I have in the MovieClip:
stop();
skill_01.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame);
function fl_ClickToGoToNextFrame(event:MouseEvent):void
{
gotoAndStop(2);
}
This part of the code doesn't work:
skill_01a.addEventListener(MouseEvent.RIGHT_CLICK, fl_ClickToGoToPreviousFrame);
function fl_ClickToGoToPreviousFrame(event:MouseEvent):void
{
prevFrame();
}
Screenshot 1:
gyazo (dot) com/e622baee46c3fabbd8c9a8d2df8396fe
Screenshot 2:
gyazo (dot) com/1b360716a5d243aa74e2be4127fe9a5b
(Sorry for typing the links like that, it won't let me add more than 1 link because I just signed up to this Forum)
For more context, I am trying to make a Skill Tree, that works similar to this one: http://www.dungeonsanddevelopers.com/#__6_Your
I will appreciate any help figuring this out!

Answer 1

if you have named your movieclip, skill_01, so what is the skill_01a ?
also add your event listener and its callback function in to the movieclip's parent and inside the callback function, for accessing the event owner, use
// stop(); not necessary to call stop if you have only 1 frame
with (this.diagram) {
skill_01.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame);
skill_02.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame);
skill_03.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame);
skill_04.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame);
skill_01.gotoAndStop(1);
skill_02.gotoAndStop(1);
skill_03.gotoAndStop(1);
skill_04.gotoAndStop(1);
}
function fl_ClickToGoToNextFrame(event:MouseEvent):void
{
if (MovieClip(event.target.parent).currentFrame == 1)
MovieClip(event.target.parent).gotoAndStop(2);
else
MovieClip(event.target.parent).gotoAndStop(1);
}
Edit: when an event is dispatched from clicked movieclip, only the last movieclip inside hierarchy tree will be passed as event.target in your exaple, that can be skill_01 (if currentframe is 1) or skill_1a (if currentframe is 2) athwart the question body, you have not only a png image inside skill's frame 1 and 2, they are movieclip's and will be returned as event.target. but if you only put your bitmaps (locked.png & unlocked.png) instead of skill_01 and skill_01a, the previous code works fine. bitmaps does not capture event so its parent is who accepted click event and its all a little confusing, i'm not good at explain
if its hard to comprehend
we shall use some thing like it, easier but larger code
with (this.diagram) {
skill_01.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame_s1);
skill_02.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame_s2);
skill_03.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame_s3);
skill_04.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame_s4);
skill_01.gotoAndStop(1);
skill_02.gotoAndStop(1);
skill_03.gotoAndStop(1);
skill_04.gotoAndStop(1);
}
function fl_ClickToGoToNextFrame_s1(event:MouseEvent):void {
toggle_buttons(skill_01);
}
function fl_ClickToGoToNextFrame_s2(event:MouseEvent):void {
toggle_buttons(skill_02);
}
function fl_ClickToGoToNextFrame_s3(event:MouseEvent):void {
toggle_buttons(skill_03);
}
function fl_ClickToGoToNextFrame_s4(event:MouseEvent):void {
toggle_buttons(skill_04);
}
function toggle_buttons(button:MovieClip):void
{
if (button.currentFrame == 1)
button.gotoAndStop(2);
else
button.gotoAndStop(1);
}