Scott Jeppesen

FlexBuilder Keyboard Shortcuts

2009-09-24T20:15:00.000-07:00

Recently, I was helping a co-worker out with some code. He was using FlexBuilder on the Mac and I noticed how much he was using the mouse while coding. Flex Builder has some great time-saving keyboard shortcuts built in and I took the opportunity to show him a few of the ones I use most frequently. I figured if this developer didn't know about a lot of these shortcuts, then there are probably plenty of others who might not either...hence blog post time. :)

First off, you can actually get Flex Builder to display a list of all available keyboard shortcuts by pressing COMMAND-SHIFT-L.

Some of my favorites:

COMMAND-SHIFT-R: Open Resource. This will bring up a searchable dialogue to let you find any Class, Interface, namespace, etc in your project. If I'm not actively creating classes, I'll often close the Project Explorer, which gives me a ton of extra coding real estate. Using this command I can easily open the source for any of my projects resources.

CTRL-O: Find Property/Method. This will bring up a searchable dialogue that lets you search for any method or property of the current class. A lot quicker than using the usual find dialogue.

COMMAND-CLICK: Holding COMMAND while hovering the mouse over any class definition while cause the definition to show a "hyperlink" underline. Clicking will then open the source for that class. This in combination with COMMAND-SHIFT-R means I don't really need the Project Explorer unless I'm creating a new class or deleting an existing one.

CTRL-SPACE: Display code hints. I wish there was a way to make this happen automatically ala FlashDevelop, but it looks like I'll have to keep pressing the keys to get it. It happens after hitting a period or typing a colon or "new" but FlashDevelop handles this a little more agressively.

COMMAND-SHIFT-O: Organize imports. This will remove any unused imports and alphabetize the rest.

These shortcuts are all for the Mac, however, to use them on the PC I believe you can replace any of the COMMAND keys with CTRL and they'll all work.

There are many more, but these are what I use most frequently.

Strange behavior with Flex Embed tag

2009-09-09T23:24:00.000-07:00

Ok, so Flex provides some great tools for dealing with asset integration. Using the Embed metatag, you can bind a class to a symbol within a swf pretty easily. For example, say we have a popup asset that resides in an fla and we want to control it from our flex project. To do this, in Flash, you give a linkage identifier to the symbol in your library - say, MyPopUp - and publish your swf. Then, to bind the symbol to your class, you place the Embed tag immediately before your class definition:


[Embed(source='assets.swf',symbol='MyPopUp')]
public class MyPopUp extends Sprite {

At that point, any sprites that exist on the symbol's timeline would become public properties of the MyPopUp class. You'll need to either, preferably, define public properties for each instance, or declare the class as dynamic.

The last few days I have been working on a project where I ran into some quirkiness when it comes to the flex compiler and how it deals with embedded bound class instances. If the symbol contains an object that is also bound to a class, the compile will, sometimes, compile fine, and other times...well, not. For example, I have a clip on the timeline within MyPopUp in my fla. That symbol has a linkage name of DrawingPad. Then, using the embed tag it is bound to a DrawingPad class. You would expect that the following would be fine:


[Embed(source='assets.swf',symbol='MyPopUp')]
public class MyPopUp extends Sprite {
     public var drawingPage:DrawingPad;

This will always compile without error. However, sometimes it will run fine and others you will get a Type Coercion Error: Cannot convert flash.display.MovieClip@9876... to DrawingPad. It seems like the difference is that in some compiles, it ensures that DrawingPad gets defined before MyPopUp (works fine) and on other times the opposite happens. If the symbol is removed from the timeline and you create the symbol manually...


drawingPage = new DrawingPage();
addChild(drawingPage);

...it will work correctly every time. So the app obviously has the type defined correctly, but fails to type cast it correctly most of the time if it's placed on the timeline from with the symbol itself. Perhaps this is something that will be fixed in the new Catalyst->FlashBuilder workflow? I haven't used it, yet, so I'm not sure.

This ate up a good amount of my time a couple days ago so I figured I'd post to save someone else the headache.

Using TextField for HTML Stripping

2008-03-16T21:14:00.001-07:00

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

2008-02-25T11:42:00.000-08:00

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

2008-02-06T22:43:00.000-08:00

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

2008-01-27T23:43:00.000-08:00

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:

Must be flexible. We needed to be able to render log messages to any number of different sources.
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.
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

2008-01-22T23:51:00.000-08:00

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.