After downloading Flash Builder I thought it would be fun to check out the new Text Layout Framework. While the end result is really cool, almost all of the documentation available is already outdated. Here is an example using an ActionScript only project in Flash Builder to create underlined, padded, editable text. I threw in the undo manager for fun.

TextFlow Example:

(click in the text field above, type in text than hit ctrl-z to undo.)

Full source code can be found here.

Next Steps
Wrap all this mess into a class that I can actually use. 15 imports and 30 lines of code is far to cumbersome to use on a regular basis. Stay tuned for an encapsulated class that takes advantage of the key features.

http://forums.adobe.com/thread/458116
http://labs.adobe.com/technologies/textlayout/demos/
http://opensource.adobe.com/wiki/display/tlf/Using+TLF+with+Flash+CS4
http://corlan.org/2009/01/19/how-to-use-text-layout-framework-in-flex-32-or-air-15/
http://forums.adobe.com/message/2646565

Problem:
Let me start by saying SWC's are great. I've been using them more and more to include third party API's, utilities and assets. There is one problem, embedding a font into an asset in a SWC will override the internally defined fonts in a project. Why is that bad? Well lets say you have a static text field in your SWC using Georgia and a TextField instance in your Flex project using Georgia. No text will show up in your Flex TextField. Check out this example (notice it starts invisible):

SWC Text Embed Conflict:

(switch between MyGeorgia and Georgia fonts to see the disappearing text)

Full source code can be found here.

Solution:
Define your embed tags in ActionScript with a different fontFamily and fontName. So, if your font is Georgia than name it EmbedGeorgia. This will allow your TextField to reference the correct class definition. In my experience the SWC will always win if there is a conflict.

rather than...

It's that easy?
Yup.

What if you have two SWC's with Georgia embedded text?
Will they conflict with each other? Based on the example above the answer is no. Awesome!

What if my fonts are stored in a SWF file?
Than duplicate the above code but reference your SWF instead of the font in the assets folder.

Code that results in invisible text:

Swap out the Embed tag, update the TextFormat and you will be good to go.

Rant:

On the way to this solution I came up with a number of hacks that appeared to work only to break at the worst time. These hacks included storing a second reference of the font in the SWC (assuming you have access to the source), enumerating through the font list at runtime (which only fixes the problem in debug), and breaking apart the text into bitmaps (you don't want to know how long that takes). Rather than stop using SWC's I started to create more and more of them pushing towards an acceptable solution. This is what I ended up on. Hopefully it will save everyone some time and a little sanity

Bitmap Encoding - (link)

Advantages:
Keep transparency
Fastest Method
Does not require a Loader

Disadvantages:
Largest Filesize
Will only work with images up to a certain size

PNG Encoding - (link)

Advantages:
Keep transparency
Smaller filesize than Bitmap Encoding

Disadvantages:
Slower than Bitmap Encoding
Larger than JPG Encoding
Requires Loader

JPG Encoding - (link)

Advantages:
Smallest Filesize
Variable Quality

Disadvantages:
Slower than Bitmap Encoding
No Transparency
Requires Loader

Definition:
A CAPTCHA or Captcha is a type of challenge-response test used in computing to ensure that the response is not generated by a computer.

Solution:
What if we have a user drag a circle onto a box? A spider would have a pretty hard time with that, right? WRONG. While this may be a good filter at the view level it still does not solve our problem. All the hacker would need to do is submit the form correctly one time and use a program like Firebug to sniff the submission URL. They could then completely bypass your view and submit the form as many times as they want.

The only way to ensure the Flash form is being used is to pull the logic out of the view and onto the server. The Flash merely serves up content and never knows what the 'answer' is. In this example we will use PHP to generate the image, MySQL to store the key value pairs, and Flash to display the content. This implementation does not require any images to be stored on the server so it NEVER re-uses an existing image. The PHP generates the image on the fly and serves it directly to the Flash application.

Here is a diagram representing the high level information. Blue lines represent Captcha generation and the red lines represent the Captcha verification.

Server Side Captcha in Flash

Let's start with the PHP. There are already plenty of PHP scripts out there to generate Captcha. In this example I re-purposed a script called Securimage.

First we need a script that will retrieve the image:

Next we will need one that verifies the user input with the image:

Now that we have the PHP in place we can create the Flash. The display logic is separated from the view so you can re-use this code with any server side script. The Captcha class requires an ID and a URL to the image to display. It has optional styling parameters to match the look and feel of your webpage.

Generating a Captcha in Flash:

Verifying a Captcha in Flash:

Flash Demo and Source:

(click the image to manually refresh the captcha)

Full source code for Flash & PHP can be found here.

In the source code you will need to replace DB_USERNAME and DB_PASSWORD with your username and password. This example also requires a MySQL database with a table called captcha containing rows flash_id, captcha_id and valid. Valid is used to ensure the Captcha is only submit one time. Since we are always generating a new image there is no reason the Captcha should be allowed to be submitted twice with the same id.

Next Steps:
Additional steps could be taken to prevent robots. Failure rates and number of attempts could be stored for each IP address. No human should ever attempt to re-submit an old Captcha since each time it is randomly generated. The system could block anyone that attempted to re-submit a Captcha.

I would eventually like to make this accessible by integrating audio support. This is a feature of Securimage and would make the utility more versatile.

Box2D Anti-Gravity Example:

(click and hold the mouse down for anti-gravity)

Now that we have a Box2D environment set up and lots of polygons in it, let's make it cool.

Anti-gravity boolean.
Add this boolean and if statement into your shape environment class.

Now add a mouse event handler and the following functions into your main class.

Now you have anti-gravity!

Miss out on the basics? Check out part 1 and part 2 of this series.

Full source code here.

Polygons in this example will be defined as a shape with 3 or more vertices with sides of equal length.

There are three steps in creating the object. Create the sprite, assign it to a body and generate a physics object. Keep in mind the sprite and the physics object to not need to be the same shape but they generally are. You could have a square displayed that acts in the physics world as a circle.

Create your sprite

Body definition.
The next function we will want is a body definition which will create an object in the physics world and assign our sprite to that object.

And finally create the polygon definition.

Now let's extend our base environment from part 1 to allow for the addition of shapes.

Finally we will add logic to our main class to create the shapes.

Check out the final product along with some Anti-Gravity in part 3.

We'll start with the basic 2d environment (part 1) and work our way into creating dynamic polygons (part 2) with an anti-gravity effect (part 3).

Here's a preview of what we will end up with:

(click and hold the mouse down for anti-gravity)

What is Box2d?
It's a physics engine that was written in C++ and ported over to ActionScript. Learn more about it here.

Now what?
Download the framework here. Start a new ActionScript project and put the Box2D folder into your src directory.

Set up some constants.
Boring! I know, but you'll be happy later Luckily they are all commented so you know what effect they will have when we start adding objects. You'll notice the PHYS_SCALE variable. The physics environment is not one to one with the stage in Flash. This scale is used to translate coordinates between the two environments.

Create a base 2d environment.
Starting simple. We need a world. The upper bound and lower bound are in the physics scale and should be larger than your current stage. Objects will stay alive as long as they are in the bounds of the world. Right now that is 100 * 10 (our physics scale) = 1000 pixels positive and negative.

We also need a way to kickstart our world.

Now it's time to add objects right? Well, first we want some boundaries so our objects don't fall out of our display area. And how about a debug mode so we can actually see our invisible boundaries?

Now we have our world! Let's start adding objects. Click here for part 2.

Solution:
Well, we could set the customContent variable and pass in a custom DisplayObject but that sounds like a lot of work just to get some simple interaction with the text. Luckily the TextEvent class bubbles by default. This is important since we do not have direct access to the TextField within the info window.

Sample:

(click learn more, close the window and click on the map to re-open)

Code:

Useful Links:
InfoWindowOptions
TextEvent
Custom Google Map Markers

Enjoy!

Problem:
Embedding transparent PNGs dramatically increases the size of your Flash, Flex and AIR applications. Photoshop and Fireworks dot not have any compression available for transparent PNGs (that I am aware of).

Solution:
Import your PNGs into Flash, give them a linkage id, and export the file as a SWF. Make sure to set your compression level in the publish settings (default is 80%). Using this method, I was able to cut the file size in half for a number of applications.

rather than...

It is also much easier to manage your external assets from a SWF. Designers can set up a nice slice sheet using the stage in Flash. Much easier than managing tons of small PNGs in folders everywhere.

Image Manager

In addition to using the SWF it can also be very useful to set up an ImageManager to serve out images to your application. This prevents having to change code in multiple places to update the same image reference.

Image Manager Class:

To access an image from the manager class just make this call:

Importing PNGs into Flash

And for those of you that need a refresher on importing PNGs into Flash and setting up linkage IDs:

File->Import->Import to Stage...

Right click on the image. Select 'Convert to Symbol'...

Finally...

Enjoy!

Disclaimer: It may be obvious but you must be using transparent PNGs in your app to see a decrease in file size Most of the apps I work on have lots of transparent PNGs!

Bad Paint:

(pretend your cursor is a paint brush, click and drag around)

Good Paint:

(notice the fps counter in the top left)

I would like to start by pointing out that every Flash 'paint' example I found online uses lineTo. That's fine if your just playing around but what if you want to use a more advanced painting algorithm? It looks MUCH better. Drawing a circle using the 'lineTo' method has noticeable rigid corners. Using a good painting algorithm allows for much smoother edges and more control: Safe from the Losing Fight - How to implement a basic bitmap brush.

Well my first implementation of a simple painting algorithm turned out really bad (bad paint above). Why? Two reasons. I was creating a new sprite and BitmapAsset for every circle added (thousands of circles eating up memory). In addition to that I was using my own painting algorithm which was just barely a step up from lineTo.

The fix? First I converted a nice painting algorithm from C (CProgramming.com - Line Drawing Algorithm) into ActionScript. Second I took another look at the circle creation method.

My bad code:

My good code:

The good code runs much faster, is more efficient, looks better, and so on. Check out the source files to get a copy of the GOOD paint algorithm.

Enjoy!

Resources:
CProgramming.com - Line Drawing Algorithm
Safe from the Losing Fight - How to implement a basic bitmap brush