Newer Entries »
Specify any property, style any object (not just UIComponent!)
by Paul Taylor, Nov. 8, 2009, under [ actionscript ]

The styles in Flex are a wonderful thing. They allow a degree of control over the views in your app without the need to modify source code and recompile. However, the styles are (mostly) predefined and quite rigid. There are reasons for this, but the application of styles are not always consistent with the spirit of the idea.

For instance, you cannot set the x, y, width, or height properties on a component through styles, presumably because it would negatively affect layout algorithms. However, you can set the horizontalCenter style, which affects the placement of components inside Container subclasses that use CanvasLayout (Canvas and any containers with layout="absolute"). If horizontalCenter is defined, these containers obey the law of the style instead of the developer who manually sets the x or y. So if you have a production application, with your layouts working well and code running smoothly, all it takes to completely screw over your Canvases and Panels is for Canvas{horizontalCenter: 0;} to appear somewhere in your external stylesheet.

Another problem with styles is that there is no way to retrieve the styles contained in a CSSStyleDeclaration object. This means that you can’t style an object that doesn’t extend UIComponent. One can argue that this is by design: the inheriting nature of certain styles means that it is very costly to maintain the chain throughout all the components, and UIComponent has a very nice caching scheme. But this is a pain when you work with Sprites and Shapes instead of UIComponents and ProgrammaticSkins.

So if you want a-la-carte styling without the UIComponent, you are out of luck.

The solution? Monkey-patch (or underride, as Doug McCune called it) the CSSStyleDeclaration object to expose a getter called styles. Ideally, this function returns all the styles in the order that they are overridden. So a style set through MXML overrides a style set through a stylesheet, and a style set using setStyle() overrides a style set through MXML.

Luckily, I have written the monkey-patch for you. All you need to do is put it inside a package called mx.styles in your project, and your app will be using the new CSSStyleDeclaration class.

Get it here, and view a demo here.

This entry was posted on Sunday, November 8th, 2009 at 4:29 pm and is filed under actionscript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Physics and Flex: Box2DFlashAS3 meets Flex
by Paul Taylor, Oct. 15, 2009, under [ actionscript ]

Update: I have since abandoned this project in favor of the PushButton Engine, which wraps Box2D and provides a better graphics and component set than I could hope to achieve on my own. So far this has served as a useful academic exercise, and I will keep the code here for future reference.

The Setup

For those not in the know, Box2D is an open source 2D physics engine for C++. There are many ports of it, and luckily there’s one for AS3 (Box2DFlashAS3). The current version (2.0.2) looks very similar to the C++ version, and might be a straight port (I’m not entirely sure). It follows the C++ syntax of class prefixes and allows public access to (what should be) internal member variables. 2.1 promises cleaned up syntax and fixed accessor types, but until then, the library can seem daunting to the uninitiated.

The Problem

The main problem is that Box2D doesn’t define a (reusable) way to graphically represent objects on the screen. It only simulates the interactions between the objects mathematically. This is very efficient, but not very convenient if you need to rapidly prototype a physics based application. There are tools to build Box2D worlds for the Flash environment, but they emphasize working within the Flash IDE. I hate and loathe the Flash IDE (not AS3 projects themselves, mind you). I want something tailored for Flex. I want something that fits into the rapid application development cycle of most Flex apps, which means I want to use MXML. I want to stay up to date with the Box2D project, so when 2.1 does roll around, I won’t have to rewrite application code.

The Solution

Enter FlexWorld. FlexWorld is a framework for graphical representation of Box2D bodies. It is most similar to the World Construction Kit, but is meant exclusively for Flex. You get all the benefits of Flex, including the LayoutManager, styles, events, data binding, and MXML.

The Demo

FlexWorld Demo (launches in a new window)

How it Works

FlexWorld starts with a PhysicalWorld, which is a subclass of Container. PhysicalWorld has boundaries determined by its width and height. Children of the PhysicalWorld are typically subclasses of the abstract class PhysicalBody (which extends UIComponent). Right now, only the PhysicalBox and PhysicalCircle classes are available. World initialization happens only when you say it does, and clean up is as efficient as can be. To get going, initialize the world: PhysicalWorld#createWorld. Then, you can register each PhysicalBody with the world by calling PhysicalWorld#registerBody. This is to ensure proper instantiation and update. When the world is ready to go, just call PhysicalWorld#activate, and it will start rendering.

In-Phase updates

PhysicalWorld renders by calling PhysicalBody#update on each PhysicalBody registered with it. This render cycle falls into the commitProperties phase of the component lifecycle (more on that here and here). This ensures that properties are changed at the beginning of the lifecycle, just before commits will happen. If the render is meant to continue, updateDisplayList (which is at the end of the update cycle) will call UIComponent#invalidateProperties on the PhysicalWorld.

Where is this going

This is a very alpha release. Everything that you see works, and not much else. The shapes aren’t interactive yet, and they don’t do much drawing beyond what you see. Nothing is documented (and I’m horrible at keeping up with it), I don’t even have an SVN repository set up yet. Right now it’s primarily an interesting proof-of-concept rather than a useful tool. I’ll be developing it more for a project I’m currently on, and hopefully I’ll roll those changes in.

The Source

The source for the demo is here.
The source for the library (including Box2DFlashAS3 2.0.2) is here.

Tags: , , ,

This entry was posted on Thursday, October 15th, 2009 at 3:17 am and is filed under actionscript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Flex Equalizer
by Paul Taylor, Jan. 20, 2009, under [ actionscript ]

This is not a new concept in Flash, but as far as I could tell, there weren’t many solutions for this in Flex. Here’s my stab at doing an equalizer. Watch out for your ears, the volume is set to 100% by default.

http://guyinthechair.com/wp-content/flex/equalizer/EqualizerApplication.html

Fixed
I do have one small problem with it, and I’m working to figure it out… for reasons unknown to me the SoundMixer.computeSpectrum function will return a null array sometimes. I have absolutely no clue why, and I’m open to any suggestions as to why. It only errors in the first 5 seconds.

Update: Figured it out. The problem was that I was relying on EnterFrame to call the render method on the equalizer. Unfortunately, EnterFrame could potentially be dispatched before the sound file was loaded from the server, therefore computeSpectrum wouldn’t have any sound data to work with. This would cause computeSpectrum to return me a null array.

Tags: , ,

This entry was posted on Monday, January 19th, 2009 at 8:00 pm and is filed under actionscript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Flex 3 Debugger anomaly
by Paul Taylor, Jan. 2, 2009, under [ actionscript ]

Working today, I discovered the debugger does something silly with for loops. If you have code formatted like so:

var i:int = 0;
var foo:int = 3;
for(; i < foo; i++){
        //Code here
}

If you set a breakpoint on line 3, where the for loop is defined, the Flex debugger will only stop after it has been through one iteration of the loop. This caught me off guard, and for a minute I thought it was immediately incrementing the iterator. Only when I breakpointed on both the line of the for loop and on the first line inside my loop did I realize what was happening. The debugger stopped on the first line of my loop, not when it executed the condition the first time. This does not seem like standard debugger behavior at all. Does this happen to everyone? I know if you define the iterator inline, the debugger stops. Huh.

Tags: ,

This entry was posted on Friday, January 2nd, 2009 at 1:36 pm and is filed under actionscript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Redirects from Jon Campos
by Paul Taylor, Dec. 22, 2008, under [ actionscript ]

Hello everyone coming from Jon Campos’ blog post. Please excuse the messy (read: ugly) design of my blog at the moment. I’m redesigning it with a buddy of mine currently, and I’m stuck with whatever I could throw together in 10 minutes.

Here is a link to the example video player I made in PureMVC.

Here is a link to the presentation that I was going to give, if the projector hadn’t borked on me.

Hopefully you can follow my messy presentation style. If you have any questions, comments, or general feedback, feel free to post them in the comments section.

Tags:

This entry was posted on Monday, December 22nd, 2008 at 12:37 pm and is filed under actionscript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.