blackcj.com » Photoshop http://www.blackcj.com/blog Cutting edge development with Adobe Flex, ActionScript and AIR Thu, 15 Dec 2011 01:01:57 +0000 en hourly 1 http://wordpress.org/?v=3.3 How to Fix Fuzzy Pixels in Flex http://www.blackcj.com/blog/2009/03/10/how-to-fix-fuzzy-pixels-in-flex/ http://www.blackcj.com/blog/2009/03/10/how-to-fix-fuzzy-pixels-in-flex/#comments Tue, 10 Mar 2009 16:16:52 +0000 Chris Black http://www.blackcj.com/blog/?p=264 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.

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)

Fuzzy Pixels (Semi-Transparent Lines)

Code that produces fuzzy pixels:

PLAIN TEXT
Actionscript:
  1. private var fuzzySquare:Sprite;
  2. private var square:Sprite;
  3.  
  4. private var squareContainer:Sprite;
  5.  
  6. public function draw():void
  7. {
  8.     squareContainer = new Sprite();
  9.     squareContainer.x = 1;
  10.     squareContainer.y = 1;
  11.  
  12.     square = new Sprite();
  13.     square.x = 0;
  14.     square.y = 0;
  15.     square.graphics.clear();
  16.     square.graphics.beginFill(0x0000FF);
  17.     square.graphics.drawRect(0,0,30,20);
  18.     square.graphics.endFill();
  19.     squareContainer.addChild(square);
  20.    
  21.     fuzzySquare = new Sprite();
  22.     fuzzySquare.x = square.x + square.width + 3.5;
  23.     fuzzySquare.y = 0;
  24.     fuzzySquare.graphics.clear();
  25.     fuzzySquare.graphics.beginFill(0x0000FF);
  26.     fuzzySquare.graphics.drawRect(0,0,30,20);
  27.     fuzzySquare.graphics.endFill();
  28.     squareContainer.addChild(fuzzySquare);
  29.  
  30.     container.addChild(squareContainer);
  31. }

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.

]]> http://www.blackcj.com/blog/2009/03/10/how-to-fix-fuzzy-pixels-in-flex/feed/ 2 PSDTemple: Turn Your PSD’s into xHTML http://www.blackcj.com/blog/2008/12/01/psdtemple-turn-your-psds-into-xhtml/ http://www.blackcj.com/blog/2008/12/01/psdtemple-turn-your-psds-into-xhtml/#comments Tue, 02 Dec 2008 02:55:20 +0000 Chris Black http://www.blackcj.com/blog/?p=122 This is an ActionScript blog, however, I'm going to show my support for a very good friend of mine (and very successful entrepreneur) who has started: PSDTemple. A service that allows designers to turn their PSDs into functional user interfaces. Great price and great service deserves a bit of attention :) Thank you for understanding the off topic post. If all goes well PSDTemple will soon be creating Flash websites as well. Which would definitely make my day!

http://www.psdtemple.com/

]]> http://www.blackcj.com/blog/2008/12/01/psdtemple-turn-your-psds-into-xhtml/feed/ 0