I created this simulation to visually show the relationships between a movie clip’s (actually any display object’s) transformational properties (x, y, width, height, scaleX, scaleY, rotation, and transformational matrix). Drag the square around the “Stage” and move the sliders to transform it. Each property is prefixed with a dot “.” since in a real application these properties would be accessed via myMC.x or myMC.transform.matrix.tx, for example, where myMC is the instance name of the movie clip on the stage.

Additionally, if you look carefully this shows an apparent bug in the way ActionScript 3 handles the width and height properties of a rotated movie clip (see Grant Skinner’s post on the subject). If the movie clip is rotated and the width and height sliders are moved slowly, they will swap their values back and forth as one or the other is adjusted. This could stem from the fact that the height and width are of the dimensions of the bounding box, not the movie clip itself, and they may be trying to maintain the proportions of the movie clip when adjusted. Or it’s a bug.

Inside the bin directory of the Flex SDK you will find a long list of command-line tools. The following is an overview of what these tools do:

AIR Development Tools

• aasdoc – For creating documentation of the classes in an AIR application
• acompc – For creating a SWC component (a reuseable library of source code for use in other projects) for AIR.
• adl (not included in the Open Source Flex SDK) – AIR Debug Launcher for debugging AIR applications. Described here.
• adt (not included in the Open Source Flex SDK) – A utility for packaging an application into an AIR installation file, which you can distribute to your users. An AIR installation file is an archive that contains all the application files.
• amxmlc – The compiler to use when building AIR applications, invokes the standard Flex mxmlc ActionScript and MXML compiler with an additional parameter, +configname=air.

Flex Development Tools

• asdoc – For creating documentation of MXML and/or ActionScript classes.
• compc – For creating SWC component libraries, reusable archives of source code that can be used in other projects. Makes distribution of a library of classes easy.
• copylocale – Utility for helping with localization in Flex Applications.
• digest – Used after SWCs have been optimized with optimizer to update SWC digest information.
• fcsh – The Flex Compiler Shell Utility provides a shell environment for compiling Flex applications, modules, and component libraries that is quicker than using mxmlc or compc.
• fdb – A command-line based debugger.
• jvm.config – Allows the custom configuration of the JVM (Java Virtual Machine) for more efficient use by the mxmlc and compc.
• mxmlc – The standard Flex compiler. Converts ActionScript and/or MXML code into a SWF that can run inside the Flash Player.
• optimizer – Removes debugging code and unnecessary metadata from a SWC library. This can be run after compc.

How about creating a SWF that runs in the Adobe Flash Player without building it in the Flash or Flex Builder authoring environment, using tools that are free and open source? Ever since Adobe made the move from ActionScript 2.0 to 3.0 there has been a gem of a toolkit available that allows precisely that. The Flex SDK (Software Development Kit) allows developers to create SWFs from ActionScript and MXML source code, and with the right setup is not difficult to configure and use.

Housed at Adobe Open Source, the Flex SDK is available in two incarnations through the site:

• The Open Source Flex SDK containing everything needed to create a functional application using ActionScript and/or MXML and the Flex framework.
• The Free Adobe Flex 3 SDK containing everything in the Open Source Flex SDK plus additional components such as advanced font encoders, tools for packaging Adobe AIR applications, and the Adobe Flash Player.

How to use the Flex SDK

I have developed an Apache Ant build script that makes—after some configuration—the Flex SDK quite easy to use on Mac OS X. Here’s how to configure it:

1. Download the latest Flex SDK from Adobe Open Source. Rename the SDK folder flex_sdk_3 and place it in /Applications/ on your hard drive.
2. Locate Apache Ant on your system. Ant will already be installed if you have installed the Mac OS X Developer Tools (which are an optional install included with every version of OS X) or are running Leopard.

   Open Terminal and type:

   whereis ant

   It should say something like

   /usr/bin/ant

   If Ant is not installed, no path will be shown in Terminal. To install Ant I recommend using MacPorts, an excellent open source utility for managing unix tools on Mac OS X (follow these well written directions for installation). If you are not comfortable using the Terminal, there is a GUI available for MacPorts called Porticus.

3. Copy the Flex Ant tasks to your Ant installation’s library. These will allow Ant to communicate with the major Flex SDK tools. To copy the tasks, first locate the Ant lib directory, which will be in Ant’s main installation folder. For example on Mac OS X 10.5 it appears at usr/share/ant/lib. Copy /Applications/flex_sdk_3/ant/lib/flexTasks.jar into this directory.
4. If you are an advanced user and would like to utilize Unit Testing using FlexUnit, Download the FlexUnit Ant Tasks. Place these in the Ant installation’s library folder as well.

   (Note: The project template you will download from my site in the next step includes two SWCs for use with unit testing. For those that may be curious where these came from, here are the links to the original locations: FlexUnit SWC library and FlexUnit Optional SWC library)

5. Download the Flex SDK example application template from my site. Unzip the archive and place the FlexSDKProjectTemplate folder on your desktop. Open the folder.
6. Make a copy of build.properties.template and rename it build.properties.
7. Open the build.properties file you just created and edit the REQUIRED TOOL LOCATIONS section to reflect the path to the Flex SDK, your preferred web browser, and the location of the Flash Player (which you will need to download if you have not already done so).
8. Using Terminal navigate to the example application template. For example:

   cd Desktop/FlexSDKProjectTemplate/

   And then type the following:

   ant run

   The sample application will launch, typing ant usage will show you what other options are available, such as creating documentation, SWCs, or launching the application in a web browser.

9. Lastly, to enable the trace() method so that it will work from your code when using the Flash debug player, create a textfile called mm.cfg and fill it with the following:

   TraceOutPutFileName=flashlog.txt
   ErrorReportingEnable=1
   TraceOutputFileEnable=1
   MaxWarnings=0

   Place this file at
/Library/Application Support/Macromedia/mm.cfg. Whenever you have a trace("some text"); statement in your code, it will be written to:

   /Users/[your username]/Library/Preferences/Macromedia/Flash Player/Logs/flashlog.txt

Please leave comments with any suggestions, problems, questions, etc. Enjoy!

Troubleshooting

Problem: Running ASDoc produces: Execute failed: java.io.IOException: /Applications/flex_sdk_3/bin/asdoc: cannot execute

Solution: This mostly likely means the ASDoc script Ant uses is not set to be executable. Type the following in Terminal:

cd /Applications/flex_sdk_3/bin/
chmod +x asdoc

The first line changes the directory to the one ASDoc resides in. The second line makes ASDoc executable.

Problem: Running ASDoc produces: exec returned: 255

Solution: This mostly likely means the ASDoc script (which is just a text file) contains Window-style line endings. These will need to be converted to linux.

Install dos2unix using MacPorts and type the following in Terminal:

cd /Applications/flex_sdk_3/bin/
dos2unix asdoc

This will turn off the executable bit in the permission tables, so you will have to re-enable that using the instructions in the first solution above.

Problem: Running ASDoc produces: Could not create toplevel.xml: /Applications/flex_sdk_3/asdoc/templates/asDocHelper: cannot execute

Solution: This mostly likely means that a helper script used by ASDoc is not set to be executable. Type the following in Terminal:

cd /Applications/flex_sdk_3/asdoc/templates/
chmod +x asDocHelper

In my rush to leave the country for Colombia (that really makes my life sound more interesting than it is), I inadvertently put my MacBook Pro to sleep instead of shutting it down. Two weeks later I returned. Waking it from sleep I found that the battery had become completely unrecognizable. The batteries in MacBooks need to retain a small charge to enable them to be recognized by the charging mechanism in the computer, completely draining them (such as by leaving them inside a sleeping computer for extended periods) will make them unusable. The lesson: Never put your MacBook to sleep for extended periods without power.

In my search for a way to reinvigorate my battery, I stumbled across a freeware application called coconutBattery, a great little app for getting detailed statistics on your battery. These include the battery load cycle (how many times the battery has been [almost] completely drained and recharged), the current capacity of the battery in milliampere-hours in comparison to its rated capacity and the age of your Mac. One bug I found though, it crashed looking for my dead battery, but works great for my new one!

I also wanted to mention that iStat Pro, a great general purpose system monitoring widget for Mac OS X shows the number of battery load cycles too.

FireBug
Firebug allows the live editing of CSS, HTML, and JavaScript of any website. For tweaking the appearance of a webpage, this tool is indispensable for visually seeing the results of your changes to the source code of a webpage. The changes are made locally and are lost when the page is reloaded.

Dust-Me Selectors A thing that bothers me with CSS development is the feeling that there is a precarious ledge over which you are hanging, and as development progresses you are one step away from having a stylesheet that has become unmanageably disorganized and convoluted. This is particularly apparent when multiple people have a hand in editing the appearance of a page, or when you are creating a new stylesheet from an existing one. Dust-Me Selectors is a useful tool for finding CSS selectors that are no longer being used on a page. Additionally, it can spider a whole site to find the CSS selectors that are unused site-wide. The line number and stylesheet name of the unused selectors are provided, so that they can be manually removed. Clean and tidy is a wonderful thing!

The thing I miss about both these tools is the ability to apply the edits directly to the source code of the pages you are working on. A lot of time can be consumed manually applying the changes these tools find, but it is still quicker than making changes without these tools.

What other tools do you use?

Sometimes it is handy to be able to convert a number from one base to another, especially when working with bitwise operations. To help you in that endeavor I present the Base Converter: