Bubbling effect scripted
The menu is built in the following way. We have a movieclip, which is connected to a script, which places the Menubutton on stage. When the Menubutton is clicked, a child is produced, which is the Linkbutton (see the MenuButton class). In the following I start with the Linkbutton script. The first part is the class declaration, import of classes and since it is a button we add mouse event handlers.
package scripts
{
import flash.display.MovieClip;
import flash.events.MouseEvent;
//
import flash.text.TextField;
import flash.display.Sprite;
//
public class LinkButton_b extends MovieClip
{
public function LinkButton_b ()
{
addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
Next we have the individual mouse event handler functions. Here it is where bubbling occurs and the event is also triggered in the parent, the Menubutton. We can prevent bubbling by adding "event.stopPropagation ();", what we do for all events except the mouseUpHandler event. We don't want to prevent bubbling there, because we want the mouseUpHandler event be triggered in the parent button as well to eliminate the Linkbutton.
private function mouseOutHandler (event:MouseEvent):void
{
event.stopPropagation (); // prevents bubbling
event.currentTarget.gotoAndPlay("frame11");
}
private function mouseOverHandler (event:MouseEvent):void
{
event.stopPropagation ();
this.gotoAndPlay("frame2");
}
private function mouseDownHandler (event:MouseEvent):void
{
event.stopPropagation ();
event.currentTarget.gotoAndStop("frame11");
}
private function mouseUpHandler (event:MouseEvent):void
{
// link button functions here
}
}
}
This is the important part in the Menubutton, the mouseUpHandler event. If we prevented bubbling in the Linkbutton script, this event would not be triggered and the Linkbutton would not disappear after it was pressed as in the left example.
private function mouseUpHandler (event:MouseEvent):void
{
if (indexArray.length > 0)
{
for (count01 = 0; count01 < indexArray.length; count01++)
{
myClip.removeChild(indexArray[count01]);
}
}
}
Here we create the Linkbutton(s) and add it to an array, which we use to delete it.
private function mouseDownHandler (event:MouseEvent):void
{
indexArray = new Array ();
var lButton:LinkButton = new LinkButton ();
this.addChild (lButton);
indexArray.push (lButton);
}