Blog

  • Changing the Modal Color

    When you create popups in Flash or Flex, you have the option of making them modal. This means that no other content below the window can be clicked on or interacted with. This forces the user to deal with the popup, usually a Window containing an important form, such as a Login window or an Alert that is asking a question.

    You do this by setting the 3rd parameter of PopUpManager.createPopUp to true. By default, Flash and Flex make this modal window invisible. It’s basically this big shield the size of your application that prevents mouse clicks from going through. Some other magic happens behind the scenes to prevent keyboard commands from slipping through.

    While you can skin this invisible shield via editing the symbol PopUpManager uses to create it, called “Modal”. If you just want to set the color to something other than white, I haven’t gotten styles to work with it. You can set the alpha of this shield; the common value is 50%:

    setStyle(“modalTransparency”, 50);

    For the color, you need to get a specific reference to it. There is probably a cleaner way, but this works in both Flash and Flex 1.5:

    import mx.managers.PopUpManager;
    import mx.containers.Window;
    
    private function initApp():Void
    {
            setStyle("modalTransparency", 50);
            var ref = PopUpManager.createPopUp(this, Window, true);
            ref.setSize(320, 240);
            var c:Color = new Color(ref.modalWindow);
            c.setRGB(0x660000);
    }
    

    All popups are created with a reference attached (a.k.a. decorated) to them in the form of giving them the property of modalWindow. This might be pre-defined in UIObject or something allowing strict typing to work. Regardless, now you have a color choice other than white!

  • Presenting on Flex 2 Thursday @ the Atlanta Macromedia User’s Group

    I’ll be presenting on ActionScript 3, Flash Player 8.5, Flex Builder 2, and the Flex 2 Framework at this Thursday’s Atlanta Macromedia User’s Group. I won’t be covering Flex 2 Enterprise Services, but will briefly touch on Blaze (Flash 9). If you don’t know what Flex 2 is, check out Christian Cantrell’s excellent breakdown.

    A quick summary, Flex 2 is a collection of technologies to empower developers to create Rich Internet Applications utilizing the rich media & collaborative capabilities of the Flash Platform for both Enterprise and smaller scale developers. If you are a backend developer (PHP, Java, .NET, ColdFusion, etc.), Flex 2 is the web front-end technology for you. While Flex isn’t necessarely advertised as the migration path for existing Flash Developers, it is by me.

    Come witness a glimpse of the future of RIA development.

    WHAT: January Meeting of the Atlanta Macromedia User Group
    WHO: Jesse Warden presenting the Flex 2 Alpha
    WHEN: Thursday, January 26, 2006, 7:00 PM
    WHERE: Pagaea (http://www.globalgrubbin.com/)
    1082 Huff Road N.W., Atlanta, GA 30318
    NOTE: The Kitchen Is Closed! No food will be served!
    DIRECTIONS: Google your own!
    RSVP: atlmmug.rsvp@gmail.com

  • How to Use the BlurFilter in Flex 1.5

    Jason Graham from Flexcoders had the same desire I had; how to get the cool Alert blur effect that Flex 2 has in Flex 1.5?

    If you haven’t seen the effect, it’s pretty slick. Basically, if you trigger an Alert window in Flex 2, it actually blurs out the background application. While the AJAX’rz learn about focus rects, something Flash has always had built into the player, and built into our component framework for over 3 years, the Flash & Flex developers are paving the way in using visual effects to handle user attention focus. That way, when Windows Vista comes out, Windows Developers will already know what works and doesn’t, and AJAX’rz will be using hardware accelerated Firefox effects. Thanks for the fish, bitch!

    In film and animation, an over blurring of both foreground and background parts of an image is used to bring the subject of the photo “more” into focus. By removing detail from both the background, and foreground objects, the eyes focus more so on the clear part of the picture. The subject is brought out more, giving the image more depth as the distance is exaggerated.


    Freely licensed under Creative Commons – BY-SA-1.0
    Source: http://thoughtattic.com/

    This is basically accomplished by using a camera with a large aperture, which makes the depth of field very shallow.

    This is also effectively used to convey distance by exaggerating the blur used on foreground and background objects in 2D animation. You show the foreground blurred out, and the background crisp and clear. You then quickly blur out the background, and unblur the existing foreground. While the distances are not truly accurate since they are 2 dimensional images, the effect causes you to perceive them as far from eachother.

    Thus, having an alert dialogue clear and crisp with a blurred out background is the perfect way to convey depth of field on a 2 dimensional computer monitor, and have the user’s eyes “focus” on the alert dialogue prominently in the center of the page, and “closest” to them.

    Animating with it is pretty pimp too. A lot of designers used to utilize After Effects for it’s awesome motion blur effect. They’d they take in a series of images into Flash, and animate via a Graphic or MovieClip. Now, you just need 1 image with nothing pre-rendered since Flash 8 has blurring built in via the BlurFilter.

    As things move, they blur. This makes them appear more “real”, thus when used correctly (meaning, not my example), they are an effective way to convey motion when used in tandem with the Move and/or Resize effects.

    So how do you do it? Well, there are a few ways. The one I chose works pretty well, and is a temporary necessity since Flex 2 will have all of this built into the 8.5 Flash Player and the Flex 2 Component Framework.

    Flex 1.5 utilizes and exports for version 7 of the Flash Player. While Flash is backwards compatible, Flex’ compiler is pretty strict, and there is no easy way to fool it that doesn’t feel weird when developing. It also cannot recognize the internal (intrinsic) classes that Flash 8 comes with. I’m sure there are other ways, but I’ve found loading a SWF works great. We used the technique Dirk & Lucian talked about in 2 projects so far to enable our Flex applications to have integrated File Upload.

    By loading a Flash 8 SWF, you can expose method calls that a Flex app can make on a loaded SWF. Since Flash 8 can compile just fine using the Flash 8 features, you expose useful methods. Since the calling of methods on a loaded SWF is not strict, and there are no runtime exceptions for failed method calls in the Flash 8 player, this works great.

    Here’s the breakdown:

    1. create a Flash 8 FLA
    2. expose 2 methods, blur and clearBlur (or unBlur or whatever). The blur method will allow Flex to blur something it passes in, and clearBlur will remove it (since Flex doesn’t know what a “filters” is on a MovieClip)
    3. compile the SWF as a Flash Player 8 SWF file
    4. load the SWF file into a Loader component in Flex
    5. when it’s loaded, save a reference to the Loader.content
    6. have your Flex app call that reference.blur and reference.clearBlur to have certain components blur and unblur

    Here’s an example of how your Flash 8 code should look on the _root timeline:

    function blur(p_target:MovieClip, p_x:Number, p_y:Number, p_quality:Number):Void
    {
            var bf:BlurFilter = new BlurFilter();
            bf.blurX = (p_x != null) ? p_x : 4;
            bf.blurY = (p_y != null) ? p_y : 4;
            bf.quality = (p_quality != null) ? p_quality : 1;
            p_target.filters = [bf];
    }
    
    function clearBlur(p_target:MovieClip):Void
    {
            p_target.filters = [];
    }
    

    Here’s an example of the callback function your Loader component in Flex should call and store the reference to the loaded SWF:

    private var blurSWF:MovieClip;
    
    private function onSWFLoaded(event:Object):Void
    {
            blurSWF = swf_ldr.content;
    }
    

    I like to proxy my methods to the SWF via an enforced interface, but you don’t have to. You could simply blur anything by calling the blur method directly, and passing in the target, x blur, y blur, and blur quality:

    blurSWF.blur(login_form, 6, 6, 3);

    I tried and failed to utilize an interface. Dirk I think blogged about how you can utilize an interface in Flex 1.5 to load Flash 8 SWF’s, but I gave up looking, and when casing to the interface in Flex resulted in a null return value, so I gave up, and just made the Application implement the interface instead. Flash Developers are used to faith based programming anyway, and a SWF proxy is no exception.

    I took it a step further, and built an Effect class. Flex 2 already has this built-in, but Flex 1.5 does not. Since the joy of Flex is using MXML, which seperates your code from your GUI, thus preventing your code from breaking when you change your GUI, I created a Blur class that can be used as MXML. More specifically, it works just like all of the other effect classes do. You can use it as showEffects, in Parallels, Sequences, or even through pure ActionScript if you wanted. It extends the TweenEffect class, the same class all of the other Flex effect classes extend. Not sure if I did it right, but it works.

    <jxl:Blur blurYFrom="60" blurYTo="0" duration="600" />

    A couple things I did differently, though. First off, the blur does something weird to the Panel. It like blanks out the header (it loves you Stacy, why you hate?), and the ControlBar… I reckon this is because these are dynamically drawn gradients or something. Anyway, I provied a “clearBlur” property for the Effect. It’s false by default, but if you set it to true, it’ll remove the effect from the object when it’s done, thus hopefully removing all visual anamolies. Worked with Panel, anyway. This can’t be done in Flex 2 mind you; once you use an effect, you are commited to that mofo having it’s filters array always stuffed so don’t get used to my way.

    <jxl:Blur 
      blurYFrom="60" 
      blurYTo="0" 
      duration="600" 
      clearBlur="true" />
    

    Finally, there is a hide property. Sometimes you want to blur things out, so I have a hide property that will hide the target when it’s done playing the effect; useful for hideEffect.

    <jxl:Blur 
       name="blurOut"
       blurXFrom="0" blurXTo="60"
       blurYFrom="0" blurYTo="4"
       quality="6"
       clearBlur="true"
       hide="true"
       suspendBackgroundProcessing="false"
       duration="200" 
       easing="easeIn" />

    I’m pretty sure this degrades nicely, meaning if the user has Flash 7 installed, while no blur will occur, effects will still finish since they are based on Tween, and Tween just has an interval crunching through numbers, spitting out events with no care whether their values actually do anything.

    On the same token, if you don’t have Flash 8, you won’t see anything. It works for me in the alpha build of 8.5 as well.

    Here’s an example of the form blurring when an alert dialogue is triggered.

    Here’s an example of using the Blur tag as an effect for a couple of Panels.

    BlurFilter for Flex 1.5 Source – ZIP

    Have fun… and don’t forget the yellow fade!

    *** Update: Simon Barber has a beautiful usage of the BlurFilter in his MXNA reader.

  • Flex Chronicles #16: How to Know When a Cairngorm Command is Complete

    It seems every Flex or Flash application I build eventually needs to have a ton of data garnered from the server upfront. In Cairngorm, an application framework for Flex, you typically use Commands to get your data. They have the option of utilizing a Business Delegate to make the actual call in case any data-massaging to and/or from the server needs to take place.

    The issue becomes, however, a good written command is dumb; it does just what its name implies such as “get the user data” which is named GetUserDataCommand. While Cairngorm does provide an abstract base command class for you to extend to allow commands to be chained, you still have no clue when they’ve completed, nor the success or failure of such completion. You cannot make them too smart, however, because they suddenly aren’t portable.

    For example, we have an application that has about 4 states that are applicable on start up. Does the user need to register? Does the user need to update their register information? Is the user registered, do they have existing form information? If so, what is that data?

    This is accomplished by passing in the necessarey information via the URL. Those variables are then handled in a FrontController fashion to determine the application’s state at startup. While this works well, getting the specific data in order doesn’t. Asking the server-side guy(s) to give us the data in a different function, or even all of it in one complicates things not just for them, but for us. Granted there are plenty of reasonable changes, but this isn’t one of them. So, we end up needing to get data in a specific order.

    Now, I could create a specific command specifically for this purpose. Since you can tell when a Business Delegate is done, you can have 1 command call 3 Delegates, in order, to get the data you need.

    …however, this is a gregarious abuse of the reusability of Commands , and while isolated, you are effectively duplicating logic, and duplication of anything in code is bad. Quoting from The Pragmatic Programmer, be DRY – Don’t Repeat Yourself.

    The simplest approach is to have all Commands to support callbacks. Callback handlers were how components back in Flash MX were created to allow events to be dispatched. Built in classes such as XML had supported such things since Flash 5; XML.onLoad = thisFunction; which translates to “XML, when your onLoad is fired, please call this function and pass in whether or not you failed”. This eventually graduated to the EventDispatcher style of dispatching events with context about those events in an object, and is now built-in into ActionScript 3 & Flash Player 8.5 with actual Event classes to allow strict typing, both at compile time and runtime.

    Now, Commands don’t need to dispatch events. They themsevles are stateless, much like the XML object is. The XML class loads XML, and hands it to you when it’s done. Commands are the same way; they get data and stick it in a globally accessible place when they are done. The difference here is you have no clue when they are done.

    It is reasonable to pass in the callback functionality to an event in the event.data. Commands that need context can pull data off of the event object that is passed into their execute method. This same entry mechinism can be utilized by also passing in a callback. “When you are done, please call this function”.

    In Flex 2, this will have to be more strict, but in 1.5 you can be loose and not call the callback if there is no callback to call. Therefore, your Commands aren’t forced to abide by this way of doing things. Only 3 Commands out of the 27 I’m dealing with actually utilize a callback.

    The way I approached it was to create a responder class which holds a callback function, and the scope to call it in. This responder class instance is passed into the Command. The Command keeps a copy of it, and when he has completed whatever it is he does, he calls the callback function.

    That way, those who are dispatching events, and thus running commands know when they are done if they need to.

    It’s important to note that since Cairngorm actually creates 1 instance of all Commands at startup, a Command will actually keep a reference to this callback for the life of the application. Thus, it’s imperative that you clear a callback object if none is passed in to ensure that no old callback data is retained and thus called. ARP doesn’t do this because ARP’s Controller creates and executes Commands when they are called, and doesn’t keep a reference to them.

    The ideal thing to do is to utilize an interface so that only some Commands can utilize this feature, and it’s explicit which ones do and which ones don’t, but you know how deadlines go…

    The steps:
    – create a SimpleResponder class
    – import into whatever class is dispatching the events to run commands (since you run Commands in Cairngorm by broadcasting an event)
    – create an instance of the SimpleResponder class, passing in your callback function and scope
    – stick this an object with the name “callback_obj”
    – pass that object as the 2nd parameter to broadcastEvent
    – if there is a callback in the event.data in your command, set it to the Commands’ internal reference, otherwise, delete the commands internal reference
    – when the Command is done, call the runCallback function on the callback object, and pass any information about success or failure as a parameter(s)

    Here is some pseudo code of the SimpleResponder class:

    class SimpleResponder
    {
            // scope the method is invoked in
            public var scope:Object;
            // a function that will be called when a Command is done
            public var method:Function;
            
            // when creating an instance, pass in the scope and function
            function SimpleResponder(p_scope:Object, p_method:Function)
            {
                    scope = p_scope;
                    method = p_method;
            }
            
            // this function is called when a Command is done
            // arguments are optional, but encouraged
            public function runCallback():Void
            {
                    method.apply(scope, arguments);
            }
            
            public function toString():String
            {
                    return "[class SimpleResponder]";
            }
    }

    Here is how you create a SimpleResonder class instance from whatever class is broadcasting the event via Cairngorm’s EventBroadcaster:

    var sr:SimpleResponder = new SimpleResponder(this, onUserInfoReturned);
    

    Broadcast your event like you usually do, and add your object as the 2nd parameter with the field name of “callback_obj”. This will be placed on the Event’s data property, and you can then access it by name in the Command’s execute method:

    EventBroadcaster.getInstance().broadcastEvent( Controller.GET_USER,
                                                  {callback_obj: sr} );
    

    In your Command class, define a property up top to hold a reference to the callback_obj:

    private var callback_obj:SimpleResponder;

    In your Command’s execute method, inspect the Event’s data property to see if it has a callback_obj, and if so, store a reference to it internally, otherwise, set it to null explicitly to ensure the Command doesn’t retain state from past calls (don’t have to do this in ARP):

    if(event.data.callback_obj != null)
    {
            callback_obj = event.data.callback_obj;
    }
    else
    {
            callback_obj = null
    }
    

    Finally, when your Command is completed, typically in your onResult or onFault functions defined in your Command, call the runCallback function, and pass in either a true or false… or whatever you want:

    callback_obj.runCallback(true);
    

    Your controller class, or whatever class is issuing commands, can then have a function defined looking like this to know when a Command is completed:

    public function onUserInfoReturned(bool:Boolean):Void
    {
            // show success or failure
    }
    

    This is a great way of handling server state because now you know exactly where things failed. This allows more control over what is shown when a server call is being made. You can now show a Loading window for example, and remove it when a call is completed instead of the default wait cursor. Even better, if you have multiple calls, you can utilize a ViewStack in your Loading Window to showcase many states of the linear operation (or non-linear if 5 unrelated calls for example) to know exactly which one is done, and actually visually represent that.

    That’s a lot better than, “Um… the call failed, it must be the server guy’s fault, let’s go to lunch!” Now you, and the user, can see visually where it failed and why.

    The downside is, the pontential for a race condition exists because if the same Command is called more than once, the later callback will overwrite the first, thus ensuring the first call never returns it’s result to those that care to know about it. I’m sure this can be easily fixed; either by changing how Cairngorm’s FrontController works (creating Commands on the fly vs. creating all initially on app startup), or by associating an ID… tons of ways, I’m sure.