AS3 Multiple Rollover objects

Question

example image

Very new to AS3. Sorry if this question is really basic, I tried looking around for the right answer but only found semi-related questions. Please help!!

Objective: I want multiple rollover MovieClips on the same stage that play out their animations independently.

So far, I have only 1 MovieClip object that behaves properly. If I add another, the first one behaves properly but the second doesn't appear at all. I understand that it's probably only calling the instance that I first dropped into the stage and that I need to change my code to have a "master" or parent MovieClip and that the instances should be the children, but I'm not sure how to write that in code. Eventually, the idea is that I add my children movieclips, and then slightly change the content in each clip.

My code so far:

import flash.events.MouseEvent;


clip_boxes.removeEventListener(MouseEvent.ROLL_OUT, clipOut);
clip_boxes.addEventListener(MouseEvent.ROLL_OVER, clipOver);


function clipOver(event:MouseEvent):void {

 clip_boxes.addEventListener(MouseEvent.ROLL_OUT, clipOut);
 clip_boxes.removeEventListener(MouseEvent.ROLL_OVER,clipOver);
 clip_boxes.gotoAndPlay("Over");

};

function clipOut(event:MouseEvent):void {

clip_boxes.addEventListener(MouseEvent.ROLL_OVER, clipOver);   
clip_boxes.removeEventListener(MouseEvent.ROLL_OUT, clipOut);
clip_boxes.gotoAndPlay("Out");

};

Answer 1

There are a few ways you can do this. I'll list in order of worst to best.

1. Manually add listeners to each instance.

   When you drag a new MovieClip onto the timeline, you need to give it an instance name (found in the properties panel). I'm not sure if clip_boxes is a parent timeline that you intend to have all your movie clips on, or if it is one of your movie clips itself.

   Assuming you have 3 clips with the instance names: MC1,MC2,MC3, you could do this (on the first frame of the timeline that contains them)

   MC1.addEventListener(MouseEvent.ROLL_OVER, clipOver);
   MC2.addEventListener(MouseEvent.ROLL_OVER, clipOver);
   MC3.addEventListener(MouseEvent.ROLL_OVER, clipOver);
   
   //If you had a whole bunch, you could also use a loop to add all the listeners
   
   
   //you use event.currentTarget to get a referce to the object the listener was attached to - this way you only need this one handler function
   function clipOver(event:MouseEvent):void {
       MovieClip(event.currentTarget).addEventListener(MouseEvent.ROLL_OUT, clipOut);
       MovieClip(event.currentTarget).gotoAndPlay("Over");
   };
   
   function clipOut(event:MouseEvent):void {  
       MovieClip(event.currentTarget).removeEventListener(MouseEvent.ROLL_OUT, clipOut);
       MovieClip(event.currentTarget).gotoAndPlay("Out");
   };
   

2. Use Inheritance

   This would involve creating a base class file (.as file) that you can then attach to all your MovieClips so they inherit all the code within. Here is an example of a class file that would do this for you: (lets assume this is a file called SubClass.as in your root directory)

   package {
       import flash.display.MovieClip;
   import flash.events.MouseEvent;
   
       public class SubClass extends MovieClip {
           public function SubClass(){
               this.addEventListener(MouseEvent.ROLL_OVER, rollOver,false,0,true);
           }
   
           public function rollOver(event:MouseEvent):void {
               this.addEventListener(MouseEvent.ROLL_OUT,rollOut,false,0,true);
               this.gotoAndPlay("Over");
           }
   
           public function rollOut(event:MouseEvent):void {
               this.removeEventListener(MouseEvent.ROLL_OUT,rollOut,false);
               this.gotoAndPlay("Out");
           }
       }
   }
   

   Now, when you create your movieClips (or right click in the library and select properties), you can set a baseClass for them. If you set the base class to the class above, they automatically use the code above and have the mouse over/out attached. (as long as they have the Out/Over frame labels it will just work).