Saturday, December 10, 2011

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="" 
               width="500" height="300">

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

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

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

        <s:HorizontalLayout horizontalAlign="center" />

    <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 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}" />