LetsFlex

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:
  1. handoyo

    Hi,thanks for all your tutorial..Waiting for your other tutorial.. ^_^

Leave a Reply

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...

Archives

All entries, chronologically...