Rollover Class (Flash Actionscript 3.0)

I was working on a project when I came across developing this class. The project required a set of information to be shown within a simulation when user rollovers a specific area. So considering this requirement I created this Class.

Few of the things that we must keep in mind is that a rollover class must have the following methods:

1. It should let us load a given information text.
2. It should hide and show upon specific calls.
3. We can add specific look and feel to it to gel with our application.
4. It should move to a specific position upon specific calls.
5. We can specify the direction in which we want the rollover callout to be.

Keeping these things in mind I started creating the class.

I named the pacakage name as "classes" and my class name as "rollover". You can start > and add new ActionScript3.0 file. Save this file in "classes" folder with the name "rollover.as".

rollover.as

package classes {

import flash.display.*;

import flash.events.*;

import flash.text.*;

import flash.utils.*;

import flash.filters.*;

import flash.geom.Matrix;

import flash.geom.*;

import flash.display.GradientType;

import flash.display.Graphics;

public class rollover extends Sprite {

private static var _instance:rollover;

private var _label:TextField;

private var _isShow:Boolean;

static var _toolHeight:Number;

static var _toolWidth:Number;

static var _direction:String;

static var isOnRoll:Boolean = false;

public function rollover(base:Sprite) {

_label = new TextField();

_label.x = 8;

_label.y = 8;

_isShow = true;

addChild(_label);

filters = [getBitmapFilter()];

base.addChild(this);

_instance = this;

_hide();

}

public static function show(lbl:String,toolWt:Number,dir:String):void {

if (_instance == null) {

return;

}

_toolWidth = toolWt;

_direction = dir;

_instance._show(lbl,toolWt);

}

private function _show(lbl:String,_toolwt:Number):void {

if (!_isShow) {

return;

}

visible = true;

var font:Font = new myFont();

var format:TextFormat = new TextFormat();

format.font = font.fontName;

format.color = 0x242424;

format.size = 12;

format.letterSpacing = 0;

_label.embedFonts = true;

_label.autoSize = TextFieldAutoSize.LEFT;

_label.selectable = false;

_label.defaultTextFormat = format;

_label.condenseWhite = true;

_label.htmlText = lbl

_label.width = _toolwt;

_label.multiline = true;

_label.wordWrap = true;

_toolHeight = _label.textHeight + 10;

updateShape(_toolwt,_toolHeight);

}

public static function hide():void {

if (_instance == null) {

return;

}

_instance._hide();

}

private function _hide():void {

visible = false;

}

public static function setShow(flag:Boolean = true):void {

if (_instance == null) {

return;

}

_instance._setShow(flag);

}

private function _setShow(flag:Boolean = true):void {

_isShow = flag;

}

public static function move(x:Number, y:Number):void {

if (_instance == null) {

return;

}

_instance._move(x, y);

}

public function _move(x:Number, y:Number):void {

if(_direction == 'u')

{

this.x = (x+this.width>stage.stageWidth)?stage.stageWidth-this.width:x;

this.y = y - _toolHeight - 15;

}

else if(_direction == 'l')

{

this.x = x - _toolWidth - 18;

this.y = y - _toolHeight/4;

}

else if(_direction == 'r')

{

this.x = x + _toolWidth + 17;

this.y = y - _toolHeight/4;

}

else if(_direction == 'd')

{

this.x = (x+this.width>stage.stageWidth)?stage.stageWidth-this.width:x;

this.y = y + _toolHeight;

}

else

{

this.x = (x+this.width>stage.stageWidth)?stage.stageWidth-this.width:x;

this.y = y - _toolHeight - 15;

}

}

private function changeHandler(event:Event):void {

updateShape(_toolHeight,_toolWidth);

}

private function updateShape(shpWidth:Number,shpHeight:Number):void {

var w:Number = shpWidth + 15;

var h:Number = shpHeight + 10;

graphics.clear();

graphics.beginFill(0x067AB5);

graphics.drawRoundRect(0, 0, w, h, 25, 25);

graphics.endFill();

var fillType:String = GradientType.LINEAR;

var colors:Array = [0XBBBBBB, 0XE1E1E1];

var alphas:Array = [100, 100];

var ratios:Array = [0x00, 0xFF];

var matr:Matrix = new Matrix();

matr.createGradientBox(100, 25, 0, 0, 0);

var spreadMethod:String = SpreadMethod.PAD

graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);

graphics.drawRoundRect(1.5, 1.5, w-4, h-3.7, 23, 23);

graphics.endFill();

}

private function getBitmapFilter():BitmapFilter {

var color:Number = 0x000000;

var alpha:Number = 0.3;

var blurX:Number = 5;

var blurY:Number = 5;

var strength:Number = 2;

var inner:Boolean = false;

var knockout:Boolean = false;

var quality:Number = BitmapFilterQuality.HIGH;

return new GlowFilter(color,

alpha,

blurX,

blurY,

strength,

quality,

inner,

knockout);

}

}

}

Now to use this class following are the methods. You need to place the flash file along with the classes folder.

You need to import the class in your flash.

import classes.rollover;

Since we can have multiple rollovers on one screen so i used arrays.

_names = new Array();

_widths = new Array();

_directions = new Array();

_names array is used for adding text in rollover, _width describes the width of the rollover and _direction is used for assigning the direction of the rollover which could be

/*

u -- > Up

d -- > Down

l -- > Left

r -- > Right

*/

For creating a sample rollover. Here is the code.

_names = new Array();

_widths = new Array();

_directions = new Array();

_names = ["The Ingress/Egress tab"

,"The number of cells received in Ingress direction."];

_widths = [150,300];

_directions = ["u","u"];

new rollover(this);

addRollovers(_names.length)

As from above we are creating two rollovers. We need to create the addRollovers function and assign events to our rollover objects. Assume that your rollover object name are r1,r2...etc

import classes.rollover;

var i;

function overAct(event:MouseEvent):void

{

var bName = String(event.target.name).substr(1,2);

if(!(isNaN(bName)))

{

rollover.show(_names[bName],_widths[bName],_directions[bName]);

rollover.move(event.target.x,event.target.y);

}

}

function outAct(event:MouseEvent):void

{

rollover.hide();

}

function addRollovers(_tot:Number)

{

for(i=0;i<_tot;i++)

{

["r"+i]addEventListener(MouseEvent.MOUSE_OVER,overAct);

["r"+i]addEventListener(MouseEvent.MOUSE_OUT,outAct);

}

}

The above code adds the rollovers. We can change the look and color of the rollover from "updateShape" method of the class by changing the color value and gradient type.

Link to class

http://www.box.net/shared/j6zlhxbtn5