Actionscript based effects examples
by jlagunas on Dec.18, 2008, under Actionscript
Here’s an example of the effects code from a previous post. It fades the Flex icon out and in, same goes with the move effect, it moves the Flex icon to the bottom right and back.
MXML File
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0xffffff" themeColor="0xffffff" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.effects.Move;
import mx.effects.Fade;
import mx.effects.easing.Cubic;
public var moveStatus:Boolean;
public var fadeeStatus:Boolean;
public function FadeEffect(target:Object, duration:Number, delay:Number, alphaFrom:Number, alphaTo:Number):void
{
var fadeEffect:Fade = new Fade();
fadeEffect.end();
fadeEffect.target = target;
fadeEffect.duration = duration;
fadeEffect.startDelay = delay;
fadeEffect.easingFunction = Cubic.easeInOut;
fadeEffect.alphaFrom = alphaFrom;
fadeEffect.alphaTo = alphaTo;
fadeEffect.play();
}
public function MoveEffect(target:Object, duration:Number, delay:Number, xStart:Number, xEnd:Number, yStart:Number, yEnd:Number):void
{
var moveEffect:Move = new Move();
moveEffect.end();
moveEffect.target = target;
moveEffect.duration = duration;
moveEffect.startDelay = delay;
moveEffect.easingFunction = Cubic.easeInOut;
moveEffect.xFrom = xStart;
moveEffect.xTo = xEnd;
moveEffect.yFrom = yStart;
moveEffect.yTo = yEnd;
moveEffect.play();
}
public function fadeIcon():void
{
switch(fadeeStatus)
{
case false :
fadeeStatus = true;
FadeEffect(flexicon, 1000, 0, 1, 0);
fader.label = "fade in";
break;
case true :
fadeeStatus = false;
FadeEffect(flexicon, 1000, 0, 0, 1);
fader.label = "fade out";
break;
}
}
public function moveIcon():void
{
switch(moveStatus)
{
case false :
moveStatus = true;
MoveEffect(flexicon, 1000, 0, flexicon.x, (iconContainer.width - flexicon.width), flexicon.y, (iconContainer.height - flexicon.height));
mover.label = "move to top left";
break;
case true :
moveStatus = false;
MoveEffect(flexicon, 1000, 0, flexicon.x, 0, flexicon.y, 0);
mover.label = "move to bottom right";
break;
}
}
]]>
</mx:Script>
<mx:VBox width="100%" height="100%">
<mx:HBox>
<mx:Button id="fader" label="fade out" click="fadeIcon();" />
<mx:Button id="mover" label="move to bottom right" click="moveIcon();" />
</mx:HBox>
<mx:Container id="iconContainer" width="100%" height="100%">
<mx:Image id="flexicon" source="assets/images/flex-icon.png" width="104" height="104" />
</mx:Container>
</mx:VBox>
</mx:Application>
1 comment for this entry:

July 15th, 2009 on 8:09 am
Hi,thanks for all your tutorial..Waiting for your other tutorial.. ^_^