The SWFLoader control lets you load one Flex application into another Flex application as a SWF file. 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 application, or a ByteArray representing a SWF, GIF, JPEG, or PNG.

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

Creating a SWFLoader control

You define a SWFLoader control in MXML by 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>
The executing SWF file for the previous example is shown below:

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>
The executing SWF file for the previous example is shown below:

When using the SWFLoader control with an SVG file, you can only load it by 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 Adobe Flex 3 Components.

Interacting with a loaded Flex 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"?>
<!-- controls\swfloader\FlexApp.mxml -->
<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>
The executing SWF file for the previous example is shown below:

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>
The executing SWF file for the previous example is shown below:

Notice that this application loads the SWF file at run time; it does not embed it. For information on embedding a Flex application by 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.

Externalizing application classes

To reduce the size of the applications that you load by 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.

Externalize framework classes

1. Generate the linker report for the loading application:

   mxmlc -link-report=report.xml MyApplication.mxml
   
   

2. Compile the loaded application by using the link report:

   mxmlc -load-externs=report.xml MyLoadedApplication.mxml
   
   

3. Compile the loading application:

   mxmlc MyApplication.mxml
   
   

For more information, see Using the Flex Compilers.

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.