package fi.avocado.display
{
import mx.core.UITextField;
import mx.core.mx_internal;

public class FxUITextField extends UITextField
{
etc...


Just a quick note, hope that it saves someone a few hours of wondering...

http://jpauclair.net/2010/02/10/mmcfg-treasure/

Thank you for this great article Jean-Philippe!

Installing ANT on the Flash Builder (release version):

Go to Help > Install new software...

Click Add... to add a new software update site

Give the site a name "Eclipse Galileo releases" and location "http://download.eclipse.org/releases/galileo"

Select the site and find "Web, XML and Java EE Development". Open it.
Select "Eclipse Java EE Developer Tools" and put a check in front of it.
If there are more than one of those, just select the first one.

Click Next, accept the terms and off you go!

Installing Subclipse is done in pretty much the same way

- Go to Help > Install new software...
- Click Add... to add a new software update site
- Give the site a name "Subclipse 1.6.x". The Location is "http://subclipse.tigris.org/update_1.6.x"
- This is basically what you need:

- Click Next, accept the terms and off you go!

Hope this helps you to transform more painlessly to the release version of the FB.

Cheers!
- Joonas

Read more from the Flash Magazine about New Flash Player info and Beta releases on Adobe Labs and Flash for the IPhone!

I generally like the SWC -method better because it gives you better code hinting and strong typing, and it preserves the possible actionscript code in case there are swf files being linked. An SWC-file is basically a renamed zip file containing the compiled SWF and an XML-file that defines the stuff the SWF includes. You may try to unzip SWC:s with a regular zip-program to find out what it actually contains.

The problem with SWC:s is that they are binary files. I use SVN version control in all my projects, and binary files are basically unmanageable by the SVN server. It can see which version of the file was modified last, but combining two different binary files together is impossible for it. This is no problem when coding solo, but when there are multiple developers working on the same project, problems will occur. For example, if Mr. White adds an asset to the SWC, and Mr. Orange adds another asset at the same time, Mr. White commits his changes to the version control, and Mr. Orange commits shortly after, Mr. White's asset will be gone, as the SWC that Mr. Orange committed is the latest modified file, and the version control only sees that as the latest version.

This problem can usually be tackled by frequent commit/update from the version control and keeping tight contact with other developers, but it still allows mistakes to happen, and usually quite catastrophic ones, too. So what to do...

I've never really gotten around to use Ant tasks. I have been aware of the technology, but I've never seen any actual benefit of using them, until now. If you're not familiar with Ant, it's basically a way to script the compiler's build process with XML-files and Java. More information about using Ant in Flex Builder can be found from the Adobe Flex 3 Help.

So anyway, one sunny morning these two things came to my mind at the same time and I realized I could use Ant to dynamically compile an SWC file from files in a given directory. This would eliminate the need to:

• Open the Flash IDE at all (which is a huge plus)
• Constantly commit/update changes to version control (although you should still do that)
• Keep tight track of the assets embedded in the SWC and watch that you don't overwrite what anyone else might have changed

Basically, when you would want to add an asset, you would just add it to the given folder and build the SWC again with the Ant task, and if someone else commits changes to the SWC at the same time, it doesn't matter. Both of your assets are commited and in the version control, so you both just build the SWC again.

I'm aware that I'm not the first one who has thought about this approach, but when I googled for available solutions, I couldn't find anything that would be generally suitable for all kinds of projects, and most importantly, all the solutions handled only image files. As I need the same kind of behavior for both image and sound files, I decided to write my very first Ant-task (beer!). It came out quite nice, so I decided also to share it.

If you want to use this task to handle your assets, the first thing you need to do is to install the support for Ant-tasks. Here is the tutorial for Flex/Flash Builder. If you're using Eclipse/FDT/something else, google can help you. Just search

install ant <your favorite development tool>

Installing and using this Ant-task is quite easy, and there is a readme file included in the package which has these same instructions:

1. Install the Ant support
2. Unzip the package and copy the contents of lib-directory into the folder where you would normally place your swc-files.
3. This task requires the Ant Contrib add-on, so copy ant-contrib-1.0b3.jar to your Flex Builder's ant/lib library. Usually that's something like /Applications/Flex Builder/sdks/3.2.0/ant/lib
4. In Flex/Flash Builder Add FLEX_HOME environment variable to your environment variables:
   1. In the package explorer, right click the build.xml -file and select Run As -> External Tools Configurations
   2. Click the "Environment" tab
   3. Add a new variable and give it a name "FLEX_HOME", and set the value as "${eclipse_home}"
   4. Click Apply and close the dialog
5. Open up the build.xml -file, and and in the line 20 check that the FLEX_PATH points to the directory of the SDK-version you're using.
6. Bring up the ant-view by selecting Window > Other views -> Ant -> Ant
7. Click the tiny ant icon with a plus sign, and locate the build.xml file you copied from the lib-folder.
8. Launch the ant task target: Dynamic Shared Assets: Build Asset SWC

What the task does, is quite simple. It loops through files in given directory (which you can specify yourself), temporarily creates AS3 class files based on a template (default template is templates/class.template.general), compiles these classes into an SWC-file and deletes the temporary classfiles.

There are few lines that you may want to edit in the beginning of the build.xml -file:

 
<!-- User defined variables, modify these as needed -->
<property name="asset.path"            value="assets"/>
<property name="asset.bitmap.template" value="templates/class.template.general"/>
<property name="asset.bitmap.prefix"   value="Ext"/>
<property name="asset.bitmap.package"  value="ui.assets.bitmaps"/>
<property name="asset.sound.template"  value="templates/class.template.general"/>
<property name="asset.sound.prefix"    value="Ext"/>
<property name="asset.sound.package"   value="ui.assets.sound"/>
 

These properties define where the assets are found, which template to use for which kind of asset (so, for example, you may write your own functions for every sound asset if you want), and a prefix for the asset classes (so you may find them more easily with code hinting). Also you may set the package path according to the asset type.

Download the ANT-task and related files.

As usual, these files are provided with no guarantees, especially as this is my first experiment with Ant. You may use them in your projects whether they are commercial or experimental, but don't blame me if it all goes wrong.

For this reason I developed the Scale9Bitmap -class, which allows me to make, for example, a button in Photoshop, define a scale9grid for the image's bitmapData and just scale the button image so that the text or glyph fits nicely inside the button. The solution is to slice the given bitmapData into 9 pieces according to the scale9grid Rectangle, and then just to scale each one in the correct axis.

Here is a sample how the scale9grid affects the bitmap scaling:

So, if this is a feature that you think you would find useful, go ahead and download Scale9Bitmap.

A more detailed specification of the scale9grid functionality is available at Actionscript 3.0 Language Reference.

This class is provided "as is", and still needs some development. In particular, there is one key feature still missing: the bitmap doesn't scale correctly below the given grid border size. So if, for example, you define a grid that has a 10px left column and the 20px right column, the bitmap is not scaled correctly if you set the width below 30px. Besides that, it should work nicely,  and I use it very often in my daily work.

So I decided that it's better to design and develop the software myself than to use some half-thought engineer type of solution. I started the project by considering the average user's ability to design and compose a nice looking and stylish photo-album. I found out that there are users that have little or no eye for visual design and layout, and then there are users that are proficient in making neat layouts and compositions. There are users that are motivated in using hours or even days composing the product, and there are users that want the process be very quick and effortless. And then, of course, there's everything in between. After a while of thinking I came to conclusion that targeting the application for the "average user" means that it's not probably going to be the best solution for any user.

At this point the thought process came down to a simple math. If I take an equation (the user interface solution), and test it with values 0% and 100% (both ends of the user proficiency/motivation and other parameters) and it works, it probably also works for every value in between, and this gave me basically just two user groups for which to target the solution. So I decided to combine both a quick, easy and effortless way of achieving the desired outcome, as well as a complicated and time-consuming way of achieving a high accuracy of the user's desires. The hasty users can answer couple of simple questions (which kind of covers, which kind of background, which kind of frames for the photos), and the system would layout the album automatically. (The task of automatically placing arbitrary amount of photos on a finite area in an aesthetically pleasing way wasn't too easy, either, but that's another story which I may post a separate post later.) After that, the more studious users can alter the way the photos are laid out, add effects, color correction, rich text and whatnot, but at this point, the hasty user already has a relatively stylish album ready.

So the process of making great Flash applications is not just about programming. It's also about always taking the user's abilities, desires and motivation into account when making the decisions about what the final application should be like. This is, of course, true for every other type of application development, but as Flash is relatively new platform for developing actual software, and the possibilities are truly endless, a good developer should always carry great responsibility for the user experience and not let the bad ideas get through to the final product.

In this blog I'm going to share my views on the Flash-technology, my ways of designing user experiences, some useful Actionscript 3.0 classes I've developed along the way, and I also try to give you a change to learn from my mistakes so you don't have to make them yourself.

So feel free to debate on the design philosophies, use the AS3 classes I share and suggest topics that you would like to be covered here.