Another Custom Preloader

I've been playing around with preloaders a bit recently, and thought I'd share my custom preloader. I originally found this very useful article:
http://www.pathf.com/blogs/2008/08/custom-flex-3-lightweight-preloader-with-source-code/

My CustomPreloader class is copied from the example above, and modified to be more easily customizable (I hope!). The colors and sizes are mostly defined at the top of the class.

The important functions inside CustomPreloader are as follows (they are all near the top of the class):

clear() - draws the background color/gradient

createAssets() - creates the assets (logo, progress bar, loading textfield) and positions them on the stage

draw() - draws the progress bar as the application is loading

Here is a screenshot of the preloader, click on the image to view the flex application in a new window:




** I've subsequently written a test application which is very useful when designing your custom preloader, check it out here: Showing the preloader again after loading.

Quick links:

CustomPreloader (View Source HTML)

CustomPreloader.as (direct download)

More Custom Preloaders and Tutorials

Wisebisoft Custom Flex 3 Preloader (Example)

A Preloader Museum

JesseWarden: Making A Cooler Flex Preloader (Example)

Totally Custom Preloader

Cool Loading Animated Gifs

Ted On Flash: Flex 2 Preloaders

Flex Converter: Currency, Weight, Temperature...

I've written a little Flex app that handles converting between a variety of formats:

Currency (using the www.webservicex.net Currency Convertor service)

Weight (Pounds/KG)

Distance (Kilometers/Miles)

Temperature (°C/°F)

Pace (minutes per km/mile)

Baking measurements (tablespoons, teaspoons, cups, ml)

The currency conversion can be quite slow because it is using the free web service mentioned above. All the other conversions are simply mathematical.

See the example below (right click to view source):

Resizable Containers (Flex 3)

Please go here for Flex 4 Spark Resizable Controls.

I previous posted a blog on a Resizable Movable Panel control which was an extension of the TitleWindow class which let the user drag the panel titlebar to move it around the screen, and drag a small resize handle in the bottom right corner to resize the panel.

I've made some updates to this class, and further extended it to support not just Panel/TitleWindow containers, but also Box (VBox/HBox), Canvas, and TextArea (similar to what Google Chrome does).

The main class that does all the work is called ResizeManager. It adds a small resize component in the bottom right corner of the container that when dragged resizes the container.

Here is an example (right click to view source). Let me know what you think!


Important: the resize containers do not resize properly if you set the resizeEffect property.

For a similar project that is devoted to movable windows, check out the MDI project which is now part of the FlexLib project.

November 30th 2009 Update: I've updated the MoveManager adding two new fields. Setting the MoveManager.constrainToParentBounds to true will cause the component's movement to be restricted to the parent's bounds. You can also set your own custom bound's constraint by setting the constrainToBounds property to a Rectangle. The way this works is by passing that bounding Rectangle into the move component's startDrag(false, bounds) function.

December 23rd 2009 Update: I've updated the MoveManager and ResizeWindow classes to fix a problem that occurred when movable="true" and resizable="true" and no dragComponent was set. Now the move and resize should work properly.

January 5th 2010 Update: I've updated the MoveManagerand ResizeManagerclasses to use custom cursors for moving and resizing. You can also set the MoveManager.moveIcon and ResizeManager.resizeIcon properties to use your own custom icons, or just edit those classes directly and change the [Embed(source="...")] metadata tags.
The move cursor is only shown when the mouse is down. The resize cursor is shown when the mouse is over the resize handle and when the resize is happening. There might be some problems with the resize cursor getting stuck always on, but hopefully it's a good starting point.

March 4th 2010 Update: I've separated the move/drag and resize handles into separate stand-alone components: DragHandle and ResizeHandle. The colors of the handles can be customized using styles. You can also control how many rows and columns of dots are shown in the handles. Alternatively you can explicitly set a width and height for the drag/resize handles and the number of dots will be calculated automatically to fill the space. The size of the dots is configurable too.

I also added a new properties to the resize components - bringToFrontOnResize, and bringToFrontOnMove (ResizableWindow only). These properties determine whether the components should be brought to the front to be on top of the other siblings. By default these properties are false. It only makes sense to set these values to true if the parent container is using an absolute layout.

I've put up a blog post about the DragHandle and ResizeHandle if you're interested.

September 15th 2010 Update: I added a new component - ResizableButton. There were a few things that had to be changed to make it resizable and movable since it is not a Container. The main difference is that the Button class by default has the mouseChildren property set to false, which prevents the move and resize handles from getting mouse events.

VPN Blocking port 80 (not Flex related)

This post has nothing to do with Flex, but caused me to waste many hours yesterday so I thought I'd post it in case it helps someone else.

I recently uninstalled Cisco VPN (on my Windows XP machine), and after rebooting I could no longer use port 80. At first I thought I couldn't access the internet at all. Then I realized that I had an IP address, and I could ping google. Then I realized I could still FTP (port 21 and 22), and then I tried accessing a website that uses port 8080 and it worked. So I realized my problem was that port 80 was being blocked. After a little searching I came across this blog that helped solve me problem:

http://beer234.blogspot.com/2008/10/port-80-blocked-windows-xp.html

The gist of it is that if VPN isn't properly uninstalled then it leaves behind a firewall that blocks port 80. I have no clue why mine wasn't uninstalled properly. Anyways, if for some reason the link to the blog above doesn't work, here are the steps:

1. Restart the Windows XP PC in Safe Mode (press some combination of Shift, F5, F8 when booting up your computer)
2. Run Regedit.exe to open the registry editor
3. Navigate to HKEY_LOCAL_MACHINE\System\CurrentControlSet\Services\vsdatant
4. Select start in the right pane and modify the value to 3 (mine was set to 2)
5. Restart the PC and port 80 should no longer be blocked and you can use http with any browser

Amazing that so many hours could be wasted and all it took was changing a 2 to a 3 in the registry!

Filtering and Highlighting Lists and DataGrids

I've written a FilterBox control that filters the data inside List and DataGrid components, and another one that highlights items.

See the example below for filtering and highlighting a List. I've included a few extra item renderers for showing checkboxes, and for highlighting DataGrid columns.
(View source enabled)



There are some limitations, such as it only highlights the first occurrence of the text. And I probably could have used data binding instead of passing in a function to the TextHighlighter, but hey - it's a work in progress.

If you use the FilterBox control, you might notice that it depends on a ButtonBox component. This is my implementation of a CheckBoxList, which has the same basic functionality as a List, but maps each data item in the list to a CheckBox, and doesn't re-use item renderers the way Lists do. This way you don't have to have a selectedField property in your data. I've noticed that the ButtonBox control doesn't scale very well if you have more than a few hundred items in the list.