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

Create a simple ImageViewer Class in AS3.0

Step1

Check your class requirement. It should load a given URL image and add a self preloader for that image. Basically we these have two tasks here.

Step2

we will start with our first task. We will need a loader object to load the image. so

public function ImageViewer(myURL:String)

{

imageLoader = new Loader();

imageLoader.load(new URLRequest(myURL));

}

Most probably the above method takes a parameter URL and loads it in a Loader Object. We can see it is a constructor function having the same name as class. Since the image size may vary to large size so we should add it to stage only when it is loaded. We need to addEventListener to track if the image has completly loaded.

imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);

Above code provides us with the image loaded status. Similiarly we can also add a PROGRESS event to create our preloader along with loaded image. To add both the loaded image and a preloader display text we will need a container which can have both these objects. So we can create an instance of the MovieClip class and then add the loaded image and preloader together in it. Finally our class will look as below.

File name : ImageViewer

package com.gen{

import flash.display.Loader;

import flash.display.MovieClip;

import flash.net.URLRequest;

import flash.events.Event;

import flash.events.ProgressEvent;

import flash.text.TextField;

public class ImageViewer extends MovieClip{

private var imageLoader:Loader;

private var progressText:TextField;

private var containerMC:MovieClip;

public function ImageViewer(myURL:String)

{

imageLoader = new Loader();

containerMC = new MovieClip();

progressText = new TextField();

addChild(containerMC);

containerMC.addChild(progressText);

imageLoader.load(new URLRequest(myURL));

imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);

imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);

}

public function imageLoaded(e:Event)

{

containerMC.removeChild(progressText);

containerMC.addChild(imageLoader)

}

public function progressHandler(e:ProgressEvent)

{

var loadP = (imageLoader.contentLoaderInfo.bytesLoaded/imageLoader.contentLoaderInfo.bytesTotal)*100;

progressText.text = "Loaded "+Math.floor(loadP) + "%";

}

}

}

You can change the package name to whatever you like. Now in your flash file u just need to create the instance of this class and pass the URL. Finally add it to stage as below.

import com.gen.*;

var viewer:ImageViewer = new ImageViewer("chat.jpg");

addChild(viewer);

You need to import the class to let the flash compiler know about your class declaration. When you run the file you get your imahe dispayed on stage.

Link to Class

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

Create a simple class AS2.0 - MoveClass

Requirement is to make a simple class which has a method move to allow moving of MovieClips on stage with its moveMe method.

Step 1 is to create an 'AS' file. Rename it as "MoveClass.as"

code for the class

class MoveClass{

private static var objToMove:String;

private var diffx:Number;

private var diffy:Number;

private var yPosNew1;

private var xPosNew1;

private var runClip:MovieClip;

public function MoveClass(target:MovieClip){

objToMove = target._name;

}

public var moveF:Function;

public function moveMe(xPosNew:Number,yPosNew:Number){

runClip = _root.createEmptyMovieClip("runclip",1);

runClip.onEnterFrame = function()

{

diffx = xPosNew-eval(MoveClass.objToMove)._x;

diffy = yPosNew-eval(MoveClass.objToMove)._y;

eval(MoveClass.objToMove)._x += diffx/4;

eval(MoveClass.objToMove)._y += diffy/4;

}

}

}

Step 2 - In the fla add following code for creating instance of the Class.

var mymv:MoveClass = new MoveClass(_root.mv1);

To call the method moveMe;

use below code.

mymv.moveMe(_root._xmouse,_root._ymouse);

Run the file and u r done.

Thanks