Dec
18

Flex Skinning with Degrafa - Part 3

9 comments Posted by: Jeremy Saenz

Part 3 of the video series, 'Flex Skinning with Degrafa'. I walk through the creation process of a skin for a Flex Button component using Degrafa. I finish this part of th series by adding syles support for our Flex Button Skin.

Enjoy!

Download the example source files

Category: Flex |

9 Comments so far

Write yours
windhood
1. windhood wrote on December 20, 2008 at 6:46 PM
excellent,where is the code?the download link does not work
Jeremy Saenz
2. Jeremy Saenz wrote on December 22, 2008 at 10:54 AM
All fixed up... Sorry about that :)
FPlayer
3. FPlayer wrote on February 27, 2009 at 4:58 PM
I have problems viewing it, weird...
Kolyan
4. Kolyan wrote on April 01, 2009 at 4:50 PM
Great tut, Jeremy.
I'll point one thing in addition.
At very beginning when you started deleting <Canvas> tags and replace it with <GraphicBorderSkin> it would be worth mentioning, for newbs like me, WHY would such tag name will be chosen.
Is that default start-up tag for ANY degrafa'ical components?
Or you just picked that randomly?
I'd like to have some clarification on that, please.
Thank you.
Nikos
another great one thanks
Julian
Hi Jeremy, nice work, but, when I use the awesome button, in toggle mode(true). the button lost his shape, only keep the label.


how, I could solve that?
Pogi
7. Pogi wrote on July 23, 2009 at 3:55 AM
great! these video tutorials are really helpful to get started with degrafa skinning! thanks a lot
Reto Peter
Hi
thanks a lot for the nice presentations.
I got one little question:
I wanted to include an image to the Button
--> lets say for a search button i want to include a loupe
--> for a save button want to include a disk icon
But i was not able to include it with the GraphicImage tag.

I tried to do like that:
<GeometryComposition id="test" state="upSkin">
<GraphicImage source="@Embed('assets/Search.png')"/>
   <RoundedRectangle
       cornerRadius="{_cornerRadius}"
       width="{awidth}"
       height="{aheight}"
       fill="{upFill}"
       stroke="{mainStroke}"
       />
</GeometryComposition>

How to do this within a MXML-Component with the usage of degrava???

thanks in advance for your quick help...
Reto
Reto Peter
I find the solution by myself...:-)
<GeometryComposition>
   <RoundedRectangle
       cornerRadius="{_cornerRadius}"
       width="{awidth}"
       height="{aheight}"
       fill="{normalFill}"
       stroke="{normalStroke}"
       >
      <RasterImage source="@Embed('Search.png')" top="{_imageTopSpan}" left="{_imageLeftSpan}" stroke="{noStroke}"/>
   </RoundedRectangle>
</GeometryComposition>

Leave your comment

Comment etiquette: As a gesture to those subscribed to this post, please keep your comments relevant to the post.

Your email address will never be displayed.
Email is gravatar enabled.Gravatar are the pictures you see next to the comments. If you like to have one, visit gravatar



Allowed tags:

<code>
All other tags will be shown as such, when in doubt, use the preview.

Leave this field empty:


Preview:

Refresh Preview
1. You wrote on