Prefix fx for element fx:Script not bound

Question

Hello!
I am using Flash Builder 4 with SDK 4 of Flex. Now I get the error that "the prefix "fx" for element "fx:Style" is not bound" in row number 4.
I have this file called "UserStory.mxml" in the folder "components" to place it via the main.mxml with
<fx:Script>
        <![CDATA[
            import components.UserStory;
            private function init():void {
                var userStory1:UserStory = new UserStory();
                userStory1.x = 100;
                userStory1.y = 100;
                userStory1.userStoryText = "test";
                this.addChild(userStory1);
        ]]>
    </fx:Script>
to place this component onto the screen.
The file in which the error occurs in row number 4:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="300" height="150" styleName="userstory">
    <fx:Style source="styles/styles.css"/>
    <fx:Text x="5" y="5" width="275" height="135" text="{userStoryText}" fontFamily="notes" fontSize="24"/>
    <mx:Script>
        <![CDATA[
            public var userStoryText:String;
            private function handleDown(e:Event):void {
                this.startDrag();
            private function handleUp(e:Event):void {
                this.stopDrag();
            override protected function createChildren():void {
                super.createChildren();
                super.addEventListener(MouseEvent.MOUSE_DOWN,handleDown);
                super.addEventListener(MouseEvent.MOUSE_UP,handleUp);
        ]]>
    </mx:Script>
</mx:Canvas>
Can someone tell me what's wrong?
Thanks a lot in advance & Best Regards.

Answer 1

The warning "CSS type selectors are not supported in components:   'spark.components.Application'" still exists, but I did this with a skin:
<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:mx="library://ns.adobe.com/flex/mx"
                      mouseUp="skinnablecontainer1_mouseUpHandler(event)"
                      mouseDown="skinnablecontainer1_mouseDownHandler(event)"
                      skinClass="skin.SkinBackgroundImageUserStory"
                      width="300" height="150">
So I create a SkinBackgroundImageUserStory with this content:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Metadata>
        [HostComponent("spark.components.SkinnableContainer")]
    </fx:Metadata>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    <s:BitmapImage source="@Embed('styles/assets/story.png')" left="0" right="0" top="0" bottom="0"/>
    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
</s:Skin>
So I have a background, but there is a problem. Attached a screenshot:
The problem is, the background image is in the background, but I want, that the text of userStoryText is in front and you can see the full background image and not the white area of this text. I can change from
<s:TextArea />
to
<s:Label />
Then it works. Is this okay?
Also, because the CSS does not work, the font family is not used. For that, I do not have a solution and for thar error with the CSS
Perhaps someone has an idea how to solve?