SuperViewStack
by Ruben
For a Flex project I'm working on I decided I would need a ViewStack that also showed the children underneath the selectedChild. As some might know, the ViewStack class displays its children by setting the visibility of one to true, and that of the others to false.
This got me expecting that bringing my concept of an extended ViewStack would be a piece of cake, some piece that was.. Eventually I ended up extending the Canvas class, rather than ViewStack, because the latter seemed to have some creationPolicy issues and doesn't like instanciating children that are not its selectedChild.
SuperViewStack by default displays all of its children that are underneath its selectedChild.
You can easily adjust the factor with which underlying children fade, and with what tint. It is also possible to switch back to normal ViewStack mode.
SuperViewStack has almost all of the functionality that ViewStack has, and all the child-methods (for example addChild()) are still functional.
So go check out the demo, if you're interested you can also check out the source and documentation.
One 'feature' that might seem a little odd to some is that it uses reversed z-indexing, which means that the first added child is on top, and the last on the bottom of the stack. However, you won't notice much of this since all of it is worked out underwater and the first added child still has 0 (zero) as its index, and the fifth will still have 4 as its index..
Comments
Hi Ruben, cool component. However, you really should consider renaming it
No joke; in my opinion using *ViewStack indicates that it’s an extended ViewStack and it’s not…. a viewstack indeed has creationPolicy features which are really important from a performant point of view (ie not rendering/loading elements that are not visible on the screen). From the quick look, it seems like your component is not inheriting that same functionality and thus might confuse people.
For the rest, cool stuff and keep sharing!
Good point about the strange name, in fact, you’re the second to mention the (apparently) weird name for the component.. Actually the original intension was to extend ViewStack, hence the name.
I’ve been thinking about a new name for the SuperViewStack, but I’m having a hard time coming up with something suitable, believe it or not :p
And of course thanks for taking the effort to post a comment, I appreciate it..
Don’t think anyting is wrong with the name. It’s a stack of views. That it’s not extending the ViewStack, pfff…. Who cares…if it was a subclass of the ViewStack it would be called SubViewStack:). Anyway great work…
Cool work Ruben! Perhaps you should consider posting it on the Flex Cookbook and on FlexBox to share it with the community:)
Thanks! As a matter of fact it was already noted for the next FlexBox update before I had even sent an email about it.. I’ll try to find time to post it on the Flex Cookbook during the weekend..
Excellent Class.
I have a question though. Is there a tutorial I can scrutinize and use that creates the same stack effect, but for Flash? These following sites use Flash, xml, and classes (i.e.,Fuse,etc) for the same effect:
http://www.rbk.com/us/freestyle/
http://www.filippa-k.se/
click on collections to see the stack effect.
Indeed, I’m in dire need of a tutorial or link that will teach me how ot do the stack effect in Flash ala reebok.com. Any assistance would be vastly appreciated. Thanks.
I think that perhaps you might be interpreting the concept of a ViewStack the wrong way. A ViewStack is a Flex component that can store multiple views (basically any type of Flex component) and stacks them, displaying only the selected view.
SuperViewStack does the exact same thing, except for the fact that it also displays the views behind (or below, if you will) the selected view.
In my opinion the effects of the showreels on the websites you referred to are somewhat too specific and will probably not be covered solely by using a ViewStack (or SuperViesStack for that matter).
As far as tutorials go, I can recommend the actionscript.org tutorials section, that’s where I learnt the basics of writing Actionscript years ago..
The show reels from the reebok website uses xml, some collection classes, and of course Flash to create that effect. I was just looking for a shortcut to writing that code . The simple way is to use three arrays to hold the _x and/or _y properties of the image syou’re displaying, and some functions to control the alphas of each element of the array, and a function that run a command once each image is out if view. I guess I’ll write the code myself. It just seems that the code for this effect is top secret, because I asked scored of advanced Flash developer I know to assist me with the code, and I’ve been sleeping in every Flash forum on the planet, and no has a clue. WOW…But thanks to Colin Moock’s books, thanks to Flash kit, lee brimelow, Kirupa, and Zeh Fernando, I’m ept enough to write the code myself. Thanks alot for my your reply Ruben.
You rocks! Just what i’m looking for. They haven’t fixed that creationPolicy issues yet!