×
Namespaces

Variants
Actions

Archived:Creating Image Gallery with Flash Lite and APIBridge

From Nokia Developer Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

We do not recommend Flash Lite development on current Nokia devices, and all Flash Lite articles on this wiki have been archived. Flash Lite has been removed from all Nokia Asha and recent Series 40 devices and has limited support on Symbian. Specific information for Nokia Belle is available in Flash Lite on Nokia Browser for Symbian. Specific information for OLD Series 40 and Symbian devices is available in the Flash Lite Developers Library.

Article Metadata
Article
Created: pasi.manninen (19 Mar 2010)
Last edited: hamishwillee (14 May 2013)

Contents

Overview

APIBridge and Platform Services API provides great plug-ins for Flash Lite Developers. In this article Media Management Services plug-in and ActionScript Device Object are used to create Image Gallery. First all the images data are loaded from device using the Media Management Service, then user can browse images just pressing next or prev buttons on the screen. Device object is used to keep Flash Lite application in landscape mode all the time.

This article will show how to implement image viewer in Flash Lite 3.1 supported devices.

Installing API Bridge and Device object classes to Flash IDE

To start using APIBridge and Device object with Flash IDE you first have to download APIBridge ActionScript API (and Device object) and install it to your system. You can download APIBridge ActionScript API here and Device object here.

In mac you can install classes to following directory: Library/Application Support/Adobe/Flash CS4/en/Configuration/Classes/ and in Windows: Adobe/Flash CS4/en/Configuration/Classes/. After that classes should work in your IDE.

Note.pngNote: The API bridge framework is not preinstalled in the device, it needs to be installed separately. Please see the article Flash Lite API Bridge for more info

Testing in device

You have to install API Bridge sis package on you phone first. You can find the sis package inside zip file provided for example here.

Programming in Flash

First of all you have to create a needed graphics UI (a few buttons and movie-clips) for the end user. Please look more information about those in source files (later in this article). I will cover here only programming part of using APIBridge and Device object with ActionScript 2.0.

Following code should be programmed in first frame of timeline in Flash IDE. Import needed classes and set Flash Lite to use full screen, high quality and disable default keypad and disable softkeys.

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


// import APIBridge library
import si.apibridge.*;
// import Device library
import com.nokia.lib.Device;

// set fullscreen
fscommand2("FullScreen","true");
// set highquality
fscommand2("SetQuality","high");
// disable default keypad
fscommand2("DisableKeypadCompatibilityMode");
// disable softkeys
fscommand2("SetSoftKeys", "", "");
// no scale 
Stage.scaleMode = "noScale";
// align top left
Stage.align = "TL";
// disable forusrect
_focusrect = false;

Flash Lite 3.1 supports Platform Services Device object, which helps Flash Lite developers to keep Flash Lite applications in portrait or landscape mode all the time. In this article Flash Lite application is designed to run landscape mode and all UI is in main_mc movieclip. If user has started application in portrait mode, main_mc movieclip is rotated and Device object will disable devices autorotation support. In this way Flash Lite application can be kept in portrait mode all the time.

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


// disable devices autorotation
var deviceObject:Object = new Device();
deviceObject.DisableAutoRotation(true);

// if device is not lanscape, rotate main_mc (to keep UI landscape and fullscreen)
var landscape:Boolean = true;
if (Stage.width < Stage.height) {
  main_mc._rotation = 90;
  main_mc._x = 360;
  landscape = false;
}

Next it is time to create a new instance of APIBridge. Errors will be shown in dynamic textfield in main_mc.

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


// create a new instance of APIBridge, with callback error function
var bridge:APIBridge = new APIBridge(onBridgeError);

// handle APIBridge errors
function onBridgeError(outParam:Object):Void {
  main_mc.info_txt.text = "APIBridge error " + outParam.ErrorCode + " " + outParam.ErrorMessage;
}

To get all images data we have to first create a new media service instance to filter all images data from users device (FileType:"Image"). Media Management Service has GetList function which can browse Sound, Image, Video or StreamingURL content from users Device. onMedia function will be called after all the images data are got from APIBridge. Images fileName, fileSize and fileDate will be stored in object and this object will be added to imageDatas array. This array will be used when users browses next or previous images. First image will be shown after all data is collected.

Media Management Services gives image paths with '\' characters which seems to give some problems if we try to load images. In this article all '\' characters will be replaces to '/' with own made replace()-function.

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


// store image's data
var imageDatas:Array = new Array();
var showIndex:Number = 0;

// get all music from device
function getMedia() {
  // create a new media service
  var media = bridge.Service("Service.MediaManagement", "IDataSource");
  var filter:Object = {FileType:"Image"};
  var param:Object = new Object();
  param.Filter = filter;
  media.GetList(param,onMedia);
  main_mc.info_txt.text += "\n mediaservice = "+media;
}

// all media data is loaded now (callback)
function onMedia (transactionID:Number, eventID:String, outParam:Object) {
  if (outParam.ErrorCode == 1) {
    // Error occured while retrieving values
    main_mc.info_txt.text = "Error occured while retrieving values";
  } else {
    // show values
    main_mc.info_txt.text = "Results: " + outParam.ReturnValue.length;
    var outList = outParam.ReturnValue;
    var outputEntry = null;
    do {
      outputEntry = outList.next();
      var fileNameAndPath:String = "";
      var fileName:String = "";
      var fileDate:String = "";
      var fileSize:String = "";
      if (null != outputEntry) {
        for (var key:String in outputEntry) {
          if (key == "FileNameAndPath") fileNameAndPath = replace(outputEntry[key].toString());
          else if (key == "FileName") fileName = outputEntry[key].toString();
          else if (key == "FileSize") fileSize = outputEntry[key].toString();
          else if (key == "FileDate") fileDate = outputEntry[key].toString();
        }
        // create new data object
        var file:Object = new Object();
        file.fileNameAndPath = fileNameAndPath;
        file.fileName = fileName;
        file.fileSize = fileSize;
        file.fileDate = fileDate;
        // add image data object to array
        imageDatas.push(file);
      } else {
        break;
      }
    } while (true);
    // show first image
    showImage(imageDatas[showIndex].fileNameAndPath);
    // show next button
    if (imageDatas.length > 1) main_mc.buttonbar_mc.button1_mc.label_txt.text = "Next";
  }
}

// replace '\' characters -> '/' in filename
function replace(filename:String):String {
  var temp:String = "";
  for (var i:Number=0;i<filename.length;i++) {
    temp += (filename.charAt(i) == "\\") ? "/" : filename.charAt(i);
  }
  return temp;
}

To show images in Flash Lite we can use loadMovie()-function, but it is better to use MovieClipLoader class if we want to show image loading process information to user. MovieClipLoader registers object to listen events what occurs when image is loading. Here we use onLoadStart to show user that image is started to load, onLoadProgress to show loading process and onLoadInit will be called when image is loaded. After image is loaded we scale it to fit screen. Look more information about scaling image to screen in source codes (later in this article).

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


// load images with MovieClipLoader
var imageLoader:MovieClipLoader = new MovieClipLoader();
// create new object for events
var imageListener:Object = new Object();
// start loading image
imageListener.onLoadStart = function(target:MovieClip):Void {
  // hide image first (we need to scale it first)
  target._visible = false;
}
// image loading process
imageListener.onLoadProgress = function(target:MovieClip,bytesLoaded:Number,bytesTotal:Number):Void {
  var loaded:Number = Math.round(bytesLoaded/bytesTotal*100);
  if (loaded == 100) main_mc.info_txt.text = "Resizing image ("+(showIndex+1)+"/"+imageDatas.length+")";
}
// error loading image
imageListener.onLoadError = function(target:MovieClip):Void {
  main_mc.info_txt.text = "Error loading image";
}	
// scale image to fit screen
imageListener.onLoadInit = function(target:MovieClip):Void {
  scaleImage(target);
  main_mc.info_txt.text = "Name:"+imageDatas[showIndex].fileName + " Date:" + imageDatas[showIndex].fileDate;
}
// register imageLoader listener
imageLoader.addListener(imageListener);

APBridge takes a few seconds time to get initialized. So it is good to give a small time to it before we start scanning all the images data from device.

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


// start loading images data from phone
function startLoading():Void {
  clearInterval(startID);
  main_mc.info_txt.text = "Loading images data, please wait...";
  // get images data from device
  getMedia();
}

// wait here 2 secs to get enough time APIBridge to ready, start loading...
var startID:Number = setInterval(startLoading,2000);

In Flash IDE we have to create sample UI to handle user interaction and show loaded image. You can create a few buttons (Next, Prev, Exit) and one empty movieclip to show image to use this example (or just look more information from source code). Below are examples how to use Next- and Prev-buttons to load images.

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


// show next image
next_mc.onRelease = function():Void {
  // show next image
  showIndex++;
  if (showIndex >= imageDatas.length) { showIndex--; return; }
  showImage(imageDatas[showIndex].fileNameAndPath);
}

// show previous image
prev_mc.onRelease = function():Void {
  // show prev image
  showIndex--;
  if (showIndex < 0) { showIndex = 0; return; }
  showImage(imageDatas[showIndex].fileNameAndPath);
}

Source Codes for Download

File: Images.zip

This page was last modified on 14 May 2013, at 09:22.
108 page views in the last 30 days.
×