×
Namespaces

Variants
Actions
Revision as of 04:31, 8 May 2012 by hamishwillee (Talk | contribs)

Archived:ImgBox component for Flash Lite

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: benefit_ms (29 Jun 2009)
Reviewed: SannaH (07 May 2012)
Last edited: hamishwillee (08 May 2012)

Contents

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\Nokia Developer 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)
    ImgBox1.gif ImgBox2.gif
  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:

ImgBox3.gif

Example for handling events

Invalid language.

You need to specify a language like this: <source lang="html4strict">...</source>

Supported languages for syntax highlighting:

4cs, 6502acme, 6502kickass, 6502tasm, 68000devpac, abap, actionscript, actionscript3, ada, algol68, apache, applescript, apt_sources, asm, asp, autoconf, autohotkey, autoit, avisynth, awk, bascomavr, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_loadrunner, c_mac, caddcl, cadlisp, cfdg, cfm, chaiscript, cil, clojure, cmake, cobol, coffeescript, cpp, cpp-qt, csharp, css, cuesheet, d, dcs, delphi, diff, div, dos, dot, e, ecmascript, eiffel, email, epc, erlang, euphoria, f1, falcon, fo, fortran, freebasic, fsharp, gambas, gdb, genero, genie, gettext, glsl, gml, gnuplot, go, groovy, gwbasic, haskell, hicest, hq9plus, html4strict, html5, icon, idl, ini, inno, intercal, io, j, java, java5, javascript, jquery, kixtart, klonec, klonecpp, latex, lb, lisp, llvm, locobasic, logtalk, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, magiksf, make, mapbasic, matlab, mirc, mmix, modula2, modula3, mpasm, mxml, mysql, newlisp, nsis, oberon2, objc, objeck, ocaml, ocaml-brief, oobas, oracle11, oracle8, oxygene, oz, pascal, pcre, per, perl, perl6, pf, php, php-brief, pic16, pike, pixelbender, pli, plsql, postgresql, povray, powerbuilder, powershell, proftpd, progress, prolog, properties, providex, purebasic, pycon, python, q, qbasic, rails, rebol, reg, robots, rpmspec, rsplus, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, sql, systemverilog, tcl, teraterm, text, thinbasic, tsql, typoscript, unicon, uscript, vala, vb, vbnet, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xbasic, xml, xorg_conf, xpp, yaml, z80, zxbasic


iBox.loadImage("http://www.developer.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

ImgBoxEx1.jpg ImgBoxEx2.jpg

ImgBoxEx3.jpg

59 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×