Newer Entries »
Understanding the Flex SystemManager
by Paul Taylor, Jan. 17, 2010, under [ actionscript ]

Before I start, let me say that there has been a lot of discussion about the SystemManager on various blogs. Deepa posted a fantastic write-up on the SystemManager back in October 07, which really got me interested in learning about it more. Working on Flex-less MXML is what finally pushed me to understand exactly why it’s such a critical class. There’s a lot to cover about the SystemManager, from the behavior of the Flash Player to the behavior of the Flex compiler, so buckle up, cause this is a long one.

Note 1: A recurring theme in this post is the fundamental behavior of the Flash Player. Flex would be nowhere without Flash, so if we desire true understanding of Flex, we must also understand the Flash Player.
Note 2: For some of this, it is helpful to turn on the -keep-generated-actionscript flag in the FlashBuilder compiler options. To do this, go to Project –> Properties –> Flex Compiler. In the “Additional compiler arguments” field, type “-keep” at the end of the arguments list. FlashBuilder generates ActionScript from all your MXML, including a dynamic subclass of SystemManager. This will instruct FlashBuilder to place that code in the bin-debug/generated folder.

To understand the SystemManager, you must first understand that…

Every Flex Application is a 2-Frame Flash Movie

2 Frame Flash Movie Yes, every one of them. The Flash Player is capable of downloading just the data for the first frame and streaming the rest of the movie. Therefore a trend started in the earlier days of Flash-only developing; you typically put a very small loader object on your first frame that displays the loading progress of the rest of the SWF to the user. That way the user has a visual indication that something is happening, and the movie gets preloaded to a point where the user won’t experience any playback hiccups.

That is awesome… why do I care?
Good question. First, lets examine the implications of Flash’s load-and-stream feature:

From a movie perspective if frames aren’t loaded, the movie stops until they are loaded. If the movie is constantly experiencing this, the movie’s framerate essentially becomes a function of the speed of the user’s internet connection.
From a code perspective, if frames aren’t fully loaded, classes can’t be accessed. Calling new MyObject() will throw a runtime error, “1065: Variable MyObject is not defined.” This is because the frame that contains the definition for that class hasn’t been fully loaded.

Oh I see now, so we need a small preloader on the first frame?
Exactly. All that silly Flash that we thought we left behind when we became “Enterprise Flex Developers” has come back to bite us in the ass. But never fear, the SystemManager is here.

The SystemManager is a fancy MovieClip. The SystemManager has a few duties, including:

  • Create and initialize the pre-loader to show to the user during app load and startup.
  • Manage loading in RSLs.
  • Manage module logic. If the SystemManager is the root of the SWF, he knows he is a Flex Application. If he is not the root of the SWF, he knows he is a module, and must communicate with whichever SystemManager is the root of the SWF (see if you can spot the logical flaw of the assumption made in that sentence, there will be a quiz later). SystemManager must communicate events both ways between modules/app, such as mouse and keyboard events.
  • Manage Event.RESIZE events dispatched from the Stage.
  • Manages the embedded fonts list
  • Initializes the various manager singletons, such as ResourceManager and StylesManager.
  • Manages top-level application windows. The SystemManager maintains a cursorChildren list and a popUpChildren list, for tooltips and pop-up windows respectively.
  • Once all the code for the movie is loaded, SystemManager creates your actual Application instance and calls initialize().
  • Adds the Application to the stage once the Application dispatches its FlexEvent.CREATION_COMPLETE event. This is why the Application doesn’t have a reference to the stage when its FlexEvent.CREATION_COMPLETE is dispatched, when all the other components do.

How it works
How the SystemManager does its thing. Matching colors are event listening/dispatching pairs.

Frame 1

Frame 2
  • stop()
  • listen for player init event
  • init dispatched:
    1. get root SystemManager (if we’re not the top level)
    2. listen for enterFrame event
    3. create preloader
    4. listen for preloaderDocFrameReady from preloader
    5. listen for complete from preloader
    6. load RSLs and wait
    7. RSLs loaded. preloaderDocFrameReady dispatched by preloader
      • Timer created to go run nextFrame() after 100 milliseconds
    8. Exactly 10 milliseconds after preloaderDocFrameReady dispatched, complete dispatched by preloader
    9. Timer event dispatched, nextFrame() called/enterFrame handler triggered
  • Managers initialized.
  • Stage Resize listener added.
  • Application instance created.
  • listener for Application creationComplete added
  • nextFrame()
  • Application creationComplete dispatched
    1. Preloader removed
    2. Application added to the stage
    3. applicationComplete event dispatched

Hold on, I’m a Flex developer. I don’t work with frames.
I don’t have access to the timeline of my SWF. Actually, you do.

It’s through an undocumented meta tag, [Frame], which is really just a shortcut for the -frames compiler option. You can read all about the frame meta tag at Roger Gonzalez’s blog, but here’s the gist of it: If you add the [Frame] meta tag to the top of the Application class of your project, the Flex compiler will insert a frame before the frame that your Application is on. If you specify the factoryClass property on the meta tag, the Flex compiler will generate a subclass of whichever class you specify as the factory, and put that on the frame it creates. If you open up the mx.core.Application class, you’ll see the line [Frame(factoryClass="mx.managers.SystemManager")] near the top. This tells the Flex compiler to create a frame before the mx.core.Application, and attach a generated subclass of mx.managers.SystemManager.

The Flex compiler will generate a subclass of your factory class that implements IFlexModuleFactory. As long as your SystemManager implements IFlexModuleFactory, your code will compile. The Flex compiler overrides the info() method and returns information specific to your Application, such as a list of embedded fonts and the name of your Application.

And with this meta tag, you can override the default SystemManager implementation. As Roger says, “if the [Frame] metadata exists on the base class of your application, a subclass of the factory will be generated. If the metadata is directly on your application class, it will be honored, but no subclass will be generated; its assumed that you’ve already written the appropriate factory.”

Why this is cool

Most Flex developers will never even know the SystemManager exists, and they shouldn’t have to. Adobe has done a good job of masking Flash behind a more professional, Java-like framework with Flex. If you want to write an app with zero dependence on the Flex framework, but still use the fantastic FlashBuilder IDE, debugger/profiler, MXML, and binding, this is really good to know. You can write an Application based on Sprite, write your own stripped down version of the SystemManager, and then write MXML and take advantage of Flex’s bindings and generated code. Rock on.

Tags: , , ,

This entry was posted on Sunday, January 17th, 2010 at 4:06 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.

360 Flex/RIAdventure Cruise
by Paul Taylor, Dec. 14, 2009, under [ community, misc ]

RIAdventure Cruise

I just got back from the RIAdventure cruise and WOW, what an awesome time! This was the only conference I’ve been to where both the speakers and attendees were all top-notch. Being locked on a cruise ship in the Caribbean for 7 days with these guys was an incredible experience. And I never heard the words, “no, I don’t want to discuss work topics, we’re on vacation!”

On the last day, I filled in for Sam Rivello, who was recovering from a drunken leap off the ship’s main staircase. I threw together a demo of the Particle Emitter Publishing Tool I blogged about a few weeks ago, and showed how easy it is to implement a TweensyFX particle emitter in your app (either through MXML or Actionscript, your choice). A few of the Tweensy classes use constructor injection (they require parameters in the constructor), which isn’t compatible with MXML, so I extended and used the subclasses for MXML instead. Hopefully when Tweensy gets to 1.0, all the constructor injection will be stripped out, as setter injection is usually more efficient anyway.

When I presented this, I got some really great feedback about ways to make it better. I know that I’ve got to work on the interface, as it’s not very intuitive and is difficult to navigate. A great idea that Josh Cyr suggested is a publishing community, where people can submit, rate, and comment on different FX. I envision something similar to Adobe Kuler, or the Flex 3 Regexp Explorer.

Here’s the demo, and here’s the source. The SWF Profiler in the demo overrides the right-click “View Source” option, so sorry about that. Here’s the EmitterCanvas I used to render Emitters and IEffects to one BitmapLayer.

This entry was posted on Monday, December 14th, 2009 at 12:45 pm and is filed under community, misc. 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.

Particle Emitter Publishing Tool
by Paul Taylor, Nov. 23, 2009, under [ actionscript, misc ]

I’m tired, so I’m going to keep this quick. The Emitter class by Tweensy is fantastic and fun to use, but it’s not easy to imagine what an effect will look like without coding up an example.

That’s why I’ve put together a publishing tool for Tweensy’s particle Emitter. I’m using 15 sample particles embedded in a SWF, which you can download here. Launch the editor here.

Some features of this editor include:

  • The ability to save configurations to a file to be loaded again later (serializing the data to AMF and reading it in to restore state). This means your designers can fiddle with the animations and then email you the configuration.
  • A code generater for each Emitter and each BitmapFilter applied, which means you can load up the configuration the designers sent you and pretty much copy/paste the code into your project.

I will update to add more effects, like the PerlinDisplacementEffect that helps with the really cool fire effects Tweensy is capable of, but for now this is what I’ve got.

Once you add an emitter, you’ll need to set at least the emission frequency, emission randomness, and particle life to see anything happen. After that I suggest moving the X/Y coords and turning on either the Blur filter or the ColorTransform filter. Changing the start and end colors does some dramatic things, as well as fiddling with the blendMode (I suggest either Normal or Add). If you’ve got any questions or feature requests, leave them in the comments. Good luck!

Update: Here’s two sample emitters to start off with: Effect 1 and Fireworks (right click and “Save as…”, keeping the .amf extension).

Update 2: Added the PerlinDisplacementEffect. Try it out!

Tags: , , ,

This entry was posted on Monday, November 23rd, 2009 at 1:19 am and is filed under actionscript, misc. 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.

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.

sweet rainbow pic…
by Paul Taylor, Oct. 29, 2008, under [ misc ]

Dusty did this at 3 this morning because he needed to wake up and continue working on the project we’re doing.

I love it.

 

 

 

 

 

This entry was posted on Wednesday, October 29th, 2008 at 9:13 am and is filed under misc. 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.