“Stateful†Flex Skins with Transitions Using Flash
At MAX Peter Flynn of Adobe demoed how to make skins with transitions using Flash CS3 and some pre-created templates. For those who didn’t get to see the walk-through, or even for those who have, I thought I’d put together a little walk-through of my own.
What you need to get going is Flash CS3 and the Flex Skin Design Extension for Flash, which includes the templates. Download the Flex Skin Design Extension for Flash and install it. Once installed, fire up Flash CS3. You should see a “Flex Skins” option under the “Create from Template” column in the Getting Started window.
When you click on the “Flex Skins” option you’ll get a window with a list of available Flex Component skins. For this example I’ll select the Button skin.
When you first open the file you’ll see 4 layers: information, symbols, labels, background. Double-click on the Button symbol to reveal the timeline within.
If you scrub through the timeline you’ll notice the artwork changes to reflect the different states. This coincides with the frame labels: up, over, down, disabled. These frame labels match the state names for this Button component. Each of the other component skins may have different frame labels.
You may also notice the other frames with labels that are right next to each other. These are the transition starting and ending frames. The reason they are right next to each other is to prevent a time delay between the states. So, the first thing you want to do is spread those frames apart. For this example I’ll be working with the up-over transition.
If you look at the frame labels for that particular transition you’ll notice they’re named up-over:start and up-over:end. This is necessary for the transition to work properly in Flex.
With the frames spread apart I’ll create an under-glow transition where the Button will appear to be lit from the bottom as the user rolls over. Here’s a snapshot of the work area after I’ve created my transition:
I’ve got my skin all set up, so now I’ll export it for use in Flex. For this example I’ll just publish the SWF/SWC to my Desktop.
Once those are published I switch over to Flex Builder 3. In Flex Builder I’ll create a new Flex Project called “ButtonTransitionSkin”. Now it’s time to bring in my Button skin.
To bring in the Button skin got up to the File > Import > Skin Artwork menu item in Flex Builder. When you select “Skin Artwork” there are a few options. At the top select the “SWC or SWF file” radio button and then browse for the SWC that was published. I had put mine on my Desktop. Make sure you select the SWC and not the SWF.
I’ll change the default CSS entry for “Create skin style rules in:” to style.css and just leave the default selection for the “Attach style sheet to application:” option. Usually I’ll put my skin assets into a subfolder called something like “style” or “skins”, but in this case I’m not. After doing that the window looks like this:
When I hit the “Next” button I get a list of check box items to select the skins I want to include in my style sheet. I’ll leave “Button_skin” checked and click “Finish”. When I do that the style.css file is created and the skin is assigned to that component.
Now all that’s left is to add a Button to my Application layout and I get something like this:
Click here to view in new window (View Source enabled). Or download the project (including FLA) here.
If you’re looking for another method of creating “stateful” skins without using Flash, check out a post Nahuel of AsFusion wrote.
October 9th, 2007 at 10:45 pm
Hey Juan,
I was making a post about stateful skins too. (but without flash)
October 10th, 2007 at 7:57 am
Thanks for this! I’ve been wishing for a long time that this kind of gradual button state transition were baked into the framework. Someday when I get time maybe I’ll create a programmatic version.
October 10th, 2007 at 8:20 am
@Nahuel - Nice! I added a link to your post on to this one.
@Tom - There’s always Thermo
How long before we start seeing parts of it being integrated into the framework, I don’t know. You can also check out Degrafa or Nahuel’s post mention at the bottom of this one.
October 11th, 2007 at 3:42 pm
Looking to clarify how we are expected to use the Flash templates…
What’s the purpose of the _background | ComponentLayout clip? I don’t see it being used by the given component…there’s no linkage or code…seems not to be used at all.
October 11th, 2007 at 4:02 pm
I believe _background is just for layout purposes. It doesn’t have anything to do with the actual artwork that makes up a skin(s).
March 26th, 2008 at 10:14 pm
view source does not work
April 8th, 2008 at 1:09 pm
1st off - awesome post. Exactly what I needed in terms of creating stateful, animated components! Yay!
Here’s the curve-ball: how can I do this w/out using the ‘Import Skin Artwork’ in Flex Builder?
I need to be able to open the stateful version of the flex_skins template, modify all the existing components and add a bunch of my own, edit the CSS, compile the .swf & .css into a .swc using the Flex SDK and deliver the .swc. This .swc then gets integrated into the application build by script on some Linux box somewhere. Hence my NOT being able to use the import function.
Help me Obi-wan Kenobi!
April 8th, 2008 at 3:49 pm
Perhaps the question I really meant to ask: is it possible to have stateful transitions in a theme?
April 8th, 2008 at 4:09 pm
I don’t see why not. I can’t say that I’ve tried it. However, a set of stateful skins gets compiled as a SWC, which means you’d be recompiling that SWC with the CSS into a theme SWC. Not sure if that causes issues or not.
You don’t have to use the “Import Skin Artwork” feature in order to use your stateful skins. The Skin Import Wizard is more of a timesaver. I usually hand code all my CSS and I don’t have any issues.
April 8th, 2008 at 4:48 pm
I’d be INCREDIBLY grateful if you could post a tut. on using the stateful templates to create a theme …
April 22nd, 2008 at 11:47 pm
Hi guys,
I have tried this feature and it is very nice. But if I want to enlarge the button for example during the transition, it makes something strange inside flex.
It is like flex autoscale the button….
Can you help me?
Thanks.
April 23rd, 2008 at 7:28 am
Julien,
There are a couple of things you can do, each of which involve creating an additional asset to define the bounds of your Button. To define the bounds of your Button skin you can add a clear shape in the skin to define the total area of the transition animation. This way Flex will stretch the Button skin and the clear shape.
The other thing you can do is make a clear shape and make it a new symbol called “boundingBox”. Use this shape to define the bounds of your skin and this symbol will be recognized in Flex.
April 24th, 2008 at 1:39 am
Thanks for the fast answer Juan, this solution works nice
But I got another issue
When I defined a transition for the button, for instance the “over down-start”. One of the annoying things is that when you are down on the button, it plays the transition but when you release it, it plays the animation back.
Do you know how we can disabled this back effect??
Thanks.
May 15th, 2008 at 11:50 pm
Hi!
I have a problem when I import 2 button skins. Both are named “Button_skin” so I can use only one in my CSS. How can I change this name?
Thanks!!
June 12th, 2008 at 12:03 pm
Regarding nyë’s comment, I have the same issue. I tried renaming the symbol and class name (like to button_skin1″ ) but I get this error in Flex:
Design mode: Cannot load myButton.swc (reason: ERROR: Load Verify). It may require classes (such as Adobe AIR components) that are not supported by design mode. Check the Eclipse error log for more details.
the SWC is added just like normal, and if I use the the default naming conventions it works just fine. With the above, it still compiles but the item reverts to it’s original, built in skin.