Sunday, September 23, 2012

Creating Advanced Alert Window class: Part 21

Today we'll add support for roll over effects for our buttons.

But first we'll need to fix an issue related to applying custom skins - go to the constructor of AdvAlertButton.as and add an if statement inside which checks if provided skin is null. If so, set skin to a new AdvAlertButtonSkin(), then call setSkin(skin) and then set currentSkin to null. Otherwise, just call setSkin(skin).

Also, add event listeners for ROLL_OVER and ROLL_OUT events, with handlers onOver and onOut. They will be needed later in the tutorial.

public function AdvAlertButton(label:String, skin:AdvAlertButtonSkin = null) 
{
txt = label;
textField = new TextField();
addChild(textField);

if (skin == null) {
skin = new AdvAlertButtonSkin();
setSkin(skin);
currentSkin = null;
}else{
setSkin(skin);
}

updateDraw();

addEventListener(MouseEvent.ROLL_OVER, onOver);
addEventListener(MouseEvent.ROLL_OUT, onOut);
}

Go to AdvAlertButtonSkin.as. Duplicate each variable, but add hover_ infront of their names now. You'll have 8 new variables:

public var hover_w:Number;
public var hover_h:Number;
public var hover_textFormat:TextFormat;
public var hover_bgStroke:*;
public var hover_bgRect:*;
public var hover_pos:Point;
public var hover_textPadding:TextPadding;
public var hover_filters:Array;

In the constructor, apply default values for these variables:

public function AdvAlertButtonSkin() 
{
// default values
w = 80;
h = 30;
textFormat = new TextFormat("Arial", 16, 0xffffff);
textFormat.align = "center";
bgStroke = new SolidColorStroke(2, 0x333399, 1);
bgRect = new SolidColorRect(0x6666ff, [3, 3, 3, 3], 1);
pos = new Point(0, 0);
textPadding = new TextPadding(3, 0, 3, 0);
filters = [];
hover_w = 80;
hover_h = 30;
hover_textFormat = new TextFormat("Arial", 16, 0xffffff);
hover_textFormat.align = "center";
hover_bgStroke = new SolidColorStroke(2, 0xffffff, 1);
hover_bgRect = new SolidColorRect(0xaaaaff, [3, 3, 3, 3], 1);
hover_pos = new Point(0, 0);
hover_textPadding = new TextPadding(3, 0, 3, 0);
hover_filters = [];
}

Full AdvAlertButtonSkin.as:

package com.kircode.AdvAlert 
{
import flash.filters.DropShadowFilter;
import flash.text.TextFormat;
import flash.geom.Point;
/**
 * Object containing skinning data for AdvAlertButton.
 * @author Kirill Poletaev
 */
public class AdvAlertButtonSkin 
{

public var w:Number;
public var h:Number;
public var textFormat:TextFormat;
public var bgStroke:*;
public var bgRect:*;
public var pos:Point;
public var textPadding:TextPadding;
public var filters:Array;
public var hover_w:Number;
public var hover_h:Number;
public var hover_textFormat:TextFormat;
public var hover_bgStroke:*;
public var hover_bgRect:*;
public var hover_pos:Point;
public var hover_textPadding:TextPadding;
public var hover_filters:Array;

public function AdvAlertButtonSkin() 
{
// default values
w = 80;
h = 30;
textFormat = new TextFormat("Arial", 16, 0xffffff);
textFormat.align = "center";
bgStroke = new SolidColorStroke(2, 0x333399, 1);
bgRect = new SolidColorRect(0x6666ff, [3, 3, 3, 3], 1);
pos = new Point(0, 0);
textPadding = new TextPadding(3, 0, 3, 0);
filters = [];
hover_w = 80;
hover_h = 30;
hover_textFormat = new TextFormat("Arial", 16, 0xffffff);
hover_textFormat.align = "center";
hover_bgStroke = new SolidColorStroke(2, 0xffffff, 1);
hover_bgRect = new SolidColorRect(0xaaaaff, [3, 3, 3, 3], 1);
hover_pos = new Point(0, 0);
hover_textPadding = new TextPadding(3, 0, 3, 0);
hover_filters = [];
}

}

}

Go back to AdvAlertButton.as, declare 8 new variables as well:

private var hover_w:Number;
private var hover_h:Number;
private var hover_textFormat:TextFormat;
private var hover_bgStroke:*;
private var hover_bgRect:*;
private var hover_pos:Point;
private var hover_textPadding:TextPadding;
private var hover_filt:Array;

Update the setSkin() function by applying values from the skin object to all the hover related variables:

public function setSkin(skin:AdvAlertButtonSkin):void {
currentSkin = skin;
w = skin.w;
h = skin.h;
textFormat = skin.textFormat;
bgStroke = skin.bgStroke;
bgRect = skin.bgRect;
pos = skin.pos;
textPadding = skin.textPadding;
filt = skin.filters;
hover_w = skin.hover_w;
hover_h = skin.hover_h;
hover_textFormat = skin.hover_textFormat;
hover_bgStroke = skin.hover_bgStroke;
hover_bgRect = skin.hover_bgRect;
hover_pos = skin.hover_pos;
hover_textPadding = skin.hover_textPadding;
hover_filt = skin.hover_filters;
}

Declare a boolean value "over" set to false by default.

private var over:Boolean = false;

Create onOver and onOut functions, which set over to true/false, call updateDraw(), and change the user's cursor:

private function onOver(evt:MouseEvent):void {
over = true;
updateDraw();
Mouse.cursor = "button";
}

private function onOut(evt:MouseEvent):void {
over = false;
updateDraw();
Mouse.cursor = "auto";
}

We need to update the updateDraw() function so that it uses different skin values based on whether over variable's value is true or false.

public function updateDraw():void {
this.graphics.clear();

if(!over){
//filters
this.filters = filt;

// bg stroke
if (bgStroke is SolidColorStroke) {
this.graphics.lineStyle(bgStroke._lineThickness, bgStroke._lineColor, bgStroke._lineAlpha);
}
if (bgStroke is GradientColorStroke) {
this.graphics.lineStyle(bgStroke._lineThickness);
this.graphics.lineGradientStyle(bgStroke._gradientType, bgStroke._colors, bgStroke._alphas, bgStroke._ratios, bgStroke._matrix, bgStroke._spreadMethod, bgStroke._interpolationMethod, bgStroke._focalPointRatio);
}
if (bgStroke is BitmapStroke) {
this.graphics.lineStyle(bgStroke._lineThickness);
this.graphics.lineBitmapStyle(bgStroke._bitmap, bgStroke._matrix, bgStroke._repeat, bgStroke._smooth);
}

// bg fill
if (bgRect is SolidColorRect) this.graphics.beginFill(bgRect._backgroundColor, bgRect._alpha);
if (bgRect is GradientColorRect) this.graphics.beginGradientFill(bgRect._gradientType, bgRect._colors, bgRect._alphas, bgRect._ratios, bgRect._matrix, bgRect._spreadMethod, bgRect._interpolationMethod, bgRect._focalPointRatio);
if (bgRect is BitmapRect) this.graphics.beginBitmapFill(bgRect._bitmap, bgRect._matrix, bgRect._repeat, bgRect._smooth);

this.graphics.drawRoundRectComplex(pos.x, pos.y, w, h,
bgRect._radius[0], bgRect._radius[1], bgRect._radius[2], bgRect._radius[3]);
this.graphics.endFill();

// text field
textField.width = w;
textField.height = h;
textField.text = txt;
textField.setTextFormat(textFormat);
textField.selectable = false;
textField.x = pos.x + textPadding.right;
textField.y = pos.y + textPadding.top;
}

if(over){
//filters
this.filters = hover_filt;

// bg stroke
if (hover_bgStroke is SolidColorStroke) {
this.graphics.lineStyle(hover_bgStroke._lineThickness, hover_bgStroke._lineColor, hover_bgStroke._lineAlpha);
}
if (hover_bgStroke is GradientColorStroke) {
this.graphics.lineStyle(hover_bgStroke._lineThickness);
this.graphics.lineGradientStyle(hover_bgStroke._gradientType, hover_bgStroke._colors, hover_bgStroke._alphas, hover_bgStroke._ratios, hover_bgStroke._matrix, hover_bgStroke._spreadMethod, hover_bgStroke._interpolationMethod, hover_bgStroke._focalPointRatio);
}
if (hover_bgStroke is BitmapStroke) {
this.graphics.lineStyle(hover_bgStroke._lineThickness);
this.graphics.lineBitmapStyle(hover_bgStroke._bitmap, hover_bgStroke._matrix, hover_bgStroke._repeat, hover_bgStroke._smooth);
}

// bg fill
if (hover_bgRect is SolidColorRect) this.graphics.beginFill(hover_bgRect._backgroundColor, hover_bgRect._alpha);
if (hover_bgRect is GradientColorRect) this.graphics.beginGradientFill(hover_bgRect._gradientType, hover_bgRect._colors, hover_bgRect._alphas, hover_bgRect._ratios, hover_bgRect._matrix, hover_bgRect._spreadMethod, hover_bgRect._interpolationMethod, hover_bgRect._focalPointRatio);
if (hover_bgRect is BitmapRect) this.graphics.beginBitmapFill(hover_bgRect._bitmap, hover_bgRect._matrix, hover_bgRect._repeat, hover_bgRect._smooth);

this.graphics.drawRoundRectComplex(hover_pos.x, hover_pos.y, hover_w, hover_h,
hover_bgRect._radius[0], hover_bgRect._radius[1], hover_bgRect._radius[2], hover_bgRect._radius[3]);
this.graphics.endFill();

// text field
textField.width = hover_w;
textField.height = hover_h;
textField.text = txt;
textField.setTextFormat(hover_textFormat);
textField.selectable = false;
textField.x = hover_pos.x + hover_textPadding.right;
textField.y = hover_pos.y + hover_textPadding.top;
}
}

Full AdvAlertButton.as code:

package com.kircode.AdvAlert 
{
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.ui.Mouse;

/**
 * Advanced Alert window object.
 * @author Kirill Poletaev
 */
public class AdvAlertButton extends MovieClip
{

public var w:Number;
public var h:Number;
public var currentSkin:AdvAlertButtonSkin;
private var textFormat:TextFormat;
private var bgStroke:*;
private var bgRect:*;
private var pos:Point;
private var textPadding:TextPadding;
private var filt:Array;

private var hover_w:Number;
private var hover_h:Number;
private var hover_textFormat:TextFormat;
private var hover_bgStroke:*;
private var hover_bgRect:*;
private var hover_pos:Point;
private var hover_textPadding:TextPadding;
private var hover_filt:Array;

private var textField:TextField;
private var txt;
private var over:Boolean = false;

/**
 * Button object placed in the alert window.
 * @paramlabel Text label of the button.
 */

public function AdvAlertButton(label:String, skin:AdvAlertButtonSkin = null) 
{
txt = label;
textField = new TextField();
addChild(textField);

if (skin == null) {
skin = new AdvAlertButtonSkin();
setSkin(skin);
currentSkin = null;
}else{
setSkin(skin);
}

updateDraw();

addEventListener(MouseEvent.ROLL_OVER, onOver);
addEventListener(MouseEvent.ROLL_OUT, onOut);
}

private function onOver(evt:MouseEvent):void {
over = true;
updateDraw();
Mouse.cursor = "button";
}

private function onOut(evt:MouseEvent):void {
over = false;
updateDraw();
Mouse.cursor = "auto";
}

public function setSkin(skin:AdvAlertButtonSkin):void {
currentSkin = skin;
w = skin.w;
h = skin.h;
textFormat = skin.textFormat;
bgStroke = skin.bgStroke;
bgRect = skin.bgRect;
pos = skin.pos;
textPadding = skin.textPadding;
filt = skin.filters;
hover_w = skin.hover_w;
hover_h = skin.hover_h;
hover_textFormat = skin.hover_textFormat;
hover_bgStroke = skin.hover_bgStroke;
hover_bgRect = skin.hover_bgRect;
hover_pos = skin.hover_pos;
hover_textPadding = skin.hover_textPadding;
hover_filt = skin.hover_filters;
}

public function updateDraw():void {
this.graphics.clear();

if(!over){
//filters
this.filters = filt;

// bg stroke
if (bgStroke is SolidColorStroke) {
this.graphics.lineStyle(bgStroke._lineThickness, bgStroke._lineColor, bgStroke._lineAlpha);
}
if (bgStroke is GradientColorStroke) {
this.graphics.lineStyle(bgStroke._lineThickness);
this.graphics.lineGradientStyle(bgStroke._gradientType, bgStroke._colors, bgStroke._alphas, bgStroke._ratios, bgStroke._matrix, bgStroke._spreadMethod, bgStroke._interpolationMethod, bgStroke._focalPointRatio);
}
if (bgStroke is BitmapStroke) {
this.graphics.lineStyle(bgStroke._lineThickness);
this.graphics.lineBitmapStyle(bgStroke._bitmap, bgStroke._matrix, bgStroke._repeat, bgStroke._smooth);
}

// bg fill
if (bgRect is SolidColorRect) this.graphics.beginFill(bgRect._backgroundColor, bgRect._alpha);
if (bgRect is GradientColorRect) this.graphics.beginGradientFill(bgRect._gradientType, bgRect._colors, bgRect._alphas, bgRect._ratios, bgRect._matrix, bgRect._spreadMethod, bgRect._interpolationMethod, bgRect._focalPointRatio);
if (bgRect is BitmapRect) this.graphics.beginBitmapFill(bgRect._bitmap, bgRect._matrix, bgRect._repeat, bgRect._smooth);

this.graphics.drawRoundRectComplex(pos.x, pos.y, w, h,
bgRect._radius[0], bgRect._radius[1], bgRect._radius[2], bgRect._radius[3]);
this.graphics.endFill();

// text field
textField.width = w;
textField.height = h;
textField.text = txt;
textField.setTextFormat(textFormat);
textField.selectable = false;
textField.x = pos.x + textPadding.right;
textField.y = pos.y + textPadding.top;
}

if(over){
//filters
this.filters = hover_filt;

// bg stroke
if (hover_bgStroke is SolidColorStroke) {
this.graphics.lineStyle(hover_bgStroke._lineThickness, hover_bgStroke._lineColor, hover_bgStroke._lineAlpha);
}
if (hover_bgStroke is GradientColorStroke) {
this.graphics.lineStyle(hover_bgStroke._lineThickness);
this.graphics.lineGradientStyle(hover_bgStroke._gradientType, hover_bgStroke._colors, hover_bgStroke._alphas, hover_bgStroke._ratios, hover_bgStroke._matrix, hover_bgStroke._spreadMethod, hover_bgStroke._interpolationMethod, hover_bgStroke._focalPointRatio);
}
if (hover_bgStroke is BitmapStroke) {
this.graphics.lineStyle(hover_bgStroke._lineThickness);
this.graphics.lineBitmapStyle(hover_bgStroke._bitmap, hover_bgStroke._matrix, hover_bgStroke._repeat, hover_bgStroke._smooth);
}

// bg fill
if (hover_bgRect is SolidColorRect) this.graphics.beginFill(hover_bgRect._backgroundColor, hover_bgRect._alpha);
if (hover_bgRect is GradientColorRect) this.graphics.beginGradientFill(hover_bgRect._gradientType, hover_bgRect._colors, hover_bgRect._alphas, hover_bgRect._ratios, hover_bgRect._matrix, hover_bgRect._spreadMethod, hover_bgRect._interpolationMethod, hover_bgRect._focalPointRatio);
if (hover_bgRect is BitmapRect) this.graphics.beginBitmapFill(hover_bgRect._bitmap, hover_bgRect._matrix, hover_bgRect._repeat, hover_bgRect._smooth);

this.graphics.drawRoundRectComplex(hover_pos.x, hover_pos.y, hover_w, hover_h,
hover_bgRect._radius[0], hover_bgRect._radius[1], hover_bgRect._radius[2], hover_bgRect._radius[3]);
this.graphics.endFill();

// text field
textField.width = hover_w;
textField.height = hover_h;
textField.text = txt;
textField.setTextFormat(hover_textFormat);
textField.selectable = false;
textField.x = hover_pos.x + hover_textPadding.right;
textField.y = hover_pos.y + hover_textPadding.top;
}
}


}

}

Now we have buttons that react to mouse roll over.

Thanks for reading!

No comments:

Post a Comment