ImgBox component for Flash Lite

From Forum Nokia Wiki

Reviewer Approved

Introduction

imgBox is a useful component that helps loading images or SWF movies in Flash Lite applications and gives a full easy control on the image scale, rotate, align, and user touch gestures. Also it has loading effects of sliding (RTL or LTR), expanding, and alpha. A 'while loading animation' is another feature of this component and can be customized easily.

We load images in our applications a lot, so why wasting time on routine code. Just use imgBox component and it will do them all for you.

Some features

Easy scaling of the box and loading images or SWF movies inside
Auto resize with scale modes of showAll, exactFit and noScale
Zooming with specified ratio
Rotating with specified degree
Auto aligning to (center, top left, center left ......)
Analyze touch events to detect touch gestures (click, double click, slide)
Moving image inside the box with touch slides (if the image is scaled larger than the imgBox)
Loading effects (sliding RTL or LTR, expanding, alpha)
Loading animation

Requirements

Adobe Flash Professional CS3 or CS4
Flash Lite 2.0 Player and above

Download

imgBox component (MXP) and a simple usage example: http://www.benefit-ms.com/downloads/others/imgBox_component.zip

Installation

Installation of the imgBox component is easy. Execute the components MXP file and follow the simple instructions in Adobe Extension Manager to complete the installation process. Restart Adobe Flash CS4 after installation.

Note: Component FLA and AS files should appear in the directories [INSTALL PATH]\Flash CS4\en\Configuration\Components\Forum Nokia and [INSTALL PATH]\Flash CS4\en\Configuration\Classes\com\forumnokia. In some setup environments, the files may appear under the wrong language directories (for example, fi instead of en). In such cases, the files should be manually moved to the correct directories as specified above.

Preparations

1. Create a Flash Lite Project. Open the Component panel (Ctrl/Apple key + F7) and drag the imgBox component onto the stage. Assign a unique instance name for the object using the properties panel (Ctrl/Apple key + F3)

2. The component can be placed anywhere on the stage. Scale the box to the size you want using the free transform tool or any other way.

imgBox Properties

scaleMode

Indicates the current scaling of the loaded file within imgBox. The scaleMode property can use the values exactFit, showAll, and noScale.

Note: imgZoom property must be set to 0 to enable scaleMode effect.

imgZoom

This property can use any number value. When set to 0, the selected scaleMode will be used to scale the image, otherwise the image will be zoomed according to imgZoom value.

imgRotation

To specify image rotation inside the box. This property can use any number value.

imgAlign

To specify image align inside the box. This property can use the following values:

Value	Vertical	Horizontal
C	Center	Center
T	Top	Center
B	Bottom	Center
L	Center	Left
R	Center	Right
TL	Top	Left
TR	Top	Right
BL	Bottom	Left
BR	Bottom	Right

loadingEffect

imgBox can give the image some effects after loading it. This property can use the following values: Alpha, Expand, SlideRTL, SlideLTR, None

_imgX and _imgY

Gets and sets the image position inside the box.

_imgWidth and _imgHeight

Gets the image size.

imgBox Methods

loadImage(imagePath:String);

Loads image or SWF movie inside the box.

reDraw();

This should be called after changing any of the following properties scaleMode, imgZoom, imgRotation and imgAlign

imgBox Events

imgLoaded

Invoked when a file loaded with imgBox.loadImage() has loaded successfully.

imgError

Invoked when a file loaded with imgBox.loadImage() has failed to load.

imgClick

Invoked when imgBox is clicked (only in touchscreen enabled devices).

Parameters: _xclick and _yclick tells the point inside the box that was clicked.

imgDblClick

Invoked when imgBox is double clicked (only in touchscreen enabled devices).

Parameters: _xclick and _yclick tells the point inside the box that was double clicked.

imgSlideTouch

Invoked when imgBox is touched with a slide gesture if the loaded image size is equal or smaller than the box, but if the image is larger than the box this event won't be triggered and the touch event will move the image inside the box.

Parameters:

Vertical A boolean value of true if the slide direction was vertical, or false if the slide was horizontal.
Upper_Left A boolean value of true if the slide was in the left half of the box in vertical sliding and in the upper half of the box in horizontal sliding, or false if the slide was in the right half of the box in vertical sliding and in the lower half of the box in horizontal sliding.
LTR_TTB A boolean value of true if the slide direction was up to bottom in vertical sliding and left to right in horizontal sliding, or false if the slide direction was bottom to up in vertical sliding and right to left in horizontal sliding.
Clockwise A boolean value of true if the slide direction was clockwise, or false if the slide direction was anticlockwise.

The next illustration shows how to identify the touch slide gesture using these parameters:

Example for handling events

iBox.loadImage("http://www.forum.nokia.com/images/logo_forumnokia.gif");
 
var LoaderListener:Object = new Object();
function onImgLoaded (evt:Object):Void {
	trace("Image Loaded");
}
function onImgDblClick(evt:Object):Void {
	// zoom the image when double clicked
	iBox.imgZoom+=100;
	iBox.reDraw();
}
function onImgClick(evt:Object):Void {
	// fit the image in the box when clicked
	iBox.imgZoom=0;
	iBox.scaleMode="exactFit";
	iBox.reDraw();
}
function onImgSlideTouch(evt:Object):Void {
	// rotate
	if(evt.Clockwise){
		iBox.imgRotation+=90;
	}else{
		iBox.imgRotation-=90;
	}
	iBox.reDraw();
}
 
iBox.addEventListener("imgLoaded", onImgLoaded);
iBox.addEventListener("imgDblClick", onImgDblClick);
iBox.addEventListener("imgClick", onImgClick);
iBox.addEventListener("imgSlideTouch", onImgSlideTouch);

Notes

1. You can change the loading animation simply by replacing the loadingicon movieclip in the library with your own animation.

2. You can change the size of the box at any time in actionscript by setting values for _width and _height properties of the box.

Example screenshots

Community: Wiki