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).

Answer 2

Can you also post the code where you add clip boxes to the stage? Did you add them in the GUI by dragging and dropping or in code?

If so, you might need to make instances of each of the clip boxes inside the larger movieclip that contains all of them together. Then you'll need to refer to each one with clip_boxes.box1, etc.

EDIT: Oh, I see you had an image there. My bad. Make sure you give each clip box its own unique instance name. You'll need to have clip_box_1, clip_box_2, etc. Then in code you use clip_box_1.addEventListen.....etc.