Wednesday, January 16, 2008

Flex 3 Programmatic skinning gotcha

I recently came across what seemed like a bug in ProgrammaticSkin. It turned out not to be a bug, but it was a confusing API. Anyway, what I was trying to do was create a skin that can be used for buttons that would be a bit more interesting than the built in border skin.

So I fired up Illustrator and figured out what I wanted. What I needed to do was create a vertical gradient and then overlay a partially transparent horizontal gradient on top of it. Sounds easy enough. However what I tried to do didn't work. Can you spot why?

var hm:Matrix = horizontalGradientMatrix(0, 0, w, h);
var vm:Matrix = verticalGradientMatrix(0, 0, w, h);

var fillColors:Array = [bgColor,
ColorUtil.adjustBrightness(bgColor,
brightnessAdjustment),
bgColor];

g.beginGradientFill("linear", fillColors,
[1, 1, 1], [0, 127, 255], hm);

g.drawRect(b.left, b.top, w, h);
g.endFill();


fillColors = [0xffffff,
0xffffff,
bgColor,
bgColor];

var hilightStop:Number =
Math.min(shininess * 126, 126);

g.beginGradientFill("linear",
fillColors, [.20, .20, .20, .20],
[0, hilightStop, 127, 255], vm);

g.drawRect(b.left, b.top, w, h);
g.endFill();


I looked at this for quite a while before realizing why both gradients were vertical. It turns out that horizontalGradientMatrix() and verticalGradientMatrix() don't create and return a Matrix. What it does, is modify its own instance of a Matrix and then return it. So you end up with hm an vm both referencing the same Matrix object. Since verticalGradientMatrix() was called last, that instance was a vertical gradient.

The solution is to call horizontalGradientMatrix(), do what you need with the horizontal one, then call verticalGradientMatrix() to get the vertical one. So the code above becomes this.

var m:Matrix = horizontalGradientMatrix(0, 0, w, h);

var fillColors:Array = [bgColor,
ColorUtil.adjustBrightness(bgColor,
brightnessAdjustment),
bgColor];

g.beginGradientFill("linear", fillColors,
[1, 1, 1], [0, 127, 255], m);

g.drawRect(b.left, b.top, w, h);
g.endFill();

m = verticalGradientMatrix(0, 0, w, h);

fillColors = [0xffffff,
0xffffff,
bgColor,
bgColor];

var hilightStop:Number =
Math.min(shininess * 126, 126);

g.beginGradientFill("linear",
fillColors, [.20, .20, .20, .20],
[0, hilightStop, 127, 255], m);

g.drawRect(b.left, b.top, w, h);
g.endFill();


The result is now exact what I want. Notice the subtle glow achieved by the slightly lighter center portion of the button.

12 comments:

Anonymous said...

welcome to the wow gold, cheap WoW Power Leveling, service site,wotlk gold buy cheap wow gold,wow gold,world of warcraft power leveling buy wow gold|*|wow power leveling

Unknown said...

Great Article, shame about the sub human R SOLE posting litter on your site.

Unknown said...

By the way, the confusing(ness) of the api is the same issue with using the prototype pattern. Shallow copy of objects mean that the duplicate objects properties still refer (share) the same variable references. Gotcha indeed.

Anonymous said...

A good Warhammer warhammer goldquest guide is a great resource whyvipwarhammergoldto have for finding your warhammer newsway around in the massive warhammer anlec-destructionworld of Warhammer Online. Warhammer Elite, created warhammer 40kby Steve Ferris, who calls himself warhammer supporta "no life gamer", is a perfect fit for warhammer belakor-orderthat role. Steve has been playing MMORPGs for many years and has been warhammer online offersinvolved with Warhammer Online since closed beta. He really wow goldknows his stuff and shares it all with you in his guide.Warhammer Elite clearly lays out a path to get you to level 40 without wasting a lot of time, and without missing half the content. The in-game screenshots and fully annotated maps, along with the detailed instructions and tips for completing quests, are designed to help guide you through the game as fast as possible. He even gives you pointers on how to engage the various mobs you will http://www.vipwarhammergold.com/encounter in your questing adventures.

Anonymous said...

Gold key link for( [url=http://www.wowgold-powerleveling.com/]wow power leveling[/url] )the law by([url=http://www.wowpowerleveling.me/]wow power leveling[/url])the law by( [url=http://www.wowgold-powerleveling.com/wow-powerleveling.asp]wow power leveling[/url] )all, such as bubble( [url=http://www.wowgold-powerleveling.com/]power leveling[/url] )shadow dream hallucinations, such( [url=http://www.wowgold-powerleveling.com/]wow gold[/url] )as exposed as well( [url=http://www.wowgold-powerleveling.com/]wow powerleveling[/url] )as electricity, should be the case

Anonymous said...

Do you knowRose zuly? I like it.
My brother often go to the internet bar to buy rose zulie and play it.
After school, He likes playing games using these rose online zuly with his friend.
I do not like to play it. Because I think that it not only costs much money but also spend much time. One day, he give me many rose online zulie and play the game with me.
I came to the bar following him and found Arua ROSE zuly was so cheap. After that, I also go to play game with him.

Do you know Scions Of Fate gold? I like it.
My brother often go to the internet bar to buy SOF gold and play it.
After school, He likes playing games using these Scions Of Fate money with his friend.
But I do not like to play it. Because I think that it not only costs much money but also spend much time. One day, he give me many cheap SOF gold and play the game with me.
I came to the bar following him and found buy sof gold was so cheap. After that, I also go to play game with him.

Anonymous said...

What do you know Pirates of the Burning Sea Gold. And do you want to know? You can get potbs gold here. And welcome to our website, here you can play games, and you will get potbs Doubloon to play game. I know potbs money, and it is very interesting.Do you want a try, come and view our website, and you will learn how to buy potbs Doubloon. Come and join with us. We are waiting for your coming.
What do you know LOTRO Gold. And do you want to know? You can get Lord Of The Rings Gold here. And welcome to our website, here you can play games, and you will buy LOTRO Gold to play game. And it is very interesting.Do you want a try, come and view our website, and you will learn much about cheap Lord Of The Rings Gold. Come and join with us. We are waiting for your coming.

Anonymous said...

o you know dofus kama? I like it. My brother often goes to the internet bar to buy kamas and play it. After school, He likes playing games using these cheap kamas with his friend. I do not like to play it. Because I think that it not only costs much money but also spend much time. One day, he give me many dofus gold and play the game with me. I came to the bar following him and found buy dofus kamas was so cheap.

Anonymous said...

On account of I have rohan crone , I am not afraid of the lonely. At that time I do not know the meaning of it. Later I buy rohan gold . And every time, I have no rohan online crone , I will feel very anxious. Why I buy rohan online gold , please it gives me such a warm place. At the moment, I have rohan money .

Anonymous said...

Replica Bell & Ross Watches
Replica bmw Watches
Replica breguet Watches
Replica breitling Watches
Replica bvlgari Watches
Replica cartier Watches
Replica chanel Watches
Replica dior Watches
Replica concord Watches
Replica corum Watches
Replica D&G Watches
Replica De Witt Watches
Replica ebel Watches
Replica Emporio Armani Watches
Replica Fendi Watches
Replica ferrari Watches
Replica Fortis Watches

Anonymous said...

discount Christian Louboutin Boots
discount Christian Louboutin Pumps
discount Christian Louboutin Sandals
discount christian louboutin heels
discount Christian Louboutin Short Boots
discount Christian Louboutin Tall Boots
Christian Louboutin Boots Sale
Christian Louboutin Pumps sale
Christian Louboutin Sandals sale
christian louboutin heels sale
Christian Louboutin Short Boots sale
Christian Louboutin Tall Boots sale
Yves Saint Laurent boots
Yves Saint Laurent Pump
Yves Saint Laurent Sandals

Anonymous said...

I am grateful to you for this great content

araç sorgulama
sorgulama
ehliyet
açıköğretim
bağkur sorgulama
ssk sorgulama
emekli sandığı
cinsellik
radyo dinle
korku
evlilik
hikaye
gazeteler
ilan