Flash Actionscript 3 : ViewBuffer28 April 2009
At the end of 2008 I worked on a Flash project for The Economist called 'The World in 2009'. There was a graphic designer who was responsible for producing a world map vector and I wired it all up.
As you can imagine this artwork was intricate. Each country had a border and a background colour that were separate objects, some text fields for labels, and as you would expect also grouped into continents. The designer was using Adobe Illustrator to create the vector shapes and importing these into Flash and sending me the .fla
The process was not very smooth. There were changes to the artwork of course, Illustrator does not create MovieClips in the same way that you would manually and also when dealing with such an complex piece, old fashioned user error creeps in.
The Solution, ViewBuffer
This made life a little difficult for me while developing the Actionscript 3 code. The artwork was divided into regions so the files were easier to work with for the designer. I would load each one using a Loader() class and attach it to the Display List. I could reference the various objects, outlines / text fields / background colour clips, inside them like so :
It is easy to see why this is not a good situation to be in. One change to the structure and my paths would stop working. There were also further complications with instance names which caused the same problem. This is similar to how paths are constructed in Actionscript 2, with dot notation, so what is the best way of doing the same thing in Actionscript 3?
The bottom line is I do not want to be hamstrung by changes either by the Art Director or the Graphic Designer on the project. Changes are always going to happen and I looked to find a solution that simply accommodated them. One of the greatest things about AS3 is the Display List structure. The way that Display Objects are children of DisplayObjectContainers means that we can automatically examine this structure, or part of it, and record each of the items in an Array.
The ViewBuffer takes care of the path and presents the items to us in a straight forward list.
I will assume you know how to import packages into your AS3 projects so won't go into that in detail. Obviously you need this line at the top of the code :
Once you have access to the ViewBuffer you need to make an instance of one :
Let's say that once again you have a Loader called europe_clip_loader and you have added to the the display list, your next step would be to to inspect it :
In the above line of code the parameter is compulsory and it has to be a DisplayObjectContainer. The reason I have called the DisplayObjectContainer you are inspecting a ViewComponent is that I am a massive fan of PureMVC and this is what they are called in that framework. It seems to make sense because in Flex you would divide Views up into separate MXML files and they may not be on the Display List when you inspect them for the ViewBuffer. Once you have inspected your ViewComponent you then use the instance name of the items in the ViewBuffer to get reference to them.
If this MovieClip gets moved around then no problem your code will still work. If the instance name gets removed or changed then some more work is needed. Perhaps the person creating the .fla file names the MovieClip incorrectly and calls it 'country_russia' (without the _mc) on the end.
Taking a Look
What you would do is first look at the buffer list to see the instance names of the items on there. This is done like so :
The first parameter of the showBufferList method is the function you want to use to display. Here we are using the built in trace() method. Do not put the brackets on, just the name of the function, just like an event handler. The second parameter is optional and is a String. This is the property of the item that you would like displayed. The most useful is “name” but you may want to use “alpha” , “x” or “y” to tell you more details. If you use one of the other properties then the name is also outputted to give you better results.
I use a great debugging tool for Flash and Flex developing called Thunderbolt. This bit of code will output to Firebug, the web developer plug in for Firefox. If you are using this technique you would show the details of the buffer list like so :
Great but you may run into problems if after you have made up your ViewBuffer you remove or add an item and then try to reference it using getBufferListItemByName().
Adding and Removing Items
You can keep the ViewBuffer in synch by using addViewBufferItem() and removeViewBufferItem().
These both work in exactly the same way :
This will add item as a child of item_parent to both the Display List and the View Buffer. Similarly with removing items :
This will remove item from both the Display List and the View Buffer.
In both these examples item_parent needs to be a DisplayObjectContainer and item a DisplayObject.
This is quite a straight forward piece of code so there is only one Advanced Technique. If you would like to exclude certain data types from the ViewBuffer you can specify these when you inspect the ViewComponent. The second parameter of the ViewBuffer is an Array of Data Types to be excluded.
The reason for this is perhaps you are not interested in administering static items and you are trying make sure your swf performs as quickly as possible. You may also be using a framework such as PureMVC where you have a different class for each View and you do not want global access to the items in other Views across all of the ViewBuffers in your application.
I am sure this code can be improved, I have deliberately kept it from being too complicated. If you do use it, or better yet, improve it please let me know and I'll incorporate the improvements for everyone.