Custom Event Bubble

Question

I'm new to flex and how it handles Event Bubbling.  I can make a custom event work with this code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               applicationComplete="init()" name="app">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import flash.events.Event;
            import mx.controls.Alert;
            private function init():void {
                addEventListener("myEvent",testListener);
                var testEvent:Event = new Event("myEvent",true);
                dispatchEvent(testEvent);
            private function testListener(event:Event):void {
                Alert.show("Trigger Worked");
        ]]>
    </fx:Script>
</s:Application>
But when I break out the code so the Event fires in a class the parent does not catch it.
MyEvent.as file:
package comp {
    import flash.display.MovieClip;
    import flash.events.Event;
    public class MyEvent extends MovieClip{
        public function MyEvent() {
            var testEvent:Event = new Event("myEvent",true);
            dispatchEvent(testEvent);
TestEvents.mxml file:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               applicationComplete="init()" name="app">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import comp.MyEvent;
            import flash.events.Event;
            import mx.controls.Alert;
            private function init():void {
                addEventListener("myEvent",testListener);
                var tempEvent:MyEvent = new MyEvent();
            private function testListener(event:Event):void {
                Alert.show("Trigger Worked");
        ]]>
    </fx:Script>
</s:Application>
I know I'm missing something simple.  Could someone please point me in the correct direction.
Thanks,
Sol

Answer 1

Thanks for the help!!!  I got it to work using most of your code.  The only change I had to make was move the dispatchEvent out of the construtor and into it's own function.  That way the listener is definded before it fires.
Now I noticed you added the listener to the object itself is this bubbling?  I thought if you have bubbling turned on the main app can have the listener and if a child fires an event it would bubble up.  If the listerner is not on the MyEvent class it does not work.
Here is the new Working code if you take the : tempMyEvent off this line:
addEventListener(MyEvent.MY_EVENT, myEventHandler);
it does not work
Should it?  Should the event bubble up and still be fired?
Below is working code:
MyEvent.as
package comp {
    import flash.display.MovieClip;
    import flash.events.Event;
    public class MyEvent extends MovieClip{
        public static const MY_EVENT:String = 'myEvent';
        public function MyEvent() {}
        public function disEventTest():void {
            dispatchEvent(new Event(MyEvent.MY_EVENT,true));
TestEvents.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               applicationComplete="init()" name="app">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import comp.MyEvent;
            import flash.events.Event;
            import mx.controls.Alert;
            private function init():void {
                var tempMyEvent:MyEvent = new MyEvent();
                tempMyEvent.addEventListener(MyEvent.MY_EVENT, myEventHandler);
                tempMyEvent.disEventTest();
            private function myEventHandler(event:Event):void {
                Alert.show("Trigger Worked");
        ]]>
    </fx:Script>
</s:Application>
Thanks again for your help this will at least get me moving forward again.
Sol