I am working on the fact that there are many different buttons on the screen. Buttons should be made using movie clips, not the actual “buttons”.
I am using Flash CS4 and ActionScript 3.
I created a glow effect around the button on hover. This works fine except that the glow effect creates a hitbox button for the button about twice the width and height of the actual button. I did some research and ended up making a symbol inside a button symbol that contains only the hit area that I want to trigger with a button. This works great for launching a button. Now, when I press the buttons, they light up only when I press the button’s own graphics, and not the field around it from the glow animation. However, the problem is that for some reason the window from the animation still blocks mouse detection on the nearest buttons (if the field overlaps them.)
This may seem confusing, so here is the image:
The green area determines where the mouse activates the glow animation.
The red area defines the actual field for the glow animation symbol.
The yellow area defines the part of the button that does not activate the glow animation, because the red block blocks the mouseover event from being fired.
I left a red frame for the button on the left to make it easier to see the problem, please note, however, that there is actually one of these fields around both buttons, the button on the right was simply placed on the scene AFTER the button on the left, as a result of which its field is above the left button.
NOTE. Both the hit area and the animation are already contained in their own separate characters inside the button symbol. Setting the animation character mouseEnabled and mouseChildren to false doesn't seem like the trick I was hoping for (based on an exploration of this problem.)
NOTE. The animation is not activated (and it is not assumed) when the mouse moves to the red area, it is activated only when the mouse is moved to the green area, this is the desired behavior, the only problem is that I do not want the red box to be detected by mouse events at all.
Here is the code for the button class:
package classes{ import flash.display.MovieClip; import flash.events.MouseEvent; import flash.events.Event; public class glowing_place_marker extends MovieClip { public static var instances:Array = new Array(); public var is_playing:Boolean=false; private var is_mouse_over:Boolean = false; private var animation:MovieClip; public function glowing_place_marker() { this.animation = this.place_marker_animation; this.animation.stop(); this.animation.mouseEnabled = false; this.animation.mouseChildren = false; self:instances.push(this); this.place_marker_hit.addEventListener(MouseEvent.MOUSE_OVER, roll_over_handler); this.place_marker_hit.addEventListener(MouseEvent.MOUSE_OUT, roll_out_handler); } public function roll_over_handler(e:MouseEvent) { this.animation.play(); this.is_playing=true; this.is_mouse_over = true; } public function roll_out_handler(e:MouseEvent) { stage.addEventListener(Event.ENTER_FRAME, checkFrame); this.is_mouse_over = false; } function checkFrame(event:Event):void { if (!this.is_mouse_over) { if (this.animation.currentFrame==1) { stage.removeEventListener(Event.ENTER_FRAME, checkFrame); this.animation.stop(); this.is_playing = false; } } } } }
Can someone explain to me how to get the animation window (red window) so as not to block the buttons under it? (Effectively make a red frame that is not recognized by mouse events, so clicks, hover, etc. Go directly to them under the elements below.)
Thanks in advance.