Lucky for you, Flash comes well-equipped with providing tools for developers to use when coding their Flash applications.  My three most-used Flash methods for clean lines and exact placement are listed below, and are all part of Flash’s Math class.  If you use them, you’ll be sure clean up the lines and sizes of your site in no time.  (It may not help poorly-drawn shapes that you draw by hand, but for dynamically-drawn, code-generated items, or code-based asset placement, it’s golden.)

A Few of My Favorites

Math.ceil()
This function returns the ceiling of the specified number or expression, which equates to the closest integer that is greater than or equal to the number.

Math.floor()
This function returns the floor of the specified number or expression, which equates to the closest integer that is less than or equal to the number.

Math.round()
This function rounds the value of the passed-in parameter to the nearest closest integer. If the passed-in value is exactly in the middle, it rounds up.

How and When to Use the Math Functions

Let’s say you have a square MovieClip that’s sitting on your stage with an x coordinates of 133.  You want to tween it with ActionScript to a point 50% of the way to the left edge of your application from it’s original point of 133.  You’ll need to have the x coordinate change for the move, obviously.  But if you simply figure out what point to tween to without somehow finding the nearest integer value, you’ll be left with a non-integer value (66.5), and your horizontal and vertical lines will get fuzzy.  However, if you use the Math.round() method, for instance, you’ll get an integer value (67), which will keep your horizontal and vertical lines crisp and clean.

In the example SWF below, there are two square MovieClips, both placed at an x coordinate of 133, as in the example above.  The top one does not use the Math class to get the integer-based pixel value it will end on.  The bottom one, on the other hand, does use the Math class, and rounds the target value to the nearest integer, thus resulting in a final x coordinate that is an integer.  Click on each box to tween it, and notice the end result of the boxes side by side.  You’ll quite obviously notice the top box having fuzzy edges when compared the the clean lines of the bottom box.

Know, Love, and Understand Integers

The important part to note about all three of these methods is that they all calculate the closest “integer” — or whole number.  This is immensely helpful, because if you base your width, height, x, or y values on any of these methods, you’ll always get back a whole-pixel value, which will give you the crisp edges that we all know and love.  With that said, there is one important exception….

Even though these methods return integers, there is still one more “gotcha” that you’ll need to keep in mind when developing your Flash application.  If you have a MovieClip of a square shape, for instance, and you have it centered to the registration point of the MovieClip, you may still get fuzzy pixels.  How, you ask?  If your square has a width and/or height whose value is an odd number (57, for example), its x and y coordinates will be half-pixels within the MovieClip (-28.5, -28.5 for a width of 57).  And if you place this MovieClip on the stage and put it at coordinates whose values are integers, the edges will be fuzzy, because of the coordinates of the object within the MovieClip.

To combat this, there are a couple of options:

• If you center your object(s) in your MovieClips (or other display objects), make sure they have dimensions that are even numbers.  If this isn’t doable, at least make the x and y coordinates integer values, even if it means your assets won’t be “exactly” centered in the MovieClip.
• Instead of centering your object(s) in your MovieClips, use corner-based orientation, so, for example, your object(s) will have an x and y value of 0.  This way, you’ll be guaranteed to have crisp lines when the MovieClip is placed at coordinates whose values are integers.

Other Best Practices for Clean Lines

• When drawing shapes with horizontal and/or vertical lines in Flash, make sure that the x and y coordinates are integer values in your Properties panel.  Also, make sure the width and height are also integer values.  Every so often, Flash will want to add/subtract a random 0.05 from your typed-in values, so you may need to re-type in a value now and again.
• If you’re nudging objects around on your stage, turn on “Snap to Pixels”.  To do this, select the “View” menu, and select “Snapping > Snap to Pixels”.  Doing this will always snap your objects to integer (pixel) values.

Wrapping Up

So there you have it.  With a little careful planning and knowhow, and with a little help from the Math class, you can ensure your Flash applications have vertical and horizontal lines that are crisp and exact, creating a much stronger, cleaner design.

Until next time, happy coding!

If you’ve had your fill of being overly nice trying to convey your ideas, I am happy to announce that there is now a service out there that is here to help: Design Police (http://www.design-police.org/). I stumbled across this site site after seeing it featured in a blog post on Smashing Magazine and knew that it is a keeper, and one that I had to share with readers.

The mission of Design Police is simple: Bring bad design to justice. Through their innovative kit that is available for download, you can use their material when editing and marking up designs. Trust me — it’s well worth it.

Okay, truthfully the shameless plug of FindMyFold.com is quite self-serving. Between me, you, Google, the Internet, and Al Gore, I sort of created the site. I thought it high time to do my duty as a designer and developer, and offer the site as a public service to the world.

So the next time someone asks you, “Is this going to be above the ‘fold’?”, point them to FindMyFold.com. At the site, you see what your fold is in your own browser.  Plus, there’s a handy-dandy “Test Your Site’s Fold” feature that you can use to test any site to see where your fold lands on that particular page.

Oh yeah, and while you’re there, make sure to share the news with your friends, with the built-in social links.  Let’s spread the news and get everyone up to speed!

For those tech-nerds out there (you know who you are), you may appreciate that the theme is a completely custom WordPress theme.  Previously I had piggy-backed another nice theme and tweaked it to my heart’s content.  Nothing wrong with that, but as I said, it no longer matched my sites redesign.  The cool part is, I (obviously) learned a lot about building WordPress themes in the process, including a handful of neat PHP tricks (some used in my theme, others stashed in my back pocket for use later on down the road).  If you keep an eye out, you may even see one or two of these tricks surface in future posts.  Not making any promises — just throwing it out there.

With all that said, I hope you like the new blog theme design.  I’m sure I’ll be tweaking it along the road, adding new functionality, nit-picking details down to the pixel, and other good stuff us web designers/developers like to do.  But for now, it’s time to take a little breather, sit back and relax.

/* --- Begin Code --- */
var firstName:String = "Anthony";

function submitForm(e:MouseEvent):void {
   var varsToSend:URLVariables = new URLVariables();
   varsToSend.firstName = firstName;
   // Insert additional values to send

   // Create URL Request, set to POST, and attach data
   var formRequest:URLRequest = new URLRequest("flash.php");
   formRequest.method = URLRequestMethod.POST;
   formRequest.data = varsToSend;

   // Create URL Loader, attach listeners, and load URL Request
   var varLoader:URLLoader = new URLLoader;
   varLoader.addEventListener(Event.COMPLETE, onLoaded);
   varLoader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
   varLoader.load(formRequest);
}

function onLoaded(e:Event):void {
   // Insert success actions here
}

function ioErrorHandler(e:IOErrorEvent):void {
   // Insert error actions here
}
/* --- End Code --- */

A few notes on the code:

• The submitForm function in this example is called on a MouseEvent.CLICK event (noted with the e:MouseEvent passed into the function).

• If you need to send via GET, change the URLRequestMethod to URLRequestMethod.GET.

• One thing I noticed about the URLRequest was that on the particular domain I was working on, using an absolute URL gave me some bugs.  If I used http://www.myfakedomain.com/flash.aspx, my tests failed on PCs but worked on Macs.  If I removed the “www”, resulting in http://myfakedomain.com/flash.aspx, my tests failed on Macs, but worked on PCs. I don’t know if this was an issue with how the domain was set up (since I only worked on the Flash portion, not setting up the domain) or if it is a Flash URLRequest bug.  Either way, I found that using a relative URL (“flash.aspx”) worked on Macs and PCs, and didn’t throw me any errors.

Hope this sheds some insight on how to send data out of Flash.  Happy coding!