hi! readers

Flex Borders

here uses the TileBorder box can show three type of layouts

* Absolute

* Vertical

* Horizantal

  

 

Layouts

let shows code here
Source code:

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application

xmlns:mx=”http://www.adobe.com/2006/mxml“

layout=”absolute” backgroundColor=”0xffffff“

xmlns:ui=”com.chip.utility.ui.*“>

<mx:Style>

.blueBorder {

border-color: #0000ff;

background-color: #e0e0e0;

}

.title2 {

color: #aa0000;

font-weight: bold;

}

.title3 {

color: #00aa00;

text-decoration: underline;

}

</mx:Style>

<ui:TitledBorderBox x=”10” y=”10“

title=”Absolute Layout” layout=”absolute“>

<mx:Button label=”First“/>

<mx:Button label=”Second“/>

<mx:Button label=”Third“/>

</ui:TitledBorderBox>

<ui:TitledBorderBox x=”150” y=”10” borderDropShadow=”true“

title=”Vertical Layout” titleStyleName=”title2” layout=”vertical“>

<mx:Button label=”First“/>

<mx:Button label=”Second“/>

<mx:Button label=”Third“/>

<mx:Label text=”Drop shadow tool“/>

</ui:TitledBorderBox>

<ui:TitledBorderBox x=”285” y=”10” styleName=”blueBorder“

title=”Horizontal Layout” titleStyleName=”title3” layout=”horizontal“>

<mx:Button label=”First“/>

<mx:Button label=”Second“/>

<mx:Button label=”Third“/>

</ui:TitledBorderBox>

</mx:Application>

TitleBox.as
package com.chip.utility.ui
{
import flash.display.DisplayObject;
import flash.display.Graphics;
import flash.events.Event;
import flash.events.TextEvent;
import flash.filters.DropShadowFilter;
import flash.geom.Rectangle;
import flash.text.TextLineMetrics;

import mx.containers.BoxDirection;
import mx.containers.utilityClasses.BoxLayout;
import mx.containers.utilityClasses.CanvasLayout;
import mx.containers.utilityClasses.ConstraintColumn;
import mx.containers.utilityClasses.ConstraintRow;
import mx.containers.utilityClasses.IConstraintLayout;
import mx.containers.utilityClasses.Layout;
import mx.core.Container;
import mx.core.ContainerLayout;
import mx.core.EdgeMetrics;
import mx.core.IFlexModuleFactory;
import mx.core.IFontContextComponent;
import mx.core.IUITextField;
import mx.core.UIComponent;
import mx.core.UITextField;
import mx.core.UITextFormat;
import mx.styles.CSSStyleDeclaration;
import mx.styles.StyleManager;

/**
* Alpha of the title bar, control bar and sides of the Panel.
* The default value is 1.
*/
[Style(name="borderAlpha", type="Number", inherit="no")]

/**
* Number of pixels between the children when a horizontal layout is used.
* @default 8
*/
[Style(name="horizontalGap", type="Number", format="Length", inherit="no")]

/**
* Number of pixels between the children when a vertical layout is used.
* @default 6
*/
[Style(name="verticalGap", type="Number", format="Length", inherit="no")]

/**
* Number of pixels between the container’s left border and its content area.
* @default 5
*/
[Style(name="paddingLeft", type="Number", format="Length", inherit="no")]

/**
* Number of pixels between the container’s top border and its content area.
* @default 20
*/
[Style(name="paddingTop", type="Number", format="Length", inherit="no")]

/**
* Number of pixels between the container’s right border and its content area.
* @default 5
*/
[Style(name="paddingRight", type="Number", format="Length", inherit="no")]

/**
* Number of pixels between the container’s lower border and its content area.
* @default 5
*/
[Style(name="paddingBottom", type="Number", format="Length", inherit="no")]

/**
* Style declaration name for the text in the title border.
* The default value is "windowStyles",
* which causes the title to have boldface text.
* @default “windowStyles”
*/
[Style(name="titleStyleName", type="String", inherit="no")]

[IconFile("TitledBorder.png")]

/**
* This container has a title TextField and draws a border around the container except
* for where the title TextField is located. A lot of this class is copied from the Panel class.
* Like the Panel class it has a title and layout properties.
*
*

	 *  <ui:TitledBorderBox
 	 *   Properties
 	 *   layout="vertical|horizontal|absolute"
	 *   title=""
	 *   borderDropShadow="false"
	 *   Styles
	 *   backgroundAlpha="1"
	 *   backgroundColor="NaN"
 	 *   borderAlpha="1"
 	 *   borderColor="#000000"
 	 *   borderThickness="1"
 	 *   cornerRadius="0"
 	 *   horizontalGap="8"
	 *   paddingLeft="5"
	 *   paddingTop="20"
	 *   paddingRight="5"
	 *   paddingTop="5"
	 *   verticalGap="6"
	 *   titleStyleName="windowStyles"
 	 * >
 	 *      ...
 	 *      child tags
 	 *      ...
 	 *  </ui:TitledBorderBox>
 	 *

*
* @author Chris Callendar
* @date April 1st, 2009
*/
public class TitledBorderBox extends Container implements IConstraintLayout, IFontContextComponent
{
// setup the default styles
private static var classConstructed:Boolean = classConstruct();
private static function classConstruct():Boolean {
var style:CSSStyleDeclaration = StyleManager.getStyleDeclaration(“TitledBorderBox”);
if (!style) {
style = new CSSStyleDeclaration();
}
style.defaultFactory = function():void {
this.backgroundAlpha = 1;
this.backgroundColor = NaN; // no default
this.borderColor = 0×0;
this.borderThickness = 1;
this.borderAlpha = 1;
this.horizontalGap = 8;
this.paddingLeft = 5;
this.paddingTop = 20;
this.paddingRight = 5;
this.paddingBottom = 5;
this.titleStyleName = “windowStyles”;
this.verticalGap = 6;
};
StyleManager.setStyleDeclaration(“TitledBorderBox”, style, true);
return true;
};

private var layoutObject:Layout;
private var _title:String;
private var titleTextField:IUITextField;
private var titleChanged:Boolean;
private var border:UIComponent;
private var _borderDropShadow:Boolean;

public function TitledBorderBox() {
super();
layoutObject = new BoxLayout();
layoutObject.target = this;
titleChanged = true;
_borderDropShadow = false;
}

[Bindable("titleChanged")]
[Inspectable(category="General")]
public function get title():String {
return _title;
}

public function set title(t:String):void {
_title = (t != null ? t : “”);
if (titleTextField) {
titleTextField.text = _title;
titleTextField.toolTip = _title;
titleTextField.invalidateSize();
titleChanged = true;
invalidateDisplayList();
}
dispatchEvent(new TextEvent(“titleChanged”, false, false, _title));
}

[Bindable("borderDropShadowChanged")]
[Inspectable(category="General")]
/** Adds a DropShadowFilter to the border. False by default. */
public function get borderDropShadow():Boolean {
return _borderDropShadow;
}

public function set borderDropShadow(dropShadow:Boolean):void {
if (dropShadow != _borderDropShadow) {
_borderDropShadow = dropShadow;
if (border) {
border.filters = (dropShadow ? [ new DropShadowFilter(2, 45, 0x0, 0.4) ] : []);
}
dispatchEvent(new Event(“borderDropShadowChanged”));
}
}

override protected function createChildren():void {
super.createChildren();
createTitleTextField();
}

/**
* Creates the title text field child and adds it as a child of this component.
* @param childIndex The index of where to add the child.
* If -1, the text field is appended to the end of the list.
*/
protected function createTitleTextField(childIndex:int = -1):void {
// Create the titleTextField as a child of the titleBar.
if (!titleTextField) {
titleTextField = IUITextField(createInFontContext(UITextField));
titleTextField.selectable = false;
if (childIndex == -1) {
rawChildren.addChild(DisplayObject(titleTextField));
} else {
rawChildren.addChildAt(DisplayObject(titleTextField), childIndex);
}
var titleStyleName:String = getStyle(“titleStyleName”);
titleTextField.styleName = titleStyleName;
titleTextField.text = title;
titleTextField.enabled = enabled;
titleTextField.x = 15;
titleTextField.y = 1;
}
}

override protected function createBorder():void {
if (!border && isBorderNeeded()) {
border = new UIComponent();
border.filters = (borderDropShadow ? [ new DropShadowFilter(2, 45, 0x0, 0.4) ] : []);
// add first to put below all child components
rawChildren.addChildAt(border, 0);
}
}

private function isBorderNeeded():Boolean {
var bgAlpha:Number = getNumberStyle(“backgroundAlpha”, 1);
var bgColor:Number = getStyle(“backgroundColor”);
var bt:Number = getNumberStyle(“borderThickness”, 1);
var ba:Number = getNumberStyle(“borderAlpha”, 1);
return (!isNaN(bgColor) && (bgAlpha > 0)) || ((bt > 0) && (ba > 0));
}

/**
* Returns an EdgeMetrics object that has four properties:
* left, top, right,
* and bottom ONLY if the layout is absolute.
* Otherwise the padding is used.
*/
override public function get borderMetrics():EdgeMetrics {
if (border && (layout == ContainerLayout.ABSOLUTE)) {
var l:Number = getNumberStyle(“paddingLeft”, 5);
var t:Number = getNumberStyle(“paddingTop”, 20);
var r:Number = getNumberStyle(“paddingRight”, 5);
var b:Number = getNumberStyle(“paddingBottom”, 5);
return new EdgeMetrics(l, t, r, b);
}
return EdgeMetrics.EMPTY;
}

override public function styleChanged(styleProp:String):void {
var allStyles:Boolean = !styleProp || styleProp == “styleName”;
super.styleChanged(styleProp);
if (allStyles || styleProp == “titleStyleName”) {
if (titleTextField) {
var titleStyleName:String = getStyle(“titleStyleName”);
titleTextField.styleName = titleStyleName;
titleChanged = true;
}
}
}

override protected function measure():void {
super.measure();
layoutObject.measure();

var measuredSize:Rectangle = measureTitleText();
var paddingW:int = 38;
measuredMinWidth = Math.max(measuredSize.width + paddingW, measuredMinWidth);
measuredWidth = Math.max(measuredSize.width + paddingW, measuredWidth);
}

private function measureTitleText():Rectangle {
var textWidth:Number = 20;
var textHeight:Number = 14;
if (titleTextField && titleTextField.text) {
titleTextField.validateNow();
var textFormat:UITextFormat = titleTextField.getUITextFormat();
var metrics:TextLineMetrics = textFormat.measureText(titleTextField.text, false);
textWidth = metrics.width;
textHeight = metrics.height;
}
return new Rectangle(0, 0, Math.round(textWidth), Math.round(textHeight));
}

/**
* Size the title textfield.
*/
protected function sizeTitleTextField(w:Number, h:Number):void {
if (titleChanged) {
var padding:int = 38;
var measuredW:Number = titleTextField.measuredWidth;
var measuredH:Number = titleTextField.measuredHeight;
var widthWithPadding:Number = measuredW + padding;
if (!isNaN(explicitWidth)) {
// explicit width set – make the title textfield smaller if necessary
if (explicitWidth < widthWithPadding) { measuredW = Math.max(0, explicitWidth – padding); } } titleTextField.setActualSize(measuredW, measuredH); titleChanged = false; } } override protected function updateDisplayList(w:Number, h:Number):void { super.updateDisplayList(w, h); layoutObject.updateDisplayList(unscaledWidth, unscaledHeight); sizeTitleTextField(w, h); drawBorder(w, h); } protected function drawBorder(w:Number, h:Number):void { if (border) { var tfx:Number = titleTextField.x; var tfy:Number = titleTextField.y; var tfw:Number = titleTextField.width; var tfh:Number = titleTextField.height; var hasTitle:Boolean = (titleTextField.text.length > 0);

var bgAlpha:Number = getNumberStyle(“backgroundAlpha”, 1);
var bgColor:Number = getStyle(“backgroundColor”);
var borderThickness:int = getNumberStyle(“borderThickness”, 1);
var borderColor:uint = uint(getNumberStyle(“borderColor”, 0×0));
var borderAlpha:Number = getNumberStyle(“borderAlpha”, 1);
var cornerRadius:uint = uint(getNumberStyle(“cornerRadius”, 0));

var spacing:int = 4; // same as UITextField.TEXT_HEIGHT_PADDING, but it is mx_internal
border.move(0, Math.round(tfh / 2));
border.setActualSize(w, h – border.y);
var borderW:Number = w – borderThickness;
var borderH:Number = border.height – borderThickness;

var g:Graphics = border.graphics;
g.clear();

// draw the background first
if (!isNaN(bgColor) && (bgAlpha > 0) && (bgAlpha <= 1)) { g.lineStyle(0, 0, 0, true); g.beginFill(bgColor, bgAlpha); if (cornerRadius > 0) {
g.drawRoundRect(0, 0, borderW, borderH, cornerRadius*2, cornerRadius*2);
} else {
g.drawRect(0, 0, borderW, borderH);
}
g.endFill();
}

// draw the border
if ((borderThickness > 0) && (borderAlpha > 0) && (borderAlpha <= 1)) {
g.lineStyle(borderThickness, borderColor, borderAlpha, true);
if (hasTitle) {
g.moveTo(tfx – spacing, 0);
if ((cornerRadius == 0) || (borderH < cornerRadius) || (borderW < cornerRadius)) {
g.lineTo(0, 0);
g.lineTo(0, borderH);
g.lineTo(borderW, borderH);
g.lineTo(borderW, 0);
g.lineTo(tfx + tfw + spacing, 0);
} else {
g.lineTo(cornerRadius, 0);
g.curveTo(0, 0, 0, cornerRadius);
g.lineTo(0, borderH – cornerRadius);
g.curveTo(0, borderH, cornerRadius, borderH);
g.lineTo(borderW – cornerRadius, borderH);
g.curveTo(borderW, borderH, borderW, borderH – cornerRadius);
g.lineTo(borderW, cornerRadius);
g.curveTo(borderW, 0, borderW – cornerRadius, 0);
g.lineTo(tfx + tfw + spacing, 0);
}
} else {
if ((cornerRadius == 0) || (borderH < cornerRadius) || (borderW < cornerRadius)) {
g.drawRect(0, 0, borderW, borderH);
} else {
g.drawRoundRect(0, 0, borderW, borderH, cornerRadius*2, cornerRadius*2);
}
}
}
}
}

protected function getNumberStyle(styleName:String, defaultValue:Number):Number {
var num:Number = getStyle(styleName);
if (isNaN(num)) {
num = defaultValue;
}
return num;
}

//———————————-
// layout – copied from Panel
//———————————-

private var _layout:String = ContainerLayout.VERTICAL;

[Bindable("layoutChanged")]
[Inspectable(category="General", enumeration="vertical,horizontal,absolute", defaultValue="vertical")]

/**
* Specifies the layout mechanism used for this container.
* Panel containers can use "vertical", "horizontal",
* or "absolute" positioning.
* Vertical positioning lays out the child components vertically from
* the top of the container to the bottom in the specified order.
* Horizontal positioning lays out the child components horizontally
* from the left of the container to the right in the specified order.
* Absolute positioning does no automatic layout and requires you to
* explicitly define the location of each child component.
* @default “vertical”
*/
public function get layout():String {
return _layout;
}

/**
* @private
*/
public function set layout(value:String):void {
if (_layout != value) {
_layout = value;
if (layoutObject) {
layoutObject.target = null; // cleanup
}
if (_layout == ContainerLayout.ABSOLUTE) {
layoutObject = new CanvasLayout();
} else {
layoutObject = new BoxLayout();
if (_layout == ContainerLayout.VERTICAL) {
BoxLayout(layoutObject).direction = BoxDirection.VERTICAL;
} else {
BoxLayout(layoutObject).direction = BoxDirection.HORIZONTAL;
}
}
if (layoutObject) {
layoutObject.target = this;
}
invalidateSize();
invalidateDisplayList();
dispatchEvent(new Event(“layoutChanged”));
}
}

//—————————————–
// constraintColumns – copied from Panel
//—————————————–

[ArrayElementType("mx.containers.utilityClasses.ConstraintColumn")]
[Inspectable(arrayType="mx.containers.utilityClasses.ConstraintColumn")]

/**
* @private
* Storage for the constraintColumns property.
*/
private var _constraintColumns:Array = [];

/**
* @copy mx.containers.utilityClasses.IConstraintLayout#constraintColumns
*/
public function get constraintColumns():Array {
return _constraintColumns;
}

/**
* @private
*/
public function set constraintColumns(value:Array):void {
if (value != _constraintColumns) {
var n:int = value.length;
for (var i:int = 0; i < n; i++) {
ConstraintColumn(value[i]).container = this;
}
_constraintColumns = value;
invalidateSize();
invalidateDisplayList();
}
}

//————————————–
// constraintRows – copied from Panel
//————————————–

[ArrayElementType("mx.containers.utilityClasses.ConstraintRow")]
[Inspectable(arrayType="mx.containers.utilityClasses.ConstraintRow")]

/**
* @private
* Storage for the constraintRows property.
*/
private var _constraintRows:Array = [];

/**
* @copy mx.containers.utilityClasses.IConstraintLayout#constraintRows
*/
public function get constraintRows():Array {
return _constraintRows;
}

/**
* @private
*/
public function set constraintRows(value:Array):void {
if (value != _constraintRows) {
var n:int = value.length;
for (var i:int = 0; i < n; i++) {
ConstraintRow(value[i]).container = this;
}
_constraintRows = value;
invalidateSize();
invalidateDisplayList();
}
}

//———————————–
// fontContext – copied from Panel
//———————————–

/**
* @inheritDoc
*/
public function get fontContext():IFlexModuleFactory {
return moduleFactory;
}

/**
* @private
*/
public function set fontContext(moduleFactory:IFlexModuleFactory):void {
this.moduleFactory = moduleFactory;
}

}
}

Creating a simple image gallery with the Flex HorizontalList control” the following example shows how you can create a simple photo gallery in Flex using the TileList control, Image control, and the PopUpManager class.

Source code:

Main.mxml:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
        layout=”vertical”
        verticalAlign=”middle”
        backgroundColor=”white”>

    <mx:Style>
        global {
            modal-transparency: 0.9;
            modal-transparency-color: white;
            modal-transparency-blur: 9;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.effects.Resize;
            import mx.events.ResizeEvent;
            import mx.events.ListEvent;
            import mx.controls.Image;
            import mx.events.ItemClickEvent;
            import mx.managers.PopUpManager;

            private var img:Image;

            private function tileList_itemClick(evt:ListEvent):void {
                img = new Image();
                // img.width = 300;
                // img.height = 300;
                img.maintainAspectRatio = true;
                img.addEventListener(Event.COMPLETE, image_complete);
                img.addEventListener(ResizeEvent.RESIZE, image_resize);
                img.addEventListener(MouseEvent.CLICK, image_click);
                img.source = evt.itemRenderer.data.@fullImage;
                img.setStyle("addedEffect", image_addedEffect);
                img.setStyle("removedEffect", image_removedEffect);
                PopUpManager.addPopUp(img, this, true);
            }

            private function image_click(evt:MouseEvent):void {
                PopUpManager.removePopUp(evt.currentTarget as Image);
            }

            private function image_resize(evt:ResizeEvent):void {
                PopUpManager.centerPopUp(evt.currentTarget as Image);
            }

            private function image_complete(evt:Event):void {
                PopUpManager.centerPopUp(evt.currentTarget as Image);
            }
        ]]>
    </mx:Script>

    <mx:WipeDown id=”image_addedEffect” startDelay=”100″ />

    <mx:Parallel id=”image_removedEffect”>
        <mx:Zoom />
        <mx:Fade />
    </mx:Parallel>

    <mx:XML id=”xml” source=”gallery.xml” />
    <mx:XMLListCollection id=”xmlListColl” source=”{xml.image}” />

    <mx:TileList id=”tileList”
            dataProvider=”{xmlListColl}”
            itemRenderer=”CustomItemRenderer”
            columnCount=”4″
            columnWidth=”125″
            rowCount=”2″
            rowHeight=”100″
            themeColor=”haloSilver”
            verticalScrollPolicy=”on”
            itemClick=”tileList_itemClick(event);” />

</mx:Application>

View CustomItemRenderer.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:VBox xmlns:mx=”http://www.adobe.com/2006/mxml”
        horizontalAlign=”center”
        verticalAlign=”middle”>
    <mx:Image source=”{data.@thumbnailImage}” />
    <mx:Label text=”{data.@title}” />
</mx:VBox>

 View gallery.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<!– http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ –>
<gallery>
    <image title=”Flex”
        thumbnailImage=”assets/fx_appicon-tn.gif”
        fullImage=”assets/fx_appicon.jpg” />
    <image title=”Flash”
            thumbnailImage=”assets/fl_appicon-tn.gif”
            fullImage=”assets/fl_appicon.jpg” />
    <image title=”Illustrator”
            thumbnailImage=”assets/ai_appicon-tn.gif”
            fullImage=”assets/ai_appicon.jpg” />
    <image title=”Dreamweaver”
            thumbnailImage=”assets/dw_appicon-tn.gif”
            fullImage=”assets/dw_appicon.jpg” />
    <image title=”ColdFusion”
            thumbnailImage=”assets/cf_appicon-tn.gif”
            fullImage=”assets/cf_appicon.jpg” />
    <image title=”Flash Player”
            thumbnailImage=”assets/fl_player_appicon-tn.gif”
            fullImage=”assets/fl_player_appicon.jpg” />
    <image title=”Fireworks”
            thumbnailImage=”assets/fw_appicon-tn.gif”
            fullImage=”assets/fw_appicon.jpg” />
    <image title=”Lightroom”
            thumbnailImage=”assets/lr_appicon-tn.gif”
            fullImage=”assets/lr_appicon.jpg” />
    <image title=”Photoshop”
            thumbnailImage=”assets/ps_appicon-tn.gif”
            fullImage=”assets/ps_appicon.jpg” />
</gallery>

 

Enjoy the Image Gallery !…………..

 

Courtersy: flexexamples

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

 
<?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>

 

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

<?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:

<?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>

Courtersy: Blog.flexexamples

Here we saw how you could modify the background color of a VideoDisplay control in Flex by setting the backgroundColor style.

The following example shows how you can set the background alpha on a Flex VideoDisplay control by setting the backgroundAlpha style.

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”
verticalAlign=”middle”
backgroundColor=”white”>

<mx:Script>
<![CDATA[
private function loadButton_click(evt:MouseEvent):void {
var url:String = "http://www.helpexamples.com/flash/video/clouds.flv";
videoDisplay.source = url;
}

private function unloadButton_click(evt:MouseEvent):void {
videoDisplay.close();
videoDisplay.source = null;
videoDisplay.mx_internal::videoPlayer.clear();
}
]]>
</mx:Script>

<mx:ApplicationControlBar dock=”true”>
<mx:Form styleName=”plain”>
<mx:FormItem label=”backgroundAlpha:”>
<mx:HSlider id=”slider”
minimum=”0.0″
maximum=”1.0″
value=”1″
snapInterval=”0.01″
liveDragging=”true” />
</mx:FormItem>
<mx:FormItem label=”backgroundColor:”>
<mx:ColorPicker id=”colorPicker” />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>

<mx:VideoDisplay id=”videoDisplay”
backgroundAlpha=”{slider.value}”
backgroundColor=”{colorPicker.selectedColor}”
width=”160″
height=”120″ />

<mx:ControlBar>
<mx:Button id=”loadButton”
label=”Load”
click=”loadButton_click(event);” />
<mx:Button id=”unloadButton”
label=”Unload”
click=”unloadButton_click(event);” />
</mx:ControlBar>

</mx:Application>

courtersy: blog. Flexexamples.com

View Source

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

<?xml version="1.0" encoding="utf-8"?>
<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>

// ———————— Z O 0 M    F U N C T I O N —————-
//————————————————————-

Code:

 zoomtools ()
function zoomtools ()
{

 // Zoom buttons
 // zoom-In button

 zoomin_mc.onRollOut = function ()
 {
  zoomin_mc.gotoAndStop ('normal');
 };
 zoomin_mc.onRollOver = function ()
 {
  zoomin_mc.gotoAndStop ('over');
 };
 zoomin_mc.onPress = function ()
 {
  zoomin_mc.gotoAndStop ('down');
 };
 zoomin_mc.onRelease = function ()
 {
  zoomin_mc.gotoAndStop ('on');
  //_root.createEmptyMovieClip ('maskes',-2);
  //_root.ImageArea.setMask (_root._parent);
  
  if (_root.ImageArea.Image.image._xscale > 200)
  {
   if (_root.ImageArea.Image.image._yscale > 200)
   {
    _root.zoom = 0;
   }
  }
  else
  {
   _root.zoom = 1;
  }
 };

 // zoom-Out button

 zoomout_mc.onRollOut = function ()
 {
  zoomout_mc.gotoAndStop ('normal');
 };
 zoomout_mc.onRollOver = function ()
 {
  zoomout_mc.gotoAndStop ('over');
 };
 zoomout_mc.onPress = function ()
 {
  zoomout_mc.gotoAndStop ('down');
 };
 zoomout_mc.onRelease = function ()
 {
  zoomout_mc.gotoAndStop ('on');
  if (_root.ImageArea.Image.image._xscale < 35)
  {
   if (_root.ImageArea.Image.image._yscale < 35)
   {
    _root.zoom = 0;
   }
   /*if (_root.ImageArea.Image.image._yscale <= 35)
   {
    _root.ImageArea.Image.image.attachMovie ('limit','limit',12);
    _root.ImageArea.Image.image.limit._x = -_root.ImageArea.Image.image._width / 2;
    _root.ImageArea.Image.image.limit._y = -_root.ImageArea.Image.image._height / 2;
   }
   else if (_root.ImageArea.Image.image._yscale > 35)
   {

    _root.ImageArea.Image.image.removeMovieClip ();
   }*/

  }
  else
  {
   _root.zoom = -1;
  }

 };
 _root.onLoad = function ()
 {
  _root.zoom = 0;
 };

 zoom = 0;
 zoomperclick = 10;
 _root.onEnterFrame = function ()
 {
  _root.createEmptyMovieClip ('ms',-23);
  _root.ms._width = _root.ImageArea.Image.image._width;
  _root.ms._height = _root.ImageArea.Image.image._height;
  if (_root.zooming < _root.zoomperclick)
  {
   _root.zooming++;
   _root.ImageArea.Image.image._xscale = _root.ImageArea.Image.image._xscale + _root.zoom;
   _root.ImageArea.Image.image._yscale = _root.ImageArea.Image.image._yscale + _root.zoom;
  }
  //_root.ImageArea.setMask(_root.ms)               

 };

 zooming = zoomperclick + 1;
 punct = new Object ();
 _root.speed.restrict = "1-9";
 _root.speed.maxChars = 1;
 zoomers = new Object ();
 zoomers.onMouseDown = function ()
 {
  pozX = _root._xscale;
  pozY = _root._yscale;
  if ((_root.ImageArea.Image.image._xscale > 100) && (_root.ImageArea.Image.image._yscale> 100) && (_root.zoom < 35))
  {
   _root.zoom = 0;
  }
  else if ((_root.ImageArea.Image.image._xscale < 450) && (_root.ImageArea.Image.image._yscale < 450) && (_root.zoom < 250))
  {
   _root.zoom = 0;
  }
  if (!((pozX > 200) && (pozY < 200)))
  {
   _root.zooming = 0;
  }
 };
 Mouse.addListener (zoomers);

}

 

here the codes…

To move current movieclip and _parent movieclip

codes:
function rotatez()
{
rotae_btn()
var imhpath =‘images/image15.jpg’
_root.createEmptyMovieClip(’sd’,2)
var cont:MovieClip = _root.ImageArea.Image.image.createEmptyMovieClip (“container”, _root.ImageArea.Image.image.getNextHighestDepth ());

var img_mc:MovieClip = cont.createEmptyMovieClip (“imageContainer”, cont.getNextHighestDepth ());
img_mc.loadMovie (imhpath);

var che:MovieClip = _root.createEmptyMovieClip (“chekker”, _root.getNextHighestDepth ());
che.onEnterFrame = function ()
{

if (img_mc._width > 2)
{
img_mc._x = -img_mc._width /2 ;
img_mc._y = -img_mc._height /2 ;

this.removeMovieClip ();

}
};

function rotae_btn()
{
rotate_mc.onRollOver = function()
{
rotate_mc.gotoAndStop(‘over’)
}
rotate_mc.onRollOut = function()
{
rotate_mc.gotoAndStop(‘normal’)
}
rotate_mc.onPress = function()
{
rotate_mc.gotoAndStop(‘down’)
}
rotate_mc.onRelease = function()
{
trace(‘Rotate the images’)
trace(_root.ImageArea.Image.image)
cont._rotation += 90;
img_mc._visible = true;
trace(‘Rotate’)
cont._x = Stage.width /2 – cont._x/2
cont._y = Stage.height/2 – cont._y/2
}
}
}

rotatez()

Thanks & Regards

BHUVAN

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Web.Mail;

namespace emailexample

{

public partial class _Default : System.Web.UI.Page

{

#region Declaration

string eMailId;

#endregion

protected void Page_Load(object sender, EventArgs e)

{

}

protected void Button1_Click(object sender, EventArgs e)

{

eMailId = “bhala.n@insoft.com“;

MailMessage ObjMail = new MailMessage();

ObjMail.To = txtTofield.Text;

ObjMail.Cc = TextBox1.Text;

ObjMail.Bcc = TextBox2.Text;

ObjMail.From = eMailId.ToString();

ObjMail.Body = txtTextArea.Text.ToString();

ObjMail.BodyFormat = MailFormat.Html;

SmtpMail.SmtpServer = System.Configuration.ConfigurationSettings.AppSettings["SMTPServer"].ToString();

SmtpMail.Send(ObjMail);

Response.Write(“The Mail has been sent to: “);

Response.Write(ObjMail.To);

Response.Write(ObjMail.Cc);

Response.Write(ObjMail.Bcc);

}

}

}

Html

<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”emailexample._Default” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

<html xmlns=”http://www.w3.org/1999/xhtml“ >

<head runat=”server”>

<title>Untitled Page</title>

</head>

<body>

<form id=”form1″ runat=”server”>

<div>

<table border =”2″ >

<tr>

<td>

<%– <asp:TextBox ID=”txtTofield” runat=”server” Text=”bhala.n@insoft.com” ReadOnly=”true”></asp:TextBox>–%>

<asp:Label ID=”lblTo” runat =”server” >To</asp:Label>

</td>

<td>

<asp:TextBox ID=”txtTofield” runat=”server” ></asp:TextBox>

</td>

</tr>

<tr>

<td>

<asp:Label ID=”Label1″ runat =”server” >Cc</asp:Label>

</td>

<td>

<asp:TextBox ID=”TextBox1″ runat=”server” ></asp:TextBox>

</td>

</tr>

<tr>

<td>

<%– <asp:TextBox ID=”txtTofield” runat=”server” Text=”bhuvanvel@gmail.com” ReadOnly=”true”></asp:TextBox>–%>

<asp:Label ID=”Label2″ runat =”server” >Bcc</asp:Label>

</td>

<td>

<asp:TextBox ID=”TextBox2″ runat=”server” ></asp:TextBox>

</td>

</tr>

<tr>

<td>

<asp:TextBox ID=”txtTextArea” runat=”server” TextMode=”MultiLine” Height=”175px”

Width=”600px”></asp:TextBox>

</td>

</tr>

<tr>

<td>

<asp:Button ID=”Button1″ runat=”server”

Text=”Send” OnClick=”Button1_Click” />

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Webconfig

<appSettings>

<add key=“SMTPServer“ value=“mail.google.com“></add>

<add key=“From“ value=“noreply@words-online.com“></add>

</appSettings>

Runtime Circle

Creating a method that can be used by all movieclips in a movie

As of Flash MX, the prototype property of the MovieClip class can be used to assign additional functions to the class, which makes them available to all movieclips. Here’s an example of creating and using a draw circle method:

// r = radius of circle

// x, y = center of circle

MovieClip.prototype.drawCircle = function (r, x, y) {

var TO_RADIANS:Number = Math.PI/180;

// begin circle at 0, 0 (its registration point) -- move it when done

this.moveTo(0, 0);

this.lineTo(r, 0);// draw 12 30-degree segments

// (could do more efficiently with 8 45-degree segments)

var a:Number = 0.268;  // tan(15)

for (var i=0; i < endx =" r*Math.cos((i+1)*30*TO_RADIANS);

endy =" r*Math.sin((i+1)*30*TO_RADIANS);

ax = endx + r * a *Math.cos(((i+1)*30-90)*TO_RADIANS);

ay = endy + r * a *Math.sin(((i+1)*30-90)*TO_RADIANS);

_x = x;

_y = y;

x=100;

y= 100;

To draw a shape with a part of it cut out, like a donut eg, simply put all  

the commands to draw both the initial object (big circle) and the

cutout (smaller circle) between the beginFill and endFill

statements. Here's how the donut on the left (ok, more like a bagel but still delicious)

was created:
// r1 = radius of outer circle

// r2 = radius of inner circle (cutout)

// x, y = center of donut

// This creates a donut shape (circle with a cutout circle)

MovieClip.prototype.drawDonut1 = function (r1, r2, x, y) {

var TO_RADIANS:Number = Math.PI/180;

this.moveTo(0, 0);

this.lineTo(r1, 0);// draw the 30-degree segments

var a:Number = 0.268;  // tan(15)

for (var i=0; i < endx =" r1*Math.cos((i+1)*30*TO_RADIANS);" endy =" r1*Math.sin((i+1)*30*TO_RADIANS);" ax =" endx+r1*a*Math.cos(((i+1)*30-90)*TO_RADIANS);" ay =" endy+r1*a*Math.sin(((i+1)*30-90)*TO_RADIANS);" i="0;" endx =" r2*Math.cos((i+1)*30*TO_RADIANS);" endy =" r2*Math.sin((i+1)*30*TO_RADIANS);" ax =" endx+r2*a*Math.cos(((i+1)*30-90)*TO_RADIANS);" ay =" endy+r2*a*Math.sin(((i+1)*30-90)*TO_RADIANS);" _x =" x;" _y =" y;" array =" [0," array =" [100," array =" [0," object =" {a:300,">  
Using a shape with a cutout as a mask

If a shape containing a cutout is to be used as a mask, as the donut on the      right above, care must be taken to draw the cutout in the opposite      direction from that in which the original shape was drawn. (If you      don't, there will be no cutout in the mask). Here's the code for the donut      mask on the right, in which a big circle is drawn in a clockwise direction      and a smaller circle drawn in the opposite direction (all before the endFill      is applied). pic is a movieclip containing the flower graphic.
// r1 = radius of outer circle

// r2 = radius of inner circle (cutout)

// x, y = center of donut

// This creates a donut shape that can be used as a mask

MovieClip.prototype.drawDonut2 = function (r1, r2, x, y) {

var TO_RADIANS:Number = Math.PI/180;

this.moveTo(0, 0);

this.lineTo(r1, 0);// draw the 30-degree segments

var a:Number = 0.268;  // tan(15)

for (var i=0; i < endx =" r1*Math.cos((i+1)*30*TO_RADIANS);" endy =" r1*Math.sin((i+1)*30*TO_RADIANS);" ax =" endx+r1*a*Math.cos(((i+1)*30-90)*TO_RADIANS);" ay =" endy+r1*a*Math.sin(((i+1)*30-90)*TO_RADIANS);" i="12;"> 0; i--) {

  var endx = r2*Math.cos((i-1)*30*TO_RADIANS);

  var endy = r2*Math.sin((i-1)*30*TO_RADIANS);

  var ax = endx+r2*(0-a)*Math.cos(((i-1)*30-90)*TO_RADIANS);

  var ay = endy+r2*(0-a)*Math.sin(((i-1)*30-90)*TO_RADIANS);

  this.curveTo(ax, ay, endx, endy);

}

this._x = x;

this._y = y;

}

createEmptyMovieClip("d2", 2);

d2.beginFill(0xaa0000, 60);

d2.drawDonut2(86, 36, 300, 94);

d2.endFill();

pic.setMask(d2);

courtesy :   Flash-Creation

Blur Filter:

Now, we see the blur Filter Examples…

Now we have create a movie clip and give instance name as reflec…

Main screen

1: Movie Clip
2: 2 input textfiled for Blur x and Blur y
3: Update button

Let, before open

import the filters

import mx.transitions.Tween;
import flash.filters.BlurFilter;
import mx.transitions.easing.*;

After, apply the effect to the movie
on Enterframe event

Here, the complete Code…

import mx.transitions.Tween;
import flash.filters.BlurFilter;
import flash.filters.*;
import mx.transitions.easing.*;

function update()
{
updatebtn.onPress = function()
{
applyfilter()
var s = new Tween(_root.reflec,”_x”,null,0,350,5,true)
s.onMotionFinished = function()
{
s.yoyo()
}
}

}
update()

function applyfilter()
{
var blur_X = Number(_root.blurx.text)
var blur_Y = Number(_root.blury.text)
var quality = 3

var filter = new BlurFilter(blur_X,blur_Y,quality)
var filterarr = new Array()
filterarr[0] = filter
reflec.filter = filterarr

_root.onEnterFrame = function()
{
if(reflec.hitTest(_xmouse,_ymouse,true))
{
if(reflec.filters[0].blurX != 0)
{
blur_X -= 1;
blur_Y -= 1;

filter = new BlurFilter(blur_X, blur_Y, quality);
filterarr = new Array();
filterarr[0] = filter
reflec.filters = filterarr;
}
}
else
{
if(reflec.filters[0].blurX != 10)
{
blur_X += 1;
blur_Y += 1;

filter = new BlurFilter(blur_X, blur_Y, quality);
filterarr = new Array();
filterarr[0] = filter
reflec.filters = filterarr;
}
}
}
}

Have!, a gr8 effect…
Thanks….