Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Archived:ImgBox component for Flash Lite

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



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


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


imgBox component (MXP) and a simple usage example:


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.


  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


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.


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.


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


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


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


Loads image or SWF movie inside the box.


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

imgBox Events


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


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


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

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


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.


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.


  • 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

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


var LoaderListener:Object = new Object();
function onImgLoaded (evt:Object):Void {
	trace("Image Loaded");
function onImgDblClick(evt:Object):Void {
	// zoom the image when double clicked
function onImgClick(evt:Object):Void {
	// fit the image in the box when clicked
function onImgSlideTouch(evt:Object):Void {
	// rotate

iBox.addEventListener("imgLoaded", onImgLoaded);
iBox.addEventListener("imgDblClick", onImgDblClick);
iBox.addEventListener("imgClick", onImgClick);
iBox.addEventListener("imgSlideTouch", onImgSlideTouch);


  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


This page was last modified on 13 May 2013, at 11:42.
479 page views in the last 30 days.