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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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>

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.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

16 Responses to Adding a Sprite to the display list in Flex 4

  1. Anonymous says:

    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. Joel says:

    Excellent little example. Thank you!

  3. lee probert says:

    Peter, can you not add graphics to a SpriteVisualElement object with FXG?

  4. Thanks, I was looking for this !!
    greets Maxim Gladines

  5. lee probert says:

    @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.

  6. jcarlos says:

    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.

  7. daka says:

    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?

  8. daka says:

    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”

  9. Mothman says:

    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

  10. codemaniac says:

    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???

  11. codemaniac says:

    oh… forgot to give mxml: