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.
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.
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.
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 Actionscript 3, AS3 Guide, Color tints, Flash CS3
Share This Post
Jobs


























6 Comments
Incoming Links
Leave a Reply