Flashvars and as3

0

Flashvars and actionscript 3! Flashvar is a way that in your html embed codes (object tags) you can send variables and values into your swf file. These variables can then be grabbed internally and used your programming! Examples of these could be images that you want to use in your swf but don’t want to import or hardcode them into the flash file or paths to xml or flv files to use as well. Actionscript 3 has a different procedure than as2 did as to how you read these flashvars from the actionscript side. The embed codes and html side of things are still the same, but in case your new to actionscript altogether, I’ll give an example of the html as well.

1 2 3

<object width=“200″ height=“200″ type=“application/x-shockwave-flash” data=“flashvars_as3.swf”> <param name=“flashvars” value=“colors=0×012345,0×123456,0×234567,0×345678,0×456789,0×567890,0×678901,0×789012&delay=.11&loop=true&random=false”/> </object>

In actionscript 3 we use the loaderInfo object to access the flashvars. The parameters Object of the loaderInfo will contain all the flashvar variables and values.

1	this.loaderInfo.parameters

As an example of something that is visual I’ve created this little app to read some options from flashvars about colors. An app that will read a list of colors and update a box that is on the stage already to those colors with the specified delay. I always have fun with randomness so I threw in the option for random colors as well. This file looks for certain flashvars: color, loop, delay and random. These are the keys or names of the variables and they are followed by the values you want them to hold. Note that flashvars can be set in any order, so you don’t have to start with color and end with random.

In this example I’m looking for 4 flashvars specifically (in any order):

• colors:String – a comma delimited list of hex colors or simply a string “random” for randomly generated colors (the hex for black #000000 needs to be 0×000000 in flash) (default is random)
• loop:Boolean – whether or not to repeat these colors (default is true)
• delay:Number – the delay between colors (in seconds). (default is 1 second)
• random:Boolean – determines whether to cycle through colors in given order or randomize. selecting random overrides the loop to true. (default is false)

This is much more than is required for this example, but I was having fun playing with random colors and timing and options. I figured it diesn’t hurt to show the effect you can have with a couple different variables on one file. Here is an example using the object tags above:

And here are some more (please don’t have a seizure!)

Here’s the full source if you’re interested:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

/* circlecube.com App to demonstrate the process of getting flashvars from embed code to actionscript (as3) Displays colors specified. looking for 4 flashvars specifically (in any order): colors:String – a comma delimited list of hex colors or simply a string “random” for randomly generated colors (the hex for black #000000 needs to be 0×000000) (default is random) loop:Boolean – wether or not to repeat these colors (default is true) delay:Number – the delay between colors (in seconds). (default is 1 second) random:Boolean – determines wether to cycle through colors in given order or randomize. selecting random overrides the loop to true. (default is false) */ //initialize vars var myflashvars:Object = new Object() var myColors:Array = new Array(“random”); var myLoop:Boolean = true; var myDelay:Number = 1; var randomOrder:Boolean = false; var allRandom:Boolean = false; //read flashvars in actionscript3 //if colors flashvars doesn’t exist use these defaults if (!this.loaderInfo.parameters.colors){ myflashvars = {colors: “random”, delay: 1}; } else{ myflashvars = this.loaderInfo.parameters; } //assign flashvars to variables within flash for (var item:String in myflashvars) { trace(item + “:\t“ + myflashvars[item]); if (item == “colors”){ myColors = myflashvars[item].split(‘,’); } else if(item == “loop”){ myLoop = parseBoolean(myflashvars[item]); } else if(item == “delay”){ myDelay = myflashvars[item]; } else if(item == “random”){ randomOrder = parseBoolean(myflashvars[item]); } } //use my variables! if (myColors[0] == “random”){ allRandom = true; } var counter:Timer = new Timer(myDelay * 1000); counter.addEventListener(TimerEvent.TIMER, nextColor); trace (“color number: 0″, “color hex: “+myColors[0]); setColor(myBox, myColors[0]); counter.start(); stop(); function nextColor(e:Event):void{ //cycle through colors if (!allRandom && !randomOrder){ if (counter.currentCount+2 > myColors.length){ if (myLoop == true || myLoop == “true”){ counter.reset(); counter.start(); } else{ counter.stop(); } } trace (“color number: “+counter.currentCount, “color hex: “+myColors[counter.currentCount]); setColor(myBox, myColors[counter.currentCount - 1]); } //randomly select a color from the myColors array else if (!allRandom && randomOrder){ var randomColor = Math.floor(Math.random() * myColors.length); trace (“random number: “+randomColor, “color hex: “+myColors[randomColor]); setColor(myBox, myColors[randomColor]); } //randomly create colors else{ trace (“number: “+counter.currentCount, “color hex: “+myColors[0]); setColor(myBox, myColors[0]); } } function setColor(item:DisplayObject, col):void{ if (col == “random”){ setRandomColor(item); } else{ setHexColor(item, col); } } function setHexColor(item:DisplayObject, col:Number):void { var myColor:ColorTransform  =  item.transform.colorTransform; //check color bounds if (col > 16777215) col = 16777215; else if (col < 0) col = 0; myColor.color = col; item.transform.colorTransform = myColor; } function setRandomColor(item:DisplayObject):void{ setColor(item, (Math.floor(Math.random() * 16777215))); } function parseBoolean(str:String):Boolean { switch(str.toLowerCase()) { // Check for true values case “1″: case “true”: case “yes”: return true; // Check for false values case “0″: case “false”: case “no”: return false; // If all else fails cast string default: return Boolean(str); } }

<!– Share and Enjoy: –>

Hi reader

Here discus about the scrollbar scrolling in iphone style in flex

Lets exaplain

create a Panel and make a text as repater

and another create a canvas add image to it

code:

IPhoneScrolls.mxml

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

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”horizontal” creationComplete=”init()”>

<mx:Script>

<![CDATA[

[Bindable] private var listData:Array = new Array(100);

import com.IPhoneScrollerManager;

import com.KineticKox;

private function init():void

{

IPhoneScrollerManager.addContainer(panel);

IPhoneScrollerManager.addContainer(box);

}

]]>

</mx:Script>

<mx:Panel title=”Example” id=”panel” height=”200” width=”200“>

<mx:Repeater id=”rp” dataProvider=”{listData}“>

<mx:Label text=”{rp.currentIndex}” />

</mx:Repeater>

</mx:Panel>

<mx:Canvas width=”324” height=”265” id=”box” verticalScrollPolicy=”off” horizontalScrollPolicy=”off“>

<mx:Image source=”http://www.wallcoo.net/1440×900/1440_900_nature_scene_wallpapers_01/images/Free_High_resolution_nature_wallpapers_20.jpg“ />

</mx:Canvas>

</mx:Application>

Hi Member
i’m back ….

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