Sliding Canvas with Flex
If you're building an application which you need to conserve space or just want a cool effect, then sliding a canvas right over your content might be a good option. I've had a few people ask me how do I did this on DubKorps.com.
First, take a look at the example. Source is available by right-clicking.
opps! For some reason the source code view didn't work from within the Flex, so here's a link to the sliding canvas source code. Sorry!
showEffect/hideEffect
The secret is in these two triggers. Every UI element in flex will dispatch these events when its visibility is changed. All we have to do is create some mx:Move tags and then toggle the visibility.Parallel
Since I also want to move the tab button I use a "paralell" effect, mx:Parallel. Within this tag I define two mx:Move tags. One to move the tab and one to move the canvas. Each move has a different target!. This is not necessary if you don't want them both to move, you can just use a mx:Move tag in that case.Transition happening?
It's important to keep track of whether or not a transition is currently happening. By transition, I mean "effect." We don't want to be able to trigger a new effect if I click while this is happening. I can keep track with a simple boolean which I set in the effectStart and effectEnd triggers.Positioning
It's important to note that absolute positioning is required for this to work. As you can see from the code, I calculate where the slider moves to and from. The "yTo" and "yFrom" attributes are used to actually make it happen. This same concept could be used for a diagonal or horizontal slide.Easing Function
One thing I didn't do here was an easing function. If you're going to use one like a "bounce" make sure you give the inside of your canvas some room because the "bounce" will cause more of it to be visible than actually exists. That's it! Easy huh? Don't forget to check the example!opps! For some reason the source code view didn't work from within the Flex, so here's a link to the sliding canvas source code. Sorry!
