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

By Peter deHaan On November 16, 2009 · 4 Comments

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

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.

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

Anonymous says:

November 17, 2009 at 6:12 pm

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

Reply
- Peter deHaan says:
  
  November 17, 2009 at 8:52 pm
  
  @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
  
  Reply
Reny Mohan says:

December 3, 2009 at 4:19 am

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

Reply
Robert says:

August 3, 2011 at 4:17 pm

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.

Reply