This property replace the old fashion Actionscript 2 setRGB() method. Here’s the code for changing the color of a MovieClip in AS2:

var myColor:Color = new Color(myMovie);
     myColor.setRGB(0x4455ff);

where myMovie is an instance of a MovieClip.

For Actionscript 3 the code isn’t so complicated and here it is:

var newColor:ColorTransform = myMovie.transform.colorTransform;
newColor.color = 0xFF5522;
myMovie.transform.colorTransform = newColor;

To see how the code works have a look at the example below:

The code for the example is here:

import flash.geom.ColorTransform;

square1.buttonMode = true;
square1.useHandCursor = true;
square1.mouseChildren = false;
square1.addEventListener("mouseOver", rollOverHandler);
square1.addEventListener("mouseOut", rollOutHandler);

square2.buttonMode = true;
square2.useHandCursor = true;
square2.mouseChildren = false;
square2.addEventListener("mouseOver", rollOverHandler);
square2.addEventListener("mouseOut", rollOutHandler);

function rollOverHandler(e:MouseEvent) {
	var newColor:ColorTransform = e.target.transform.colorTransform;
	if (e.target.name =="square1") {
		newColor.color = 0xFF5522;
	} else {
		newColor.color = 0x0066CC;
	}
	e.target.transform.colorTransform = newColor;

}

function rollOutHandler(e:MouseEvent) {
	var newColor:ColorTransform = e.target.transform.colorTransform;
	if (e.target.name =="square1") {
		newColor.color = 0x0066CC;
	} else {
		newColor.color = 0xFF5522;
	}
	e.target.transform.colorTransform = newColor;
}

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.

1. Open Flash and create a new ActionScript 3.0 file. Give the width and height of the Stage 3 times lower than your image (if you want to magnify the image by 3 times, e.g: my image is 1200×800 so the Stage must be 400×267)

2. Create 4 layers as you can see in the image below. The stack order is important so the layer for the small image must be under the big image layer.

3. Create 2 empty movie clips for the small and big image and drag them on the Stage. Put them in the corresponding layer, give an instance name for each one (smallImg and bigImg) then position them at x=0 and y=0.

4. Select the Oval Tool(O) and draw a circle. This will be our mask. Convert it to a movie clip and give it an instance name of circle.

5. Select the scripts layer and open up Actions tab. In the code below we’ll add some variables that we’ll use, make a request for the image to be loaded and hide the mask.

import flash.display.BitmapData;

var loader:Loader;

var loading:TextField = new TextField();

var image:Bitmap;

init();

function init():void {

	circle.visible = false;

	loader=new Loader();
	loader.load(new URLRequest("street.jpg"));

	loader.contentLoaderInfo.addEventListener("progress",progressLoad);
	loader.contentLoaderInfo.addEventListener("complete",completeLoad);

}

6. Until the image is loaded we’ll display a text saying “Loading…”.

function progressLoad(e:Event):void {

	loading.x=100;
	loading.y=100;
	stage.addChild(loading);
	loading.text="Loading: ";

	var tFormat:TextFormat=new TextFormat();

	tFormat.size = 20;
	tFormat.color = 0xFF0000;
	loading.setTextFormat(tFormat);

}

7. After the loading is complete, we’ll add the image to the bigImg movie clip. Then duplicate, scale it down 3 times and put it in the smallImg movie clip. After that will mask the bigImg with the circle movie clip.

function completeLoad(e:Event):void {

	image=Bitmap(loader.content);

	bigImg.addChild(image);

	//create the small image from the big image
	var bmp:BitmapData = new BitmapData(bigImg.width, bigImg.height);
	bmp.draw(bigImg);

	var bitmap2:Bitmap = new Bitmap(bmp);

	bitmap2.scaleX /=3;
	bitmap2.scaleY /=3;

	smallImg.addChild(bitmap2);

	loader.contentLoaderInfo.removeEventListener("progress",progressLoad);
	loader.contentLoaderInfo.removeEventListener("complete",completeLoad);

	loader=null;

	loading.text="";
	loading.visible=false;

	circle.visible = true;
	bigImg.mask = circle;//add the circle mask to the big image
	stage.addEventListener("enterFrame",mGlass);

}

8. Move the big image according to the position of the mask and hide the mouse.

function mGlass(e:Event) {

	bigImg.x = (mouseX * -2);
	bigImg.y = (mouseY * -2);

	circle.x = (mouseX);
	circle.y = (mouseY);

	Mouse.hide();
}

1. Open Flash and create a new AS 3 file. (200×150)

2. Draw a rectangle(this will be our target object) and convert it to a movieclip. Give it an instance name of “mc”

3. Now we’ll create the tooltip movieclip. Draw a stroke and create a dynamic TextField. Name it “txt”. Select both and covert them to a movieclip “Tooltip”. For this one check the “Export for Actionscript” box. Delete the movieclip you just created from the stage because we’ll build an instance of it from Actionscript.

4. On the first frame of the stage, open up Actions tab and write this code:

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

mc.addEventListener("mouseOver", mouseRollOver);
mc.addEventListener("mouseOut", mouseRollOut);
mc.addEventListener("mouseMove", mouseMove1);

var tooltip:Tooltip = new Tooltip();
tooltip.txt.text = "This is a tooltip";
tooltip.x = stage.mouseX;
tooltip.y = stage.mouseY - mc.height;

function mouseRollOver(e:MouseEvent):void {
	addChild(tooltip);
	var myTween:Tween = new Tween(tooltip, "alpha", Regular.easeIn, 0, 1, 0.5, true);

}

function mouseRollOut(e:MouseEvent):void {
	removeChild(tooltip);
}

function mouseMove1(e:MouseEvent):void {
	tooltip.x = stage.mouseX;
	tooltip.y = stage.mouseY - mc.height;
}

5. This is how your tooltip should look like, roll over the red rectangle to see the effect. Download the file

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 “mainButton”. Check the “Export for Actionscript” box. We will use this generic button to create the other buttons using Actionscript.

3.a Now inside the MovieClip we will create the button elements. Select the Text Tool and type “Home”. You can change it to whatever you like. Give it an instance name – “txt1″. Also don’t forget to embed the font because we will use it for animation. See the image below for other properties.

3.b Create a new layer and draw a rectangle. I gave it a radial gradient and here are the other values: width: 100 ; height: 1.8 ; x: -50; y: 10;

3.c Create another layer. Draw another rectangle and copy the “Home” TextField and paste it in this layer you created. Change the instance name with “txt2″. Select both the rectangle and the TextField and press F8 to create another MovieClip with them. Name it “txtButtom”. Also give it an instance name “txtButtom”. See the images below for reference.

3.d Now we will create a layer mask. Make a new layer and move it to the top. Here you will draw a rectangle(see the images below for reference, the red rectangle is the mask) and after that right click on the layer and select “Mask”. Move the other layers according to the image below. The last layer is the hit area, copy the rectangle from the mask layer and paste it here and set the Alpha property for the rectangle to 0.

4.a Now we’ll move to the Actionscript. Get out from the “mainButton”. In the first layer of the scene, open up the Actions tab. We’ll import the transitions libraries and create instances of the “mainButton”.

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

var home = new mainButton();
this.addChild(home);

home.x= 80;
home.y=40;

var portfolio = new mainButton();
this.addChild(portfolio);

portfolio.txt1.text = "PORTFOLIO";
portfolio.txtButtom.txt2.text = "PORTFOLIO";
portfolio.x= home.x + home.width;
portfolio.y=home.y;

var contact = new mainButton();
this.addChild(contact);

contact.txt1.text = "CONTACT";
contact.txtButtom.txt2.text = "CONTACT";
contact.x= portfolio.x + portfolio.width;
contact.y=home.y;

4.b We’ll add button properties and listenes to the instances for RollOver and RollOut.

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

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

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

home.addEventListener("mouseOver", mouseRollOver);
portfolio.addEventListener("mouseOver", mouseRollOver);
contact.addEventListener("mouseOver", mouseRollOver);

home.addEventListener("mouseOut", mouseRollOut);
portfolio.addEventListener("mouseOut", mouseRollOut);
contact.addEventListener("mouseOut", mouseRollOut);

4.c And finally create the mouseRollOver and mouseRollOut functions.

function mouseRollOver(e:MouseEvent) {

	var easingFunc = Back.easeOut;
	var xsa = 30;
	var xfa =-5;
	var duration =0.5;
	var myTween:Tween = new Tween(e.target.txtButtom, "y", easingFunc, xsa, xfa, duration, true);

	var easingFunc2 = Regular.easeOut;
	var xsa2 = -16.3;
	var xfa2 = -46;
	var duration2 =0.5;
	var myTween2:Tween = new Tween(e.target.txt1, "y", easingFunc2, xsa2, xfa2, duration2, true);

}

function mouseRollOut(e:MouseEvent) {

	var easingFunc3 = Regular.easeOut;
	var xsa3 = -5;
	var xfa3 =30;
	var duration3 = 0.5;
	new Tween(e.target.txtButtom, "y", easingFunc3, xsa3, xfa3, duration3, true);

	var easingFunc4 = Regular.easeOut;
	var xsa4 = -46;
	var xfa4 = -16.3;
	var duration4 = 0.5;
	new Tween(e.target.txt1, "y", easingFunc4, xsa4, xfa4, duration4, true);
}

5. Enjoy and experiment with other tweening effects. Download the source file.

Here we go (this example is for Actionscript 3.0):

1. Create a MovieClip and give an instance name (e.g: myMovie)

2. Add an event listener to the movie you created:

myMovie.addEventListener("mouseDown",mousePress);

3. Create the mousePress function like so:

function mousePress(e:MouseEvent){

var url ="javascript:window.open('http://www.yoursite.com','title',
'width=800,height=600,toolbar=no,resizable=no,menubar=no,
status=no,scrollbars=no');void(0);";

var request1:URLRequest = new URLRequest(url);

	try {
  navigateToURL(request1);
         }
      catch (e:Error) {
  trace("Error occurred!");
}
}

4. Publish the movie and preview it in your browser.

1. Prepare your xml file, here is the sample I will use:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<images>

    <img image="photos/pic1.jpg" description="This is the first image" />

    <img image="photos/pic2.jpg" description="This is the second image" />

    <img image="photos/pic3.jpg"  description="This is the third image" />

</images>

2. The actionscript 3.0 code for extracting the xml file data:

var xmlData = "images.xml";//set xml data file

var xmlObj: XMLDocument;

init();//init call -> load config XML and create objects

function init() {
	xmlObj = new XMLDocument();
	xmlObj.ignoreWhite = true;

	var loader:URLLoader = new URLLoader();
	var request:URLRequest = new URLRequest(xmlData);
	loader.load(request);

	loader.addEventListener("complete", onComplete);
	loader.addEventListener("ioError", onIOError);
}

function onIOError(event:Event):void {
	trace("IOERROR (maybe XML file does not exit or have an incorrect name)");
}

function onComplete(event:Event):void {
	var loader:URLLoader = event.target as URLLoader;
	if (loader != null) {
		xmlObj.parseXML(loader.data);
		xmlHandler();
	} else {
		trace("Loader is not a URLLoader!");
	}
}

function xmlHandler() {
	addObjects();
}

var numItems;
var objects;

var image:Array = new Array();
var description:Array = new Array();

function addObjects() {//add objects in the scene

	objects = xmlObj.firstChild.childNodes;
	numItems = objects.length;

	for (var i=0; i<numItems; i++) {
		var attr = objects[i].attributes;
		//Set the images
		image[i] = attr.image;
		description[i] = attr.description;
		trace("Path image: "+image[i]+" ------description: "+description[i]);

	}
}

For any questions related to this method leave a comment and I will answer as soon as possible.

Here you can download the sample file.

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.