Dynamicdiscussion component

Flex3 architecture and features

Flex3 architecture and features

I am evaluating Adobe Flex technology to do rich internet applications. Sometimes a picture is worth a thousand words: so in the following I sketched an overview of Flex programming capabilities.Diagram focuses on how to create a Flash Application (compiling MXML and Actionscript files using the free Flex SDK) and on what kind of interactions a Flex-made application can perform with external systems.

Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems.

Protocols

• AMF (Action Message Format) used for serializing objects
• RTMP (Real Time Messaging protocol) used for messaging
  

Action Message Format or AMF is a binary format based loosely on the Simple Object Access Protocol (SOAP). It is used primarily to exchange data between an Adobe Flash application and a database, using a Remote Procedure Call.Each AMF message contains a body which holds the error or response, which will be expressed as an ActionScript Object.AMF was introduced with Flash Player 6, and this version is referred to as AMF 0. It was unchanged until the release of Flash Player 9 and ActionScript 3.0, when new data types and language features prompted an update, called AMF 3. Adobe Systems published the AMF binary data protocol specification on December 13, 2007 and announced that it will support the developer community to make this protocol available for every major server platform.

Real Time Messaging Protocol (RTMP) is a proprietary protocol developed by Adobe Systems for streaming audio, video and data over the Internet, between a Flash player and a server.

The RTMP protocol has three variations:

1. The "plain" protocol which works on top of TCP and uses port number 1935
2. RTMPT which is encapsulated within HTTP requests to traverse firewalls
3. RTMPS which works just like RTMPT, but over a secure HTTPS connection.

While the primary motivation for RTMP was a persistent protocol for Flash, it is also used in some other applications, such as the Adobe LiveCycle Data Services ES.

Flex 3 features

The Flex 3 release is divided into four major themes: designer/developer workflow, working with data, Adobe AIR applications, and platform evolution. Let's quickly review some of the highlights:

• Native support for Adobe AIR – Flex 3 introduces new components and incorporates the Adobe AIR development tools into the SDK and Flex Builder.
• Persistent framework caching – You can make Flex 3 applications as small as 50K when leveraging the new Flash Player cache for Adobe platform components.
• Flex Builder productivity enhancements – Flex Builder 3 introduces refactoring support, new profilers for performance and memory tuning, and code generation tools for data access.
• Integration with Creative Suite 3 – The Flex Component Kit for Flash CS3 allows Flash CS3 users to build components that can be seamlessly integrated into a Flex application, while Flex Builder 3 adds new wizards for importing assets from CS3 applications as skins.
• Advanced DataGrid – The Advanced DataGrid is a new component that adds commonly requested features to the DataGrid such as support for hierarchical data, and basic pivot table functionality.
• First steps toward open source Flex. As a first step toward making Flex an open source project, we've opened up the Flex and Flex Builder bug tracking system to the public, as well as published detailed roadmap information.

Polymorphism

The final concept I cover in this article is polymorphism. The concept behind polymorphism is based on the idea of different classes implementing the same method names.

Even though this is a very simple concept, polymorphism has some interesting implications. The first major advantage is that it allows classes to be interchangeable at runtime. There are no hard-coded references to specific method names for specific classes.

For example, imagine you have a Teacher class and a Student class. You could implement a teach method for the teacher and a study method for the student, but polymorphism allows you to write the code so that the two classes both implement a work method. Although a Teacher and Student class will clearly have a different implementation of a work method (one teaches, the other studies), you can use a shared generic method name, creating a single interface through which they can be accessed:

Teacher.as

package com.adobe.ooas3 {
 public class Teacher {
   public function work():void {
     trace("I am teaching");
   }
 }
}
Student.as
package com.adobe.ooas3 {
 public class Student {
   public function work():void {
     trace("I am studying");
   }
 }
}

Any class that gets passed an instance of either the Teacher or Student class does not need to do any type checking to determine whether it is dealing with a teacher or a student instance (or any other class implementing the same methods for that matter) but it can directly call the work method.

You can enforce polymorphism between classes through the use of something called interfaces. These are similar to classes in that they define a set of methods, but interfaces are different than classes because they do not have an implementation. Interfaces simply define a "contract" of the methods a class needs to implement in order to be valid.

Here's an example of an interface called IWork:

IWork.as

package com.adobe.ooas3 {
 public interface IWork {
   function work():void;
 }
}

As you can see from the code above, an interface looks suspiciously like any other class. But there are a few differences. Most developers choose to name an interface name so that it begins with a capital I (a common naming convention for interfaces, although it is optional). Also, instead of a class keyword, interfaces use the interface keyword. Additionally, as you analyze the code, you'll see that in the section where you would expect to see some code for the work method, only its method signature is defined.

The interface above requires that any class that implements it must have a method called work that has a return type of void.

Let's see how the Teacher and Student class implement this interface:

Teacher.as

package com.adobe.ooas3 {
 public class Teacher implements IWork {
   public function work():void {
     trace("I am teaching");
   }
 }
}

Student.as

package com.adobe.ooas3 {
 public class Student implements IWork {
   public function work():void {
     trace("I am studying");
   }
 }
}

That was easy. By simply adding the implements keyword, you now have set up both the Teacher and Student classes so that they are required to implement the work method. If you try removing or renaming the work method from either of the two classes, you'll receive a compile-time error message.

By having classes all implement a common interface, the interface can actually be used as a data type. Let's look at the following example:

Supervisor.as

package com.adobe.ooas3 {
 public class Supervisor {
   public function Supervisor(worker:IWork) {
     worker.work();
   }
 }
}

In the example above, you have a Supervisor class that can be passed an instance of a class implementing the IWork interface. In this way, the interface is being used as a data type.

The ActionScript compiler knows that any class instance implementing this IWork interface will have the work method defined. Therefore, it doesn't complain about a possibly undefined method when the code is compiled.

You can quickly test the Supervisor class by pasting the following code on the first Frame in the main Timeline of a blank FLA in Flash CS3 Professional:

import com.adobe.ooas3.*;
var supervisor1:Supervisor = new Supervisor(new Teacher());
var supervisor2:Supervisor = new Supervisor(new Student());

If you run Test Movie (Control > Test Movie), you'll see two lines appear in the Output panel. The first line displays "I'm teaching" and the second displays "I'm studying" (see Figure 3). These trace statements are, of course, exactly what you'd expect by passing a new teacher and student instance to the Supervisor constructor.

Figure 3. Output panel of the Supervisor class using polymorphism

Type casting

That brings up the next question: What happens when you try to access class-specific methods or properties of Teacher or Student (other than the work method) that weren't defined in the interface?

The Supervisor class uses the IWork data type for any instance that is passed to its constructor – so if you were to call any other method, the compiler has no way of knowing whether that is implemented. The compiler will report an error.

You can work around this is by using something called type casting by converting the instance from this generic IWork data type back to the Teacher or Student instance.

The way this is accomplished is by using the is and as keywords, as follows:

package com.adobe.ooas3 {
 public class Supervisor {
   public function Supervisor(inst:IWork) {
     if(inst is Teacher) {
       var teacher:Teacher = inst as Teacher;
       trace(teacher.tenure);
     }
     if(inst is Student) {
       var student:Student = inst as Student;
       trace(student.averageGrade);
     }
   }
 }
}

In the code above, the is keyword checks whether the worker instance passed to the constructor is of the specific type Teacher or of the type Student.

If it is a teacher instance using the as keyword, you are able to type cast the instance to that specific class, so you can access its specific methods and properties. In this case you could, for example, have a Boolean tenure property set in the Teacher class.

The same holds true if we're dealing with a student instance. If the is keyword confirms that you are working with a student, you can type cast the generic IWork instance to a student instance and access the averageGrade property.

This is a very useful behavior. You can see how using polymorphism in this way benefits your projects when you have a collection of classes that need to accept any number of data types, as long as they implement a common interface. When you need to get into the specific method implementations of the class implementing the interface, type casting makes this possible.

Where to go from here

This article walked through the basics of object-oriented programming in ActionScript 3.0. From the concept of classes, the building blocks of your application, through inheritance, encapsulation, and polymorphism.

You learned how classes can extend each other through subclassing or by using composition. Additionally, you now know how to restrict access to your class by using access modifiers and providing an API with getter/setter methods. Finally, you've seen how you can enforce multiple classes to implement the same set of methods through the use of interfaces and how to convert generic instances back to a specific implementation by using type casting.

That's quite a feat. If you've followed along, you are now ready to start putting these new concepts into practice and reap the benefits of object-oriented programming in your ActionScript 3.0 projects.

Be sure to check out the ActionScript Technology Center for more in-depth articles and tutorials, and to gain more knowledge of working with ActionScript 3.0.

If you haven't already, take a look at the Flash Quick Starts to get more specific information about classes and programming tips on developing Flash applications in ActionScript 3.0.

Encapsulation

Now let's move on to another important principle of OOP called encapsulation. The underlying concept of encapsulation deals with what methods and properties your class exposes to the outside world.

Up until this point you've always set methods and properties as public, but is that really what you'd want to do?

If you want your code to be stable, and if you want to develop projects that are least prone to bug and errors, you'll want to restrict the ways in which other classes can interact with your code.

The key here is to only have those methods and properties available that are required as settings for the class, and restrict access to the rest. Using this approach, you'll have a limited number of places in your code to debug when something goes wrong in the interaction with your class.

ActionScript 3.0 includes the following keywords as access modifiers to methods and properties:

• public: allows access from anywhere
• private: can only be accessed within its own class
• protected: can only be accessed within own class and subclasses
• internal: can be accessed by all classes in same package

Let's put this concept into practice. Take a look at the following example:

Person.as

package com.adobe.ooas3 {
public class Person {
  private var _age:Number;

  public function get age():Number {
    return _age;
  }

  public function set age(val:Number):Boolean {
    if(_age < _age =" val;">           
 The code example above shows a Person class with a private property _age of a Number type. Even though you want to allow the age of the person to be set,             you still opted not to use a public property here. Instead you are routing the             age value through the use of a getter/setter method.
           
Getter/setter methods (as             implemented in the previous example) appear as if they are properties, but they             behave like methods.
           
When you set the age property, it calls the age setter method that assigns the value to the private _age property after validating it. In this case, you know that a person's age can't             be a negative value. If the given value is valid, the setter method returns true, or             else returns false.
           
The major advantage of this             approach is that every time the age property is set, validation occurs because the age             value is always routed through the setter function. If the age property were set as public, every method in your class that wants to use the age property would first need to check if its current value is valid.

classes

What are classes?

Classes are nothing more than a collection of functions (called methods in this context) that provide a blueprint for any number of instances that are created from it. By changing some variables (or in OOP terminology, properties) of a class instance, or by passing different values as arguments to its methods, the same underlying class can have widely different outcomes.

Another way of understanding a class is to compare the tasks performed in the Flash authoring environment. While ActionScript classes are created programmatically, they are basically analogous to the concept of importing assets and then working with symbols in the Library panel and the symbol copies (instances) on the Stage. The symbol instances on the Stage are similar to class instances. The different instances on the Stage—despite coming from the same symbol—can each individually have different properties settings that affect how they appear (such as color, alpha transparency, rotation, and so on).

The ability to generate multiple instances (that can appear and behave differently) from the same object is one of the reasons why classes are so powerful. An ActionScript class is even more powerful than a symbol in the Library because, as a developer, you have complete control over how an object looks and behaves. There are many properties and methods accessible using ActionScript 3.0 that you cannot access through the Flash authoring interface. Additionally, ActionScript classes make it possible to dynamically animate objects during runtime that are outside the scope of timeline-based animations. Finally, writing your own ActionScript classes promotes reusability because the functionality you create can be repurposed.

Let's see how this looks in code:

Brick.as

package com.adobe.ooas3 {
 public class Brick
  {
   public var color:String = "red";
   public function Brick() {
     trace("new "+ color +" brick created");
   }
 }
}

The Brick.as code above illustrates one of the most basic implementations of an ActionScript 3.0 class. The class holds just a single method and property. As you walk through each line of code, the following facts come to light:

• First, a package is defined. Packages allow you to structure your code in folders on your hard drive and prevent class name conflicts. In this example, the class is saved as Brick.as (the exact case-sensitive class name), inside a folder named "ooas3", which in turn is stored in an "adobe" folder that itself is contained within a folder called "com".

  By convention, package names are usually the domain name of the project in reverse order, followed by the project name. Doing this ensures that the package name is unique and there is no risk of any other project's classes conflicting with your own.

• Then the class is defined and set as public (more about access modifiers later). In our example the class is named "Brick".
• The next line of code declares a public property "color" of a type String that we will be using in the class. The value of color is set to red. There are better ways of working with class properties—as you'll learn about when I discuss encapsulation.

• Finally, the Brick method is defined. Note that this is not just any method. Every class has a constructor, which is a method that is automatically called when a new instance of the class is created.

  You can easily recognize constructor methods because they always use the same name as the class within which it is defined. Knowing this, you can easily see that, for the Brick class, this Brick method is its constructor.

  Inside the method we are tracing out a message to the Output panel that reads: "new red brick created". The trace statement incorporates the value of the variable color, which we defined with a default value of "red."

To quickly test this class, launch Flash CS3 Professional, create a new blank ActionScript 3.0 FLA, and write the following lines of code on the first keyframe on the main Timeline:

import com.adobe.ooas3.Brick;
var firstBrick:Brick = new Brick();

If you run Test Movie (select Control > Test Movie), you'll see that the Output panel now displays "new red brick created" (see Figure 1).

Figure 1. Output panel of Brick class getting instantiated

The traced message in the Output panel means that your ActionScript 3.0 class is functioning correctly. Now it is time to start doing some more advanced things with classes.

Object-oriented programming with ActionScript 3.0

Basic OOP concepts: Inheritance vs. composition

There are just a handful of concepts at the core of OOP. This article covers the most important ones: inheritance, encapsulation, and polymorphism. I also discuss a few related topics to help you put these ideas into context.

Without a doubt, inheritance is the most well-known principle of OOP. Inheritance can be defined as the ability to inherit properties and methods and extend the functionality of an existing class in a new one.

If you're thinking ahead, you might imagine creating a new "Wall" class that extends the "Brick" class you created earlier. However, that is not how inheritance works.

Looking at the relationship between a brick and a wall, the best way to code this is not through inheritance but rather by a concept called composition.

A simple rule of thumb determines whether the relationship between classes is one that warrants inheritance or composition. If you can say class A "is a" class B, you're dealing with inheritance. If you can say class A "has a" class B, the relationship is one of composition.

Here are some examples of inheritance:

• Cat "is an" animal
• Engineer "is an" employee
• Rugby "is a" sport

Here are examples of composition:

• Wall "has a" brick
• Computer "has a" keyboard
• School "has a" teacher

So what is the difference in how inheritance and composition are implemented? Let's compare how this works, starting with inheritance:

Animal.as

package com.adobe.ooas3 {
 public class Animal {

   public var furry:Boolean;
   public var domestic:Boolean;
 
   public function Animal() {
     trace("new animal created");
   }
   }
}

The Animal.as code is the base Animal class, which you will now extend using inheritance with a Cat class:

Cat.as

package com.adobe.ooas3 {
 public class Cat extends Animal {
   public var family:String;
   public function Cat() {
     furry = true;
     domestic = true;
     family = "feline";
   }
 }
}

If you look at the Cat class, the constructor assigns values to three different properties. On close inspection, only one of these properties (family) is defined in the Cat class. The other properties (furry and domestic) come from the Animal base class.

While this not exactly the most practical example, you can see how class inheritance allows you to build upon existing functionality to create a new blueprint for you to start using as you develop your project.

Now if you wanted to create half a dozen cats, you could simply do this by instantiating the Cat class, which has all the properties already set up, rather than using the generic Animal class and having to define the properties again and again for each instance.

New in ActionScript 3.0 is an override keyword that is used when (you guessed it) you want to override a method defined in the class that you extended. This useful feature prevents you from accidentally running into naming conflicts with methods between classes that extend each other.

On the other hand, composition doesn't have any formal syntax like the extends keyword. Composition simply instantiates its own instance of any class it wants to use.

Let's take the Brick class created earlier. In this next example you'll create a Wall class that uses composition to instantiate instances of the Brick class:

Wall.as

package com.adobe.ooas3 {
 import com.adobe.ooas3.Brick;
 public class Wall {

   public var wallWidth:uint;
   public var wallHeight:uint;

   public function Wall(w:uint, h:uint) {
     wallWidth = w;
     wallHeight = h;
     build();
   }
   public function build():void {
     for(var i:uint=0; i

In the code above, the Wall class accepts two arguments passed to its constructor, defining the width and height in bricks of the wall you want to create.

Let's do a quick test of this class by instantiating it on the main Timeline of a blank FLA file:

import com.adobe.ooas3.Wall;
var myWall:Wall = new Wall(4,4);

If you run Test Movie (Control > Test Movie), you'll see that 16 Brick instances are created with corresponding trace statements displayed in the Output panel to create a 4 x 4 wall (see Figure 2).

Figure 2. Output panel of Wall class getting executed

Apart from the difference in class relationship between inheritance and composition (as I discussed earlier), composition has the advantage of being able to add functionality to another class at runtime. It allows you to have control over the creation and destruction of class instances, whereas with inheritance the relationship between the classes is fixed and defined at the time the code is compiled.

Pure Actionscript AIR Project in Flex Builder

Sometimes you want to create a small application and not bother with all flex/mxml stuff. Either it’s pure ActionScript, or it uses other framework than flex (yes, such thing exists!, for example ASwing or just V3 Components from CS3/CS4), you might want to set up an AIR project that starts from a simeple .as file.

Currently, there is no obvious option in the Flex Builder interface. But, as a matter of fact, it is quite simple. Create a FlexProject, select AIR - Desktop Application in the first screen and change Main application file from .mxml to .as

Then, add some code in the constructor of your main class:

public function ProjectName()
{
var win:NativeWindow =
new NativeWindow(new NativeWindowInitOptions());
win.activate();
win.addEventListener(Event.CLOSE, function():void {
NativeApplication.nativeApplication.exit(0);
});

win.stage.addChild(this);

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

graphics.lineStyle(1, 0, 1);
graphics.drawCircle(100, 100, 80);
}

If you already have a web application and want to create an AIR version of it, extend the main class with one that only adds the AIR hooks.

Top 10 Mistakes when building Flex Applications

For those new to Flex, check out recent Adobe Flex Basics to get a quick introduction to the framework and keep in ur mind following information when u working in flex....

In this post, Adobe’s James Ward teams up with InfoQ.com to bring you another Flex Top 10 (our most recent Flex Top 10). Flex is an open source application development framework for building rich Internet applications that run in the web with Flash Player, or on the desktop with Adobe AIR. Overall, Flex is a powerful framework that is easy to use, but today let's focus on some of the common mistakes that are made when building Flex applications.

To learn more visit:
http://www.infoq.com/news/2008/04/top-10-flex-mistakes

Some Other Links regarding Image galleries..

http://www.adobe.com/go/flex_photoviewer_app
http://www.flexer.info/2008/05/29/image-gallery-component-imagerail/

http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist

Imagegallery

Table of contents

1. Image Gallery Component – ImageRail
2. ImageRail – Adding Click Event, Styles And HandCursor

In this article I’ll present a new component I built: ImageRail. This MXML component will display a series of thumbnails having the possibility to scroll them horizontally.

Parameters:

• paths: an array containing URLs to images
• images: an array containing image objects
• imagesToShow: an unsigned integer that specifies the number of images displayed at a time – deafult is 4
• imagesGap: an unsigned integer that specifies the gap between images – deafult is 10
• passePartout: an unsigned integer that specifies the white padding around each image – deafult is 10
• effect: a function that in fact is the easing function (ex: Exponential.easing) and can be one of the following each having easeIn, easeOut and easInOut – deafult is Exponential.easeOut
  • mx.effects.easing.Back
  • mx.effects.easing.Bounce
  • mx.effects.easing.Circular
  • mx.effects.easing.Cubic
  • mx.effects.easing.Elastic
  • mx.effects.easing.Exponential
  • mx.effects.easing.Linear
  • mx.effects.easing.Quadratic
  • mx.effects.easing.Quartic
  • mx.effects.easing.Quintic
  • mx.effects.easing.Sine
• effectDuration: an unsigned integer that specifies the duration in milliseconds – deafult is 500
• height: a number that specifies the height of the component, based on which all others measures are calculated – deafult is 120
• width: a number that specifies the width – if it is not set imagesToShow will be used instead

First two parameters excludes one another and images array has priority over paths so if you specify both paths and images only images will be populated. If paths will be used then both arrays will be populated and the values in images array will be created based on paths array.

We will use:

• sequence – to use more than one movement effects, but we will use only one
• effect – our movement effect
• canvas – component is extending canvas and used also for every image and for all images
• image – used to display images
• button – used for next and previous

The code is very well commented so you won’t find any problems understanding what is done there. So first lets see the component in action.
height, width, gap, passePartout and effectDuration are set.

The next example is a more complex one. You can see how ImageRail’s properties are updated with the ones specified in controls.
--> In this example you may notice that the size of the images are calculated based on the component height and by changing its height the images are also resized.

Below you can find the code of each file (not the component because of its size) and at the end you can download all sources.

ImageRailApp.mxml – the complex application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="absolute" creationComplete="init()" xmlns:flexer="com.flexer.*">
   <mx:VBox>
       <mx:Canvas>
           <mx:Label x="10" y="10" text="height"/>
           <mx:Label x="108" y="10" text="imagesToShow"/>
           <mx:Label x="206" y="10" text="gap"/>
           <mx:Label x="304" y="10" text="passePartout"/>
           <mx:Label x="402" y="10" text="width"/>
           <mx:Label x="10" y="56" text="effect"/>
           <mx:Label x="108" y="56" text="effectDration"/>
           <mx:NumericStepper x="10" y="26" id="cmpH"
               value="130" minimum="90" maximum="200" width="90"/>
           <mx:NumericStepper x="108" y="26" id="picsToShow"
               value="2" minimum="0" maximum="10" width="90"/>
           <mx:NumericStepper x="206" y="26" id="imageGap"
               value="12" minimum="0" maximum="50" width="90"/>
           <mx:NumericStepper x="304" y="26" id="passePartout"
               value="12" minimum="0" maximum="50" width="90"/>
           <mx:NumericStepper x="402" y="26" id="cmpW" value="500"
               minimum="0" maximum="800" stepSize="10" width="90"/>
           <mx:ComboBox x="10" y="72" id="effect" selectedIndex="5"
               dataProvider="{easingFunctions}" width="90"/>
           <mx:NumericStepper x="108" y="72" id="effectDuration"
               value="500" minimum="100" maximum="5000" stepSize="10" width="90"/>
       mx:Canvas>
       <flexer:ImageRail height="{cmpH.value}" width="{cmpW.value}"
           paths="{_paths}" gap="{imageGap.value}" imagesToShow="{picsToShow.value}"
           passePartout="{passePartout.value}" effectDuration="{effectDuration.value}"
           effect="{effect.selectedItem.easingClass.easeOut}"/>
   mx:VBox>
   <mx:Script>
       [CDATA[
           import mx.controls.Image;
           import mx.effects.easing.*;

           [Bindable]
           public var easingFunctions:Array = [
               {label: "Bounce", easingClass: Bounce},
               {label: "Back", easingClass: Back},
               {label: "Circular", easingClass: Circular},
               {label: "Cubic", easingClass: Cubic},
               {label: "Elastic", easingClass: Elastic},
               {label: "Exponential", easingClass: Exponential},
               {label: "Linear", easingClass: Linear},
               {label: "Quadratic", easingClass: Quadratic},
               {label: "Quartic", easingClass: Quartic},
               {label: "Quintic", easingClass: Quintic},
               {label: "Sine", easingClass: Sine}
           ];

           [Bindable]
           private var _paths:Array = [
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/fxr-4_1280x1024.png",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/Fx{r}-4_1280x1024.png",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/AuroraDream_by_DP_Studios1280x1024.jpg",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_grass_1280x1024.jpg",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_hairdresser_1280x1024_h.jpg",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_hairdresser_1280x1024_v.jpg",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_friends_c2_1280x1024.jpg",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/Fx{r}-4_1280x1024.png",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/AuroraDream_by_DP_Studios1280x1024.jpg",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_grass_1280x1024.jpg",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_hairdresser_1280x1024_h.jpg",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_friends_c2_1280x1024.jpg",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_fifa_1280x1024.jpg"
           ];

       ]]>
   mx:Script>
mx:Application>

ImageRailApp2.mxml – simpler application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="absolute" creationComplete="init()" xmlns:flexer="com.flexer.*">
   <mx:VBox>
       <flexer:ImageRail id="ir" height="130" width="430"
           gap="20" passePartout="24" effectDuration="700"/>
   mx:VBox>
   <mx:Script>
       [CDATA[
           import mx.controls.Image;

           [Bindable]
           private var _paths:Array = [
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/fxr-4_1280x1024.png",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/Fx{r}-4_1280x1024.png",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/AuroraDream_by_DP_Studios1280x1024.jpg",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_grass_1280x1024.jpg",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_hairdresser_1280x1024_h.jpg",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_hairdresser_1280x1024_v.jpg",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_friends_c2_1280x1024.jpg",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/Fx{r}-4_1280x1024.png",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/AuroraDream_by_DP_Studios1280x1024.jpg",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_grass_1280x1024.jpg",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_hairdresser_1280x1024_h.jpg",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_friends_c2_1280x1024.jpg",
               "http://www.flexer.info/wp-content/uploads/2008/05/imgs/vladstudio_fifa_1280x1024.jpg"
           ];

            [Bindable]
           private var _images:Array = new Array();                       

           private function init():void
           {
               for (var i:uint = 0; i < _paths.length; i++) {
                   // creating images
                   var image:Image = new Image();
                   image.source = _paths[i];
                   // adding image to images array
                   _images.push(image);
               }
               ir.images = _images;
           }
       ]]>
   mx:Script>
mx:Application>

I think you noticed that our component is located in com/flexer folder. That why we use

xmlns:flexer="com.flexer.*"

and

<flexer:ImageRail...

This is the component and from the two mini applications you can see how it can be used. There enough space to extend it and to use it in many applications.

What else can be added? Here are just some thoughts:

1. a parameter to make it circular (when it gets to end it should display the first images after the last) – this is a complex job and there are a couple of ways doing it
2. titles for images
3. a parameter to use an XML to tell the URLs to images and the titles
4. events on images

A very nice article about easing by James Ward is here and the demo is here.

AboutBox

Box.net is a file hosting service for individuals and groups. They've got a really great customizable widget you can put on your blog or Web site that lets you share files with anybody. Even better, the Box widget provides instant previews of images and music. The files reside in your Box.net storage area, which provides its users with 1GB of free storage and more with paid plans. As the widget owner, you can even upload files through the widget, without having to manage things at Box.net. It doesn't get much simpler.
"I added lot of source codes in this widget........download the sourcecodes from Flexsamplecodefiles"......

Flexbox

Do u want to know more new components refer the following link

FlexBox (AdvancedForm, AdvanceTabNavigator, Animated Color Transitions, Animated DragTile, ArrayTool Audio Visualization, Auto-Resizing Text Input, AutoComplete Input, Autocomplete TextInput AutoRefresher, AutoScroll, Blink Component, ButtonScrollingCanvas)