Here’s the final result:

1. To create an alien eye draw a white circle that will represent the cornea. Convert it to a Movie Clip that has the registration point centered. Inside this clip draw 2 circles that will represent the iris and convert them to a Movie Clip. Position it right over the cornea. Give an instance name of eye1 for the parent Movie Clip. Drag other two eyes (instance name of eye2 and eye3) and position them on the alien’s body.

2. Now that we have obtained the eye let’s create the interactivity. The basic idea is that we’ll have to rotate the eye according to the mouse position. To do so we’ll calculate the angle from the eye position to the mouse position and rotate it. To obtain the angle we’ll use the atan2 function from Flash, that will have as parameters the Y and X position of the mouse.

radians1 = Math.atan2(a1, b1);

3. The angle obtained from the atan2 function is in radians. To convert it in degrees paste this line.

degrees1 = radians1 / (Math.PI / 180);

4. Now rotate the eye by the angle obtained in degrees.

eye1.rotation = degrees1;

5. In order to change the mouse with something else use this code:

        Mouse.hide();
	cookie.x = mouseX;
	cookie.y = mouseY;

6. All code:

stage.addEventListener("mouseMove", eyesFollow);

cookie.visible = false;

function eyesFollow(e:MouseEvent):void {

	var a1 = mouseY - eye1.y;
	var b1 = mouseX - eye1.x;
	var radians1 = Math.atan2(a1,b1);
	var degrees1 = radians1 / (Math.PI / 180);
	eye1.rotation = degrees1;

	var a2 = mouseY - eye2.y;
	var b2 = mouseX - eye2.x;
	var radians2 = Math.atan2(a2,b2);
	var degrees2 = radians2 / (Math.PI / 180);
	eye2.rotation = degrees2;

	var a3 = mouseY - eye3.y;
	var b3 = mouseX - eye3.x;
	var radians3 = Math.atan2(a3,b3);
	var degrees3 = radians3 / (Math.PI / 180);
	eye3.rotation = degrees3;

	Mouse.hide();
	cookie.visible = true;
	cookie.x = mouseX;
	cookie.y = mouseY;
}

If you’d like to contribute send us via contact form the link that inspired you and specify in the message for “Flash of the day” or via Twitter http://www.twitter.com/flashuser

Nestlé Born Better Campaign

Extreme Music

Fotoqueue CS AS3
FotoQueue CS is a Flash component which allows you to build a queue of your product for displaying to your customer in a way innovative.

The images used in this tutorial were taken from flickr user mundilfari_gjk

The end result (rollover the image for the navigation buttons to appear):

1. Create a new Flash AS3 file (500 x 250) with a frame rate of 30 fps and 3 layers inside of it.

2. In the last layer, create an empty Movie Clip with the registration point in the top left corner (Insert ->New Symbol). Place the images side by side in the Movie Clip together with the text name and description in front of each picture. Give it an instance name of mc.

3. Select the buttons layer from the timeline and draw a 30×30 rectangle and two lines for the button arrow. Center align and convert them to a Movie Clip(right click – Convert to Symbol). Give an instance name of button_left. Duplicate this and inside of it change the arrow shape to point in the right direction and give an instance name of button_right.

4. In the as layer open the Actions tab. Import the transition classes for tweening. Declare variables for the image to play, total images and an array with the X coordinate of each image.

import fl.transitions.easing.*;
import fl.transitions.*;

//know what image to play
var count :Number = 0;

//an array with the images  x - coordinate
var imagePos :Array = [0,-500,-1000,-1500,-2000];

var imgLength = imagePos.length-1;

5. Create the buttons and the functions for them to appear or disapper according to the mouse move.

//left button
button_left.buttonMode = true;
button_left.useHandCursor = true;
button_left.mouseChildren = false;
button_left.addEventListener("mouseDown",buttonLeftPress);
button_left.visible = false;

//right button
button_right.buttonMode = true;
button_right.useHandCursor = true;
button_right.mouseChildren = false;
button_right.addEventListener("mouseDown",buttonRightPress);
button_right.visible = false;

//functions for buttons to appear or disapper according to the mouse move
stage.addEventListener("mouseMove", getPosition);
stage.addEventListener( Event.MOUSE_LEAVE,leftStage );

function leftStage(e:Event) {
	button_left.visible = false;
	button_right.visible = false;
}
function getPosition(e:MouseEvent) {
	if (mouseX < stage.stageWidth/2) {
		button_left.visible = true;
		button_right.visible = false;
	} else {
		button_left.visible = false;
		button_right.visible = true;
	}

}

6. Create the functions for the images transition when you click the left or the right button.

//left button press
function buttonLeftPress(e:MouseEvent) {
	count--;
	if (count <0) {
		count = imgLength;
	}
	new Tween(mc,"x",Regular.easeOut,mc.x,imagePos[count],1,true);
}
//right button press
function buttonRightPress(e:MouseEvent) {
	count++;
	if (count >imgLength) {
		count = 0;
	}

	new Tween(mc,"x",Regular.easeOut,mc.x,imagePos[count],1,true);
}

If you’d like to contribute send us via contact form the link that inspired you and specify in the message for “Flash of the day” or via Twitter http://www.twitter.com/flashuser

GE | Plug Into the Smart Grid

VENOUR

HTML / XML News List AS3
Highly customizable HTML / XML driven news list with custom scrolling and coloring effects. Flash CS3 / Flash CS4 and above / ActionScript 3.0 version.

Here is the final movie:

How is done:

1. Create the 3 small shapes and put them individually in a Movie Clip. Also give each of them an instance name (I call them item1, item2, item3).

2. Now for the large shape, create an empty Movie Clip (instance name bin1). Draw a circle without stroke and convert it to a Movie Clip. Give it an instance name of “shape” and place it at x=0 and y=0. Create a new layer and draw there a circle same width and height like the first one but without fill. Place it at the same coordinates.

3. For the triangle and rectangle follow the steps from point 2, except the empty Movie Clip instances.( rectangle - bin2 , triangle – bin3 )

4. Create two Dynamic TextFields (instance name itemName_txt and info_txt) and place them in a empty Movie Clip (instance name ilabel).

5. Final step copy the actionscript code bellow and paste it in the Actions tab.

item1.objName = "circle";
item1.initX = item1.x;
item1.initY = item1.y;
item1.val = 0;

item2.objName = "rectangle";
item2.initX = item2.x;
item2.initY = item2.y;
item2.val = 0;

item3.objName = "triangle";
item3.initX = item3.x;
item3.initY = item3.y;
item3.val = 0;

bin1.shape.alpha = 0;
bin2.shape.alpha = 0;
bin3.shape.alpha = 0;

item1.buttonMode = true;
item2.buttonMode = true;
item3.buttonMode = true;

item1.addEventListener(MouseEvent.MOUSE_DOWN, mousePress);
item1.addEventListener(MouseEvent.MOUSE_UP, mouseRelease);
item2.addEventListener(MouseEvent.MOUSE_DOWN, mousePress);
item2.addEventListener(MouseEvent.MOUSE_UP, mouseRelease);
item3.addEventListener(MouseEvent.MOUSE_DOWN, mousePress);
item3.addEventListener(MouseEvent.MOUSE_UP, mouseRelease);

//Mouse Events

function mousePress(event:MouseEvent):void {
	var item:MovieClip = MovieClip(event.target);
	item.startDrag();
	item.scaleX = item.scaleY = .95;
	var topPos:uint = this.numChildren - 1;
	this.setChildIndex(item, topPos);
	ilabel.itemName_txt.text = item.objName;
}

function mouseRelease(event:MouseEvent):void {
	var item:MovieClip = MovieClip(event.target);
	item.stopDrag();

	switch (item.objName) {
		case "circle" :
			if (bin1.hitTestObject(item)) {
				updateShape(item, bin1);

			} else {
				ilabel.info_txt.text ="WRONG!";
				item.scaleX = item.scaleY = 1;
			}
			break;
		case "rectangle" :
			if (bin2.hitTestObject(item)) {
				updateShape(item, bin2);

			} else {
				ilabel.info_txt.text ="WRONG!";
				item.scaleX = item.scaleY = 1;
			}
			break;
		case "triangle" :
			if (bin3.hitTestObject(item)) {
				updateShape(item, bin3);
			} else {
				ilabel.info_txt.text ="WRONG!";
				item.scaleX = item.scaleY = 1;
			}
			break;
		default :
			; ;
	}
}
function updateShape(item:MovieClip, bin:MovieClip):void {
	ilabel.itemName_txt.text = "";
	item.scaleX = item.scaleY = 1;
	item.visible = false;
	ilabel.info_txt.text ="CORRECT!";
	bin.shape.alpha = 1;
	item.val = 1;
	resetShapes();
}

function resetShapes() {
	if ((item1.val == 1)&& (item2.val == 1) && (item3.val == 1)) {

		item1.x = item1.initX;
		item1.y = item1.initY;
		item2.x = item2.initX;
		item2.y = item2.initY;
		item3.x = item3.initX;
		item3.y = item3.initY;

		bin1.shape.alpha = 0;
		bin2.shape.alpha = 0;
		bin3.shape.alpha = 0;

		item1.visible = true;
		item2.visible = true;
		item3.visible = true;

		item1.val = 0;
		item2.val = 0;
		item3.val = 0;

	}
}

If you want to change the thumbs into vertical mode configure horizontalMode variable from the FLA file. Also for other parameters check the FLA. Don’t forget to give us credits for this file if you intend to use it.

You first need to understand that this loading problem of an external image or SWF is a bug in how the removing a child / garbage collector / display list mechanisms are working in AS3 / Flash player and not an issue with the SWF of your product(s).

That’s because when you remove a child in Flash AS3, the reference to that child is still there in parent although you believed it was entirely removed. Here is a simple function that you can use in the future when you load images or SWFs inside an empty movie clip:

function loadResource(resURL) {

var url = resURL;
var request1 = new URLRequest(url);
var loader1 = new Loader();

var mc1 = this.getChildByName(“mc”
var nc = mc1.numChildren;

if (nc) { var l1 = mc1.getChildAt(0); mc1.removeChild(l1); l1 = null; }

loader1.load(request1); //start loading img/swf
mc1.addChild(loader1);

loader1.contentLoaderInfo.addEventListener(“complete”, this.finished_loading);

}

function finished_loading(e:Event) { trace(“Loading completed.” }

, where mc is the instance name of an empty movie clip from the stage. You can simply call this function with the path string to your external SWFs and images avoiding references duplicates.