Archive for category Flex

Duplicating images using the Bitmap and BitmapData classes


<?xml version="1.0" encoding="utf-8"?>
<!-- -->
<mx:Application xmlns:mx=""

            import mx.collections.ArrayCollection;

            private var arrColl:ArrayCollection = new ArrayCollection();

            private function dupeImage(source:Image):void {
                var data:BitmapData = Bitmap(source.content).bitmapData;
                var bitmap:Bitmap = new Bitmap(data);

                arrColl.addItem({image:bitmap, label:"item #" + (arrColl.length + 1)});

        <mx:Panel title="Source image">
            <mx:HBox verticalAlign="middle" horizontalAlign="center" width="100%" height="100%">
                <mx:Image id="img1" source="assets/logo.png" />

                <mx:Button label="Copy image" click="dupeImage(img1)" />

        <mx:TileList id="tileList" dataProvider="{arrColl}" width="300" height="200" columnCount="4" verticalScrollPolicy="on">
                        <mx:Image source="{data.image}" />
                        <mx:Label text="{data.label}" />


No Comments

Crop image in Flex

Crop image in Flex using BitmapData


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=""
    layout="absolute" initialize="initNew()"
    width="320" height="370">
            import mx.controls.Image;

            private const image_path:String = "fxr.png";
            private var loader:Loader;
            private var request:URLRequest;  

            private var loadBD:BitmapData;
            private var cropBD:BitmapData;  

            private var startPoint:Point;
            private var posPoint:Point;
            private var square: int;
            private var mtrx: Matrix;

            private function initNew():void
                loader=new Loader();
                request=new URLRequest(image_path);

            private function onComplete(event:Event):void {
                loadBD = Bitmap(event.currentTarget.content).bitmapData;

      , 0,
                    loadBD.width, loadBD.height);

                //make initial image


             private function drawImage():void
                 //crop square
                startPoint = new Point(xSelector.value,    ySelector.value);
                square = sizeSelector.value;

                //resize image and show it

             private function cropImage(startPoint:Point, squareSize:int):void
                 // Make a new bitmap data using square size
                cropBD = new BitmapData(squareSize, squareSize, true, 0x00000000);
                // Position where will be dispayed in the new object, in our case (0,0)
                posPoint = new Point(0,0);
                // copy pixels from loaded bitmap data to our new object
                    new Rectangle(startPoint.x, startPoint.y, squareSize, squareSize),

                //draw crop area selected
      , 0xFFFFFF,0.5);
      , 0, cropBD.width, cropBD.height);


             private function resizeImage():void
                // make scale matrix
                mtrx = new Matrix();

                // Fill in image
      , 0, imageView.width, imageView.height);


    <mx:Canvas id="imageView"   x="210" y="10" width="100" height="100" />
    <mx:Canvas id="imageHolder" x="10" y="120" width="300" height="240" />
    <mx:Canvas id="imageCrop"   x="0" y="0" width="0" height="0" /> 

    <mx:Label x="10" y="15" width="60" text="X position"/>
    <mx:HSlider id="xSelector" x="80" y="10" width="120"
            minimum="0" maximum="290" snapInterval="10" enabled="true"
            value="170" change="drawImage()" />

    <mx:Label x="10" y="55" width="60" text="Y position"/>
    <mx:HSlider id="ySelector" x="80" y="50" width="120"
            minimum="0" maximum="230" snapInterval="10" enabled="true"
            value="20" change="drawImage()" />

    <mx:Label x="10" y="95" width="60" text="Area size"/>
    <mx:HSlider id="sizeSelector" x="80" y="90" width="120"
            minimum="10" maximum="240" snapInterval="10" enabled="true"
            value="100" change="drawImage()" />


No Comments

Flex Atom Reader

Flex 用parse XML 太方便了

以下係一個parse 一個from HTTP Server 既atom file 既example

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”” creationComplete=”feedRequest.send();” backgroundGradientAlphas=”[1.0, 1.0]” backgroundGradientColors=”[#333333, #5B5A5A]”>

<mx:HTTPService id=”feedRequest” url=”data/photo.xml” useProxy=”false” />

<mx:Panel title=”Atom Reader” height=”75%” width=”75%” paddingTop=”10″ paddingBottom=”10″ paddingLeft=”10″ paddingRight=”10″ color=”#FFFFFF”>
<mx:DataGrid id=”dgPosts” height=”50%” width=”75%” dataProvider=”{feedRequest.lastResult.feed.entry}” color=”#427F95″>
<mx:DataGridColumn headerText=”Posts” dataField=”title”/>
<mx:TextArea id=”txtarea” height=”50%” width=”75%” htmlText=”{dgPosts.selectedItem.content}” color=”#4B80D8″/>


No Comments