Flex Stuff by Gilles Guillemin

Degrafa is a fantastic tool and has become for the past few months a core component of all my developments at Tailgate Technologies. Still, some very powerful tools among Degrafa Framework seem to be a bit underused by most users (at least most bloggers). I’m thinking here of Advanced CSS with CSSSkin class. Or at least, there rather is a relative lack of examples and documentations on how to use it. You can still find on Degrafa’s website Ben Stuki’s example along with Juan Sanchez’ one, but when you try and watch the screencast tutorials you unfortunately end up hitting dead ends. One thing in particular took me a significant while to figure out: how to set elaborate gradients (for a background color for example), so I thought that sharing my discoveries (and improvements in a further post) might be useful to some of you.

First, a very simple example:

Degrafa Gradients Example 1 (click to Launch)

As you can see, nothing overly complicated here. A simple gradient, from white to red and from left to right. Two things to notice though:

1. You need to define the CSSSkin class with:

   border-skin: ClassReference("com.degrafa.skins.CSSSkin");

2. IMPORTANT: background-color needs to be a string (actually, it’s an array of strings, but we’ll come back to this a bit later):

   background-color: "#FFFFFF #FF0000";

Let’s now change the gradient’s orientation:

Degrafa Gradients Example 2 (click to Launch)

Here we’ve added a new parameter at the beginning of the string: 90deg (without space!). It indicates the orientation of the gradient. Here 90 degrees clockwise. Could be the usual positive or negative value for orientation (90deg, -90deg, 180deg, -180deg…).

Now, the other paremeters:

Degrafa Gradients Example 3 (click to Launch)

No visible change here. Still, two new parameters appear for each color:

1. The first parameter, in percent (without space!) is the percentage of the surface covered by the color (more about that in the next example)
2. The second one if the opacity (alpha) of the color, again in percent.

Let’s add a third color:

Degrafa Gradients Example 4 (click to Launch)

We’ve added a nice yellow, which is at its maximum “blending” with red and white just in the middle of the surface (hence the 50%). It works pretty much like it would do in Photoshop or Fireworks, but code wise.

Last, an example of how I recreate the kind of gradients used for a famous phone (I’m working at the moment on a pet project, a Flex version of the UI of this famous phone… I’ll keep you posted…):

Degrafa Gradients Example 5 (click to Launch)

I told you that background-color was actually an array of strings. Here you get an example of that. All of the opacity parameters of the string are set below 100%. They are partly transparent. Which means you can quickly change the “theme” color by adding another “global” color after the first string (could be another gradient as well).
Replace the “#FFFFFF” at the end of background-color by “#FF0000″ and see the result for yourself…

Pretty powerful, no? A few change in a CSS file and the result is already quite significant. Think what you can do by also simply play with individually rounded corners, variable border width, etc… Next time, I’ll show you how to simply extend CSSSkin in order to fully skin buttons using Degrafa and CSS.

Stay tuned!

Related posts:

1. Degrafa: Extend CSSSkin to skin Flex Buttons How to extend Degrafa's CSSSKin class in order to skin...
2. My take on Pong using Flex, Away3D, Mate, Degrafa and, uh, Efflex A Flex version of Pong, using Away3D engine, Mate framework,...
3. Yet another Flash Catalyst / Builder workflow method A new attempt in solving the workflow issue between Flash...
4. Mate examples: #11 Mediator (or Passive View) This is the eleventh of a series of gradually more...
5. Mate examples: #10 Presentation Model This is the tenth of a series of gradually more...

Related posts brought to you by Yet Another Related Posts Plugin.

(No Ratings Yet)

 Loading ...