After years of abuse of pop-ups and confirmation boxes users have become so honed at the skill of simply clicking the OK button on any kind of confirmation box that pops up that it has become almost nothing more than a reflex. This can cause some serious issues when it really matters.

In my flex application I needed to increase the chances of a user actually reading the notice in the pop-up box as much as reasonably possible within the user experience. The solution I decided to use is I believe fairly common to anyone with windows experience; it's also one I would use sparingly!

When the confirmation dialogue is presented the OK button is disabled at first. Instead a countdown timer is displayed on the button. After that timeout the user can then click "OK"; The cancel button is available at all times.

The code isn't rocket science and making use of the pop-up is so simple I won't even bore you with an example, but it is a nice quick fix if you need it.

Source view is enabled on the Flex demo

A little while ago I started using a screenshot of our flex app login to use as the background for a few of our web apps. As usage grew I ran into multiple color and title needs. So instead of doing things the simple way and just using Photoshop, I decided to make this an example of taking and using "screen shots" (not using mx.graphics.ImageSnapshot).

First I built a plain-jane panel component that I wanted to use as my background in my HTML based application

Then in my main MXML file I wrapped the login component and 3 empty canvases in one larger canvas. I did this in order to more easily control position inside the greater app while easily being able to build my Rectangles.

<mx:Canvas id="loginForm" backgroundColor="{this.backgroundColor.selectedColor}" width="400" height="296">   
    <local:LoginForm title="{this.windowTitle.text}" borderColor="{this.panelColor.selectedColor}" width="360" y="15" horizontalCenter="0"/>
    <mx:Canvas id="loginHeader" width="368" height="48" y="11" horizontalCenter="0"/>
    <mx:Canvas id="loginBody" width="368" height="59" y="78" horizontalCenter="0"/>
    <mx:Canvas id="loginFooter" width="368" height="67" y="219" horizontalCenter="0"/>
</mx:Canvas>

I positioned the 3 boxes to be in the size and position of my 3 desired screen shots: A header, a repeating body and a footer. In my code I use these to create a very easy way to visualize what I'm capturing. In the real world outside of my very specific goal these might be controllable by the end-user.

To create my screen caps first I take a snap of the entire formpublic function takeSnapshot():void {
    var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(this.loginForm);
    var imageByteArray:ByteArray = imageSnap.data as ByteArray;

    var loader:Loader = new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, getBitmapData)
    loader.loadBytes(imageByteArray);
}

Then I loop over my 3 targets to create the specific sub-images that I need:
var bd:BitmapData = Bitmap(e.target.content).bitmapData

for each (var target:Canvas in [this.loginHeader, this.loginBody, this.loginFooter]) {
    rect = new Rectangle(target.x, target.y, target.width, target.height);

 bd2 = new BitmapData(target.width, target.height);
    bd2.copyPixels(bd, rect, pt);

    var m : Matrix = new Matrix();
    bd2.draw( bd2, m );

    encoder = new JPEGEncoder(100);
    ba = encoder.encode(bd2);

    rawImages[target.id] = ba;
}

this.amfService.save(this.downloadUUID, rawImages);