<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>manewc &#187; Animation Transitions</title>
	<atom:link href="http://manewc.com/category/actionsript-transitions/feed/" rel="self" type="application/rss+xml" />
	<link>http://manewc.com</link>
	<description>iPhone, Flash, Flex, AIR, &#38; Web Development</description>
	<lastBuildDate>Sat, 31 Oct 2009 16:47:47 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Trails Animation</title>
		<link>http://manewc.com/2008/08/21/trails-animation/</link>
		<comments>http://manewc.com/2008/08/21/trails-animation/#comments</comments>
		<pubDate>Thu, 21 Aug 2008 16:53:47 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Actionscript 3]]></category>
		<category><![CDATA[Animation Transitions]]></category>
		<category><![CDATA[Arrays]]></category>

		<guid isPermaLink="false">http://manewc.com/?p=179</guid>
		<description><![CDATA[This code was submitted to me via email who requested some assistance to get this trailing animation to be bound by any newly created object. I edited the code slightly and added a Rect class to build my rectangle object (which could be replaced by an image if so desired). I added a timer to [...]]]></description>
			<content:encoded><![CDATA[<p>This code was submitted to me via email who requested some assistance to get this trailing animation to be bound by any newly created object. I edited the code slightly and added a Rect class to build my rectangle object (which could be replaced by an image if so desired). I added a timer to reproduce the object, here is the resulting code/movie:</p>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_Main_839369561"
			class="flashmovie"
			width="700"
			height="700">
	<param name="movie" value="/projects/flash/TrailsAnimation/Main.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/projects/flash/TrailsAnimation/Main.swf"
			name="fm_Main_839369561"
			width="700"
			height="700">
	<!--<![endif]-->
		
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
<p>The Main.as:</p>
<pre name="code" class="c-sharp">
package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.utils.Timer;
	import flash.events.TimerEvent;

	 public class Main extends MovieClip
	 {
		private var clip_arr:Array; // an array of clips
		private var clip_ct:Number = 0;

		private var clip_mc:Rect;

		private const RADIUS:int=30;
		private const FRICTION:Number=.95;

		public function Main()
		{
			init();
		}

		private function init():void
		{
			stage.frameRate=31;

			clip_arr = new Array();

			var myTimer:Timer = new Timer(500, 50);
            myTimer.addEventListener("timer", createClip);
            myTimer.start();
		}

		private function createClip(e:TimerEvent):void
		{
			var randXOffset = Math.random() * stage.stageWidth;
			var randYOffset = Math.random() * stage.stageHeight;

			clip_arr.push ( new Rect() );
			clip_arr[clip_ct].x=Math.cos(clip_arr[clip_ct].angle*1)*RADIUS + randXOffset;
			clip_arr[clip_ct].y=Math.sin(clip_arr[clip_ct].angle*2)*RADIUS + randYOffset;
			clip_arr[clip_ct].offsetX = randXOffset;
			clip_arr[clip_ct].offsetY = randYOffset;
			clip_arr[clip_ct].angle=0;
			addChild(clip_arr[clip_ct]);
			clip_arr[clip_ct].addEventListener(Event.ENTER_FRAME,go);

			clip_ct++;
		}

		private function go(evt:Event):void
		{
  			evt.target.x=Math.cos(evt.target.angle*2)*RADIUS + evt.target.offsetX;
  			evt.target.y=Math.sin(evt.target.angle*3)*RADIUS + evt.target.offsetY;
  			evt.target.angle+=.05;

  			var copy_mc:MovieClip=new Rect();
  			addChild(copy_mc);

  			copy_mc.x=evt.target.x;
  			copy_mc.y=evt.target.y;
 			copy_mc.addEventListener(Event.ENTER_FRAME,goCopy);
		}

		private function goCopy(evt:Event):void
		{
			evt.target.alpha*=FRICTION;
			evt.target.scaleY=evt.target.alpha;
			if(evt.target.alpha<=.3)
			{
				evt.target.removeEventListener(Event.ENTER_FRAME,goCopy);
				var m:MovieClip=evt.target as MovieClip;
				removeChild(m);
			}
		}
	}
}
</pre>
<p>The rect class:</p>
<pre name="code" class="c-sharp">
package
{
	import flash.display.MovieClip;

	public class Rect extends MovieClip
	{
		private var xPos:Number;
		private var yPos:Number;
		private var rWidth:Number;
		private var rHeight:Number;
		private var color:uint;

		public var angle = Number;
		public var offsetX = Number;
		public var offsetY = Number;

		public function Rect(xPos:Number=0,yPos:Number=0,rWidth:Number=10,rHeight:Number=10,color:uint=0x336699)
		{
			this.graphics.beginFill(color);
			this.graphics.drawRect(xPos,yPos,rWidth,rHeight);
			this.graphics.endFill();

			this.angle = 0;
		}
	}
}
</pre>
]]></content:encoded>
			<wfw:commentRss>http://manewc.com/2008/08/21/trails-animation/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[AS 3] Tween Transitions with fl.transitions Actionscript Package</title>
		<link>http://manewc.com/2008/02/04/as-3-tween-transitions-with-fltransitions-actionscript-package/</link>
		<comments>http://manewc.com/2008/02/04/as-3-tween-transitions-with-fltransitions-actionscript-package/#comments</comments>
		<pubDate>Mon, 04 Feb 2008 19:19:14 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Actionscript 3]]></category>
		<category><![CDATA[Animation Transitions]]></category>

		<guid isPermaLink="false">http://manewc.com/2008/02/04/as-3-tween-transitions-with-fltransitions-actionscript-package/</guid>
		<description><![CDATA[I decided to play around with the methods of animation to create a simple animation. If you click anywhere inside the flash movie below, a new ball will generate in the center of the stage and then will tween to the mouse position on the onClick event handler. There are various easing types of animation, [...]]]></description>
			<content:encoded><![CDATA[<p>I decided to play around with the methods of animation to create a simple animation. If you click anywhere inside the flash movie below, a new ball will generate in the center of the stage and then will tween to the mouse position on the onClick event handler. There are various easing types of animation, for this one I chose the Elastic easing class.</p>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_TweenTransition_227201919"
			class="flashmovie"
			width="550"
			height="400">
	<param name="movie" value="/projects/flash/TweenTransition/TweenTransition.swf" />
	<param name="bgcolor" value="#000000" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/projects/flash/TweenTransition/TweenTransition.swf"
			name="fm_TweenTransition_227201919"
			width="550"
			height="400">
		<param name="bgcolor" value="#000000" />
	<!--<![endif]-->
		
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
<p>Here is the ball code</p>
<pre name="code" class="c-sharp">
package {
	import flash.display.Sprite;

	public class Ball extends Sprite {
		public var radius:Number;
		private var color:uint;

		public var vx:Number = 0;
		public var vy:Number = 0;
		public var NewXPos:Number = 0;
		public var NewYPos:Number = 0;

		public function Ball(radius:Number=20, color:uint=0xb3d830) {
			this.radius = radius;
			this.color = color;
			init();
		}

		public function init():void {
			graphics.beginFill(color);
			graphics.drawCircle(0, 0, radius);
			graphics.endFill();
		}
	}
}</pre>
<p>Here is the document class.</p>
<pre name="code" class="c-sharp">
package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import fl.transitions.Tween;
	import fl.transitions.easing.*;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFieldType;
	import flash.text.TextFormat;

	public class TweenTransition extends Sprite
	{
		private var ball:Ball;
		private var output:TextField;

		public function TweenTransition()
		{
			showInstructions();
			setStage();
		}

		private function setStage():void
		{
			output.text = "Click the stage to have the balls animate to your mouse position";

			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			stage.addEventListener(MouseEvent.MOUSE_DOWN, animateToMouse);
		}

		private function animateToMouse(event:MouseEvent):void
		{
			var ball:Ball = new Ball(20, Math.random() * 0xffffff);

			ball.x = stage.stageWidth / 2;
			ball.y = stage.stageHeight / 2;

			addChild(ball);

			/*
			Parameters:
			object, property, function, begin number, final number, duration, useSeconds (boolean)
			*/

			var x_animation:Tween = new Tween(ball, "x", Elastic.easeOut, ball.x, mouseX, 2, true);
			var y_animation:Tween = new Tween(ball, "y", Elastic.easeOut, ball.y, mouseY, 2, true);
		}

		private function showInstructions():void
		{
			// Small Black Text Formatting
			var insText:TextFormat = new TextFormat();
			insText.font = "Arial";
			insText.color = 0xcccccc;
            insText.size = 16;
            insText.underline = false;

			// output TextField
        	output = new TextField();
			output.defaultTextFormat = insText;
        	addChild(output);
        	output.x = 10;
        	output.y = 35;
            output.width = stage.stageWidth;
            output.height = 22;
		}
	}

}</pre>
]]></content:encoded>
			<wfw:commentRss>http://manewc.com/2008/02/04/as-3-tween-transitions-with-fltransitions-actionscript-package/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>[AS 3] Simple Motion Tween To A Point</title>
		<link>http://manewc.com/2008/01/17/as-3-simple-motion-tween-to-a-point/</link>
		<comments>http://manewc.com/2008/01/17/as-3-simple-motion-tween-to-a-point/#comments</comments>
		<pubDate>Thu, 17 Jan 2008 23:27:40 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Actionscript 3]]></category>
		<category><![CDATA[Animation Transitions]]></category>

		<guid isPermaLink="false">http://manewc.com/2008/01/17/as-3-simple-motion-tween-to-a-point/</guid>
		<description><![CDATA[I just wanted to make a dynamically drawn box be animated to the center of the stage. I figure I can use this as a building block animation for a future project.
First we will use the DrawRectangle class to construct our object.

package
{
	import flash.display.Sprite;

	public class DrawRectangle extends Sprite
	{
		private var xPos:Number;
		private var yPos:Number;
		private var rWidth:Number;
		private var rHeight:Number;
		private [...]]]></description>
			<content:encoded><![CDATA[<p>I just wanted to make a dynamically drawn box be animated to the center of the stage. I figure I can use this as a building block animation for a future project.</p>
<p>First we will use the DrawRectangle class to construct our object.</p>
<pre class="c-sharp" name="code">
package
{
	import flash.display.Sprite;

	public class DrawRectangle extends Sprite
	{
		private var xPos:Number;
		private var yPos:Number;
		private var rWidth:Number;
		private var rHeight:Number;
		private var color:uint;

		public function DrawRectangle(xPos:Number=0,yPos:Number=0,rWidth:Number=10,rHeight:Number=10,color:uint=0x336699)
		{
			this.graphics.beginFill(color);
			this.graphics.drawRect(xPos,yPos,rWidth,rHeight);
			this.graphics.endFill();
		}
	}
}</pre>
<p>Now our animation code which will be our Document Class called MoveToPoint</p>
<pre class="c-sharp" name="code">
package
{
	import flash.display.Sprite;
	import flash.events.Event;

	public class MoveToPoint extends Sprite
	{
		private var box:DrawRectangle;
		private var speed:Number = 20;

		private var finalx:Number = stage.stageWidth / 2;
		private var finaly:Number = stage.stageHeight / 2;

		public function MoveToPoint()
		{
			init();
		}

		private function init():void
		{
			box = new DrawRectangle();
			addChild(box);
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}

		private function onEnterFrame(event:Event):void
		{
			var dx:Number = finalx - box.x;
			var dy:Number = finaly - box.y;

			var angle:Number = Math.atan2(dy, dx);
			var vx:Number = Math.cos(angle) * speed;
			var vy:Number = Math.sin(angle) * speed;
			if (box.x + vx &lt; finalx &amp;&amp; box.y + vy &lt; finaly)
			{
				box.x += vx;
				box.y += vy;
			}
			else
			{
				box.x = finalx;
				box.y = finaly;
			}
		}
	}
}</pre>
]]></content:encoded>
			<wfw:commentRss>http://manewc.com/2008/01/17/as-3-simple-motion-tween-to-a-point/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[AS 3] Simple Tween Animation with Actionscript</title>
		<link>http://manewc.com/2008/01/08/as-3-simple-tween-animation-with-actionscript/</link>
		<comments>http://manewc.com/2008/01/08/as-3-simple-tween-animation-with-actionscript/#comments</comments>
		<pubDate>Tue, 08 Jan 2008 19:05:06 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Actionscript 3]]></category>
		<category><![CDATA[Animation Transitions]]></category>

		<guid isPermaLink="false">http://manewc.com/2008/01/08/as-3-simple-tween-animation-with-actionscript/</guid>
		<description><![CDATA[Here is some code that will load an external image and then animate it across the Flash stage. There is an if conditional to check if it rolls off the stage and if it does then animation will play again at original starting point.

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.display.Loader;
	import flash.net.URLRequest;

	public class SimpleTween extends Sprite
	{
		private var image:Loader = [...]]]></description>
			<content:encoded><![CDATA[<p>Here is some code that will load an external image and then animate it across the Flash stage. There is an if conditional to check if it rolls off the stage and if it does then animation will play again at original starting point.</p>
<pre name="code" class="c-sharp">
package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.display.Loader;
	import flash.net.URLRequest;

	public class SimpleTween extends Sprite
	{
		private var image:Loader = new Loader();
		private var startingXPoint:uint = 10;
		private var startingYPoint:uint = 10;

		public function SimpleTween()
		{
			init();
		}

		private function init():void
		{
			// load the image
			addChild(image);
			image.load(new URLRequest("/path/to/my/image.gif"));

			// position the image
			image.x = startingXPoint;
			image.y = startingYPoint;

			// animate the image onEnterFrame
			image.addEventListener(Event.ENTER_FRAME, timeline);
		}

		private function timeline(event:Event):void {
			if ( image.x &lt; stage.stageWidth + (image.width/2) &amp;&amp; image.y &lt; stage.stageHeight + (image.height/2))
			{
				// move the image
				image.x+= 10;
				image.y+= 10;
			}
			else
			{
				// this is to reset the image as it is off the screen
				image.x = startingXPoint;
				image.y = startingYPoint;
			}
		}
	}
}</pre>
]]></content:encoded>
			<wfw:commentRss>http://manewc.com/2008/01/08/as-3-simple-tween-animation-with-actionscript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
