AS3 Change Frame/Instance within MovieClip

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);
}