FEATURES:

• Fully customizable XML driven content
• Customizable width, height and item size
• Unlimited number of images ( JPG, PNG, BMP, GIF ) and SWF support
• Easy to use XML file for images / titles / descriptions and links
• View banner images by using the number buttons and left / right end arrow
• AutoPlay / AutoScroll / Previous / Next with global or individual timer for each image
• Time period adjustable from the XML file (in seconds)
• Both horizontal and vertical dock menu orientation support
• Dynamic image reflection with transparency, distance and direction settings
• Zoom amount and zoom speed setting on mouseover with zoom/position influence option on adjacent items
• Optional menu image highlighting feature for the active / inactive items
• Items alignment and rollover mouse movement speed options
• Define menu image borders size/color from within the XML configuration file
• Custom Horizontal / Vertical / Matrix orientation support for the navigation buttons
• Multiple mask transition effects such as Move, Fade, Tile, Radial Fade …
• Global or individual timer and transition definition for each text paragraph
• HTML / CSS driven descriptions, tooltips, text wrapping, font embedding, background and border color / size support
• Set URL links within the description text or when pressing on individual images
• Display the items in the order they appear in your XML file or in a random order
• Optional you can show / hide the navigation buttons and adjust each button position
• Optionally set the XML settings file path in HTML using FlashVars
• Full Screen mode support, you can use it as a banner and slidewhow and image gallery

Download flash file from here

License

Free for public as long as you don’t try to hide Flashtuning logo located in the top left corner of the dock gallery. You can’t redistribute / resell the functionality provided with the downloaded product without the author’s written permission.

Check the preview for the Free X-Treme Banner Rotator:

Features

• No Flash Knowledge required to insert the Free Banner Rotator SWF inside the HTML page(s) of your site
• Fully customizable XML driven content
• Customizable width, height and item size
• Unlimited number of images ( JPG, PNG, BMP, GIF ) and SWF support
• Easy to use XML file for images / titles / descriptions and links
• View banner images by using the number buttons and left / right end arrow
• AutoPlay / Previous / Next with global or individual timer for each image
• Time period adjustable from the XML file (in seconds)
• Custom Horizontal / Vertical / Matrix orientation support for the navigation buttons
• Multiple mask transition effects such as Move, Fade, Tile, Radial Fade …
• Global or individual timer and transition definition for each text paragraph
• HTML / CSS driven description, text wrapping, font embedding, background and border color / size support
• Set URL links within the description text or when pressing on individual images
• Display the items in the order they appear in your XML file or in a random order
• Optional you can show / hide the navigation buttons and adjust each button position
• Optionally set the XML settings file path in HTML using FlashVars
• Full Screen mode support, you can use it as a banner and slidewhow and image gallery

Download banner rotator from here

License

You are free to use the X-Treme Banner Rotator files in any project personal / commercial as long as you not redistribute / resell the functionality provided with the downloaded product without the author’s written permission. You may modify its content in case you want to use the product for a custom project.

Check the preview for the Free HTML Table Renderer AS3:

Download flash file from here

License

You are free to use the flash Html Table Renderer AS3 files in any project personal / commercial as long as you not redistribute / resell the functionality provided with the downloaded product without the author’s written permission. You may modify its content in case you want to use the product for a custom project.

Check the preview for the Free 3D Image Zoom Menu XML AS3:

Features

• XML configuration file easy to setup
• Dynamic image mirror & roll over image coloring
• Mouse/keys camera movement speed adjustment
• Support for external URLs and browser window resize
• Optionally set the main XML configuration file path in HTML using FlashVars

Download file from here

License

You are free to use the flash 3d zoom menu files in any project personal / commercial as long as you not redistribute / resell the functionality provided with the downloaded product without the author’s written permission. You may modify its content in case you want to use the product for a custom project.

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.