Setting a dynamically loaded background image fill on a Spark Border container in Flex 4

In a previous example, “Setting a background image fill on a Spark Border container in Flex 4”, we saw how you could set a background image fill on a Spark Border container in Flex 4 by setting the backgroundImage style to an embedded image.

The following example shows how you can use a dynamically loaded image as a Spark Border container background by using an MX SWFLoader control and setting the backgroundImage style to the SWFLoader control’s content property.

Full code after the jump.

And a big thanks to Jason Szeto for the clever SWFLoader trick!

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/16/setting-a-dynamically-loaded-background-image-fill-on-a-spark-border-container-in-flex-4/ -->
<s:Application name="Spark_Border_backgroundImage_dynamic_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <s:Button label="ColdFusion" click="swfLdr.load('cf_appicon-tn.gif');" />
        <s:Button label="Flash Player" click="swfLdr.load('fl_player_appicon-tn.gif');" />
        <s:Button label="Flex" click="swfLdr.load('fx_appicon-tn.gif');" />
        <s:Button label="Adobe" click="swfLdr.load('http://helpexamples.com/flash/images/logo.png');" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function swfLdr_completeHandler(evt:Event):void {
                brdr.setStyle("backgroundImage", swfLdr.content);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <mx:SWFLoader id="swfLdr" complete="swfLdr_completeHandler(event);" />
    </fx:Declarations>
 
    <s:Border id="brdr"
            backgroundImageFillMode="repeat"
            borderColor="haloOrange"
            borderWeight="10"
            width="320" height="240"
            horizontalCenter="0" verticalCenter="0">
        <s:Label id="sdkVer"
                color="haloOrange"
                fontSize="48"
                fontWeight="bold"
                left="20" top="20"
                creationComplete="sdkVer.text = mx_internal::VERSION;" />
    </s:Border>
 
</s:Application>

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.

4 thoughts on “Setting a dynamically loaded background image fill on a Spark Border container in Flex 4

  1. Just an FYI… I tried this example using AIR (1.5.1) The only thing I did was change Application to Windowed Application. BackgroundImageFillMode was not recognized. controlBarContent did not generate an error, but no buttons appeared on the app. When I removed controlBarContent, leaving the buttons, they all appeared in a stack with the Adobe button on top (I’m guessing because I didn’t use any layout tags).

    1. @Anonymous,

      Which version of the Flex 4 SDK were you using?

      <mx:Label id="ver" initialize="ver.text = mx_internal::VERSION;" />

      I haven’t tried any of these in Adobe AIR, but I’m not sure if the Spark WindowedApplication supports a control bar or not. Feel free to file a bug at http://bugs.adobe.com/flex/ and somebody can take a look if you think it is a bug.

      Peter

  2. Hi,
    I would like to know whether its is possible to access the functions within the flash swf in the flex 3 application..i need such a req in my project..means i want to integrate with the flex..
    Thanks in advance..
    Reny

  3. Has there been an update to this as Flex 4.0 and 4.5 have come out? I cannot for the life of me figure out how to accomplish this. It used to be like two lines of code. Why would someone remove functionality like this and call it an improvement? Seems really odd.

Comments are closed.