Setting a creation complete effect on a Button control in Flex

The following example shows how you can set a creation complete effect on a Flex Button control by setting the creationCompleteEffect style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/17/setting-a-creation-complete-effect-on-a-button-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Button id="button"
            label="Button"
            creationCompleteEffect="Zoom" />

</mx:Application>

View source is enabled in the following example.

You can also set the creationCompleteEffect style using an external .CSS file or <mx:Style /> block, as seen in the following snippet:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/17/setting-a-creation-complete-effect-on-a-button-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        Button {
            creationCompleteEffect: Zoom;
        }
    </mx:Style>

    <mx:Button id="button"
            label="Button" />

</mx:Application>

Or, you can set the creationCompleteEffect style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/17/setting-a-creation-complete-effect-on-a-button-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

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

            private var button:Button;

            private function init():void {
                button = new Button();
                button.label = "Button";
                button.setStyle("creationCompleteEffect", Zoom);
                addChild(button);
            }
        ]]>
    </mx:Script>

</mx:Application>

4 thoughts on “Setting a creation complete effect on a Button control in Flex

  1. i’ve got this warning:

    CSS type selectors are not supported in components: ‘Button’

  2. You get this warning when you have specified the CSS for DataGrid control and you have not used it in your application.

    Just open the CSS and comment out DataGrid and turned into a style class, The warning would go automatically.

Comments are closed.