Archive for ActionScript 3

Simple Generic Object Pooling in AS3

For Flash and Flex, object pooling is very important for performance, also an efficient way to avoid memory leak. Although many developers should have found good way to implement pooling, I unable to google a good one fitting my needs. So here’s my simple solution.

You could find source code here: https://github.com/neatfilm/neatfilm.com-open-source-code/tree/master/com/neatfilm/framework/view

Basically, a pool could store any kinds of object (maybe sprite, UIComponent), as long as it implements IReusable interface.

  • function cloneNewObject():IReusable;
  • function reset():void;

Basically, the pool will be set with a single object as seed (also first object), any new object will be made by cloneNewObject() function, and stored in a single array. You can put object back, and first not-in-use object in the array will be picked when asking.

Outside of the object pool, you may set one or multiple array or/and dictionary to keep references of these objects for different purpose if necessary.

Develop / Debug Apps with Playbook

Playbook tablet apps can be developed with simulator, it can also run/debug with real playbook. The full check list to start develop Playbook App with Flash Builder is here: http://us.blackberry.com/developers/tablet/adobe.jsp

Using simulator is the easiest way to debug apps, but with a few limitations. It would be a little bit fast to run tablet app in the simulator. Unfortunately simulator is not free for Mac users, simulator has to be run in VMWare as guest OS, and VMware for Mac is not free (don’t know whether RIM would support the free VirtualBox in the future or not). A workaround that you could also install the simulator in another Windows or Linux PC, change simulator network setting from NAT to bridge mode, to allow connection between your development computer and simulator PC. The simulator itself need 1GB memory from your PC. If your development PC is not fast, consider a second PC to run the simulator.

Run/debug app directly in Playbook give you chance for a full test on your app in real environment, such as activate/deactivate, accelerometer, GPS location, maybe more.

Signing

To debug with Playbook, you must be authorized by RIM and create a debug token for the exact playbook. Complete the signing keys form, you’ll receive two .csj files usually in two workdays. With .csj files you can register with Flash Builder 4 or 4.5, then create a developer certificate so you could create debug tokens later(see image below).

Find your playbook PIN number About->Hardware,  you can create a debug token. Debug token would be a .bar file.

The playbook must be set with password, Security->Password, then change to development mode, Security->Development Mode. Then  upload the debug token to Playbook.

Configure App to debug with Playbook

App to run/debug in Playbook must have same author(company name), author ID created in the debug token. If not match, when you try to run/debug, Playbook will give you an error. The author ID can be found in debug token details, from Flash Builder Preference -> BlackBerry Tablet OS (for FB4) -> Signing -> Debug Tokens -> Details.

 

Create run/debug Configuration for Playbook

Playbook apps will be compiled and deployed either in simulator or real playbook to debug. In Flash Builder 4 (new Flash Builder 4.5 may better on this) a debug configurations must be setup (and adjust for each app project). It would be exact same for simulator and playbook, except pointing to different device with different device IP address, as well as host IP address (host IP is the IP address in your develop computer, where the simulator/playbook could connect to your develop PC. For example, if Playbook IP is 10.0.1.x, your host IP should be the IP 10.0.1.x in your computer, you can find IP addresses with ifconfig -a in Mac, or ipconfig /all|more in Windows. If your simulator run in the same development PC, host IP would be different)

When you create a new app project, please remember to check run/debug configuration for the new project, otherwise Playbook may give you errors.

App Failed to run?

It can happen sometime if your app configuration file, or your code not supported, or debug configuration incorrect, app will fail to run in Playbook, even worse, after an error happen, all apps in your Playbook would no longer able to run. You can try these if you run into trouble:

  • Check your blackberry-table.xml configuration file and debug configuration, try again.
  • Try to uninstall the app first, try again.
  • If Playbook not work properly, try to restart with the “Power Off” app.
  • If “Power Off” couldn’t run (in this case, all apps fail to run), hold the power button to restart Playbook.

Playbook App Project

Unlike Flash or Flex/Desktop AIR applications, Playbook apps must be run in simulator or real Playbook. It not worth to develop every piece of code and run that way (means compile, transfer to another place, then install, then start), which not so effective and waste lots of time.

Playbook AIR SDK has some parts such as web browser must use QNX packages, but UI could be built with Flex spark components or plain AS3 (no old MX components). Another concern most Flash/Flex team would like to develop a mobile app with one codebase and deploy in multiple OS systems,  so it would be better to separate the project into two type of projects:

  1. One standard type Actionscript/Flex project(s), to develop UI as well as some functions, with mockups/test cases to maximize development tasks.
  2. Another BlackBerry Tablet app project, with shared code/library from #1 project, mainly develop Playbook-specific functions, as well as final tests.

Flex Interface Design with Scale9Grid Bitmap Class, another approach

Recently I changed my job to part time, so got some spare time in my own project and some researches on Flex developments. I’m happy with that as I found more and more solutions in these days when I’m not pressed by full-time tasks as a major/lead developer and the only senior/firefighter for a team.

What I get most excited is getting some more ideas on interface design methods for Flex/AIR applications. I’m not a designer, most of my time focus on Flex/Flash coding and I constantly feel bad especially interface design in Flex. Not only Flex itself has no good work flow yet designers can easy to work, also it very hard for team/companies to find a really good designer for Flex projects.

Ok, I’m talking here is another optional approach in interface design for Flex. See follow I did in my own Flex/Air project:

Have you seen somewhere like this? Well, I don’t have designer on my own project, but like good designs when I write codes and testing, so I ‘borrowed’ some graphics from CS4 for use temperorily. It looks beautiful isn’t it? I hate any bad ugly designs in development, man, it’s Flash platform. I like beauties when I’m working and that’s why I choose to work as my career.

Requirements to make it?

The example above I used three images:

  • left highlight skin image
  • right skin image
  • dropdown button image

Scale9Grid bitmap class, you can get from bytearray.org. (I made some small modifications so its Scale9Bitmap class in this example. May write a new UIComponent-based class myself from scratch later when have time.)

How to make it?

The example above is the dock header, each one is a single object based on UIComponent. I show here how to make the right skin inside that component.

createChildren function, load bitmap with url:

Complete handler:

updateDisplayList function:

The component wouldn’t create bitmap until loader complete, then insert into bottom layer as its the background image. (In this example I put another skin image above so it will be inserted into layer 1 when the bottom layer has already added, that’s why I use a flag _rightSkinLoaded.)

The bitmap wouldn’t renderer until invalidation display list is called, which make maximum performance based on Flex framework. In updateDisplayList function, two skin images will be scaled with scale9Grid rectangles, that’s where the magic happens.

There’s one more thing, to get best result in my example, scale 9 bitmaps works better when positioning in pixels, I use int(xx) as followed:

Discussion

There already lots of approaches for interface design/skinning, like Flex/CS4 skinning kits, Degrafa. These approaches ‘work’ but I myself much like use scale9grid bitmap inside component directly. Here’s what I think:

  • Any designer can make graphics design, can support developers easy to use this approach, in case of scale 9 grid can work perfect (I think most standard interface components?).
  • Degrafa can be hard to ‘code’ graphics result what designer expect, but image with scale9 rectangle easy.
  • Less code (code lines after compiling) and better performance. If there’s tons of components in your application, you have to take care of performance. If you can, don’t use CSS skins for highly reused components.
  • Bitmap don’t need to be embedded, which make less size of application and less compiling time if there’s many bitmaps.

Of course, this is just an optional approach for Flex interface design, as scale 9 slices may not work in some designs.