First flex css hack

Well, might be not, might be the fact i'm just doing it wrong. I'm using flex 2.

So here is the problem: I want to add sounds to buttons and whatever from css in a similar fasion to skinning. I have a mess of all sorts of buttons everywhere and I don't want to patch all of them with a mouseOverEffect, mouseUpEffect or whatever.

I would think having a <mx:SoundEffect source="@Embed(source='blabla.mp3')" id="foo" /> would make this snippet work (but it doesn't):

Button {
    mouseOverEffect: foo; /* neither does "foo" */
}

So what to do? StyleManager and CSSStyleDeclaration perhaps.

var myDynStyle:CSSStyleDeclaration;
myDynStyle = new CSSStyleDeclaration('Button');
myDynStyle.setStyle("mouseUpEffect", Sounds.clickButtonEffect);
StyleManager.setStyleDeclaration("Button", myDynStyle, true);

This is very cool. Allows me to set behaviors (via Effects) on

whatever object classes.

Except it doesn't work.

I've discovered by accident that setting those effect props to some bogus values in the css beforehand (like Button { mouseUpEffect: none; }) makes that programmatic styling work.

I wonder if this is a flex bug, though by the looks of it seems that is a compile-time vs run-time issue - some stuff that makes the effect work on the buttons is setted only on compile time?