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.
{ 11 comments… read them below or add one }
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
@Igor,
No reason, it was just a silly little example and I knew the Sprite would never change.
Peter
Excellent little example. Thank you!
Peter, can you not add graphics to a SpriteVisualElement object with FXG?
@lee probert,
I’m not sure. What does your FXG look like?
Peter
Thanks, I was looking for this !!
greets Maxim Gladines
@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.
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.
@jcarlos,
You could try setting the Sprite’s width and height to the s:Panel container’s
contentGroupskin part’swidthandheightproperties. For an example, see “Determining the inner content dimensions in a Spark Panel container in Flex 4″.Peter
hello,
I have next codes:
my mxml
So I want that every new broadcastme be add ext to each other at 100px. How can I do it?
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”