flex tabnavigator skin flicker

I am try to skin my tabnavigator with PNG byextend with TabSkin.as and SelectedTabSkin.as, however, when I tried to mouseover the tab buttons, it will caused a flicker into black and load the tab image which I define. What can I do to avoid flicker?

TabSkin.as same as SelectedTabSkin.as but different image

package {
 import mx.controls.Image;

 public class TabSkin extends Image {
    public function TabSkin():void {
        super();
    }


    override protected  function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
        this.source = "asset/bb.png";
        this.styleName = "tab";
        super.updateDisplayList(unscaledWidth, unscaledHeight);
    }

}

}

Tab.MXML

    TabNavigator {
       tabHeight: 39;
       tab-width: 108;
       tabOffset: 1;
       tabStyleName: "tab";
    }

    .tab {
         fillColors: #000000, #000000;
         up-skin: ClassReference("TabSkin");
         down-skin: ClassReference("TabSkin");
         over-skin: ClassReference("T开发者_JAVA技巧abSkin");

    selected-up-skin: ClassReference("SelectedTabSkin");
    selected-down-skin: ClassReference("SelectedTabSkin");
    selected-over-skin: ClassReference("SelectedTabSkin");
    }

    .selectedTab {
         font-weight: bold;
         corner-radius: 0;
    }

<mx:TabNavigator x="223" y="82" width="100%" height="100%" id="tab2"/>

move the this.source = ... out of the updateDisplayList method. That's what's causing the flicker. Override createChildren instead.

Also, hard coding the path this way isn't exactly recommended.