SWFLoader control -- Flex 2.01

The SWFLoader control lets you load one Flex 2 application into another Flex application. It has properties that let you scale its contents. It can also resize itself to fit the size of its contents. By default, content is scaled to fit the size of the SWFLoader control. The SWFLoader control can also load content on demand programmatically, and monitor the progress of a load operation.

The SWFLoader control also lets you load the contents of a GIF, JPEG, PNG, SVG, or SWF file into your application, where the SWF file does not contain a Flex 2 application.

A SWFLoader control cannot receive focus. However, content loaded into the SWFLoader control can accept focus and have its own focus interactions.

Property	Default value
Default size	Width and height large enough for the loaded content
Minimum size	0
Maximum size	Undefined

Subtopics

Creating a SWFLoader control

You define a SWFLoader control in MXML using the <mx:SWFLoader> tag, as the following example shows. Specify an id value if you intend to refer to a component elsewhere in your MXML, either in another tag or in an ActionScript block.

<?xml version="1.0"?>
<!-- controls\swfloader\SWFLoaderSimple.mxml-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:SWFLoader id="loader1" source="FlexApp.swf"/> 
</mx:Application>

Like the Image control, you can also use the Embed statement with the SWFLoader control to embed the image in your application, as the following example shows:

<?xml version="1.0"?>
<!-- controls\swfloader\SWFLoaderSimpleEmbed.mxml-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:SWFLoader id="loader1" source="@Embed(source='flexapp.swf')"/> 
</mx:Application>

When using the SWFLoader control with an SVG file, you can only load it using an Embed statement; you cannot load an SVG file at run time. For more information about embedding resources, see the description for the Image control at About importing images, and Embedding Assets.

This technique works well with SWF files that add graphics or animations to an application, but are not intended to have a large amount of user interaction. If you import SWF files that require a large amount of user interaction, you should build them as custom components. For more information on custom components, see Creating and Extending Flex 2 Components.

Interacting with a loaded Flex 2 application

The following example, in the file FlexApp.mxml, shows a simple Flex application that defines two Label controls, a variable, and a method to modify the variable:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    height="200" width="200">

    <mx:Script>
        <![CDATA[
            [Bindable]
            public var varOne:String = "This is a public variable";

            public function setVarOne(newText:String):void {
                varOne=newText;
            }
        ]]>
    </mx:Script>

    <mx:Label id="lblOne" text="I am here"/>
    <mx:Label text="{varOne}"/>

    <mx:Button label="Nested Button" click="setVarOne('Nested button pressed.');"/>

</mx:Application>

You compile this example into the file FlexApp.SWF, and then use the SWFLoader control to load it into another Flex application, as the following example shows:

<?xml version="1.0"?>
<!-- controls\swfloader\SWFLoaderInteract.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            import mx.managers.SystemManager;
            import mx.controls.Label;
            
            [Bindable]
            public var loadedSM:SystemManager;

            // Initialize variables with information from
            // the loaded application.
            private function initNestedAppProps():void {
                loadedSM = SystemManager(myLoader.content);
            }

            // Update the Label control in the outer application
            // from the Label control in the loaded application.
            public function updateLabel():void {
                lbl.text=loadedSM.application["lblOne"].text;
            }

            // Write to the Label control in the loaded application.
            public function updateNestedLabels():void {
                loadedSM.application["lblOne"].text = "I was just updated";
                loadedSM.application["varOne"] = "I was just updated";
            }

            // Write to the varOne variable in the loaded application
            // using the setVarOne() method of the loaded application.
            public function updateNestedVarOne():void {
                FlexApp(loadedSM.application).setVarOne("Updated varOne!");
            }
        ]]>
    </mx:Script>

    <mx:Label id="lbl"/>
    <mx:SWFLoader id="myLoader" width="300"
        source="FlexApp.swf"
        creationComplete="initNestedAppProps();"/>
    
    <mx:Button label="Update Label Control in Outer Application" 
        click="updateLabel();"/>
    <mx:Button label="Update Nested Controls" 
        click="updateNestedLabels();"/>    
    <mx:Button label="Update Nexted varOne" 
        click="updateNestedVarOne();"/>
</mx:Application>

Notice that this application loads the SWF file at run time, it does not embed it. For information on embedding a Flex 2 application using the SWFLoader tag, see Embedding Assets.

In the preceding example, you use the creationComplete event of the SWFLoader control to initialize two variables; the first contains a reference to the SystemManager object for the loaded Flex application, and the second contains a reference to the Label control in the loaded application.

When a user clicks the first Button control in the outer application, Flex copies the text from the Label control in the loaded application to the Label control in the outer application.

When a user clicks the second Button control, Flex writes the text to the Label control and to the varOne variable defined in the loaded application.

When a user clicks the third Button control, Flex uses the setVarOne() method of the loaded application to write to the varOne variable defined in the loaded application.

Using the SWFLoader control to load a Flex Data Services application

Flex Data Services users can use the SWFLoader control to load a Flex application. The following code example loads the file buttonicon.mxml, where buttonicon.mxml is the example found in Embedding an icon in a Button control:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:SWFLoader source="buttonicon.mxml.swf" scaleContent="false"/> 
</mx:Application>

In this example, you specify the value of the source property as "buttonicon.mxml.swf". Adobe Flex Data Services compiles the file buttonicon.mxml, and returns the SWF file to the main application. If you had specified the value as "buttonicon.swf", Flex Data Services returns the SWF file if it exists, but will not compile buttonicon.mxml if it does not.

Externalizing application classes

To reduce the size of the applications that you load using the SWFLoader control, you can instruct the loaded application to externalize framework classes that are also included by the loading application. The result is that the loaded application is smaller because it only includes the classes it requires, while the framework code and other dependencies are included in the loading application.

To externalize framework classes, you generate a linker report from the loading application by using link-report option to the mxmlc command. You then use the load-externs option to the mxmlc compiler to specify this report when you compile the loaded application.

To externalize framework classes:

For more information, see Using the Flex Compilers in Building and Deploying Flex 2 Applications.

Sizing a SWFLoader control

You use the SWFLoader control's scaleContent property to control the sizing behavior of the SWFLoader control. When the scaleContent property is set to true, Flex scales the content to fit within the bounds of the control. However, images will still retain their aspect ratio by default.