Snackr is a RSS ticker which pulls random items from your favorite feeds and scrolls them across your computer desktop. It keeps you up to date in a very simple way.

Snackr does run on the Linux AIR alpha that Adobe just released, but it doesn’t look right (animations are glitchy, transparency doesn’t work). It should be functional, though. You’ll need to download the runtime manually for now. Click here to download it

To get more about it please check out the following Video.

Indeterminate ProgressBar control shows time-based processes for which the scope of task is not yet determine. As soon as you can determine the scope, you should use a determinate ProgressBar control.

Determinate ProgressBar control is a linear representation of the progress of a task over time. You use a determinate ProgressBar when the scope of the task is known. It displays when the user has to wait for an extended amount of time.
You can create a progress bar by:

If progress bar mode is manually You can set progress bar value manually but The ProgressBar control shows a visual progress of a task over time. There are two types of ProgressBar controls: Determinate and Indeterminate.

Indeterminate ProgressBar control shows time-based processes for which the scope of task is not yet determine. As soon as you can determine the scope, you should use a determinate ProgressBar control.

Determinate ProgressBar control is a linear representation of the progress of a task over time. You use a determinate ProgressBar when the scope of the task is known. It displays when the user has to wait for an extended amount of time.

ProgressBar control modes

You use the mode property to specify the operating mode of the ProgressBar control. The ProgressBar control supports the following modes of operation:

event : You generally use a determinate ProgressBar in this mode. The ProgressBar control only updates if the value of the source property extends the EventDispatcher class. This is the default mode.

You also use this mode if you reload an image and Image controls to load multiple images.

polled: Use the source property to specify a loading process that exposes the bytesLoaded and bytesTotal properties. You generally use a determinate ProgressBar in this mode.

manual : Set the maximum, minimum, and indeterminate properties along with calls to the setProgress() method. generally use an indeterminate ProgressBar in this mode.

You can create a progress bar by:
<mx:ProgressBar width="200" mode="polled"/>

Here you can get complete syntax of progressbar control.

<mx:ProgressBar
    Properties
    conversion="1"
    direction="right|left"
    indeterminate="false|true"
    label="No default"
    labelPlacement="bottom|top|left|right|center"
    maximum="0"
    minimum="0"
    mode="event|polled|manual"
    source="No default"
  
    Styles
    barColor="undefined"
    barSkin="ProgressBarSkin"
    borderColor="0xAAB3B3"
    color="0x0B333C"
    disabledColor="0xAAB3B3"
    fontAntiAliasType="advanced"
    fontFamily="Verdana"
    fontGridFitType="pixel"
    fontSharpness="0"
    fontSize="10"
    fontThickness="0"
    fontStyle="normal|italic"
    fontWeight="normal|bold"
    horizontalGap="8"
    indeterminateMoveInterval="26"
    indeterminateSkin="ProgressIndeterminateSkin"
    labelWidth="Computed"
    leading="0"
    maskSkin="ProgressMaskSkin"
    paddingLeft="0"
    paddingRight="0"
    textAlign="left|right|center"
    textDecoration="none|underline"
    textIndent="0"
    themeColor="haloGreen|haloBlue|haloOrange"
    trackColors="[0xE6EEEE,0xE6EEEE]"
    trackHeight="Calculated"
    trackSkin="ProgressTrackSkin"
    verticalGap="6"
  
    Events
    complete="No default"
    hide="No default"
    progress="No default"
    show="No default"
  
    Effects
    completeEffect="No default"
  />

If progress bar mode is manual then you can set progress bar value by setProgress method. Here is the syntax:
setProgress(Number completed, Number total)

By default, the ProgressBar displays the label LOADING xx%, where xx is the percent of the image loaded. You use the label property to specify a different text string to display.

The label property lets you include the following special characters in the label text string:

%1 Corresponds to the current number of bytes loaded.
%2 Corresponds to the total number of bytes.
%3 Corresponds to the percent loaded.
%% Corresponds to the % sign.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">
    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                progressBar.setProgress(evt.value, progressBar.maximum);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="Set Progress bar by moving slider:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="360"
                        value="0"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="10"
                        change="slider_change(event);"
                        width="{progressBar.width}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ProgressBar id="progressBar" mode="manual" minimum="0"maximum="360" />

</mx:Application>

Soon I will post some more flex progress bar code example.

The FileReference class provides a means to upload and download files between a user’s computer and a server.

An operating-system dialog box prompts the user to select a file to upload or a location for download. Each FileReference object refers to a single file. You can get information about file like Name of file, Size of file, date of creation and date of modification etc. with the help of FileReference properties.

FileReference instances are created by the following ways:
var myFileReference = new FileReference();

By default, the system open file dialog box allows users to select any file type from the local computer, although you can specify one or more custom file type filters by passing an array of file filter instances to the browse() method:

var imageTypes:FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png");
var textTypes:FileFilter = new FileFilter("Text Files (*.txt, *.rtf)", "*.txt; *.rtf");
var allTypes:Array = new Array(imageTypes, textTypes);
var fileRef:FileReference = new FileReference();
fileRef.browse(allTypes);

When you attempt to upload a file using the FileReference.upload() method, any of the following events may be dispatched:

• Event.OPEN: Dispatched when an upload operation starts.
• ProgressEvent.PROGRESS: Dispatched periodically during the file upload operation.
• Event.COMPLETE: Dispatched when the file upload operation completes successfully.
• SecurityErrorEvent.SECURITY_ERROR: Dispatched when an upload fails because of a security violation.
• HTTPStatusEvent.HTTP_STATUS: Dispatched when an upload fails because of an HTTP error.
• IOErrorEvent.IO_ERROR: Dispatched if the upload fails because of any of the following reasons:
• • An input/output error occurred while Flash Player is reading, writing, or transmitting the file.
  • The SWF tried to upload a file to a server that requires authentication (such as a user name and password). During upload, Flash Player does not provide a means for users to enter passwords.
  • The url parameter contains an invalid protocol. The FileReference.upload() method must use either HTTP or HTTPS.

You can declare event and there call back function is as follow:

fileRef.addEventListener(Event.SELECT, fileRef_select);
fileRef.addEventListener(ProgressEvent.PROGRESS, fileRef_progress);
fileRef.addEventListener(Event.COMPLETE, fileRef_complete);

The above code statement declares that on occurring any of the above declared event which function should be call.

The following example shows you how you can use the FileReference class’s browse() method to allow users to select and upload a single file to a Web server.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/21/uploading-files-in-flex-using-the-filereference-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            private var fileRef:FileReference;

            private const FILE_UPLOAD_URL:String = "http://www.yourdomain.com/services/upload.php";

            private function init():void {
                fileRef = new FileReference();
                fileRef.addEventListener(Event.SELECT, fileRef_select);
                fileRef.addEventListener(ProgressEvent.PROGRESS, fileRef_progress);
                fileRef.addEventListener(Event.COMPLETE, fileRef_complete);
            }

            private function browseAndUpload():void {
                fileRef.browse();
                message.text = "";
            }

            private function fileRef_select(evt:Event):void {
                try {
                    message.text = "size (bytes): " + numberFormatter.format(fileRef.size);
                    fileRef.upload(new URLRequest(FILE_UPLOAD_URL));
                } catch (err:Error) {
                    message.text = "ERROR: zero-byte file";
                }
            }

            private function fileRef_progress(evt:ProgressEvent):void {
                progressBar.visible = true;
            }

            private function fileRef_complete(evt:Event):void {
                message.text += " (complete)";
                progressBar.visible = false;
            }
        ]]>
    </mx:Script>

    <mx:NumberFormatter id="numberFormatter" />

    <mx:Button label="Upload file"
            click="browseAndUpload();" />
    <mx:Label id="message" />
    <mx:ProgressBar id="progressBar"
            indeterminate="true"
            visible="false" />

</mx:Application>

In the above example we take a progress bar which will show the progress of file uploading. We also take a button which opens a system file open dialog box to select file from local computer.

When ever the above flex code gets execute first of all init() function will run. Using this function we create instance of FileReference and declare call back function for three FileReference events SELECT, PROGRESS and COMPLETE.

When we system dialog box using browse() and user will select a file from local computer at that time SELECT event will fire and the declared method will call to upload file at server by Upload().

When file uploading start at server to show uploading process we set the progress bar value at every time when PROGRESS event fire.

When file uploaded successfully at the server COMPLETE event fire we write appropriate code in that function which do what we want to do after file uploaded at server.

Please write a file for handling uploading using php and upload at the server and set its URL in the flex code. You can get lots of example of php file uploading just search on google.

The above code example upload single file at a time. If you want to allow users to upload multiple files at once, you would use the FileReferenceList class instead of FileReference.

I will post a example for FileReferenceList in my next post.

I hope the above information helps a lot if you have any query then feel free to ask. Please post your comment for the motivation to posting me information about flex here. if you need any other code example please let me know.