Calendar

August 2009
S M T W T F S
« Jul   Sep »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Tag Cloud

Categories

Archives

Recent Posts

Recent Comments


« Strange Bedfellows | Main | My Adobe MAX 2009 Sessions »

FabulousFlex Preloaders

By Rich Tretola | August 11, 2009
3,688 views

Recently a co-worker was asking me about creating custom pre-loaders for images within Flex applications. I mentioned that I had been using a library called FabulousFlex which can be downloaded at http://strawberrypixel.com/blog/downloads/

This simple pre-load library handled all of my needs and is quite simple to use. So, I thought I would share. Here is the code for the sample below. I also have code view enabled within the sample.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="absolute"
                xmlns:fabulousFlex="fabulousFlex.*"
                viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;
            import fabulousFlex.PreloadingImage;
            import fabulousFlex.SquaresSpinnerPreloadingWindow;
            import fabulousFlex.ProgressPreloadingWindow;
            import fabulousFlex.SquaresPreloadingWindow;
            import fabulousFlex.WheelPreloadingWindow;

            private function clickHandler(event:ItemClickEvent):void {
                switch (event.index) {
                    case 0:
                        img.preloaderTitleWindow=SquaresSpinnerPreloadingWindow;
                        img.source="http://farm4.static.flickr.com/3265/2734695541_5b032ab199_o.jpg";
                        break;
                    case 1:
                        img.preloaderTitleWindow=ProgressPreloadingWindow;
                        img.source="http://farm3.static.flickr.com/2310/2740286778_9a104793dc_o.jpg";
                        break;
                    case 2:
                        img.preloaderTitleWindow=SquaresPreloadingWindow;
                        img.source="http://farm4.static.flickr.com/3085/2743779079_4d8c1a338f_o.jpg";
                        break;
                    case 3:
                        img.preloaderTitleWindow=WheelPreloadingWindow;
                        img.source="http://farm4.static.flickr.com/3261/2750168833_04b1a6d442_o.jpg";
                        break;
                    default:
                        trace("Nothing");
                }
            }
        ]]>
    </mx:Script>

    <mx:Label text="Be sure to clear your cache to see the pre-loaders."
              horizontalCenter="0"
              top="15"
              fontWeight="bold"
              fontSize="15"/>

    <mx:ButtonBar borderStyle="solid"
                  top="50"
                  horizontalCenter="0"
                  itemClick="clickHandler(event);">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="SquaresSpinnerPreloadingWindow"
                           icon="@Embed(source='icons/2734695541_5b032ab199_o.jpg')"/>
                <mx:Object label="ProgressPreloadingWindow"
                           icon="@Embed(source='icons/2740286778_9a104793dc_o.jpg')"/>
                <mx:Object label="SquaresPreloadingWindow"
                           icon="@Embed(source='icons/2743779079_4d8c1a338f_o.jpg')"/>
                <mx:Object label="WheelPreloadingWindow"
                           icon="@Embed(source='icons/2750168833_04b1a6d442_o.jpg')"/>
            </mx:Array>
        </mx:dataProvider>
    </mx:ButtonBar>


    <fabulousFlex:PreloadingImage id="img"
                                  height="625"
                                  width="945"
                                  top="80"
                                  horizontalCenter="0"/>

</mx:Application>

Be sure to clear your cache to see the pre-loaders.
RUN THE SAMPLE

Topics: Flex, Tutorials | 3 Comments »

3 Responses to “FabulousFlex Preloaders”

  1. Chinmay Says:
    August 11th, 2009 at 8:51 am

    great preloaders, many times we continue with the default preloader just because we dont know how to change it. this will really help.

    n ya those background images are awesome.

    Reply to this comment

  2. Justin (coldfusion guy) Says:
    August 11th, 2009 at 10:03 pm

    Rich thanks for the find, custom application preloaders for flex are great too when you have styled your app and need your ui to be consistent.

    Reply to this comment

  3. Rajiv Totlani Says:
    December 28th, 2009 at 2:47 am

    Good source Rich,

    I found a website with many appealing preloaders, http://www.flexdownoads.com has many that are pretty fancy and all under $10

    Reply to this comment

Comments