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.

Here is a zoomed in picture of what fuzzy pixels look like. The first and second squares are drawn using the same drawing function. One is placed on an even pixel and the other at a decimal number.

Fuzzy Pixels (Semi-Transparent Lines)

Code that produces fuzzy pixels:

Solutions:
Use Math.floor or Math.ceil on all mathematical calculations relating to the positioning of Sprites drawn with the graphics function.

or

Rather than draw out the Sprite using graphics you could convert your sprites to images, embed them, and position them on the stage. This is the best approach when tweening is necessary requiring the object to look crisp at all times.

Note: I've seen this occur on odd number pixels as well but that is most likely the result of a greater positioning problem. This generally only occurs in highly nested display objects.

Solution:
Use this url to gain access to the full http://twitpic.com/show/full/s0z4.jpg and thumbnail http://twitpic.com/show/thumb/s0z4.jpg images (replace the s0z4 with your image id). Notice that this shortened path returns the longer url that would normally have to be ripped out of the HTML to gain access to the image.

This allows for Adobe AIR applications to post to (Post to TwitPic from Adobe AIR) and retrieve images from TwitPic.

View Sample / Source Files

Links:
TwitPic Previewer

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.

Simple enough, right?

Next we want a black button:

There it is. All the actionscript you will need. And to think it was all auto generated!

Actionscript Class Generation

Add the MXML and CSS:

Now we have a black button. This process can be used as many times as you want to continually inherit properties from another object. You could have a small, blue button with red text all styled at each level.

Lastly, we need to add the play icon:

Now we have a black play button. Add a stop, pause, and mute button as BlackButton's and they will all be updated when you modify the style for either the base Button class or the BlackButton class. Again, this tutorial is not very technical but the next two will be. This is meant to be the first step in bridging the gap between design and actionscript using Flex 3.

The number of comments I get on this post will exponentially increase the likelihood of part 2 coming out sooner

Sample

Source View

References:

The Woes of Flex

CSS in Flex is not real CSS at all

Adobe Bug Page

To get started lets take a look at the HTML we plan to load in:

The content of the paragraph files has been removed to save space (you can view the source below to get a copy of the full file). Notice that the 'a name' tags have been replaced with 'span name.' This was a quick way to prevent the styling of the link tags from modifying the style of the headers. There is probably a better way to get around this but it's not within scope of this example. Speaking of the style sheet... here it is:

Lets start by loading in the HTML text:

Now lets take a look at some of the key functions within the Anchor Text class. First we will want to replace the a href # tags with something ActionScript can understand:

Next we will want to add event listeners for the event and set up our dynamic text field:

Finally we will want to handle the mouse clicks to the events that we set up within the text string:

Some key things to note would be:

• The TextField MUST be selectable
• A StyleSheet must be applied to the TextField (even if you don't load one in)
• This example assumes '^#^' and '&&' are unique sequences
• A TextFormat can not be used along with a StyleSheet
• There are always exception cases when dealing with RegExp and TextFields (no warranty provided)

View Sample / Source Files

Here are a few resources I found helpful along the way:
http://www.kirupa.com/forum/showthread.php?t=303186

http://troyworks.com/blog/2008/03/14/flash-textfield-actionscript-hyperlink-in-as30/

Let's start by creating an HTTPService:

Next we will create the function to process the results:

Now lets add the mxml to display the content:

After testing the application locally everything works great! But wait... what about the PHP code? Well first export a release build of the application and upload it to a web server for testing.

Here is the error that you should recieve:
[RPC Fault faultString="Security error accessing url" faultCode="Channel.Security.Error" faultDetail="Destination: DefaultHTTP"]

To get around this let's create a php file that collects the twitter data:

Now we need to update our HTTPService request to pull from the new php file:

Now everything works great!

Check out this link to view a functional example:
http://www.blackcj.com/FlexFeed/index.html

And the source files:
http://www.blackcj.com/FlexFeed/srcview/index.html

Please leave a comment if you have any questions, comments, or suggestions. Thanks!