Archived:ImgBox component for Flash Lite
Article Metadata
Article
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
- 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)
-
- 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
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
- You can change the loading animation simply by replacing the loadingicon movieclip in the library with your own animation.
- 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
(no comments yet)