Actionscript 3 Layout Organizers
I have been playing with different layout configurations lately and, after seeing the advantages/disadvantages of Flex layouts, I decided to work on this experiment. Flex layouts are great because they allow easy visual organization of elements in containers. The problem with that is once an element is in a container, it cannot easily and flexibly change its layout position. For instance, a grid cannot really turn into a HBox and definitely cannot turn into more alternative layouts (such as a circular or random layout). I decided to make some Actionscript classes that would virtually mangage layouts – no containers, just managers. Meaning you subscribe an element to a layout (or multiple layouts) and they can be put into their correct layout position (or taken away) since they act independently.
Update: This code base has now been released under the name coordy. Read more.
The example above is a simple example of 50 sprites – all subscribed to different layouts. Clicking each layout button applies those elements to that particular layout. That layout can be changed, which in turn changes the elements subscribed to it. Those elements can also be broken down into sub layout organizers – allowing for some pretty cool stuff. This method is pretty lightweight as well since there are no actual containers for any of these objects. The objects can be tweened (as per the example above) by defining a tween function or just directly set to their respective positions. In addition, each layout is pretty small – meaning large amounts of layouts can be created with little hit on memory. This still has a while to go, but so far it has allowed me to do some fairly interesting things pretty quickly and reliably.
The Discussion
13 Comments
This is nutso cool. Just for the record.
Colors and more colors, please! Lovely effect.
Gracias Robin. Much appreciated.
I will play with that Kellie – check for updates later today/tomorrow.
WOW!! this is great :-D, any code sharing? :-| (you made such a great work)
hi it’s look like what I’m looking for. Any code to share? Do you use some design pattern?.
Thanks, Jad.
Hi
I simply love your work on layout.
Myself I am also working on an application
which explores different ways to navigate
the photo sharing community flickr.
Check out this first iteration:
http://gasi.ch/photos/
I am working on a port to Flex with generic
components for the zoom layout, the first
port is temporarily found under:
http://gasi.ch/sandbox
I’d love to see a deeper discussion of your
methods and possibly on the structure of the
code. It seems so smooth & elegant, kudos!
How well does it scale? How about 4000 sprites?
Regards
Daniel
Hey guys, sorry for the late response – the source code is coming, I just have to get it to a presentable (and usable) form.
Daniel – Awesome work man – really tight presentation. The method theoretically should be very light for 4000 sprites. As for your example, I actually think a Flex-ish container object works better since you’re not going to want to move all the objects to go to an individual photo, but rather move the entire container holding the photos appropriately. My method would still work, but you would most likely want to throw all the DisplayObjects into a basic container Sprite. I’ll play around with it and see what I come up with. Thanks for the feedback. :D
Very slick! Would love a copy of that source :D
Is this layout component written in AS3 without using MXML components?
Using MXML components albeit in code only, makes the generated SWF really heavy.
Mind passing me a link to the source for this?
The source code should be released the week of December 16th. Sorry for the wait folks.
whoa. dude. this is so awesome. thanks for sharing the source code with us. peace. and happy new year dude!!!!
This is honestly great. Good work & thanks for sharing!
Hi, that a good work, i can’t download de source. can you send me the correct link?.
thanks.