Tag Archives: Skinning

Tech Tips: How to fix fuzzy pixels in Flex

What are fuzzy pixels? Semi-transparent lines that appear on the edges of your Sprites that make them appear fuzzy or blurry. This is the result of positioning a custom drawn Sprite (using the graphics property) on non-whole number pixels (for example myObject.x = 1.5).

Your probably wondering why anyone would set a Sprite to an decimal number of pixels? Well, most of the time this occurs when the positioning is based off of a mathematical equation. For example: myObject.x = this.width / 2. This would produce 50.5 if the width of the container is 101. One of the biggest problems with this is that the fuzzy pixel problem has a waterfall effect. Everything contained within that sprite placed at a decimal number position will have semi-transparent edges. Another reason would be designers that set positioning of items to half pixels in Photoshop and attempting to reproduce the design pixel perfect in Flex.
Read more

Tech Tuesday: Skinning Flex Components – Part 1: CSS

This will be a three part series on skinning Flex components. For part one I have chosen to dissolve the myth that Flex 3 can’t truly cascade styles. This three part series will start simple and get more complex with each post. You can use this code to mimic descendant selectors, dimensioning and multiple class names within Flex.

Problem:
Flex can’t do true cascading styles like HTML (for example a black play button)

Solution:
YES, flex can do cascading styles. It just requires a different approach. A programmatic approach. Don’t worry, I assure you that even a non-programmer can pick this one up.

Lets dive a little deeper. Cascading styles refers to the ability to start with a button, style it into a black button then go a step further and make it a play button. First, create a button and use some CSS to style various properties of that button.
Read more