Interactive Authoring

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.

Below are links to the quiz pdfs
Quiz 1
Quiz 2
Quiz 3
Quiz 4