Never have to use buttons again :)

programming classic bestof
1

If you’re like me and enjoy working only with movie clip symbols, you’ll quickly come to realize that giving them the functionality of a button symbol is not a simple task.

This short tutorial will demonstrate how you can make any movie clip act like a button *. Here’s a quick rundown of the steps you need to take.

  1. In frame 1 on layer called actions in the root level, write the following in a new key frame.

MovieClip.prototype.mouseOver() {
  if (this.hitTest (_root._x, _root._y) == true) {
    return true;
  } else {
    return false;
  }
}

This type of function is a prototype function that is automatically inhereted by all movie clips when an SWF is loaded.

  1. To illustrate how to use the function we created, create a new movie clip on the root level. We’re going to make the color of the movie clip change when the mouse goes over the movie clip, and make it change again when you click it.

  2. Insert the following script as an object action. That is, right-click the movie clip you created (while on the stage) and click Actions.


onClipEvent (load) {
  var mouseOverColor = 0xFF0000; //red
  var mouseDownColor = 0x00FF00; //green
  var mouseOutColor = 0x0000FF; //blue
  var init = false;
  var mouseDown = false;
}

onClipEvent (mouseMove) {
  if (this.mouseOver() == true) {
    if (this.init == false) {
      this.temp = new Color(this);
      this.temp.setRGB(this.mouseOverColor);
      this.init = true;
    }
  }

  else {
    if (this.init == true) {
    this.temp.setRGB(this.mouseOutColor);
    this.init = false;
  }
}

onClipEvent (mouseDown) {
  if (this.mouseOver() == true) {
    if (this.mouseDown == false) {
      this.temp.setRGB(this.mouseDownColor);
      this.mouseDown = true;
    }
  }
}

onClipEvent (mouseOut) {
  if (this.mouseDown == true) {
    temp.setRGB(this.mouseOutColor);
    this.mouseDown = false;
  }
}

That’s it! Note that you can do whatever you like within the if/else statements. For example, you could play a movie clip within your button movie clip, or simply go to another frame of the clip instead of using the Color object to change the mc’s color.

If something doesn’t work please let me know, I pretty much did this off the top of my head. I’m sure this works in Flash MX and it should also work in Flash 5 as well.

Movie clips rock :slight_smile:

Matt

*Note that by using the hitTest() method, you restrict the hit area of the button to the square containing the movie clip. This isn’t always a bad thing however.

2

Hey ptolemy,
Thanks for that! I’ll add this along with the one on international characters you posted. I am sorry for having delayed so long in adding your articles to the site :frowning:

Cheers!
Kirupa :rambo:

3

Hey ptolemy,
I added your international characters tutorial up. Did you intend the code above to be used with Flash 5? If mc’s in Flash MX already support buttons, wouldn’t it be easier to user Pom’s method?

Thanks,
Kirupa :rambo:

4

Hum, Ptolemy, that’s cool, but in MX, mc already have button handlers… You can on (press,rollOver) and whatever you like. But in Flash 5, yeah, why not.

pom :asian:

5

I always make that error when I do the code. Thanks for pointing it out : )

-ptolemy

6

No problem :slight_smile:

Ptolemy

7

Pom is right, it wouldn’t make much sense to use my code in MX. For the Flash 5 users though, I think it makes sense. I think putting it in the Flash 5 section would be better.

-Ptolemy

8

w3rd, that helped me out a lot :), just a few erros in your AS, but nothing major :o

MovieClip.prototype.mouseOver() {
  if (this.hitTest (_root.[COLOR=red]_xmouse[/COLOR], _root.[COLOR=red]_ymouse[/COLOR]) == true) {
    return true;
  } else {
    return false;
  }
}

and you were missing a } at the end of mouseMove and there is no mouseOut for onClipEvent :slight_smile:

thanks