I'm wondering how and in wich direction I should approach this idea:

I want a image container that would change form depending on wich image the user are activating.

The thing is to transform from what ever shape the container is, say triangle, to what ever form the activaed container should be, say circle.

So if the container is triangle and the user push circle or square it would transform from triangle to what ever form chosen


I'm I babbling?

my gut say "look in to drawing API" am I rigth?

If I knew it was harmless i would have killed it myself

[Nutrox]

I can't think of an easy way to do that, even the new AS3 motion classes don't seem to provide a way to tween vector graphics dynamically, I think the easiest thing to do would be to create a MovieClip containing all of the tweens on its timeline. For example, frames 1-10 might be "circle-to-square", frames 11-20 might be "circle-to-triangle", frames 21-30 might be "square-to-circle", frames 31-40 might be "square-to-triangle"... and so on... but it could end up being a HUGE amount of work if you have a lot of shapes, plus it wouldn't be easy to update. You could use that MovieClip as a mask and call gotoAndPlay("circle-to-square") or gotoAndPlay("square-to-circle") etc when needed.

[pisosse]

hmmm... how about if I left out the circle and only have straight lines. Could'n I have 4 MC's that i draw lineTo whit the API and then let the MC's move to position? Then it's only a frame that are shapeshifting and i materialise the content in another container..

othervise I'll think up another design... THanks nutrox you spared me a LOT of time... again!

[Nutrox]

Yep, you could use a collection of points to draw the shapes and then tween those points to different positions, lines could be drawn point-to-point in order to create the outline of the shape/mask.

Let me know if you're using AS2 or AS3 and I will put a demo together for you.

[Nutrox]

Well I've put an AS3 demo together anyway, it was easy enough to do (see attached file). If you're using AS2 you shouldn't have any problem converting the code.

Here is the code for reference:

package
{
	public class Dot
	{
		public var x:Number;
		public var y:Number;
		public var nextX:Number = 0.0;
		public var nextY:Number = 0.0;

		public function Dot( x:Number=0.0, y:Number=0.0 )
		{
			this.x = x;
			this.y = y;
			nextX = x;
			nextY = y;
		}
	}
}

package
{
	import flash.display.Sprite;
	import flash.events.Event;

	public class Demo extends Sprite
	{
		private var dots:Array = [];

		public function Demo()
		{
			createDots();

			stage.addEventListener( "enterFrame", onEnterFrame );
			stage.addEventListener( "mouseDown", onMouseDown );
		}

		private function createDots():void
		{
			var x:Number = 125.0;
			var y:Number = 025.0;
			var u:Number = 200.0;
			var v:Number = 150.0;

			dots.push( new Dot( x + 0.0 * u, y + 0.0 * v ) );
			dots.push( new Dot( x + 1.0 * u, y + 0.5 * v ) );
			dots.push( new Dot( x + 2.0 * u, y + 0.0 * v ) );
			dots.push( new Dot( x + 1.5 * u, y + 1.0 * v ) );
			dots.push( new Dot( x + 2.0 * u, y + 2.0 * v ) );
			dots.push( new Dot( x + 1.0 * u, y + 1.5 * v ) );
			dots.push( new Dot( x + 0.0 * u, y + 2.0 * v ) );
			dots.push( new Dot( x + 0.5 * u, y + 1.0 * v ) );
		}

		private function updateDots():void
		{
			var d:Dot;
			var i:int = dots.length;

			while( i -- )
			{
				d = dots[ i ];
				d.x += ( d.nextX - d.x ) * 0.2;
				d.y += ( d.nextY - d.y ) * 0.2;
			}
		}

		private function drawDots():void
		{
			graphics.clear();
			graphics.beginFill( 0 );

			var d:Dot;
			var i:int = dots.length;
			var j:int = dots.length - 1;

			while( i -- )
			{
				d = dots[ i ];

				if( i == j )
				{
					graphics.moveTo( d.x, d.y );
				}
				else
				{
					graphics.lineTo( d.x, d.y );
				}
			}

			graphics.endFill();
		}

		private function scatterDots():void
		{
			var d:Dot;
			var i:int = dots.length;

			while( i -- )
			{
				d = dots[ i ];
				d.nextX = d.x + ( -20.0 + Math.random() * 41.0 );
				d.nextY = d.y + ( -20.0 + Math.random() * 41.0 );
			}
		}

		private function onEnterFrame( e:Event ):void
		{
			updateDots();
			drawDots();
		}

		private function onMouseDown( e:Event ):void
		{
			scatterDots();
		}
	}
}

When you click the mouse button the dots (points) will move to a random position.

Attached Files

demo.zip (7.2 KB, 4 views)

[pisosse]

Your awesome nutrox.... Send me a PM with your bankaccount and I'll send you a good bottle of wine!

[pisosse]

hmmm... is it a CS4 file? I failed to open it... maybe it's time to upgrade

[Nutrox]

Yar, it is a CS4 file but there is nothing in the FLA, the Demo.as file is the document class.

[pisosse]

Yea i noticed... a tons of thanks mate :-D