Gumbo (Flex 4) Skin with Transitions
In my last post I created a skin example based on the new skinning approach coming with Flex 4. It was a simple button skin that had two states, multiple icons, filters and used FXG for some of the graphics. I thought I’d expand on that example to include transitions.
Over the weekend I noticed a new build of the Flex SDK popped up with some new samples, like a CircularScrollBar, and some Gumbo Effects (amongst other things). I decided to make a Button skin with transitions that included a Resize and Fade Effect. Here’s what the 2 states look like:
The transition between the up and over states resizes the skin vertically then fades in the Sun/Cloud icon and the static temperature text. When you roll off the Button the transition plays in reverse. The transitions are pretty easy to implement if you’re familiar with working with Transitions and Effects currently in Flex. However, it will be nice to have Thermo to see exactly what your transitions are doing in real-time, especially for making more advanced composite effects.
During the process of putting this example together I experimented with using the includeIn property to only show content in certain states. Eventually I took it out, but that’s another option for showing/hiding content rather just messing with the alpha and scale. Plus, you’ll be sure that content will only show up in a designated state and not mess with the layout.
If you’re interested in what I did to get this sample to work you can download the source here.
July 21st, 2008 at 12:30 am
[...] The first one is kind of an intro and compares and contrasts the Flex 4 versus Flex 3 model. The second one uses a new Gumbo build and uses some of the transitions. Both are well worth checking [...]
July 21st, 2008 at 7:01 pm
Any idea on if Adobe will be providing a Flex 4 Combobox? if not? how might you do something like this? Any idea on how will Flex 4 will deal with States that overlap other content?
Cheers
Gareth.
July 21st, 2008 at 7:14 pm
@Gareth - All I’ve seen so far is the use of MX/Halo ComboBoxes in the samples. I suppose you could make a skin that mimicked the same “feel” of a ComboBox, but I would think that would fall under more the new way components will be composed (which I haven’t looked at yet).
As far as States that overlap other content, I think there was some mention in the documentation of an attempt to smooth that out. Read more here: http://opensource.adobe.com/wiki/display/flexsdk/Enhanced+States+Syntax
July 22nd, 2008 at 2:17 am
Thanks for the nice example, just wondering if u can set the “heightFrom” value to “{status.height}” so it won’t jump too quickly when u rollover/rollout too quick?
Most of my projects need very smooth button transition which is very hard to do with current Flex framework, hopefully Flex 4 will have it all:)
Cheers
Ed
July 22nd, 2008 at 5:41 am
[...] mínima para 10.0.0 ( Flex Compiler > HTML Wrapper ) Para testar basta importar o exemplo do ScaleNine e compilar. This entry was written by joao.fernandes and posted on July 22, 2008 at 1:39 pm and [...]
July 22nd, 2008 at 1:23 pm
[...] Gumbo (Flex 4) Skin with Transitions (from ScaleNine Blog) [...]
July 23rd, 2008 at 2:12 pm
[...] Gumbo (Flex 4) Skin with Transitions [...]
July 30th, 2008 at 2:16 am
[...] in the skin file. Juan at ScaleNine has made a cool example with transitions in skins. Check it out here. I’ll keep posting more stuff as I try new stuff « 3D effects in Flash Player 10 [...]