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.
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
14 Comments on “Actionscript 3 Layout Organizers”Robin
7.09.07 12:18 pmThis is nutso cool. Just for the record.
kellie
7.09.07 12:48 pmColors and more colors, please! Lovely effect.
somerandomdude
7.09.07 1:17 pmGracias Robin. Much appreciated.
I will play with that Kellie - check for updates later today/tomorrow.
Andres Santos
8.09.07 8:59 amWOW!! this is great :-D, any code sharing?
(you made such a great work)
jadd
9.09.07 1:01 amhi it’s look like what I’m looking for. Any code to share? Do you use some design pattern?.
Thanks, Jad.
Daniel
13.09.07 9:45 amHi
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
somerandomdude
13.09.07 9:54 amHey 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.
Dave
29.10.07 10:40 amVery slick! Would love a copy of that source
Madhusudhan
4.12.07 1:23 amIs 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?
somerandomdude
7.12.07 9:17 amThe source code should be released the week of December 16th. Sorry for the wait folks.
southAustin(fernando);
30.12.07 7:21 pmwhoa. dude. this is so awesome. thanks for sharing the source code with us. peace. and happy new year dude!!!!
Imran
16.01.08 6:18 pmThis is honestly great. Good work & thanks for sharing!
Flash Tutorials | 7 AS3 Classes | Lemlinh.com
1.09.08 7:15 pm[...] while back, I posted a basic example of layout organizers and layout organizers applied to video. I kept talking about how cool I considered this idea to be, [...]
Antonio
27.05.09 6:17 amHi, that a good work, i can’t download de source. can you send me the correct link?.
thanks.
$0
Leave a comment, have 50 cents donated to a charity.