Adding a Sprite to the display list in Flex 4

The following example shows how you can add a Sprite to the display object by using the Spark SpriteVisualElement object in Flex 4 and calling the addChild() method.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/20/adding-a-sprite-to-the-display-list-in-flex-4/ -->
<s:Application name="Spark_SpriteVisualElement_addChild_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            private const spr1:Sprite = new Sprite();
            private const spr2:Sprite = new Sprite();
 
            private function init():void {
                spr1.graphics.beginFill(0xFF0000, 0.5);
                spr1.graphics.drawRect(10, 10, 100, 80);
                spr1.graphics.endFill();
                con.addChild(spr1);
 
                spr2.graphics.beginFill(0x0000FF, 0.3);
                spr2.graphics.drawRect(20, 20, 80, 100);
                spr2.graphics.endFill();
                con.addChild(spr2);
            }
        ]]>
    </fx:Script>
 
    <s:SpriteVisualElement id="con" />
 
</s:Application>

[GoogleAdsWide]

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

16 thoughts on “Adding a Sprite to the display list in Flex 4

  1. Hello Peter,

    Thank you for sharing another quite useful technique.
    One question: you declare the sprite as ‘contant’; what’s the advantage in comparison with just ‘var’?

    Thanks,
    Igor Borodin

  2. @Peter. I’ve tried subclassing SpriteVisualElement and then dropping in some FXG but it complains. Also, when you add other Sprites to a SpriteVisualElement object it doesn’t give the SpriteVisualElement the width and height of the new object.

  3. Hi Peter,

    thanks to your post I could add an sprite to a panel :) but how know in FB4 is possible to scale the sprite to the container dimensions?

    thanks in advanced.

  4. hello,
    I have next codes:

    	public function broadCastMeNow(event:Event):void
    		{
    			camId = comments.selectedItem["o_id"];
     
    			//for (var i:int = 0; i &lt; camId.length; i++)
    			//{
    				broadCastMe[camId] = new broadcastNow(camId);
    				connn.addChild(broadCastMe[camId]);
    connn[camId].x=+100;
    			//}
    		}

    my mxml

    <s:Panel includeIn="indexObjectState" id="camPanel" width="100%" height="150" title="Live Webcams"
        <s:layout>
            <s:HorizontalLayout paddingLeft="1" paddingRight="1" paddingTop="1" paddingBottom="1" gap="1" />
        </s:layout>
        <s:Group width="290">
            <s:SpriteVisualElement x="100" id="connn" />
        </s:Group>
    </s:Panel>

    So I want that every new broadcastme be add ext to each other at 100px. How can I do it?

  5. I did it like this, but the old broadcast, doesn’t stay it is replaced with the ew one!
    public function broadCastMeNow(event:Event):void
    {
    camId = comments.selectedItem[“o_id”];

    broadCastMe = new broadcastNow(camId);
    connn.addChild(broadCastMe);
    connn.x += 100;
    }
    s:SpriteVisualElement x=”100″ id=”connn”

  6. Hey,
    is it possible to animate a sprite when it is in an SpriteVisualElement ?
    For example i want to reduce an Sprite Rectangle that is 300 px long every second 10 px ?
    Thank you,
    Mothman

  7. I have the following ActionScript 3.0 class:

    public class ShopRaider extends Sprite {
    public function ShopRaider () {
    // some code
    }

    }

    I have the applications .mxml file as such:

    when i run the application, i get:

    TypeError: Error #1009: Cannot access a property or method of a null object reference. at spark.components.supportClasses::SkinnableComponent/commitProperties()[E:\dev\4.­0.0\frameworks\projects\spark\src\spark\components\supportClasses\SkinnableCompon­ent.as:427] at spark.components::Application/commitProperties()[E:\dev\4.0.0\frameworks\project­s\spark\src\spark\components\Application.as:931] at mx.core::UIComponent/validateProperties()[E:\dev\4.0.0\frameworks\projects\frame­work\src\mx\core\UIComponent.as:7772] …

    Can someone pls tell me where i’m going wrong???

Comments are closed.