I’ll explain to you how the Actionscript 3 Tweener works, illustrating that with examples.

Visit the official page of the project if you want to know more.

First of all download the latest version of the tweener. The download section (“Featured downloades”) is on the right side of the site.

Important: The caurina folder must be in the same directory as your Flash project.

This line of code will import the caurina tweener class:

import caurina.transitions.Tweener;

Lets see how the code for a basic transition look like:

Tweener.addTween(circle, {x:390, time:1, transition:"linear"});

where:

• circle – is the DisplayObject
• first parameter is the circle attribute
• time – how long a transition will take in seconds
• transition – the type of transition to use; to experiment with other transitions have a look at the Transition Cheet Sheets
• for other parameters check out the documentation

1. Simple Tween:
Move the circle MovieClip instance from the initial position x = 10 to x = 390 in a linear transition.

import caurina.transitions.Tweener;
circle.x = 10;
Tweener.addTween(circle, {x:390, time:1, transition:"linear"});

2. Multiple MovieClip attributes:
Move the circle MovieClip instance from the initial position x = 10 y = 75 and alpha = 0 to x = 350 y = 150 and alpha = 1 in a linear transition.

import caurina.transitions.Tweener;
circle.x = 10;
circle.y = 75;
circle.alpha = 0;
Tweener.addTween(circle, {x:350, y:150, alpha:1, time:1, transition:"linear"});

3. Two transitions:
The first one will move the circle on the x axis,the second one will change the y axis, different transitions.

import caurina.transitions.Tweener;
circle.x = 10;
circle.y = 75;
Tweener.addTween(circle, {x:350, time:0.5, transition:"easeInQuart"});
Tweener.addTween(circle, {y:150, time:1, transition:"easeOutBounce"});

4. Delay parameter:
After the first transition is finished there will be a 1 seconds delay ( how it’s calculated: second transition delay – first transition time ) for the next transition to start.

import caurina.transitions.Tweener;
circle.x = 10;
circle.y = 75;
Tweener.addTween(circle, {x:350, time:0.5, transition:"easeInQuart"});
Tweener.addTween(circle, {y:150, time:1,transition:"easeOutBounce", delay:1.5});

5. onComplete parameter:
After the transition is finished you can do something else.

import caurina.transitions.Tweener;
tF.alpha = 0;
circle.x = 10;
circle.y = 75;
Tweener.addTween(circle, {x:350, time:0.5, transition:"easeInQuart", onComplete:func});

function func() {
	tF.alpha = 1;
}

6. onCompleteParams parameter:
If you want your onComplete function to have parameters you can do that using onCompleteParams.

import caurina.transitions.Tweener;
tF.alpha = 0;
	circle.x = 10;
	circle.y = 75;
	Tweener.addTween(circle, {x:350, time:0.5, transition:"easeInQuart", onComplete:func, onCompleteParams:["Using onCompleteParams"]});

function func(t:String) {
	tF.txt.text = t;
	tF.alpha = 1;
}

7. Special Properties – Color:
This special class helps you to apply easy color transformation to your objects.

import caurina.transitions.Tweener;
import caurina.transitions.properties.ColorShortcuts;
ColorShortcuts.init();

circle.x = 10;
circle.y = 75;
Tweener.addTween(circle, {x:200, _color:0xFF0000, time:1, transition:"easeOutElastic"});
}

Experiment with various parameters and you’ll create amazing animations with just a few lines of code. You can go deep by using the Special Properties, see the online documentation for more.

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

It’s build in ActionScript 3.0.

Note: You can download the source code, edit it or not, but we’re not responsible for what you do. You can’t sell or redistribute the files you download from Flashuser. You may not republish the content or parts of it without asking permission.

You can set the menu to work horizontally or vertically according to your needs. Probably supports unlimited number of images.

Use this free flash file as you like and don’t forget to give us credits for this if you intend to use it.

Horizontal Example:

Vertical Example:

Here is what we’ll end up with:

1. Open up Flash and create a new ActionScript 3.0 file.

2. Create a new MovieClip (Insert->New Symbol). I named it “about”. Draw a rounded rectangle (I put 10 for the roundness) and create a TextField for the button’s name.(I typed ABOUT). Check the image bellow.

3. For the other two menu items duplicate the about MovieClip(right click on it in the library – Duplicate). Drag each buttons on the stage, align them and give each an instance name. (about, work, contact)

4. Open the Actions tab and import this classes.

import flash.filters.BitmapFilterQuality;
import flash.filters.GlowFilter;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

5. We’ll make each MovieClip to behave like a button. The aux1 variable is used on the mouseOverHandler to know witch item must have the glow effect. Attach for each button the mouse handler functions for rollOver and rollOut.

var aux1;

about.mouseChildren = false;
about.buttonMode = true;
about.useHandCursor = true;

work.mouseChildren = false;
work.buttonMode = true;
work.useHandCursor = true;

contact.mouseChildren = false;
contact.buttonMode = true;
contact.useHandCursor = true;

about.addEventListener("mouseOver", mouseOverHandler);
about.addEventListener("mouseOut", mouseOutHandler);
work.addEventListener("mouseOver", mouseOverHandler);
work.addEventListener("mouseOut", mouseOutHandler);
contact.addEventListener("mouseOver", mouseOverHandler);
contact.addEventListener("mouseOut", mouseOutHandler);

6. Create the glow filters and attach them for each button.

var aboutGlow:GlowFilter = new GlowFilter(0xD13083, 1, 2, 2, 2, 3, false, false);
var workGlow:GlowFilter = new GlowFilter(0xD13083, 1, 2, 2, 2, 3, false, false);
var contactGlow:GlowFilter = new GlowFilter(0xD13083, 1, 2, 2, 2, 3, false, false);

var aboutGlowX:Tween = new Tween(aboutGlow, "blurX", Regular.easeOut, 2, 2, 1, true);
var aboutGlowY:Tween = new Tween(aboutGlow, "blurY", Regular.easeOut, 2, 2, 1, true);
var workGlowX:Tween = new Tween(workGlow, "blurX", Regular.easeOut, 2, 2, 1, true);
var workGlowY:Tween = new Tween(workGlow, "blurY", Regular.easeOut, 2, 2, 1, true);
var contactGlowX:Tween = new Tween(contactGlow, "blurX", Regular.easeOut, 2, 2, 1, true);
var contactGlowY:Tween = new Tween(contactGlow, "blurY", Regular.easeOut, 2, 2, 1, true);

aboutGlowX.addEventListener("motionChange", aboutFunc);
workGlowX.addEventListener("motionChange", workFunc);
contactGlowX.addEventListener("motionChange", contactFunc);

function aboutFunc(e:TweenEvent) {
	about.filters = [aboutGlow];
}
function workFunc(e:TweenEvent) {
	work.filters = [workGlow];
}
function contactFunc(e:TweenEvent) {
	contact.filters = [contactGlow];
}

7. The mouse handler functions for rollOver and rollOut.

function mouseOverHandler(e:MouseEvent):void {
	aux1 = e.target.name;
	switch (aux1) {
		case "about" :
			{
				aboutGlowX.continueTo(10, 0.5);
				aboutGlowY.continueTo(10, 0.5);
				break;

			};
		case "work" :
			{
				workGlowX.continueTo(10, 0.5);
				workGlowY.continueTo(10, 0.5);
				break;

			};
		case "contact" :
			{
				contactGlowX.continueTo(10,  0.5);
				contactGlowY.continueTo(10,  0.5);
				break;

		}
	}
};
function mouseOutHandler(e:MouseEvent):void {
	aboutGlowX.continueTo(2, 1);
	aboutGlowY.continueTo(2, 1);
	workGlowX.continueTo(2, 1);
	workGlowY.continueTo(2, 1);
	contactGlowX.continueTo(2, 1);
	contactGlowY.continueTo(2, 1);

}

8. All code:

import flash.filters.BitmapFilterQuality;
import flash.filters.GlowFilter;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

var aux1;

about.mouseChildren = false;
about.buttonMode = true;
about.useHandCursor = true;

work.mouseChildren = false;
work.buttonMode = true;
work.useHandCursor = true;

contact.mouseChildren = false;
contact.buttonMode = true;
contact.useHandCursor = true;

about.addEventListener("mouseOver", mouseOverHandler);
about.addEventListener("mouseOut", mouseOutHandler);
work.addEventListener("mouseOver", mouseOverHandler);
work.addEventListener("mouseOut", mouseOutHandler);
contact.addEventListener("mouseOver", mouseOverHandler);
contact.addEventListener("mouseOut", mouseOutHandler);

var aboutGlow:GlowFilter = new GlowFilter(0xD13083, 1, 2, 2, 2, 3, false, false);
var workGlow:GlowFilter = new GlowFilter(0xD13083, 1, 2, 2, 2, 3, false, false);
var contactGlow:GlowFilter = new GlowFilter(0xD13083, 1, 2, 2, 2, 3, false, false);

var aboutGlowX:Tween = new Tween(aboutGlow, "blurX", Regular.easeOut, 2, 2, 1, true);
var aboutGlowY:Tween = new Tween(aboutGlow, "blurY", Regular.easeOut, 2, 2, 1, true);
var workGlowX:Tween = new Tween(workGlow, "blurX", Regular.easeOut, 2, 2, 1, true);
var workGlowY:Tween = new Tween(workGlow, "blurY", Regular.easeOut, 2, 2, 1, true);
var contactGlowX:Tween = new Tween(contactGlow, "blurX", Regular.easeOut, 2, 2, 1, true);
var contactGlowY:Tween = new Tween(contactGlow, "blurY", Regular.easeOut, 2, 2, 1, true);

aboutGlowX.addEventListener("motionChange", aboutFunc);
workGlowX.addEventListener("motionChange", workFunc);
contactGlowX.addEventListener("motionChange", contactFunc);

function aboutFunc(e:TweenEvent) {
	about.filters = [aboutGlow];
}
function workFunc(e:TweenEvent) {
	work.filters = [workGlow];
}
function contactFunc(e:TweenEvent) {
	contact.filters = [contactGlow];
}
function mouseOverHandler(e:MouseEvent):void {
	aux1 = e.target.name;
	switch (aux1) {
		case "about" :
			{
				aboutGlowX.continueTo(10, 0.5);
				aboutGlowY.continueTo(10, 0.5);
				break;

			};
		case "work" :
			{
				workGlowX.continueTo(10, 0.5);
				workGlowY.continueTo(10, 0.5);
				break;

			};
		case "contact" :
			{
				contactGlowX.continueTo(10,  0.5);
				contactGlowY.continueTo(10,  0.5);
				break;

		}
	}
};
function mouseOutHandler(e:MouseEvent):void {
	aboutGlowX.continueTo(2, 1);
	aboutGlowY.continueTo(2, 1);
	workGlowX.continueTo(2, 1);
	workGlowY.continueTo(2, 1);
	contactGlowX.continueTo(2, 1);
	contactGlowY.continueTo(2, 1);

}

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

Take a look at the example below for the final result.

1. For the first step I created the clock face. I drew 3 circles, and center align them. I used blue and grey colors with gradients for the background clock to look nice. I also made here the lines for the minutes and hours.

2. Create three new movie clips (Insert->New Symbol->Movie Clip) for seconds, minutes and hours clock hands. Inside each of them drew a coresponding shape. After that drag them on the Stage and center align to the clock. Give each Movie Clip an instance name (secondHand_, minuteHand_, hourHand_).

3. Final step paste this code in the Actions tab of the first frame. Once you’ve done that test the movie.

var timer:Timer = new Timer(1000);
timer.addEventListener(TimerEvent.TIMER, clockHandler);
timer.start();

function clockHandler(event:TimerEvent)
{

	    // set hour
		var time = new Date();
		var hourHand = time.getHours();
		var minuteHand = time.getMinutes();
		var secondHand = time.getSeconds();

		hourHand_.rotation = 30 * hourHand + minuteHand / 2;
		minuteHand_.rotation = 6 * minuteHand;
		secondHand_.rotation = 6 * secondHand;
}

I faced a similar situation myself and thought to spare you of precious time to do such a work, by sharing with you a useful source.

It seems that somebody spent his time and managed to create it for us. It’s about the Flashtuning HTML Table Renderer component that provides an advanced XML/HTML table rendering engine for Flash, complete with CSS support and advanced features such as row and column spans. The component can render all common types of content (text, SWF files, images and Flash library objects) and allows embedding custom fonts and offers advanced text rendering controls.

Requirements

The Table Renderer is available in two versions one for Actionscript 2.0 and the other for Actionscript 3.0. You choose what is the best for your needs. You can download a trial version (click on the Free Download link above the examples) that has a limit of 4 X 4 for the tables, as a trial limitation. To get the full version with no restrictions you need to purchase a license for $9.00.

Features

• Support for all common HTML tags and attributes and CSS properties supported by Flash
• Images/SWF/library objects inclusion into table cells
• Easily integrate your own custom actions like roll overs, drag & drop, tool tips
• Link to custom ActionScript functions from within the table
• Percentage/fixed widths/heights support for the table and/or individual cells
• Alpha levels for borders and backgrounds
• Font embedding support: you can specify custom library fonts for the table and/or individual cells using the cellfont attribute
• Built in Help Book automatically that can be accessed anytime via the Flash Help Panel

How to use it

We’ll set up a simple HTML table in Flash.

1. Start Adobe Flash and open a new document.

2. Open the Components panel ( Window/Components). You will find the component in the Flashtuning folder.

3. Drag the component (FtTableRenderer) from the Components panel to the stage. The component graphic symbol should now be displayed on the stage.

4. Create an XHTML file which includes a table definition using your preffered HTML / Text editor.

5. Switch back to Adobe Flash, select the component on the stage and configure its parameters in the Parameters panel or in the Component Inspector panel ( Window/Component Inspector):

Instruct the component to use the newly created table.html file as the XML/HTML Source File.

6. Test the scene (Control/Test Movie).

(!) Make sure the HTML source is properly formatted (the tags and attributes need to be closed and lowercase) and the cells colspan need to be valid for the table to render correctly.

Conclusion

The possibilities to use such a great component are vast, all you have to do is explore and use your imagination. I think any Flash developer should have it and considering the price I would say it’s a great deal.

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.