Flex4: Resize Effect

This example shows you how to use the resizeEffect along with a simple fade effect to make it look smooth!

The Resize Effect is pretty straight forward; there are just a few simple rules:

• Make sure the object you want to resize has a width and height of 100%.
• Create enough space within your application.

Here is the full source:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 

               width="500" height="300">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            protected function addImage(event:MouseEvent):void
            {
                myImage.visible = true;
                myImage.includeInLayout = true;
            }

            protected function removeImage(event:MouseEvent):void
            {
                myImage.visible = false;
                myImage.includeInLayout = false;
            }

        ]]>
    </fx:Script>

    <fx:Declarations>
        <s:Fade duration="2000" alphaFrom="0" alphaTo="1" id="fadeIn" />    
        <s:Fade duration="100" alphaFrom="1" alphaTo="0" id="fadeOut" />        
    </fx:Declarations>

    <s:layout>
        <s:HorizontalLayout horizontalAlign="center" />
    </s:layout>

    <s:VGroup verticalAlign="middle" horizontalAlign="center" paddingTop="10">
        <s:HGroup verticalAlign="middle" horizontalAlign="center" paddingLeft="10" paddingRight="10">
            <s:Button label="Add image!" click="addImage(event)"/>
            <s:Button label="Remove image!" click="removeImage(event)"/>
        </s:HGroup>
        <s:HGroup verticalAlign="middle" horizontalAlign="center">
            <s:Panel width="100%" height="100%" title="I'm a resizable Panel!" resizeEffect="Resize">
                <mx:Image id="myImage" source="<your image path>/images/header.png" 

                          visible="false" includeInLayout="false"
                          showEffect="{fadeIn}" hideEffect="{fadeOut}" />
            </s:Panel>
        </s:HGroup>
    </s:VGroup>
</s:Application>