Question

In the following code, I have a SpriteVisualElement added before a slider laid out in the Vertical Layout. Whenever I compile and run, the slider always position itself in front of the sprite element instead of below it. Is this a flash bug or am I doing something wrong? Any solution to this problem?

<s:layout>
    <s:VerticalLayout/>
</s:layout>
<s:SpriteVisualElement id="container" includeInLayout="true"/>
<s:HSlider/>

<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;
        protected function creationComplete_handler(event:FlexEvent):void
        {
            var canvas:Shape = new Shape();
            canvas.graphics.lineStyle(1,0);
            canvas.graphics.beginFill(0);
            canvas.graphics.drawRect(0,0,480,360);
            canvas.graphics.endFill();
            container.addChild(canvas);
        }
    ]]>
</fx:Script>

Answer 1

That’s because your SpriteVisualElement doesn’t have a size. Its width and height are 0. You still see the black square because it overflows, but it’s not measured because it’s a pure ActionScript graphic.

So to fix your issue simply give container a size:

<s:SpriteVisualElement id="container" width="480" height="360" />
<s:HSlider/>

includeInLayout is true by default.

---

If all you want to do is draw some shapes though, you’d better use FXG for that. For example your rectangle would become something like this:

<s:Rect width="480" height="360">
    <s:fill>
        <s:SolidColor color="0xff0000" />
    </s:fill>
    <s:stroke>
        <s:SolidColorStroke color="0x00ff00" weight="1" />
    </s:stroke>
</s:Rect>
<s:HSlider/>