Zoom Effect Friday, Jun 19 2009 

Flex Examples Sangeetha 1:13 pm

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<mx:Zoom id=”mzoom”
zoomHeightTo=”{Number(zoomHeightInput.text)}”
zoomWidthTo=”{Number(zoomWidthInput.text)}”/>
<mx:Panel x=”0″ y=”0″ width=”100%” height=”100%” paddingLeft=”10″ paddingRight=”10″
paddingBottom=”10″ paddingTop=”10″ title=”Applying Zoom Effects Using Data Binding”>
<mx:ApplicationControlBar height=”90″ width=”317″ y=”39″ x=”257.5″>
<mx:VBox height=”100%” width=”100%”>
<mx:Label text=”ZoomHeight” width=”80″ height=”16″/>
<mx:Spacer width=”91″/>
<mx:Label text=”ZoomWidth” width=”76″ height=”16″/>
</mx:VBox>
<mx:Spacer height=”48″/>
<mx:VBox height=”100%” width=”100%”>
<mx:TextInput  text=”10.0″ id=”zoomHeightInput” height=”21″ width=”142″/>
<mx:TextInput  text=”10.0″ id=”zoomWidthInput”  height=”21″ width=”142″/>
</mx:VBox>
</mx:ApplicationControlBar>
<mx:Image id=”img” source=”flower2.jpg” width=”10.0″ height=”10.0″
rollOverEffect=”{mzoom}”/>
</mx:Panel>
</mx:Application>

 

Wiping Effect Friday, Jun 19 2009 

Flex Examples Sangeetha 12:47 pm

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

<!–Defining Effects–>
<mx:WipeLeft id=”wplf”  duration=”5000″ />
<mx:WipeRight id=”wprg” duration=”5000″/>
<mx:Panel  title=”Trigger Effects” paddingBottom=”10″ paddingTop=”10″
paddingLeft=”10″ paddingRight=”10″ y=”0″ x=”10″ height=”100%” width=”100%”>
<mx:Button label=”Wiping Right”  mouseUpEffect=”{wprg}” />
<mx:Image id=”img1″ source=”flower2.jpg” height=”149″ width=”200″
mouseUpEffect=”{wprg}”/>
<mx:Button id=”b1″ label=”Wiping Left”  mouseDownEffect=”{wplf}”/>
<mx:Image id=”img” source=”flowers.jpg” height=”149″ width=”200″
mouseDownEffect=”{wplf}” />
<mx:ControlBar height=”94″>
</mx:ControlBar>
</mx:Panel>
</mx:Application>

 

Rotate Effect Friday, Jun 19 2009 

Flex Examples Sangeetha 12:41 pm

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<mx:Script>
<![CDATA[
private function applyEffect(event:Event):void
{
rotateEffect.target=event.currentTarget;
rotateEffect.originX=event.currentTarget.width/2;
rotateEffect.originY=event.currentTarget.height/2;
rotateEffect.play();
}

]]>
</mx:Script>
<mx:Rotate id=”rotateEffect”>
</mx:Rotate>
<mx:VBox id=”vbox” x=”107″ y=”55″ clipContent=”false”>
<mx:Image id=”img1″ source=”flowers.jpg” creationComplete=”applyEffect(event)”/>
</mx:VBox>
</mx:Application>

 

Resizing Effect in Flex Friday, Jun 19 2009 

Flex Examples Sangeetha 12:23 pm

<?xml version=”1.0″?>
<!– behaviors\ButtonResize.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” >
<mx:Resize id=”myResizeUp”
widthTo=”500″ heightTo=”900″
duration=”200″/>
<mx:Resize id=”myResizeDown”
widthTo=”30″ heightTo=”60″
duration=”200″ />
<mx:Panel paddingBottom=”10″ paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″
width=”100%” height=”100%” title=”Resizing the image” fontSize=”12″ >
<mx:Label text=”Expands and Reduces the size of the image when clicks on the image”
fontSize=”12″/>
<mx:ControlBar>
</mx:ControlBar>
<mx:Image id=”img” source=”flower2.jpg” height=”149″ width=”200″
mouseDownEffect=”{myResizeDown}” mouseUpEffect=”{myResizeUp}” />
</mx:Panel>
</mx:Application>

 

Pause Effect in Flex Friday, Jun 19 2009 

Flex Examples Sangeetha 12:21 pm

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<mx:Script>
<![CDATA[
import mx.effects.easing.*;

]]>
</mx:Script>

<mx:Sequence id=”movePauseMove”>
<mx:Move   xBy=”350″ duration=”2000″ easingFunction=”Bounce.easeOut”/>
<mx:Pause duration=”2000″/>
<mx:Move  xBy=”-350″ duration=”2000″ easingFunction=”Bounce.easeIn”/>
</mx:Sequence>

<mx:Panel title=”Pause Effect Example” width=”877″ height=”609″
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″>

<mx:Text width=”325″ color=”blue” fontSize=”12″
text=”Click the image to start the Sequence effect.
The effect pauses for 2 seconds between moves. “/>
<mx:Image
source=”pink_rose.jpg”
mouseDownEffect=”{movePauseMove}”/>

</mx:Panel>
</mx:Application>

 

Number Formatter Friday, Jun 19 2009 

Flex Examples Sangeetha 11:42 am

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<mx:Script>
<![CDATA[

import mx.events.ValidationResultEvent;
private var vResult:ValidationResultEvent;

// Event handler to validate and format input.
private function Format():void
{
vResult = numVal.validate();
if (vResult.type==ValidationResultEvent.VALID) {

formattedNumber.text= numberFormatter.format(inputVal.text);
}

else {
formattedNumber.text= "";
}
}
]]>
</mx:Script>

<mx:NumberFormatter id=”numberFormatter” precision=”4″
useThousandsSeparator=”true” useNegativeSign=”true”/>

<mx:NumberValidator id=”numVal” source=”{inputVal}” property=”text”
allowNegative=”true” domain=”real”/>

<mx:Panel title=”NumberFormatter Example” width=”75%” height=”75%”
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″>

<mx:Form>
<mx:FormItem label=”Enter number:”>
<mx:TextInput id=”inputVal” text=”" width=”50%”/>
</mx:FormItem>

<mx:FormItem label=”Formatted number (precision=4): “>
<mx:TextInput id=”formattedNumber” editable=”false” width=”50%”/>
</mx:FormItem>

<mx:FormItem>
<mx:Button label=”Validate and Format” click=”Format();”/>
</mx:FormItem>
</mx:Form>

</mx:Panel>

</mx:Application>

 

Move Effect in Flex Friday, Jun 19 2009 

Flex Examples Sangeetha 11:26 am

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<mx:Script>
<![CDATA[

private function applyEffect(event:Event):void

{
var xFrom:Number;
myMove.xFrom=0;
myMove.xTo=500;
myMove.duration=3000;
myMove.play();

}

private function Reverse(event:Event):void

{
var xFrom:Number;
myMove.xFrom=500;
myMove.xTo=0;
myMove.duration=3000;
myMove.play();
}
private function Stop(event:Event):void
{
myMove.stop();

}

]]>
</mx:Script>
<mx:Move   id=”myMove” target=”{img}”   >
</mx:Move>
<mx:Panel title=”Move Effect ” width=”867″ height=”609″
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″>
<mx:Image source=”flowers.jpg” id=”img”
width=”272″ height=”187″ x=”231″ y=”107″>
</mx:Image>
<mx:Button id=”b1″ label=”Start” click=”applyEffect(event)”>
</mx:Button>
<mx:Button id=”b2″ label=”Reverse” click=”Reverse(event)”>
</mx:Button>
<mx:Button id=”b3″ label=”Stop” click=”Stop(event)”>
</mx:Button>
</mx:Panel>
</mx:Application>

 

Iris Effect in Flex Friday, Jun 19 2009 

Flex Examples Sangeetha 11:25 am

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<mx:Script>
<![CDATA[
import mx.effects.*;
public var showTarget:Boolean;
public var duration:Number;
public function applyEffect():void
{
if(cb1.selected==true)
{
irisOut.duration=1000;
irisOut.showTarget=true;
}
else
{
irisIn.duration=1000;
irisIn.showTarget=true;
}
}

]]>
</mx:Script>
<mx:Iris id=”irisOut” />
<mx:Iris id=”irisIn” />

<mx:Panel title=”Iris Effect Example” width=”75%” height=”75%”
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″>
<mx:Text width=”100%” color=”blue”
text=”Iris effect to show or hide the image.”/>
<mx:Image id=”img” source=”pink_rose.jpg”
visible=”{cb1.selected}”
showEffect=”{irisOut}” hideEffect=”{irisIn}”/>
<mx:CheckBox id=”cb1″ label=”visible” selected=”true”
creationComplete=”applyEffect()”/>

</mx:Panel>

</mx:Application>

 

Glow Effect in Flex Friday, Jun 19 2009 

Flex Examples Sangeetha 11:24 am

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<mx:Script>
<![CDATA[
import mx.effects.*;
public var alphaFrom:Number;
public var alphaTo:Number;
public var blurXFrom:Number;
public var blurXTo:Number;
public var blurYFrom:Number;
public var  blurYTo:Number;
public var duration;
public function glowEffect():void
{

glowImage.alphaFrom=1.0;
glowImage.alphaTo=0.5;
glowImage.blurXFrom=0.0;
glowImage.blurXTo=100.0;
glowImage.blurYFrom=0.0;
glowImage.blurYTo=100.0;
glowImage.duration=2000;
glowImage.color=0x00FF00;
glowImage.play();
}
public function unblurEffect():void
{
unglowImage.alphaFrom=0.5;
unglowImage.alphaTo=1.0;
unglowImage.blurXFrom=100.0;
unglowImage.blurXTo=0.0;
unglowImage.blurYFrom=100.0;
unglowImage.blurYTo=0.0;
unglowImage.duration=2000;
unglowImage.color=0xFF00FF;
unglowImage.play();
}
]]>
</mx:Script>
<mx:Glow id=”glowImage” />
<mx:Glow id=”unglowImage” />
<mx:Panel title=”Glow Effect Example” width=”75%” height=”75%”
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″>
<mx:Text width=”100%” color=”blue”
text=”GlowImage Effect and UnglowImage Effect.”/>
<mx:Image source=”Nokia_6630.jpg”
mouseDownEffect=”{glowImage}”
mouseUpEffect=”{unglowImage}”  height=”220″ width=”123″/>
</mx:Panel>
</mx:Application>

 

Fade Effect in Flex Friday, Jun 19 2009 

Flex Examples Sangeetha 11:22 am

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

<mx:Script>
<![CDATA[
import mx.effects.*;
public var alphaFrom:Number;
public var alphaTo:Number;
public var duration;
public function applyEffect():void
{

fadein.alphaFrom=0;
fadein.alphaTo=1;
fadein.duration=5000;
fadein.play();
fadeout.alphaFrom=1;
fadeout.alphaTo=0;
fadeout.duration=1000;
fadeout.play();
}
]]>
</mx:Script>
<mx:Panel x=”220.5″ y=”24″ width=”436″ title=”Panel” paddingBottom=”10″ paddingLeft=”10″
paddingRight=”10″ paddingTop=”10″>
<mx:Label text=”FADE EFFECT” width=”112″ fontSize=”12″  fontStyle=”italic” fontFamily=”bold” />
<mx:Image id=”img” source=”flower2.jpg” height=”246″ width=”328″
mouseDownEffect=”{fadein}” mouseUpEffect=”{fadeout}”
creationCompleteEffect=”applyEffect()”/>
</mx:Panel>
<mx:Fade id=”fadein”  target=”{img}”>
</mx:Fade>
<mx:Fade id=”fadeout”  target=”{img}”>
</mx:Fade>

</mx:Application>

 

Next Page »

Follow

Get every new post delivered to your Inbox.