Adding a Sprite to the display list in Flex 4

By Peter deHaan On November 20, 2009 · 16 Comments

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: AddChild • Gumbo

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.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

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

Anonymous says:

November 21, 2009 at 8:30 am

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
- Peter deHaan says:
  
  November 21, 2009 at 8:54 pm
  
  @Igor,
  
  No reason, it was just a silly little example and I knew the Sprite would never change.
  
  Peter
Joel says:

March 2, 2010 at 5:36 pm

Excellent little example. Thank you!
lee probert says:

March 15, 2010 at 12:13 pm

Peter, can you not add graphics to a SpriteVisualElement object with FXG?
- Peter deHaan says:
  
  March 16, 2010 at 12:32 am
  
  @lee probert,
  
  I’m not sure. What does your FXG look like?
  
  Peter
Maxim Gladines says:

March 17, 2010 at 4:04 pm

Thanks, I was looking for this !!
greets Maxim Gladines
lee probert says:

March 24, 2010 at 10:10 am

@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.
jcarlos says:

April 11, 2010 at 7:42 am

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.
- Peter deHaan says:
  
  April 12, 2010 at 11:02 am
  
  @jcarlos,
  
  You could try setting the Sprite’s width and height to the s:Panel container’s contentGroup skin part’s width and height properties. For an example, see “Determining the inner content dimensions in a Spark Panel container in Flex 4″.
  
  Peter

daka says:

April 24, 2010 at 2:51 am

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?

daka says:

April 26, 2010 at 12:00 am

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”
Mothman says:

December 14, 2010 at 8:20 am

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
hrpatidar says:

January 27, 2011 at 11:38 am

Nice example….
codemaniac says:

May 4, 2011 at 1:28 am

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\SkinnableComponent.as:427] at spark.components::Application/commitProperties()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\components\Application.as:931] at mx.core::UIComponent/validateProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:7772] …

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

May 4, 2011 at 1:52 am

oh… forgot to give mxml:
codemaniac says:

May 4, 2011 at 1:53 am