1 Reply Latest reply on Apr 30, 2008 10:40 AM by Rothrock

    frustrated rollover and ring to front

    kptgreg2
      I know this seems basic, but after hours of trying I am going to give up. I have a bunch of buttons that overlap each other, (i can't just use button symbols) so I am trying to use script. I made a movie: ballet_mc and put in this code on the first frame inside ballet_mc:

      stop();
      on (rollOver) {
      gotoAndPlay(2);
      };

      the rollover animation starts on frame 2. But this does not work, it just plays over and over even though I don't rollover it with my mouse. what am i doing wrong?

      Also, I can't use button symbols because these overlap each other. So, is there some kind of Bring to Front code I can use?

      I don't know how to write it, but it would essentially say "on rollover bring ballet_mc to the front" sorry about the newbie questions but I am sitting here reading a couple books and just getting errors, any help is appreciated.


        • 1. Re: frustrated rollover and ring to front
          Rothrock Level 5
          Oh there are so many things wrong with this that I bairly know where to begin. (I mean this in a friendly way.)

          First. Using the on(event) type syntax is a technique from Flash 5 days and should have died out in 2002 with the introduction of Flash 6. But it has hung on. However the ability to put code directly onto clips has been removed in AS3 so it if you plan to continue on with Flash and coding it is a good idea to break yourself of that style of coding. Here is a really good article about it.

          http://www.quip.net/blog/2006/flash/museum-pieces-on-and-onclipevent

          Additionally you mention you have several symbols that all need the same type of rollover action so putting code on a frame will be much simpler and easier to maintain.

          In cases where I'm learning new things I find it easier if I set aside my current project and make a simpler test case and then reapply what I've learned to my actual project. I would really recommend that here. So let's create a brand new FLA and put three of your movieclip "buttons" onto the stage.

          Give each one an instance name of something like, myClip0, myClip1, and myClip2. Start with zero. I know it is hard and people really hate to start counting at zero, but if you are going to program you need to learn to do that! I also know that you had descriptive names for these, but it is a lot easier just to count that to go through descriptive names. Later I'll sho you how to get a description back out if you need it.

          I'm assumign that all of the myClips have the animation starting on frame 2? And that they all should start the animation on rollover? So make sure you don't have any of the clips selected and select the frame on the main timeline. Open the AS window. Make sure that it says "Actions- Frames" at the top. If it doesn't you have selected something on the stage. Go back and make sure that you only have the frame selected.

          So now we can put the code that will tell your clips what to do!

          var numClips:Number=3;
          for(var i=0;i<numClips;i++){
          var curClip:MovieClip=this["myClip"+i];
          curClip.gotoAndStop(1);
          curClip.onRollOver=clipOver;
          curClip.onRollOut=clipOut;
          curClip.onReleaseOutSide=clipOut;
          curClip.onRelease=clipRelease;
          curClip.ID=i;
          }

          Okay, so let's look at that. What does it mean? First I set a variable called numClips. That is how many clips I have on stage. This will make it easier if later you want to change it to 7 or 10 or 100!

          Then I start a for loop. It is going to start at zero (counting from zero is good!) and go up to numClips (but not including). So in this case i will be 0 then 1 and finally 2.

          Inside the loop I do the following things. I create a temporary reference to a movieclip. This is by saying look inside this (the current timeline/object) for an item that is called "myClip" plus the variable. So the first time it is looking for myClip0 then next time myClip1 and so on.

          After it gets that temporary reference it sends that clip to frame 1 and stops it there. That is so that the movieclip won't keep playing over and over.

          Next I want to assign a function to each of the different mouse events. These are like the on(event) code you were using before, but it allows you to do them all at once and make sure they are all the same. Notice that some are assigned the same function some are different. The function names on the right side of the equals sign could have any names you want, but I gave them ones that I thought were pretty memorable and easy to understand. Finally at the end I give each clip a property/variable called ID and assigned the value of i to it. In this case the property on the left side could have been called anything, but I wanted it to be something memorable to me.

          This loop will go around 3 times and assign the exact same functions to each of the three clips.

          Okay so far so good. Ya still with me? Of course we haven't said what those different functions are going to do yet. So let's make the first one!

          below the loop add the following code to your frame.

          function clipOver(){
          trace("Rolling over "+this);
          this.gotoAndPlay(2);
          }

          function clipOut(){
          trace("Rolling out "+this);
          this.gotoAndStop(1);
          }

          Okay, so what are those all about? Well the function will be called each time there is an event for one of the clips. The trace isn't needed to make it work, it is just to help you see what is going on. So publish and try it. You will notice that the function gives the full name of the clip you have rolled over. so that is why this.gotoAndPlay(2) tells only the clip that you have rolled over to go and play.

          Now when you try this out you might notice that the clips don't come to the front when you rollOver them. So we should add something to the overClip function. Just add the following line inside that function

          this.swapDepths(1000);

          That says take the current clip and put it on depth 1000. If there is a clip already at 1000, put it where this one came from. If you want to know more about depths in Flash here is a useful article.

          http://www.kirupa.com/developer/actionscript/depths.htm

          Finally if you needed to have names or something different that 0, 1, 2 etc. for your clips. Here is a way to do this. At the start (just before or after the numClips line) add the following line.

          var myClipNames:Array=["ballet","opera","football"]

          Or whatever descriptions you need for your clips. Now lets make each button say its name when you click it. So down with the functions add another function

          function onRelease(){
          trace("You've clicked "+this);
          trace("My name is "+myClipNames[this.ID]);
          }

          Again the traces are only so you can see what is going on. You would maybe want to replace that code with some specific actions based upon which button was clicked. But let's look closer at that second trace. What this is doing is telling flash to get the ID of the current clip. Remember we assigned that value during that first loop so it will have a value of 0, 1, or 2. It is also part of the name myClip0 and so forth but it is just easier to get a number and use it that to break apart a name and try and use that.

          So we have this.ID which is a number and we are saying look inside the array called myClipNames for the element 0, 1, or 2 depending. Arrays in Flash start with the first item at position zero, the second at one and so on. That is why we want to start counting at zero! Arrays are really useful and if you use them you need to start with zero.

          So how is all that? Done your head in yet? Give it a shot and come back and I'm sure you'll have more questions.