Using TextField for HTML Stripping

This may be something commonly used already, but it's the first time I've run into the need. I am working on an application where I needed to strip all html tags out of a string. First over-complicating things, I looked around the net and found several functions that will parse out the html tags. Then it hit me, there's an easier way - and it's build right into Flash. Using the TextField class, you can easily rip the html tags out - and still keep your original string intact. Since TextField has both an htmlText property and a text property, you can write to one and read from the other:

var htmlStripper:TextField = new TextField();
htmlStripper.htmlText = originalHtmlString;

var strippedString:String = htmlStripper.text;

Adobe Releases Flex 3, Flex Builder 3, and AIR 1.0

Wow....big release day for Adobe.

1) AIR is Adobe's next generation runtime to build applications for the desktop. Essentially, with AIR you can build your application using HTML, AJAX, Flash, or Flex and deploy it as a desktop application for Windows or Mac. I've played with the betas quite a bit over the past year+ and this is exciting.

2) Flex Builder 3 makes building Flex apps easy. Layout and deploying is a breeze. It is also, as far as I've found, the best AS3 editor on the Mac. The alternative for me has always been to fire up Parallels and run FlashDevelop. But when I just don't want to be bothered with firing up Windows, FB3 is a great alternative. One pitfall, if you're using subversion with your project. I have run into some quirky things with committing and updates. I often have to remove my Flex project and recreate it after doing an Update. Not the most fun I've had. Of course, I haven't played with the final release - only beta. Hopefully some of this has been fixed in the release.

You can download AIR from: http://get.adobe.com/air/

ELF Viewer

Here's a little something extra I whipped up as a companion for ELF, the logging framework I discussed in my last post. One of the LogRenderers, the LocalConnectionRenderer is particularly useful when dealing with class libraries that are used in both CS3 and Flex. This renderer is included as a default renderer in ELF. I put together a little AIR app that will receive messages from ELF and render them to a TextField. It also gives you the ability to reconnect to the LocalConnection should it be lost, and clear the field.

One neat thing about this app is that it keeps track of which logger instances send in calls and provides a means to filter the log messages by logger instance. I usually name my loggers by the name of the class that contains it. That way, I can specifically narrow down the log messages I'm looking at to the a particular class or component that I am interested in. 

ELF Viewer requires AIR beta 3, which is available on Adobe Labs.

Download ELF Viewer

ELF = Electrotank Logging Framework

     Debugging applications in Flash has always been tricky. One of the first projects I had to opportunity to work on when I started with Electrotank was to develop a reliable and lightweight logging framework. For this framework, we had several requirements:

1. Must be flexible. We needed to be able to render log messages to any number of different sources. 
2. Must be very lightweight. While always making attempts to better optimize our games, we couldn't have a logging framework that would weigh things down.
3. Must be customizable. Should be able to adjust log levels and renderers globally and/or by class instance.

ELF (Electrotank Logging Framework) is very simple to use for basic logging purposes. To create a log, you instantiate it using the Logger.getLogger() method. All Loggers implement the ILogger interface. 

import com.electrotank.logging.*; 
var logger:ILogger = Logger.getLogger("com.electrotank.Game");

To log a message, you would then call the appropriate method to the log severity (debug,info,status,error,fatal):

logger.debug("This is a debug message"); 
logger.info("This is an info message."); 

... and so on ...

For the sake of keeping overhead to a minimum, an optional second parameter is available to all log calls (debug(),info(),etc....). This parameter, an Array, will allow you to specify values to be inserted into your log message in the event the log is run. For example, if you were tracking the x and y positions of a MovieClip. you might normally log:

logger.debug("x="+myMC.x+",y="+myMC.y);

The problem with this is that, regardless of your severity threshold, the expense of the string concatenation will be there. However, you can achieve the same thing using the optional second parameter:

logger.debug("x=$0,y=$1",[myMC.x,myMC.y]); 

Aside from being easier to read and easier to write, this method will also save the concatenation for only if the log passes the threshold and actually logs. This works similar to a printf() method in that the wildcard ("$") is followed by the index of the array value to merge. This allows you to move values around easily.

The log message will be rendered to the registered log renderers. To configue the Logger globally, you can call the Logger.configure() static method. This method requires an instance of Configuration. With the Configuration class, you can configure the default severity threshold and the default renderers.

var config:IConfiguration = new Configuration();
config.setDefaultThreshold(LogSeverity.FATAL); 
config.setDefaultRenderers([new TraceRenderer()]); 

Without further configuration, the initial threshold is set to LogSeverity.DEBUG and the initial renderers are TraceConfiguration and LocalConnectionRenderer.

 

Renderers are the means by which the logger will display the log messages. A TraceRenderer instance will display the message by a Flash trace() call. A TextFieldRenderer will render the messages to a TextField of your choosing. The LocalConnectionRenderer will render the messages to a LocalConnection instance. These renderers can be configured individually by their instance level configure method. With these configurations, you can choose a different form of formatting for the LogMessage. The default is SimpleFormatter. All formatters must implement the IFormatter interface.

var config:IConfigration = new TraceConfiguration();
config.setFormatter(new CustomFormatter());

var traceRenderer:ILogRenderer = new TraceRenderer();
traceRenderer.configure(config);

This gives a lot of flexibility to how you want to receive the log messages and makes adapting the framework to different environments (Flex, CS3) easy.

 

We've begun using ELF heavily in several large  projects currently underway and I've found it to be a huge time saver. This version is currently AS3 only. I have an AS2 version, but I kind of left it behind and continued development in AS3. If I get the chance, I'll try and bring the AS2 version back up to speed. Until then, you can download ELF from the link below. 

Download ELF

Uploading Files with AS3

     I am currently working on a project that contains a lot of upload functionality from within Flash. Running a basic upload routine to choose a file and send it to a server script is easy and well-documented. However, what I needed, was to upload a file to a script, and then receive back a url to that uploaded file. Turns out this is a piece of cake with AS3.

 

     The FileReference class has many events. These include events for the beginning of the upload, io errors, cancellations, upload progress, and the completion of the upload. What I originally tried to do was listen to Event.COMPLETE. The problem with this is that, while the event fires when the file has uploaded, it returns no information about that file. The answer lies in the DataEvent.UPLOAD_COMPLETE_DATA event. When the DataEvent is fired, you can access the path to the file you uploaded by referencing the event's data property. 

 

     I've put together a simple example that demonstrates how to do this. You can download the file here.