Setting a Button control’s icon to an asset from a SWF file in Flex

The following example shows how you can set a Flex Button control’s icon style to an asset from a SWF file using MXML or ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/29/setting-a-button-controls-icon-to-an-asset-from-a-swf-file-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Button label="Bullet Add"
            icon="@Embed(source='icons.swf', symbol='bullet_add')" />
    <mx:Button label="Bullet Delete"
            icon="@Embed(source='icons.swf', symbol='bullet_delete')" />
    <mx:Button label="Bullet Star"
            icon="@Embed(source='icons.swf', symbol='bullet_star')" />

</mx:Application>

View source is enabled in the following example.

You can also use the shortcut embed notation (“source#symbol”), as shown in the following snippet:

<mx:Button label="Bullet Add"
        icon="@Embed('icons.swf#bullet_add')" />
<mx:Button label="Bullet Delete"
        icon="@Embed('icons.swf#bullet_delete')" />
<mx:Button label="Bullet Star"
        icon="@Embed('icons.swf#bullet_star')" />

You can also use [Embed] metadata, and then set the icon using databinding, as shown in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/29/setting-a-button-controls-icon-to-an-asset-from-a-swf-file-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed("icons.swf#bullet_add")]
            public var bulletAddIcon:Class;

            [Bindable]
            [Embed("icons.swf#bullet_delete")]
            public var bulletDeleteIcon:Class;

            [Bindable]
            [Embed("icons.swf#bullet_star")]
            public var bulletStarIcon:Class;
        ]]>
    </mx:Script>

    <mx:Button label="Bullet Add" icon="{bulletAddIcon}" />
    <mx:Button label="Bullet Delete" icon="{bulletDeleteIcon}" />
    <mx:Button label="Bullet Star" icon="{bulletStarIcon}" />

</mx:Application>

View source is enabled in the following example.

And finally, if you wanted to create the Button objects dynamically, you could use something like the following code:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/29/setting-a-button-controls-icon-to-an-asset-from-a-swf-file-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.Button;

            [Embed("icons.swf#bullet_add")]
            public var bulletAddIcon:Class;

            [Embed("icons.swf#bullet_delete")]
            public var bulletDeleteIcon:Class;

            [Embed("icons.swf#bullet_star")]
            public var bulletStarIcon:Class;

            private var addButton:Button;
            private var deleteButton:Button;
            private var starButton:Button;

            private function init():void {
                // Add
                addButton = new Button();
                addButton.label = "Bullet Add";
                addButton.setStyle("icon", bulletAddIcon);
                addChild(addButton);
                // Delete
                deleteButton = new Button();
                deleteButton.label = "Bullet Delete";
                deleteButton.setStyle("icon", bulletDeleteIcon);
                addChild(deleteButton);
                // Star
                starButton = new Button();
                starButton.label = "Bullet Star";
                starButton.setStyle("icon", bulletStarIcon);
                addChild(starButton);
            }
        ]]>
    </mx:Script>

</mx:Application>

View source is enabled in the following example.

8 thoughts on “Setting a Button control’s icon to an asset from a SWF file in Flex

  1. Oh, I also included my source FLA for each of the source code downloads in the previous examples. You’ll need Flash CS3 to open the file.

    Peter

  2. Thanks Peter!

    Problem is Solved….!

    Thanks for the prompt reply…I really appreciate it!

    Thanks once again!

  3. is there any way we can assign, the path for the icon programatically. the icon always expects some sort of enconding and other properties, but what if the path is read from an xml file, then how do we set the path for the icon.

Comments are closed.