A uiWindow container has a title bar that contains a close button if the instance has been set to be closeable by end-users. If closing the window would in turn produce any result that the end-user may regret, for example if closing the window is equivalent to aborting an ongoing task, or data collected from the end-user would be lost, then it is often appropriate to ask the end-user to confirm if he would like to close the window. This is usually done by showing a modal dialog asking the end-user to confirm the action.

Continue Reading »

The uiImageButton component is used to render a button that contains a single image/icon. This post shows how the component can be set up so the embedded image is swapped automatically when the visual state of the button changes.

Continue Reading »

When using the Aspire UI library, each component instance will attempt to compute its own “ideal” preferred size if its size is not explicitly set. This preferred size typically means the minimum size at which the component may render itself fully (or sufficiently without appearing distorted), taking into account its child display objects such as labels or embedded images, if any.

In the case of the uiImage component, its preferred size is simply the size of the original image source. You can override this size by calling the setSize() method.

Continue Reading »

The Aspire UI library uses bitmap PNG image files for component skinning. This means that the component skins can be easily edited/replaced by using any graphics editing software capable of saving in PNG format.

When using Adobe Fireworks, it is important to remember that the raw file format used by the software is PNG. When you save a Fireworks document, you create/overwrite a PNG file and this resulting file will contain author-time editing settings such as guide lines, layers, paths, symbols, etc. This file is many times bigger than what the actual image itself should be if only the image data is saved, and is unlikely to be what you would want distributed/deployed with your Flash application.

Instead of saving the Fireworks document, use the “Image Preview…” command (CTRL+SHIFT+X) to bring up the Image Preview dialog, then choose “PNG 8″, “PNG 24″ or “PNG 32″ (8, 24, 32 bits) from the Format options. Export from this dialog to get the flattened PNG image file. Once you have chosen the Format from this dialog (and dismissed the dialog by clicking Export or OK), you can subsequently call the “Export…” command (CTRL+SHIFT+R), and the last chosen image file format (and other Export settings) will be used.

The technique discussed below is fairly easy to implement and will cost nothing other than a few minutes of your time. You can use this method in conjunction with code obfuscation, encryption or whatever other protection methods – this just adds another layer of protection. While this isn’t going to be a 100% foolproof protection, it is nevertheless better than no protection at all, and should help to deter most if not all casual decompiling.

Continue Reading »

The uiToolTips manager implements the use of pop-up tool tips. The contents of these tool tips are placed inside an instance of the uiFrame container class. Since uiFrame containers are skinnable, this basically means that tool tips are also skinnable, albeit indirectly.

Continue Reading »

When building modular Flash applications, a common error that may be encountered is that related to accessing a property or method of the stage property when it is still null. If a display object is not yet added to the display list, its stage property returns null.

An ActionScript error has occurred: “Cannot access a property or method of a null object reference.”

Quite a cryptic message, especially if you test the module SWF standalone and nothing seems wrong, but the error is thrown when you load the module SWF into a host SWF.

Continue Reading »

The uiFrame container is used when you want to draw a background or border behind a single child display object. The background/border is rendered using skinning, ie determined by the value of the “skin” property.

Continue Reading »

This demo is the same as that in the previous post uiBTabView Example Using “xp” Theme, but we are using a different theme this time:

Continue Reading »

Here is a live demo featuring the uiBTabView component from the Aspire UI library:

• uiBTabView places tabs at the bottom. To place tabs at the top, use the uiTabView component.
• The mini tab scroller is built-in and appears if there is not enough space to display all the tabs.
• The tab focus order is automatically set up so it flows from top (content area) to bottom (active tab).
• When a tab has focus, the arrow keys can be used to change the active tab.

Continue Reading »