Interactive Authoring

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.

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.

Check out this video that Nick shared, really cool… multitouch input, auto-correction of vector strokes, and even reusable symbols (a la Flash, Illustrator, etc.) Read more here.

Get the Skillset 6 handout here.

So you wanna make a circle loader huh? Here’s a preview… Will be updating this post soon.

Check out the ArrayUtils Documentation here. The methods you need to recreate are:
swapElements()
vacateElements()
shuffle()
deDupe()

Feel free to post questions to this thread.

Drag the shapes around, notice that Double Clicking a shape brings it to the top of the DisplayList. Get the files for this example here.

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();
}

In this example, clicking on a rectangle button on the left will create a new randomly generated shape. Notice that as in the example above, double clicking any shape will move it to the top of the DisplayList.
The red rectangle in the bottom left will clear all the shapes off the stage (clears the DisplayList).
Notice that as the randomly generated shapes are created and are moved around, they remain beneath the create buttons on the right and the clear button on the bottom left. This is done by adding the randomly generated shapes to a Sprite instance’s DisplayList that is created and placed beneath the other clips on the stage, rather than adding them directly to the stage itself.

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();
}

Get the handout for the Skillset 5 assignment here.

Get the handout for the Skillset 4 assignment here.