Check out this awesome interactive music video, a great example of blending timeline animation and ActionScript together for a unique interactive experience.

Download the example here.

Positioning based on mouse location can be used for a lot of different visual effects in Flash. Here is a breakdown of the equation commonly used to achieve such a task:

First determine a left most and right post position for your Object

The left most position is where the object should be when the mouse is all the way to the left of the stage. The right most position is where your Object should be when the mouse is at the right most position of the stage.

For this example we’ll use 0 for our leftMostPosition and the stageWidth (550) for our rightMostPosition.

Caclulate the distance between the two points

To calculate the distance between your leftMostPosition and rightMostPosition, simply subtract them like so:

distance = rightMostPoint – leftMostPoint

Calculate the Objects position based on the mouse

In order to calculate the position, we need to get a decimal number that represents where the mouse is in relation to the leftMost and rightMost points. Because we are using 0 and stageWidth for this example, we calcualte this distance like so:

mouseDecimal = mouseX / stageWidth

So if the mouse is at 0, mouseDecimal will be 0, if the mouse is at the stageWidth (far right) mouseDecimal will be 1, anywhere else, it will be somewhere inbetween 0 and 1.

To position our clip, we just multiply the distance by the mouseDecimal and add the leftMostPosition like so:

box.x = leftMostPosition + (mouseDecimal * distance);

Get the source example here.

What’s hit detection?

Hit detection is the ability to determine whether or not two DisplayObjects are colliding.

How’s it work?

It can be achieved any number of ways. Generally speaking, there are two ways of accomplishing this.

The first is the most basic, and limited, and it is to check whether or not two objects are colliding by comparing the coordinates of their bounding boxes, and determining if they overlap. The reason this is limiting is, the default bounding box of a MovieClip is a square, so if you have a non rectangular-shaped movie clip, this type of hit detection may detect a “hit” even if the clip isn’t visually colliding with the compared clip.

Bounding Box

The second, is to use GCollision, a static ActionScript 3.0 Utility class written by Grant Skinner. The above example swf is created using the GCollision hit detection class. What’s nice about this class, is it using true, pixel to pixel, hit detection. In a nutshell, the way it works, is the two clips are converted to bitmaps with opposing colors, a ColorTransform is applied to the bitmap, resulting in a bitmap that shows one of the clips entirely red, the other entirely green, and colliding pixels (if there are any) in yellow. If there is even a pixel of yellow in the resulting image, then collision has occurred.

So lets all say thanks GSkinner!

Get the source example here.

Feel free to post questions to this thread.

blueRect.buttonMode = yellowCircle.buttonMode = redTriangle.buttonMode = true;
blueRect.doubleClickEnabled = yellowCircle.doubleClickEnabled = redTriangle.doubleClickEnabled = true;

blueRect.addEventListener(MouseEvent.MOUSE_DOWN, handleShapeClicked);
yellowCircle.addEventListener(MouseEvent.MOUSE_DOWN, handleShapeClicked);
redTriangle.addEventListener(MouseEvent.MOUSE_DOWN, handleShapeClicked);

blueRect.addEventListener(MouseEvent.MOUSE_UP, handleShapeReleased);
yellowCircle.addEventListener(MouseEvent.MOUSE_UP, handleShapeReleased);
redTriangle.addEventListener(MouseEvent.MOUSE_UP, handleShapeReleased);

blueRect.addEventListener(MouseEvent.DOUBLE_CLICK, handleShapeDoubleClick);
yellowCircle.addEventListener(MouseEvent.DOUBLE_CLICK, handleShapeDoubleClick);
redTriangle.addEventListener(MouseEvent.DOUBLE_CLICK, handleShapeDoubleClick);

function handleShapeDoubleClick(e:MouseEvent) : void {
	trace("handleShapeDoubleClick");
	var clickedShape:MovieClip = e.currentTarget as MovieClip;
	setChildIndex(clickedShape,numChildren-1);
}

function handleShapeClicked(e:MouseEvent) : void {
	var clickedShape:MovieClip = e.currentTarget as MovieClip;
	clickedShape.startDrag(false);
}

function handleShapeReleased(e:MouseEvent) : void {
	var clickedShape:MovieClip = e.currentTarget as MovieClip;
	clickedShape.stopDrag();
}

blueRect.buttonMode = yellowCircle.buttonMode = redTriangle.buttonMode = clearBtn.buttonMode = true;
blueRect.doubleClickEnabled = yellowCircle.doubleClickEnabled = redTriangle.doubleClickEnabled = true;

blueRect.addEventListener(MouseEvent.MOUSE_DOWN, handleShapeClicked);
yellowCircle.addEventListener(MouseEvent.MOUSE_DOWN, handleShapeClicked);
redTriangle.addEventListener(MouseEvent.MOUSE_DOWN, handleShapeClicked);

blueRect.addEventListener(MouseEvent.MOUSE_UP, handleShapeReleased);
yellowCircle.addEventListener(MouseEvent.MOUSE_UP, handleShapeReleased);
redTriangle.addEventListener(MouseEvent.MOUSE_UP, handleShapeReleased);

blueRect.addEventListener(MouseEvent.DOUBLE_CLICK, handleShapeDoubleClick);
yellowCircle.addEventListener(MouseEvent.DOUBLE_CLICK, handleShapeDoubleClick);
redTriangle.addEventListener(MouseEvent.DOUBLE_CLICK, handleShapeDoubleClick);

createCircleBtn.addEventListener(MouseEvent.MOUSE_UP, handleCreateClicked);
createRectBtn.addEventListener(MouseEvent.MOUSE_UP, handleCreateClicked);
createTriangleBtn.addEventListener(MouseEvent.MOUSE_UP, handleCreateClicked);

clearBtn.addEventListener(MouseEvent.MOUSE_UP, handleClearClicked);

var shapeHolder:Sprite = new Sprite();
removeChild(blueRect);
removeChild(yellowCircle);
removeChild(redTriangle);

shapeHolder.addChild(blueRect);
shapeHolder.addChild(yellowCircle);
shapeHolder.addChild(redTriangle);

addChildAt(shapeHolder,0);

function get randomX() : Number {
	return Math.random() * stage.stageWidth;
}

function get randomY() : Number {
	return Math.random() * stage.stageHeight;
}

function get randomColor() : Number {
	return Math.random() * 0xFFFFFF;
}

function randomRange(min:Number, max:Number) : Number {
	var _dif:Number = max - min;
	return min + Math.random() * _dif;
}

function handleClearClicked(e:MouseEvent) : void {
	while(shapeHolder.numChildren) shapeHolder.removeChildAt(0);
}

function handleCreateClicked(e:MouseEvent) : void {
	var clickedCreateBtn:MovieClip = e.currentTarget as MovieClip;

	var shapeSprite:Sprite = new Sprite();
	shapeSprite.graphics.beginFill(randomColor);

	switch(clickedCreateBtn) {
		case createCircleBtn:
		shapeSprite.graphics.drawCircle(randomX, randomY, Math.random() * 50);
		break;

		case createRectBtn:
		shapeSprite.graphics.drawRect(randomX, randomY, randomRange(10,100), randomRange(10, 100));
		break;

		case createTriangleBtn:
		var vertices:Vector. = new Vector.();
		vertices.push(randomX,randomY,randomX,randomY,randomX,randomY);
		shapeSprite.graphics.drawTriangles(vertices);
		break;
	}

	shapeSprite.buttonMode = shapeSprite.doubleClickEnabled = true;

	shapeSprite.addEventListener(MouseEvent.MOUSE_DOWN, handleShapeClicked);
	shapeSprite.addEventListener(MouseEvent.MOUSE_UP, handleShapeReleased);
	shapeSprite.addEventListener(MouseEvent.DOUBLE_CLICK, handleShapeDoubleClick);

	shapeHolder.addChild(shapeSprite);
}

function handleShapeDoubleClick(e:MouseEvent) : void {
	var clickedShape:Sprite = e.currentTarget as Sprite;
	shapeHolder.setChildIndex(clickedShape,shapeHolder.numChildren-1);
}

function handleShapeClicked(e:MouseEvent) : void {
	var clickedShape:Sprite = e.currentTarget as Sprite;
	clickedShape.startDrag(false);
}

function handleShapeReleased(e:MouseEvent) : void {
	var clickedShape:Sprite = e.currentTarget as Sprite;
	clickedShape.stopDrag();
}