Optimising visual components for Flash Mobile
I’ve been working on some a visual component for a flash mobile app, and thought I’d use it to give you a quick case study on how important it is to optimise everything for mobile. Although this example came from an app for Flash Mobile and Flash Lite, the same problem is suffered by iPhone devs, and anyone developing mobile content.
The component – a list of data
I’m trying create a list of data which can be navigated by pressing up and down on a nav pad. Each time you navigate, the next item in the list comes into view. You can only see one item at a time.
The intensive option – a basic list
The first time I did this, I created a long list of data, and showed the first item. Pressing up and down simply moved the list up and down as this diagram demonstrates:
There are a couple of issues with this:
- Its uses up a lot of memory as all the list items have to be attached to the stage from the beginning
- You can’t have lists looping round, you can only go to each end
The improved option – reusing movieclips
As the following diagram will hopefully explain, there is another way. You can have just 3 movieclips, and change the position and content of each as required. This saves memory as you only have 3 movieclips on the stage per component and you can loop round and round.
Each coloured square represents one movieclip.
As you can see, this is relatively simple to implement and results in a much more efficient and flexible component. Any thoughts, let me know.
Mark,
This is a really nice approach – I used it often many years back when creating projects in Director (CD-ROM’s etc) and antique versions of Flash (<v7) that would often load in hundreds or thousands of data records, but only display a small fraction of those at any one time.
Open Laszlo (and many other UI frameworks) also make use of a very similar technique called "lazy replication" which only creates enough visual elements (views) to meet the immediate need of the visible display – http://www.openlaszlo.org/lps4.2/docs/developers/datareplication.html
Hey Bryan, cheers for the comment, the technique seems a well trodden path then, and thanks for this link, I remember using Laszlo as a case study for my dissertation back in 2004!