Flash Essential

AS3 Guide Colour Tints

Dec 24th 2008
5 Comments
respond
trackback

In this tutorial we’ll create a colour tint and add it too the Flash Essential logo. This effect is pretty straightforward and can be used to add that extra little effect to an application. In the download file we have the Flash Essential logo on the stage that has been converted to a Movie-Clip and been exported for Actionscript. The effect will be applied when you hover over the logo. Let’s see how this is done below;

Example
Download

Step 1 - Create The Effect

First we create a new instance of our logo that we created inside the Flash library, we’ll call it “logo”. We’ll position it on the stage by changing the x and y properties and add it to the stage using the addChild() method.

import fl.motion.Color;

var logo:FlashEssential = new FlashEssential();
logo.x = 225;
logo.y = 100;
addChild(logo);

logo.addEventListener(MouseEvent.MOUSE_OVER, onOver);
logo.addEventListener(MouseEvent.MOUSE_OUT, onOut);
logo.buttonMode = true;

function onOver(Event:MouseEvent):void{
var tintEffect:Color = new Color();
tintEffect.setTint(0×3265ff, .1);
logo.transform.colorTransform = tintEffect;
}

function onOut(Event:MouseEvent):void{
var tintEffect:Color = new Color();
tintEffect.setTint(0×3265ff, 0);
logo.transform.colorTransform = tintEffect;
}

Step 2 – Event Listeners

Next we add the Event Listeners for the logo and set the buttonMode value to true, this will change the cursor to point when the mouse hovered over the logo.

import fl.motion.Color;

var logo:FlashEssential = new FlashEssential();
logo.x = 225;
logo.y = 100;
addChild(logo);

logo.addEventListener(MouseEvent.MOUSE_OVER, onOver);
logo.addEventListener(MouseEvent.MOUSE_OUT, onOut);
logo.buttonMode = true;

function onOver(Event:MouseEvent):void{
var tintEffect:Color = new Color();
tintEffect.setTint(0×3265ff, .3);
logo.transform.colorTransform = tintEffect;
}

function onOut(Event:MouseEvent):void{
var tintEffect:Color = new Color();
tintEffect.setTint(0×3265ff, 0);
logo.transform.colorTransform = tintEffect;
}

Step 3 – Mouse Event Functions

Inside the functions we’ll create the effect so that it will knock on and off when we hover the cursor over and away from the logo. We create the effect by first creating a new instance of the Color class giving us access to the properties, methods and events of the class. Using the setTint property we’ll add a light blue tint, the setTint property has 2 parameters available to it tintColor and tintMultiplier. Firstly, tintColor is the colour you want the tint to be, and the tintMultiplier is essentially the alpha scale of the tintColor. Finally we add the tint effect to our logo by setting the colorTransform property of the logo equal to the tintEffect. We remove the effect on the onOut function by simply setting the setTint tintMultiplier value to 0.

import fl.motion.Color;

var logo:FlashEssential = new FlashEssential();
logo.x = 225;
logo.y = 100;
addChild(logo);

logo.addEventListener(MouseEvent.MOUSE_OVER, onOver);
logo.addEventListener(MouseEvent.MOUSE_OUT, onOut);
logo.buttonMode = true;

function onOver(Event:MouseEvent):void{
var tintEffect:Color = new Color();
tintEffect.setTint(0×3265ff, .3);
logo.transform.colorTransform = tintEffect;
}

function onOut(Event:MouseEvent):void{
var tintEffect:Color = new Color();
tintEffect.setTint(0×3265ff, 0);
logo.transform.colorTransform = tintEffect;
}


This post is tagged , , ,



Sponsors

Explore Recent





Monthly Archives



Friends and Affiliates



5 Comments

Leave a Reply