Flex Skinning with Degrafa Screencast, Part 1
9 comments Posted by: Jeremy SaenzPart 1 of the video series, 'Flex Skinning with Degrafa'.
In this screencast, I walk through the creation process of a skin for a Flex Button component using Degrafa. I show how to import the Degrafa .swc file and go over how to add gradient fills and strokes to output an attractive button skin.
Enjoy!
Download the example source files
9 Comments so far
Write yoursA few things I'd like to mention:
You don't need the awidth/aheight stuff. Beta 3 brings percent layout and constraints, so you can do width="100%", top="0", bottom="10", etc. Or, if you still wanna use the awidth/aheight implementation, we've baked it in, so you can do width="{skinWidth}" or height="{skinHeight}". Also, you don't need to worry about overriding updateDisplayList.
Also, they way you work with skin states is new. You can actually implement states just like you can with Flex View States and just override properties, add children etc. using AddChild, RemoveChild, SetProperty, etc. like:
<states><State name="overSkin">
<SetProperty target="{color1}" name="alpha" value="1"/>
</State>
<State name="downSkin" basedOn="overSkin">
<SetProperty target="{theFill}" name="angle" value="90"/>
</State>
</states>
You might want to play with some other stuff like filters (which you used in your screencast), transforms, repeaters, decorators, masking, clipping, palette, etc.
Here's a sample I through together that implements some of this stuff and RasterText/RasterImage: http://www.degrafa.org/source/LayerTextSkin/ButtonLayerText.html
Nice work!
Great tutorials, they have been very useful when I have been learning Degrafa.
However I have a question about states and filters, do you know how you can have different filters set-up for each of the states? I am trying to have only one skin for all states of a button but have come across a problem doing this if using filters.
I have tried using the newer Flex State View override properties (as mentioned in the comments above) , but this does not appear to work with filters.
Then I tried adding the states to the GeometryComposition and then including the different filters within each geometry object; but this actually adds to the hit location area. In other words, add a drop shadow to a button geometry the shadow becomes part of the button (extending the hit location) and is clickable.
After much experimenting I had to fall back to creating three skins, up-over-down, so I could have different filters for each state. Am I just missing something obvious here?
On a secondary note if in the latest version of Degrafa you can do away with having to use updateDisplayList and simply use {skinWidth} and {skinHeight} instead; if I still wanted to use properties from the CSS within the skin file do I still need to include the getStyle function within a updateDisplayList function or is there another way to do this?
Thanks for any help?
Thanks for your questions. Yes, there is a way to add a filter per button state, and it involves using actionscript in the updateDisplayList function. You want to first create an instance of the filter object in your button skin... But be sure not to add it to the filters just yet:
<mx:GlowFilterid="glowFilter"
color="#FFFFFF"
alpha="0.5"
blurX="10"
blurY="10"/>
Next thing you want to do is put this snippet in the updateDiplayList method:
if(this.name == "overSkin"){
var myFilters:Array = new Array;
myFilters.push(glowFilter);
this.filters = myFilters;
}
For the next question... Yes. For now, you will have to use actionscript for the styles... I always like having a good mix of actionscript and mxml... Degrafa is still in Beta, and I am sure they are working out many of the things you are mentioning... Hope this helps!
That has been a great help, makes more sense now.
Yes, you are correct in saying that if you want to add a pink color to a Button in Flex, you can just use styles with the default Halo theme that Adobe has provided... But as I show in the next video's, the worth of programmatically creating a skin starts to show benefit when implementing styles. This allows for a more flexible skin where you never have to go back to the skin code to mold it, change it, and make it your own.
Hope that helps,
Jeremy