Layout Types Available in Flex 4.5 for mobile Development

Here is the list of Layout types available for the layout development

DataGroup
Group
HGroup
Scroller (supports touch scrolling, includes scroll indicator)
Spacer
TileGroup
VGroup

using backgroundFill in BorderContainer

Simple example which shows how to use backgroundFill with BorderContainer


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark">

    <s:BorderContainer cornerRadius="10" width="100%" height="100%">
        <s:backgroundFill>
            <s:SolidColor
                color="0xFF00FF"  alpha="1"/>
        </s:backgroundFill>

        <s:Label text="sample text" />

    </s:BorderContainer> 

</s:Application>

Using Background Image with Spark BorderContainer

Very simple example shows how to use Background Image with Spark Container


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark"> 

    <fx:Script>
        <![CDATA[

	    [Bindable]
            [Embed(source="sampleImage.jpg")]
            public var ImageSample:Class;
        ]]>
    </fx:Script> 

    <s:BorderContainer
        backgroundImage="{ImageSample}"
        width="100%" height="100%">
    </s:BorderContainer>
</s:Application>

Setting Vertical Layout for Application tag in Spark

Following example shows how to setup vertical layout in spark application tag


<?xml version="1.0" encoding="utf-8"?>
<s:Application	 xmlns:fx="http://ns.adobe.com/mxml/2009"
   		 xmlns:mx="library://ns.adobe.com/flex/mx"
   		 xmlns:s="library://ns.adobe.com/flex/spark"> 

        <s:layout>
            <s:VerticalLayout
                paddingLeft="5" paddingRight="5"
                paddingTop="5" paddingBottom="5"/>
        </s:layout>

        <s:Button label="Sample1"/>
        <s:Button label="Sample2"/>
        <s:Button label="Sample3"/>
        <s:Button label="Sample4"/>

</s:Application>

perlinNoise using Flash ActionScript

Simple Example to show how to use perlinNoise in Flash ActionScript

In the below example the stage is divided into two parts with two different effects

example

import flash.display.*;
import flash.events.Event;
import flash.geom.Point;

var _bitmap1:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight/2, true, 0xCCCCCC);
var _bitmap2:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight/2, true, 0xCCCCCC);

function perlinNoise() {
addChild(new Bitmap(_bitmap1));
_bitmap1.perlinNoise(10, 10, 2, 50, false, true,1, true);

var b:Bitmap = new Bitmap(_bitmap2);
b.y = stage.stageHeight/2;
addChild(b)
}

perlinNoise();

var t:Timer = new Timer(50)
t.addEventListener(TimerEvent.TIMER , onTimer);
var Size = 0;
var xPos = 0;
var yPos = 0;
function onTimer (e:TimerEvent) {
var point:Point=new Point(++xPos,++yPos);
_bitmap1.perlinNoise(10, 10, 2, 50, false, true,1, true, [point, point]);
++Size;
_bitmap2.perlinNoise(Size,Size, 2, 50, false, true,1, true, [point, point]);
if(Size &gt; 50){
Size = 0;
}
}

t.start();

(more…)

Create Color Wheel using Flex (Actionscript) AS3

Working on color wheel i hope it looks good.
Cick to view working sample

Create Color Picker like Photoshop Color Picker using Flex and Actionscript 3 (AS3)

Recently started making a color picker which is similar to photoshop color picker

Add Background Image for AIR Application

background image for AIR application


&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;mx:WindowedApplication name=&quot;WindowedApplication_backgroundImage_test&quot;
        xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; layout=&quot;vertical&quot; verticalAlign=&quot;middle&quot;&gt;

    &lt;mx:Style&gt;
        WindowedApplication {
            backgroundColor: white;
            backgroundImage: ClassReference(&quot;mx.skins.halo.ApplicationBackground&quot;);
        }
    &lt;/mx:Style&gt;

&lt;/mx:WindowedApplication&gt;

using mx:Rotate

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="absolute"
				height="100%" width="100%" xmlns:s="library://ns.adobe.com/flex/spark">

	<mx:Rotate id="down" angleFrom="0" angleTo="360" duration="1500"/> 

	<mx:Panel x="10" y="10"
			  width="500"
			  height="450" layout="absolute"
			  title="Using Effects"
			  verticalAlign="top">
		<mx:Image id="mImage"
				  scaleContent="true"
				  horizontalAlign="center" verticalAlign="middle"
				  source="http://www.fii.org/fii/imagenes/images/image-3.jpg"
				  width="140"
				  height="200"
				  mouseDownEffect="{down}"
				  horizontalCenter="0"
				  verticalCenter="0"/>
	</mx:Panel>

</mx:Application>

using mx:Parallel mx:Zoom and mx:Blur

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="absolute"
				height="100%" width="100%">

	<mx:Parallel id="over">
		<mx:Zoom duration="100" zoomHeightTo="1.2" zoomWidthTo="1.2"/>
		<mx:Blur duration="1000"/>
	</mx:Parallel>
	<mx:Zoom id="out" duration="200" zoomHeightTo="1" zoomWidthTo="1"/>
	<mx:Panel x="10" y="10"
			  width="500"
			  height="450" layout="absolute"
			  title="Using Effects"
			  verticalAlign="top">
		<mx:Image id="mImage"
				  scaleContent="true"
				  horizontalAlign="center" verticalAlign="middle"
				  source="http://www.fii.org/fii/imagenes/images/image-3.jpg"
				  width="340"
				  height="200"
				  rollOutEffect="{out}"
				  rollOverEffect="{over}"
				  horizontalCenter="0"
				  verticalCenter="0"/>
	</mx:Panel>

</mx:Application>