Monthly Archives: May 2006

Why should you use Flex and FlexBuilder?

Once or twice a week, I visit the archives of the FlashCoders mailing list to see what folks are talking about. Recently, there’s been a huge thread boiling about using FlexBuilder 2 versus using the Flash IDE. On one hand, like me, some people are super excited about FlexBuilder. I come from a computer science background, and by leveraging Eclipse, Adobe is making me feel more at home. On the other hand, some people could be defined as a developer-designer hybrid. Some of these folks want to understand why the Flex framework and FlexBuilder are so cool to guys like me. Many almost seem angry about the existence of Flex.

First of all, the Flash IDE as it is now isn’t going away. If you can’t understand why Flex and FlexBuilder are so cool, that’s fine. You don’t have to use them. Flash will still be there. The only thing you’ll really be missing is the MXML that Flex uses, but the Flash IDE doesn’t have that anyway, so you won’t lose anything that you already have. In fact, as a developer, you’re probably going to get more coding features. Plus, since the Flex SDK is free, you’ll still be able to use MXML if you really need it. I remember someone mentioned that they didn’t want to buy two different IDEs. The SDK is perfectly usable without FlexBuilder. I’ve already seen some efforts to integrate Flex with programs other than Eclipse.

Some people are saying that RIA and form-based development is possible in the Flash IDE, so why should they use Flex? Yes, you can make everything in Flash that can be done in Flex. It all gets output to SWF, afterall. However, it’s just not as easy. A couple lines of MXML in Flex can replace a classful of event listening and all that jazz. It’s great for results coming from web services because you can bind them without having to write nasty XML parsing code. I haven’t used states much yet, but I’m sure someone can add good reasons why these make form-based development much easier. It seems to me that they help put logic for a single state in one defined place. I know that code can get pretty messy with tons of if-else statements when you have to keep track states in AS2 right now.

The component architecture is also much better than the one in Flash 7 and 8. I know many developers that wrote all their components from scratch just to get better functionality and better skinning. Now, I’m guessing that a lot of people will be more than happy to use the components from the Flex framework. They’re free, they’re powerful, and there’s a ton of documentation. The biggest hurdle will be skinning these components, and it looks there are some tutorials about skinning already.

In the end, it’s up to everyone to decide for themselves if they want to use Flex or not. The best way is to go to Adobe Labs and download the FlexBuilder beta yourself while it’s still free, read through the documentation, and figure out if it fits your needs. Certainly, it isn’t just for RIA developers, but that’s one if its focuses. If anything, it’s a better coding environment with all the features of Eclipse. If you don’t think it will work for you, then that’s cool too.

FlashTextFormatter patched with SWFObject

I’ve been using the FlashTextFormatter plugin for WordPress for some time now. It’s a great way to add color coding to Actionscript and other languages. Plus, the code box is a Flash component, so I feel like I’m eating my own dogfood. Thanks to the Internet Explorer Eolas change, some users need to click an extra time if they want to scroll the code. I had hoped to see a patch for this behavior, but I finally decided to write it myself. The plugin now uses Geoff Stearns’ SWFObject script to add the FTF component to my posts. Here’s an example:

[ftf h=”120″]function demoFunction(param:String):Void
{
trace(“Hi there!”);
}[/ftf]

You can view the source of this page to see what the plugin generates if you’d like.
It’s pretty standard SWFObject code. Most importantly, I had to be sure that multiple FTF components could appear on a page. The markup includes identifiers for the post and for each instance of the FTF component in a particular post. I had hoped to include support for displaying the code even when Flash isn’t available, but I’m not sure how to extract that data.

If you’d like to use my patched version of the plugin, I’ve made it available for download.

Getting started with Regular Expressions

Today I took my first step into the world of regular expressions. This cryptic, but fascinating, system provides fast text searching and validation, and it’s a new native feature of Actionscript 3. To aid myself in the learning process, I put together a simple little application to provide instant visual feedback on the results of regular expression matching with some input text. If no results are found, the input box turns red, otherwise it appears green. Multiple strings will appear in the results box when the expression returns more than one match.

Screenshot of the regular expressions explorer

An email validation expression is the default input. If you use this code in another project, you can initialize the RegExForm component to start out with blank input if you wish. In the demo, additional forms may be added dynamically. I find it useful to see and compare different variations of an expression simultaneously.

The source code is available for download. It is released under the MIT license. You may also view the demo. Flash Player 9 Beta 3 is required.

CSS Mastery hacks away those bugs

If you were to ask me to tell you the focus of CSS Mastery: Advanced Web Standards Solutions, I’d tell you that it’s mostly about working around browser differences. Where that other web standards book (which I highly recommend) focuses entirely on writing clean XHTML and CSS, this one gives you a hand with all sorts of ways to talk to one or more browsers exclusively to specify some extra rules. It’s a good resource, and while I strive for fully compliant markup and styles, I’m glad I have it at my disposal.

At every turn, you’re reading about how a certain feature doesn’t work in Internet Explorer. Sometimes, there’s a workaround. Other times, you’re glad you know about a cool feature that you won’t be able to use until Microsoft gets their act together. It’s a little frustrating. I can’t really blame the author, Andy Budd. I want to be able to use these features now, and I imagine that he is just as frustrated as I am. Ultimately, just like the early release of Flex 2.0 with Actionscript 3, it’s extremely cool to learn and become experienced with features before they become widely available. One of the chapters covers some cool advanced CSS selectors, such as one that lets you target HTML elements with specific attributes, that will allow some interesting style manipulation.

Andy covers a lot more information such as list styling, form styling, creating navigation tabs, and fixed, liquid, and elastic page layouts. You’ll also find some good examples of drop shadowing, rounded borders, and two case study chapters to finish off the book. With all these design trends and several mentions of changes expected with the release of IE7, you’ll find yourself in a very modern perspective that covers web design concepts and issues that will affect us today.

Many of the other ideas Andy presents were already in my arsenal, but if you don’t have a web design book in your library, this would probably be a decent choice. Personally, I’ve never looked into the browser hacks, but CSS Mastery puts the important ones together in one place. Sure, you could probably find them through Google, but I find it easier to have them all in a book that I can just reach for when I need it.

Flex 2.0 SVG Support

I’m finding all sorts of little gems in the Flex 2.0 help files. Flex 2.0 supports embedding SVG files just like other images like JPEG or PNG using the [Embed] meta tag:

Flex supports a subset of the SVG 1.1 specification to let you import static, two-dimensional scalable vector graphics. This includes support for basic SVG document structure, Cascading Style Sheets (CSS) styling, transformations, paths, basic shapes, and colors, and a subset of text, painting, gradients, and fonts. Flex does not support SVG animation, scripting, or interactivity with the imported SVG image.

With that in mind, it’s now possible to visually build vector art assets for Flash using open source programs. That’s one of the big things the OSFlash movement has been missing. If you’re looking for a nice SVG program, I’d recommend Inkscape. Does anyone know of other good choices?

Finally, access to "super" getters and setters

While looking through the Flex 2.0 help files, I discovered a great little section on inheritance. Near the bottom, I found a section that covers overriding getters and setters. It included the following code:

package
{
    import flash.display.MovieClip;
    public class OverrideExample extends MovieClip
    {
        public function OverrideExample()
        {
            trace(currentLabel)
        }

        override public function get currentLabel():String
        {
            var str:String = "Override: ";
            str += super.currentLabel;
            return str;
        }
    }
}

You’ll notice that the currentLabel getter calls super.currentLabel. That never worked in AS2. It makes me happy. 🙂

MXNA Dashboard updated to Beta 3

Note: This project has since been updated, and it will work with the official release of Flash 9. Source code is currently unavailable.

I submitted a more advanced version of my MXNA treemap application to the Flex Developer Derby a couple weeks ago. I’m not sure why I never got around to posting about it here. If you haven’t already seen it on the Derby showcase page, you can find the MXNA Dashboard here. As the post title says, you’ll need Flash 9 Beta 3 to view it.

Scoping Issues in Flex 2.0 Beta 3

I hadn’t faced a situation like this one in the previous builds of Flex 2.0, but I’m working with some new code. For some reason, I’m getting errors when I use the same variable name but different types for variables that are in different scopes. It’s a pain because its the “i” variable in a for loop. This issue seems to happen only within a single function.

private function scopingIssue():void
{
	if(this.width == 100)
	{
		for(var i:Number = 0; i 

Both those for loops are in different scopes, so they should work as different types, but I get the error, "A conflict exists with definition i in namespace internal". This is definitely a bug. Can someone remind me where to find the bug submission form?

ActionScript 3: Handling Inheritance

I’m working to migrate some code to ActionScript 3, and I’ve come across an annoying problem with inheritance. I’d like some ideas for how to work around it. It’s not a big deal, but I’d prefer not to add a lot of weird casting everywhere.

Here’s a basic example. FruitTree is my base class. It contains a variable called myFruit of type Fruit. I extend FruitTree to make AppleTree. In AppleTree, myFruit becomes an Apple, which is a subclass of Fruit. In AS3, I can’t seem to redeclare myFruit as an Apple inside AppleTree. Just rewriting the declaration in AppleTree (with Apple instead of Fruit) gives me an error, “A conflict exists with inherited definition FruitTree.myFruit in namepace public”. It seems to me that since Apple is a Fruit, things should stay compatible with the super class. I’d prefer to use this method because allows me to use myFruit as an Apple without casting it every time I need to use it.

Here’s an example of what worked fine using AS2:

class FruitTree
{
	public var myFruit:Fruit;

	public function doSomething():Void
	{
		this.myFruit.getEaten();
	}
}

class AppleTree extends FruitTree
{
	//An Apple is still a Fruit, but I want to access some special functions
	//In AS2, this works:
	public var myFruit:Apple;

	public function doSomething():Void
	{
		this.myFruit.removeStem(); //extra functionality
		this.myFruit.getEaten();
	}
}

In AS3, here’s the only way I’ve found to make it work, but requires a lot of extra code because I have to cast myFruit as Apple all the time.

public class FruitTree
{
	public var myFruit:Fruit;

	public function doSomething():void
	{
		this.myFruit.getEaten();
	}
}

public class AppleTree extends FruitTree
{
	//We can't redeclare the variable myFruit as an Apple because we get an error.

	public function doSomething():void
	{
		//Since we can't redeclare it, we have to cast it here
		//I'd rather not have to do this sort of casting a million times
		var myFruitAsApple:Apple = this.myFruit as Apple;
		myFruitAsApple.removeStem();
		myFruitAsApple.getEaten();
	}
}

I also tried building a getter and setter for the property as a work around, but changing the type in the overriding function gives an “Incompatible override” error. It’s probably for the same reason as the code above. Can anyone give me any insights into a way to do what I want? Could this be classified as a bug?

Introduction to Particle Systems in Flash 9 and Actionscript 3

I’ve always been fascinated by the magical and organic effects that particle systems can help create. In video games, whenever you see smoke, flames, or steam, they’ve probably been made using particles. Systems can range anywhere from couple dozen to hundreds of particles, and span a wide range of effects. Simple changes to size, color, or transparency can cause surprisingly different results. Now, thanks to Flash 9’s performance increases, particle systems can provide a new level of realism within websites or Flash movies.

Screenshot of the flames particle system in Flash

Let me warn you that I am just starting to experiment with particle systems. The code for this project doesn’t necessarily reflect the most optimized way of handling them. I plan to come back to this subject again soon using bitmaps instead of vectors to demonstrate the differences. Both systems will have pros and cons, I’m sure. For today, the vector-based particles perform pretty well. Mainly it depends on your parameters. The more particles on the screen, the slower the swf will run. Likewise, blurring and transparency can slow things down too. It’s important to keep things simple. Many cool effects can be made without needing a lot complexity.

Let’s dive right in!

//Instantiate a SteamParticleSystem
//Note: There are constructor parameters, but the defaults are good for most situations
var steam:SteamParticleSystem = new SteamParticleSystem();

//Optional parameters
steam.lifetime = 500; //how long a particle will be visible
steam.size = 10; //the size of an individual particle
steam.color = 0xffffdd; //the color of a particle
steam.transparency = 0.5; //particle transparency
steam.baseBlur = 20; //the starting blur
steam.blurRange = 10; //additional blur added to the base over time
steam.jitter = 10; //horizontal velocity (randomly changes between 0 and jitter)
steam.baseVelocity = new Point(0, -2); //vertical velocity

//Standard Sprite stuff
steam.y = this.stage.stageHeight;
steam.x = this.stage.stageWidth / 2;
this.addChild(steam);

//Start up the system!
steam.start();

Several parameters allow you to tweak the system and give you different effects. Larger steam particles could mean that a valve on a steam pipe is open wider. Flames with a higher jitter might make them look like they’re burning wildly in the wind. These systems are flexible, and experimentation will help you achieve the look you want. All three of the effects I built actually run from very similar code. The particles are circles with low alpha that have been blurred. The smoke is the most basic effect that only features movement. Steam adds size changing to the mix, and the flames take it a step further to change the color too.

Working on this project was a lot of fun. I spent a good deal of time tweaking things here and there, so it takes some patience, but seeing so many different effects with such basic changes feels very rewarding. I encourage you to download the source code, and build your own cool effects based on my examples.