Flex Highlight Container

This component can be used to highlight the current selected item in the component.
you can add any component to this highlight container. Initially the first child will be highlighted. When you click next next children, then the selected child will be highlighted.
To achieve this I have overwrite the 'addChild' function. when adding child I'm decreasing the alpha of every child to '0.5'(This is a default value.you can change it when you use this component). Then I'm changing the alpha of the first child to '1'.I'm adding a mouse click listener to every child to change the alpha of the current child and to change the alpha of the previous child.
I used HBox to implement this cutom component. You can change it to any container...

Usage:

<com:HighLightBox x="0" y="0" childAlpha="0.3"></com:HighLightBox>

Component:HighLightBox.as

package com

{

      import flash.display.DisplayObject;

      import flash.events.MouseEvent;

      import mx.containers.HBox;

      public class HighLightBox extends HBox

      {

          private var oldItem:int=0;

          [Bindable]

          public var childAlpha:Number=0.5;

          public function HighLightBox()

          {

             super();

          }

          override public function addChild(child:DisplayObject):DisplayObject

          {

             super.addChild(child);

             child.alpha=childAlpha;

             this.getChildAt(0).alpha=1;

             child.addEventListener(MouseEvent.CLICK,glower);

             return child;

          }

          private function glower(event:MouseEvent):void

          {

                 

             this.getChildAt(oldItem).alpha=childAlpha;

             (event.currentTarget as DisplayObject).alpha=1;

             oldItem=this.getChildIndex(event.currentTarget 

             as DisplayObject);

          }

      }

}

Application:highLighter.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:com="com.*" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#3D3C3C, #3D3C3C]" viewSourceURL="srcview/index.html">

      <com:HighLightBox dropShadowEnabled="true" childAlpha="0.1" width="1260" height="454" horizontalCenter="0" borderStyle="solid" borderColor="#E1E4E6" cornerRadius="6">

        <mx:Image useHandCursor="true" buttonMode="true" source="assets/poster/titanic.jpg"/>

        <mx:Image useHandCursor="true" buttonMode="true" source="assets/poster/shakespeareinlove.jpg"/>

        <mx:Image useHandCursor="true" buttonMode="true" source="assets/poster/americanbeauty.jpg"/>

        <mx:Image useHandCursor="true" buttonMode="true" source="assets/poster/thedeparted.jpg"/>

      </com:HighLightBox>

      <com:HighLightBox dropShadowEnabled="true" childAlpha="0.1" width="1260" height="300" horizontalCenter="0" y="460" borderStyle="solid" borderColor="#E1E4E6" cornerRadius="6" useHandCursor="true" buttonMode="true">

            <mx:Canvas width="200" height="200" borderStyle="solid" borderColor="#0595FA" backgroundColor="#4998E1" dropShadowEnabled="true">

            </mx:Canvas>

            <mx:Canvas width="200" height="200" borderStyle="solid" borderColor="#08C18A" backgroundColor="#1AE9AC" dropShadowEnabled="true">

            </mx:Canvas>

            <mx:Canvas width="200" height="200" borderStyle="solid" borderColor="#95704D" backgroundColor="#A78059" dropShadowEnabled="true">

            </mx:Canvas>

            <mx:RichTextEditor title="Title" height="290" width="307">

            </mx:RichTextEditor>

            <mx:RichTextEditor title="Title" height="290" width="307">

            </mx:RichTextEditor>

      </com:HighLightBox>

</mx:Application>

See Demo Here

Get Source here

Flex-Form Validation using Validator classes

Problem

          Quick Form Validation Using Validators

Solution

          Validating a form using the StringValidator, NumberValidator, ZipCodeValidator and Validator classes.These are the Flex classes to validate a form. However you can writeyour own validators. Here I have posted a validated form using the validators. Copy and Paste this code to your flex builder to use this application.

Source 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  height="305" width="474" borderStyle="solid" borderThickness="0" cornerRadius="0" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#6C6A6A, #6C6A6A]">
  
    <mx:Model id="checkModel">
        <User>
            <FirstName>{fname.text}</FirstName>
            <LastName>{lname.text}</LastName>
            <DOB>{dob.text}</DOB>
            <Email>{email.text}</Email>
            <Age>{age.text}</Age>
            <Zip>{zip.text}</Zip>
            <Phone>{phone.text}</Phone>
        </User>
    </mx:Model>
  
    <mx:Panel title="Form Container: Moving from one form field to another triggers the validator" layout="absolute"
        color="#D7A200" borderAlpha="0.15" paddingTop="0" paddingRight="10" paddingBottom="10"
         verticalScrollPolicy="off" paddingLeft="10" horizontalAlign="center" borderStyle="solid" cornerRadius="10" x="3" y="3" backgroundColor="#7D7A7A" borderThickness="1" borderColor="#545151" height="297">

        <mx:Form width="100%" color="0x323232" paddingTop="0" x="10" y="0">
            <mx:FormHeading fontSize="10"  label="Enter values into the form." paddingTop="0"  color="#FFFFFF"/>

            <mx:FormItem label="First name" color="#FFFFFF">
                <mx:TextInput id="fname" width="200" color="#000000"/>
            </mx:FormItem>
          
            <mx:FormItem label="Last name" color="#FFFFFF">
                <mx:TextInput id="lname" width="200" color="#000000"/>
            </mx:FormItem>

            <mx:FormItem label="Date of birth (mm/dd/yyyy)" color="#FFFFFF">
                <mx:TextInput id="dob" width="200" color="#000000"/>
            </mx:FormItem>

            <mx:FormItem label="E-mail address" color="#FFFFFF">
                <mx:TextInput id="email" width="200" color="#000000"/>
            </mx:FormItem>

            <mx:FormItem label="Age" color="#FFFFFF">
                <mx:TextInput id="age" width="200" color="#000000"/>
            </mx:FormItem>

            <mx:FormItem label="Zip" color="#FFFFFF">
                <mx:TextInput id="zip" width="200" color="#000000"/>
            </mx:FormItem>

            <mx:FormItem label="Phone" color="#FFFFFF">
                <mx:TextInput id="phone" width="200" color="#000000"/>
            </mx:FormItem>
        </mx:Form>
   
    </mx:Panel>  
    <mx:StringValidator source="{fname}" property="text" minLength="4" maxLength="12"/>
    <mx:StringValidator source="{lname}" property="text" minLength="4" maxLength="12"/>
    <mx:PhoneNumberValidator source="{phone}" property="text"/>
    <mx:DateValidator source="{dob}" property="text"/>
    <mx:EmailValidator source="{email}" property="text"/>
    <mx:NumberValidator source="{age}" property="text" integerError="Enter Integer value"
        minValue="18" maxValue="100" domain="int"/>
    <mx:ZipCodeValidator source="{zip}" property="text"/>
</mx:Application>

Export Release Build-Reduce File size in Flex

Problem
How to reduce SWF size in flex?

Solution
When preparing a Flex project for deployment, always make sure to export a release build. I think most people know about this feature of FlexBuilder, but I'm not sure everyone is aware of just how important it is. The SWF that is generated when you run or debug your project contains a lot of extra byte code used for debugging and profiling your content.
This extra byte code has a very obvious effect on the size of your SWF (adding over 35% in some cases). It also has a less immediately obvious (but no less significant) effect on the performance of your application. In one sample, a 980kb SWF was reduced to 675kb, and some performance intensive code ran over 2.5x faster in the release build than in the debug version.
Never deploy a project without exporting a release build, and be sure to test a release build if you are experiencing problems with file size, performance, or memory utilization.

Rounded Corner Image in Flex

Problem
By default, the mx:Image component does not allow rounded corners.

Solution

                 Extend the mx:Image component to handle rounded corners by using a mask. You could also try extending other components, i.e. a Canvas, and it will also work. I have a couple projects where I round off a Canvas, and place items in it to achieve a certain look.

Usage:

<RoundedImage source="someImage.jpg" width="250" height="250" cornerRadius="15"/>

Source:

package com

{
 import mx.controls.Image;
 import mx.core.UIComponent;
 
 public class RoundedImage extends Image
 {
  protected var roundedMask:UIComponent;
  protected var cornerRad:int;
  
  public function RoundedImage()
  {
   super();
  }
  
  public function get cornerRadius():int
  {
   return cornerRad;
  }
  
  public function set cornerRadius(radius:int):void
  {
   cornerRad = radius;
  }
  
  override protected function createChildren():void
  {
   super.createChildren();
   
   this.roundedMask = new UIComponent();
   this.addChild(roundedMask);
  }
  
  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
  {
   super.updateDisplayList(unscaledWidth, unscaledHeight);
   
   roundedMask.graphics.clear();
   roundedMask.graphics.beginFill(0x000000);
   roundedMask.graphics.drawRoundRectComplex(0, 0, unscaledWidth, unscaledHeight, cornerRad, cornerRad, cornerRad, cornerRad);
   roundedMask.graphics.endFill();
   
   this.mask = roundedMask;
  }
 }
}