I have a button in the "up" state and when the mouse is over the button, it is supposed to get much bigger in the "over" state. So, the button in the "over" state is 3 times bigger than the button in the "up" state.
However, the problem is the over state button triggers before my mouse touches the up state button. I only want the button to get bigger AFTER the mouse is on the up state button.
I figured out that the over state button is triggering early because my mouse touches the area where it should be even though it's not visible.
Thus, if I move my mouse around the button in up state without touching it, it still gets bigger because my mouse touches the area of the over state button.
How would I fix this so the over state button doesn't trigger until my mouse is actually on the up state button?
If you edit your button symbol, you will see four named frames in your timeline:
The state your button is in when no mouse actions occur.
(Your "small" button state.)
The state your button is in on mouse over.
(Your "big" button state.)
The state your button is in on mouse click.
The area that will accept those mouse events (click, hover).
This area represents the place a person can move their mouse to activate your button. You can make it any shape (or combination of shapes), but it is generally the same as the visible "up" state of your button.
If you copy the keyframe in your "up" state to the frame that is labeled "hit", your button will only react when you hover over that area.
Your hitTestState needs to be the same size as your upState.
One easy way to do that is:
buttonName.hitTestState = buttonName.upState;