MXML is a Flex application’s standard language, which allows developers to customize the structure of applications, including not only the layout also includes the class structure, and very easy to tag, this characteristic is very convenient there is web design and development background developers, similar to HTML Development of MXML. Same, Flex’s ActionScript and JavaScript similar, Flex using web standards to control the layout of CSS. Flex Application of a convenient way to customize the application structure, tree structure similar to a prototype language and containers perfect combination of the application component model. Source code can easily publish, rather than binary IDE required documents, but very easy readability of the text file.

It is worth mentioning that MXML is an ActionScript shorthand, ECMA-compliant scripting language, MXML at compile-time converted into ActionScript 3.

2. Flex is a Flash

If you are familiar with Flash over the past provided by lightweight vector animations and advanced user interface, so you will not be unfamiliar to the Flex. Flex set up at the top on top of Flash Player, engine possession at all Flash content, In this regard, nothing can make are Flash and Flex should not make.

3. Flex Just Works

Flex replace a lot of companies use Java, because a similar provision and Java cross-platform capability and a modern object-oriented architecture, but only required a much smaller package and the extra load. Flex applications can be completed entirely web-based software, as well as desktop software (combination of Adobe AIR).

4. Flex from the server restrictions

Flex constituted by the data, be able to accept data in different formats and the most and the most common server interaction. Load XML through local or remote, JSP, PHP, ASP, ColdFusion, etc.. You through the HTTP or SOAP web services to download information and even be able to directly read and write Java clients to SQLLite database.

5. Flex your appearance can be customized arbitrary

Flex applications can be customized the appearance of very large, you can switch back and forth, “skin” and the custom UI. This is not like Java or JavaScript, is not inherited by the running operating system UI, which means that Flex runs on Mac OSX, the button will not turn into a Mac-style button, Flex built-in appearance from their own set.

6. Flex is a lightweight and fast

Set up in ActionScript 3 on, Flex framework is a very quick pace. Initialization time for ActionScript 2 has been greatly improved. Flex adoption of a new JIT (Just-in-Time) compiler, accelerated speed. Of course, some people will argue that the use of a set of user interface components must affect the speed, in fact, a typical framework for the use of AJAX applications than similar, to a large Flex applications, Flash Player only a few M-byte, and often pre-installed on the computer. It is also worth mentioning the new features, namely the framework of the cache, can save a lot of big part of an integral part of the framework of download time. This function can be stored standard Flex UI components on the user’s machine so that other Flex applications run-time without having to download the entire framework.

7. Flex is a barrier-free

Flash content a lot of people think it is very difficult to access, this is a misconception. In fact, Flex framework components have a very good interaction, such as screen readers and keyboard navigation, developers only need to open the switch (default is off).

8. Flex compatible with search engine optimization

Flash content difficult Indexed search engine, it has been for the contents of web development. Adobe recently released search engine optimization for the special version of Flash Player. Of course, this takes time to completely solve the problem.

9. Flex is free and open source

Flex is completely open source, the entire framework source code can be downloaded at Adobe website.

10. Flex is easy to learn

MXML is very simple, easy to understand. If you have used HTML and CSS, you can quickly get started MXML.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”initApp()”>
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private function initApp():void{
var sample:Main = new Main()
var ui:UIComponent = new UIComponent();
ui.addChild(sample);
this.addChild(ui);
}
]]>
</mx:Script>

</mx:Application>

Action File:

package
{
import flash.display.Sprite;
import flash.events.Event;
public class Main extends Sprite
{
private var ballOne:Sprite;
private var ballTwo:Sprite;

private var direction:int = 1;

public function Main()
{
ballOne = new Sprite();
ballOne.graphics.beginFill(0xff0000, 1);
ballOne.graphics.drawCircle(0, 0, 30);
ballOne.graphics.endFill();
ballTwo = new Sprite();
ballTwo.graphics.beginFill(0x0000ff, 1);
ballTwo.graphics.drawCircle(0, 0, 30);
ballTwo.graphics.endFill();

addChild(ballOne);
addChild(ballTwo);

ballTwo.x = 200;
ballOne.x = 300;
ballTwo.y = 5;
ballOne.y = 5;

ballTwo.addEventListener(Event.ENTER_FRAME, bounce);
ballOne.addEventListener(Event.ENTER_FRAME, bounce);
}

private function bounce(event:Event):void
{
var target:Sprite = event.target as Sprite;
try
{
if (target.y == 199)
{
direction = -1;
}

if (target.y == 1)
{
direction = 1;
}

if (target.y < 200 && target.y > 0)
{
trace(target.y + ” : ” + direction);
target.y += direction;
}

} catch(err:Error) {
trace(“ooops….”);
}
}
}
}

In Java, getter and setter methods have to be explicitly called.
While in AS3, they’re called automatically and externally
indistinguishable from public properties.

For instance trace(myClass.foo) might be referencing a public property
or it might be referencing the method “public get foo():Object”. It
makes no difference to an external class.
—
You can expand on this a bit more to describe why this is useful. The
implications are that, unlike in Java, all variables in a class are
generally public. Java standard practices are to create only public
getters and setters while keeping the variables private. The reason
for only allowing methods to be publicly accessible is so that 1) they
can be overridden and 2) their implementation can change without
altering class interface.

AS3 addresses both of these concerns because, as described above, a
public property can be replaced with a getter and setter without
changing the interface. And an inherited public property can actually
be overridden by a subclass.

For example, this is valid:
public class A
{
public var foo:Object;
}

public class B extends A
{
override public function get foo():Object{return ‘bar’};
override public function set foo(value:Object):void{};
}

2) Explain how binding works in mxml components.

Data binding is the process of tying the data in one object to another object. It provides a convenient way to pass data around in an application. Adobe Flex 2 provides three ways to specify data binding: the curly braces ({}) syntax and the <mx:Binding> tag in MXML and the BindingUtils methods in ActionScript.

Data binding requires a source property, a destination property, and a triggering event that indicates when to copy the data from the source to the destination. To use a property as the source of a data binding expression, the component must be implemented to support data binding, which means that the component dispatches an event when the value of the property changes to trigger the binding.

At compile time, the MXML compiler generates code to create ActionScript Watcher and Binding objects that correspond to the binding tags and expressions found in an MXML document. At run time, Watcher objects are triggered by change events that come from the constituent parts of binding source expressions; the Watcher objects then trigger Binding objects to execute bindings.

When you specify a property as the source of a data binding, Flex monitors not only that property for changes, but also the chain of properties leading up to it. The entire chain of properties, including the destination property, is called a “bindable property chain“. In the following example, firstName.text is a bindable property chain that includes both a firstName object and its text property:

<first>{firstName.text}</first>

Its not necessary that the binding executes automatically. In the following case the binding wont execute automatically as expected.

1. Binding does not execute automatically when you change an entire item of a dataProvider property.
2. Binding also does not execute automatically for subproperties of properties that have [Bindable] metadata.
3. Binding also does not execute automatically when you are binding data to a property that Flash Player updates automatically, such as the mouseX property.

The executeBindings() method of the UIComponent class executes all the bindings for which a UIComponent object is the destination. All containers and controls, as well as the Repeater component, extend the UIComponent class. The executeChildBindings() method of the Container and Repeater classes executes all of the bindings for which the child UIComponent components of a Container or Repeater class are destinations. All containers extend the Container class. However, you should only use the executeBindings() method when you are sure that bindings do not execute automatically.

3) What’s the difference between ChangeWatcher.watch, and
BindingUtils.bindProperty?
4) Why would you want to keep a reference to a ChangeWatcher and call
unwatch()?

5) How do you add event listeners in mxml components. Now AS3 components?
6) What does calling preventDefault() on an event do? How is this
enforced?
7) (If applicable) Explain the lifecycle of a Cairngorm action.

8 ) What are some ways to specify styles on components?
9) What is the problem with calling setStyle()
10) Explain the difference between creating an effect and setting the
target as opposed to adding an effectListener
11) What do repeater components do?
12) How do you identify a component created in a repeater?

13) Explain the component lifecycle.
14) How invalidate / commitProperties work specifically
15) Questions about dataServices
16) A general understanding of MVC
17) What frameworks familiar with

1. Is it possible to make httpService Requests synchronous?
2. I need to load an image from flickr into my application. Do I need a crossdomain.xml file on flickr?
3. What is the difference between httpService and Data Service?

Flex allows three types of RPC services: HttpService, WebServices, and RemoteObject Services. In Flex, using the “RemoteObjects specifies named or unnamed sources and connects to an Action Message Format (AMF) gateway, whereas using the HTTPService and WebService use named services or raw URLs and connect to an HTTP proxy using text-based query parameters or XML”. Specifically, HTTPServices use raw HTTP requests, WebServices use the SOAP protocol and RemoteObjects uses AMF3. “RemoteObject provides two advantages over HTTP or SOAP. First, while the AMF protocol uses HTTP to transfer packets, the data is transferred in a binary format that is natively understood by the Flash Player. As a result, data can move across the network more quickly and it can be deserialized more rapidly than text-based formats such as XML. Both of these result in performance gains, particularly where large sets of data are involved. Secondly, RemoteObject provides signficant productivity advantages. The remoting service, which runs on your server, automatically marshalls data between AMF and your server-side language (e.g., PHP, Java, C#). As a result, you can directly call methods on your PHP objects without having to write an XML REST interface or create web service interfaces”.

4. How do you generate random numbers within a given limit with actionscript?
5. Have you built any components with actionscript? If so explain how you did it?
6. How do you implement push on a flex applications?
7.I am going to add images into a tag. How will it resize itself?
8. What is a resource Manager??
9.What are the similarities between java and flex
10. What is the dynamic keyword used for?
11.How do you implement push with flex data services?
12. What are the methods called when a UI component is intialized?
13. How do you implement drag and drop on components that do not support ondrag and ondrop?
14.Can you write to the file system from flex?
15. What is a drag manager?
16 . HOw do you call javascript from Flex?

The ExternalInterface API makes it very simple to call methods in the enclosing wrapper. You use the static call() method, which has the following signature:

flash.external.ExternalInterface.call(function_name:
    String[, arg1, ...]):Object;

The function_name is the name of the function in the HTML page’s JavaScript. The arguments are the arguments that you pass to the JavaScript function. You can pass one or more arguments in the traditional way of separating them with commas, or you can pass an object that is deserialized by the browser. The arguments are optional.

The following example script block calls the JavaScript f() function in the enclosing wrapper by using the call() method:

<mx:Script>
<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        import flash.external.*;

        public function callWrapper():void {
            var f:String = "changeDocumentTitle";
            var m:String = ExternalInterface.call(f,"New Title");
            trace(m);
        }
    </mx:Script>
    <mx:Button label="Change Document Title" click="callWrapper()"/>
</mx:Application>

On your HTML page, you define a function as you would any other JavaScript function. You can return a value, as the following example shows:

<SCRIPT>
    function changeDocumentTitle(a) {
        window.document.title=a;
        return "successful";
    }
</SCRIPT>

This feature requires that the embedded movie file have an id attribute. Without it, no call from your Flex application will succeed.

The call() method accepts zero or more arguments, which can be ActionScript types. Flex serializes the ActionScript types as JavaScript numbers and strings. If you pass an object, you can access the properties of that deserialized object in the JavaScript, as the following example shows:

<mx:Script>
    public function callWrapper():void {
        var o:Object = new Object();
        o.lname = "Danger";
        o.fname = "Nick";
        var f:String = "sendComplexDataTypes";
        ExternalInterface.call(f,o);
    }
</mx:Script>

Flex only serializes public, nonstatic variables and read-write properties of ActionScript objects. You can pass numbers and strings as properties on objects, simple objects such as primitive types and arrays, or arrays of simple objects.

The JavaScript code can then access properties of the object, as the following example shows:

<SCRIPT>
    function sendComplexDataTypes(a:Object) {
        alert("Welcome " + a.fname + " " + a.lname + "!");
    }
</SCRIPT>

You can also embed objects within objects, as the following example shows. Add the following code in your Flex application’s <mx:Script> block:

<mx:Script>
    public function callWrapper():void {
        var f:String = "sendComplexDataTypes";
        var o:Object = new Object();
        o.lname = "Danger";
        o.fname = "Nick";
        o.b = new Array("DdW","E&T","LotR:TS");
        var m:String = ExternalInterface.call(f,o);
    }
</mx:Script>

The code triggers the following JavaScript in the wrapper:

<SCRIPT>
    function sendComplexDataTypes(a) {
        // Get value of fname and lname properties.
        var m = ("Welcome " + a.fname + " " + a.lname + "!\n");
        // Iterate over embedded object's properties.
        for (i=0; i<a.b.length; i++) {
            m = m + a.b[i] + "\n";
        }
        alert(m);
    }
</SCRIPT>

Flex and Flash Player have strict security in place to prevent cross-site scripting. By default, you cannot call script on an HTML page if the HTML page is not in the same domain as the Flex application. However, you can expand the sources from which scripts can be called.

You cannot pass objects or arrays that contain circular references. For example, you cannot pass the following object:

var obj = new Object();
obj.prop = obj; // Circular reference.

Circular references cause infinite loops in both ActionScript and JavaScript.
17. How do you use a repeater?
18. what are three ways to skin a component in flex?
19. How do you use css styles in flex?
20. What is the difference between sealed class and dynamic classes?
21.what is MVC and how do you relate it to flex apps?
22.what is state? what is the difference between states and ViewStack?
23.how does item renderer work? How do I add item renderer at runtime?
24.what keyword allows you to refer to private variables of a class?
25.how polymorphism works on actionscript?
26.how do you overload functions in actionscript?
27.what is dynamic keyword used for?

Dynamic Keyword is used to make a class dynamic. A dynamic class defines an object that can be altered at run time by adding or changing properties and methods. You create dynamic classes by using the dynamic attribute when you declare a class. For example, the following code creates a dynamic class named Protean:

dynamic class Protean {
  private var privateGreeting:String = "hi";
  public var publicGreeting:String = "hello";
  function Protean () {
    trace("Protean instance created");
  }
}

If you subsequently instantiate an instance of the Protean class, you can add properties or methods to it outside the class definition. For example, the following code creates an instance of the Protean class and adds a property named aString and a property named aNumber to the instance:

var myProtean:Protean = new Protean();
myProtean.aString = "testing";
myProtean.aNumber = 3;
trace (myProtean.aString, myProtean.aNumber); // output: testing 3

Properties that you add to an instance of a dynamic class are run-time entities, so any type checking is done at run time. You cannot add a type annotation to a property that you add in this manner.

You can also add a method to the myProtean instance by defining a function and attaching the function to a property of the myProtean instance. The following code moves the trace statement into a method named traceProtean():

var myProtean:Protean = new Protean();
myProtean.aString = "testing";
myProtean.aNumber = 3;
myProtean.traceProtean = function () {
    trace (this.aString, this.aNumber);
}
myProtean.traceProtean(); // output: testing 3

Methods created in this way, however, do not have access to any private properties or methods of the Protean class. Moreover, even references to public properties or methods of the Protean class must be qualified with either the this keyword or the class name. The following example shows the traceProtean() method attempting to access the private and public variables of the Protean class.

myProtean.traceProtean = function () {
    trace(myProtean.privateGreeting); // output: undefined
    trace(myProtean.publicGreeting); // output: hello
}
myProtean.traceProtean();

28.what are sealed classes ?

A class that is not dynamic, such as the String class, is a sealed class. You cannot add properties or methods to a sealed class at run time.

29 what are runtime shared libraries?
30.What is caringhorm ? how do you use it?Have you worked with Cairnghorn?

Overview of Cairngorm

What is Cairngorm? Cairngorm is fundamentally a methodology for breaking up your application code by logical functions; by data, by user views, and by the code that controls everything. This is routinely referred to as MVC, or Model, View, and Control.

The Pieces of Cairngorm

• · Model Locator: Stores all of your application’s Value Objects (data) and shared variables, in one place. Similar to an HTTP Session object, except thatits stored client side in the Flex interface instead of server side within a middle tier application server.
• · View: One or more Flex components (button, panel, combo box, Tile, etc) bundled together as a named unit, bound to data in the Model Locator, andgenerating custom Cairngorm Events based on user interaction (clicks,rollovers, dragndrop.)
• · Front Controller: Receives Cairngorm Events and maps them to CairngormCommands.
• · Command: Handles business logic, calls Cairngorm Delegates and/or other Commands, and updates the Value Objects and variables stored in the ModelLocator
• · Delegate: Created by a Command, they instantiate remote procedure calls(HTTP, Web Services, etc) and hand the results back to that Command.
• · Service: Defines the remote procedure calls (HTTP, Web Services, etc) to connect to remote data stores.

How the Pieces Fit Together

Cairngorm basically works like this: Your client interface is comprised of Views. The Views use Flex binding to display data contained in the Model Locator. The Viewsgenerate Events based on user gestures such as mouse click, button press, and drag & drop. Those Events are “broadcast” and “heard” by the Front Controller, which is a map of Events to Commands. Commands contain business logic, create Delegates toperform work, handle responses from Delegates, and update the data stored in theModel Locator. Since Views are bound to the data in the Model Locator the Viewsautomatically update when the Model Locator data is changed. Delegates callServices and hand results back to Commands, and are optional but recommended.Services make remote data calls and hand the results back to Delegates.

31.What keyword allows you to implement abstraction better?
32.What design patterns have you used? in Actionscript and java?

What is AMF?

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.

Advantages / Disadvantages of flex

Flex advantages: very capable IDE, Images are part of a flash movie and can’t be downloaded directly, supported by Adobe, XML based language, ability to leverage flash components into the application, great speed increase over previous versions of flash (if that was even possible).

Flex disadvantages: Needs the flash player, Need to learn and XML based language and possibly actionscript to build real applications

I need to load an image from flickr into my application. Do I need a crossdomain.xml file on flickr?

What is the difference between httpService and Data Service?

How do you generate random numbers within a given limit with actionscript?

Have you built any components with actionscript? If so explain how you did it?

How do you implement push on a flex applications?

I am going to add images into a tag. How will it resize itself?

What is a resource Manager??

What are the similarities between java and flex

What is the dynamic keyword used for?

How do you implement push with flex data services?

What are the methods called when a UI component is intialized?

How do you implement drag and drop on components that do not support ondrag and ondrop?

Can you write to the file system from flex?

What is a drag manager?

How do you call javascript from Flex?

How do you use a repeater?

What are three ways to skin a component in flex?

How do you use css styles in flex?

What is the difference between sealed class and dynamic classes?

What is MVC and how do you relate it to flex apps?

What is state? what is the difference between states and ViewStack?

How does item renderer work? How do I add item renderer at runtime?

What keyword allows you to refer to private variables of a class?

How polymorphism works on actionscript?

How do you overload functions in action script?

What is dynamic keyword used for?

What are sealed classes ?

What are runtime shared libraries?

What is caringhorm ? how do you use it? Have you worked with Cairnghorn?

What keyword allows you to implement abstraction better?

What design patterns have you used? in Actionscript and java?

What’s the difference between Java and AS3 getters and setters?

Explain how binding works in mxml components.

What’s the difference between ChangeWatcher.watch, and BindingUtils.bindProperty?

Why would you want to keep a reference to a ChangeWatcher and call unwatch()?

How do you add event listeners in mxml components. Now AS3 components?

What does calling preventDefault() on an event do? How is this enforced?

Explain the lifecycle of a Cairngorm action.

What is the problem with calling setStyle()

Explain the difference between creating an effect and setting the target as opposed to adding an effectListener

How do you identify a component created in a repeater?

<mx:XML id=”imagesXML” source=”images.xml” />

<mx:Zoom id=”zoom” />

<mx:HBox id=”hBox”>
<mx:Repeater id=”rep”
dataProvider=”{imagesXML.image}”>
<mx:Image source=”{rep.currentItem.@src}”
toolTip=”{rep.currentIndex}:{rep.currentItem.@alt}”
completeEffect=”{zoom}” />
</mx:Repeater>
</mx:HBox>

</mx:Application>

images.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<!– http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/ –>
<images>
<image src=”images/Bilimbi.jpg” alt=”Button” />
<image src=”images/bunch of flower.jpg” alt=”ButtonBar” />
<image src=”images/Cherimoya.jpg” alt=”CheckBox” />
<image src=”images/feg_hibiscus.jpg” alt=”ColorPicker” />
<image src=”images/ComboBox.png” alt=”ComboBox” />
<image src=”images/DataGrid.png” alt=”DataGrid” />
<image src=”images/DateChooser.png” alt=”DateChooser” />
<image src=”images/DateField.png” alt=”DateField” />
</images>

[Bindable]
private var win:MyTilewindow;

private function init():void{}

private function createPopup():void{
win=MyTilewindow(PopUpManager.createPopUp(this,MyTilewindow,true));
win.title = ‘This is my title window’;
win.x = -500;
win.y = 0;
customMove.end();
customMove.play();
}

]]>
</mx:Script>
<mx:Style>
TitleWindow {
borderStyle:solid;
borderThickness:2;

}
</mx:Style>

<mx:Parallel id=”customMove” target=”{win}”>
<mx:Move duration=”2000″ xTo=”{(stage.width – win.width) / 2}” yTo=”{(stage.height – win.height) / 2}” />
<mx:WipeRight duration=”2000″ />
</mx:Parallel>

<mx:Button label=”Click here for popup” click=”createPopup()” />
</mx:Application>

<mx:Script>
<![CDATA[
import mx.core.UIComponent;
import mx.events.FlexEvent;
import mx.controls.Image;
import mx.controls.listClasses.IListItemRenderer;

private function initMask():void
{
var bitmapData:BitmapData = new BitmapData(picture.width,picture.height);
bitmapData.floodFill(bitmapData.width/2,bitmapData.height/2,0xFF000000);
maskImage.source = new Bitmap(bitmapData);
}

private function getMaskImage(data:Object):Bitmap
{
var itemRenderer:IListItemRenderer = maskList.itemToItemRenderer(data);
var bitmap:Bitmap;
var bitmapData:BitmapData;

bitmapData = Bitmap(Image(itemRenderer).content).bitmapData.clone();

var pixel:uint = bitmapData.getPixel32(int(bitmapData.width/2),int(bitmapData.height/2));
// extract the alpha value from the given ARGB value.
var alpha:uint = pixel >> 24;

// if the center pixel is transparent, suppose the mask is a png
// image consist of a closed shape, this will fill the inner of
// the closed shape with the RGB color 0x000000 inorder to make
// the image area below the inner visible.
if(alpha == 0x00)
bitmapData.floodFill(bitmapData.width/2,bitmapData.height/2,0xFF000000);

bitmap = new Bitmap(bitmapData);
return bitmap;
}

private function startDragging():void
{
oldMouseX = maskImage.mouseX;
oldMouseY = maskImage.mouseY;
maskImage.addEventListener(Event.ENTER_FRAME,doDrag);
}

private function endDragging():void
{
maskImage.removeEventListener(Event.ENTER_FRAME,doDrag);
}

private var oldMouseX:Number = 0;
private var oldMouseY:Number = 0;

private function doDrag(event:Event):void
{
var offsetX:Number = maskImage.mouseX - oldMouseX;
var offsetY:Number = maskImage.mouseY - oldMouseY;
maskImage.x += offsetX;
maskImage.y += offsetY;
}
]]>
</mx:Script>

<mx:XML id=”masksDataSource”
source=”assets/masks.xml”/>

<mx:List id=”maskList”
dataProvider=”{masksDataSource.mask}”
height=”100%”>
<mx:itemRenderer>
<mx:Component>
<mx:Image
source=”{data.@path}”
height=”80″/>
</mx:Component>
</mx:itemRenderer>
</mx:List>

<mx:Canvas
width=”100%”
height=”100%”>
<mx:Image id=”picture”
source=”assets/IMG_0268.JPG” width=”80%” height=”80%” maintainAspectRatio=”false”
mask=”{maskImage}”
cacheAsBitmap=”true”
creationComplete=”initMask()”
/>

<mx:Image id=”maskImage”
source=”{getMaskImage(maskList.selectedItem)}”
cacheAsBitmap=”true”
buttonMode=”true”
mouseChildren=”false”
mouseDown=”startDragging();”
mouseUp=”endDragging();”/>
</mx:Canvas>
</mx:Application>

mask.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<masks>
<mask path=”assets/masks/mask1.png”/>
<mask path=”assets/masks/mask2.png”/>
<mask path=”assets/masks/mask3.png”/>
<mask path=”assets/masks/mask4.png”/>
<mask path=”assets/masks/mask5.png”/>
<mask path=”assets/masks/mask6.png”/>
<mask path=”assets/masks/mask7.png”/>
<mask path=”assets/masks/mask8.png”/>
<mask path=”assets/masks/mask9.png”/>
<mask path=”assets/masks/mask10.png”/>
<mask path=”assets/masks/mask11.png”/>
</masks>

ComboBox {
corner-radius:8;
fill-colors: #cc9900, #ccffff;
background-color:#ff99ff;
selection-color:#ff0099;
roll-over-color:#ffccff;
border-color:#000000;
text-selected-color:#6600cc;
}

CheckBox {
border-color: #660000;
theme-color: #0000cc;
fill-colors: #ffcc99, #ff99ff;
}

HSlider {
tick-length: 13;
tick-thickness: 5;
tick-color: #660066;
track-colors: #ff00cc, #ff99ff;
border-color: #660000;
fill-colors: #3333ff, #33ccff;
theme-color: #ff33ff;
}

ScrollBar {
track-colors: #0000ff, #ff0000;
fill-colors: #cc00ff, #33ccff;
border-color: #00cc33;
theme-color: #cc0099;
corner-radius: 3;
}
Application {
background-color:#990066;
color: #000000;
theme-color: #b7f39b;
}
</mx:Style>
<mx:VScrollBar x=”129″ y=”65″
height=”187″
minScrollPosition=”0″
maxScrollPosition=”{this.width – 20}”
lineScrollSize=”10″
pageScrollSize=”100″
repeatDelay=”100″
repeatInterval=”100″ />
</mx:Application>

<mx:GridItem width=”100%” height=”100%” verticalAlign=”middle”>
<mx:HorizontalList id=”horlist” width=”800″ height=”100″ columnWidth=”100″ rowHeight=”100″
dataProvider=”{arr}” itemRenderer=”list”  useHandCursor=”true”  buttonMode=”true” horizontalScrollPolicy=”off” itemClick=”itemclick(event)”/>
</mx:GridItem>
<mx:GridItem width=”100%” height=”100%” horizontalAlign=”right” verticalAlign=”middle” verticalScrollPolicy=”off” horizontalScrollPolicy=”off”>
<mx:Image id=”nextimage” width=”100%” horizontalAlign=”center”  source=”../assets/Arrow-Left.png” buttonMode=”true” click=”nextclick()”/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width=”100%” height=”20″>
<mx:GridItem width=”100%” colSpan=”3″ verticalAlign=”middle” >
<mx:Label id=”lblfooter” width=”100%” textAlign=”center” fontWeight=”bold”/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
<mx:Array id=”arr”>
<mx:Object  lbl=”lilly” src=”../assets/imag1.jpg”/>
<mx:Object  lbl=”rose1″ src=”../assets/imag2.jpg”/>
<mx:Object  lbl=”rose2″ src=”../assets/imag3.jpg”/>
<mx:Object  lbl=”rose3″ src=”../assets/imag4.jpg”/>
<mx:Object  lbl=”rose4″ src=”../assets/imag5.jpg”/>
<mx:Object  lbl=”rose5″ src=”../assets/imag6.jpg”/>
<mx:Object  lbl=”rose6″ src=”../assets/imag7.jpg”/>
<mx:Object  lbl=”rose7″ src=”../assets/imag8.jpg”/>
<mx:Object  lbl=”nature1″ src=”../assets/0411062007431leaf___bubbles_pb060311.jpg”/>
<mx:Object  lbl=”baby” src=”../assets/0411060533591mackenziefall1.jpg”/>
<mx:Object  lbl=”nature2″ src=”../assets/0411051920421blue_ridge_beauty.jpg”/>
</mx:Array>
<mx:Dissolve id=”show” duration=”3000″/>
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
public function slide():void
{
if(arr.length > 0)
{
lblheader.text = "WELCOME";
lblfooter.text = "By faisal";
//loadimage(0);
//horlist.selectedIndex=0;
}
checkScroll();
}
public function nextclick():void
{
var pos:int=horlist.horizontalScrollPosition + 1;
if(pos <= horlist.maxHorizontalScrollPosition)
horlist.horizontalScrollPosition = pos;
checkScroll();
}
public function prevclick():void
{
var pos:int=horlist.horizontalScrollPosition - 1;
if(pos >= 0)
horlist.horizontalScrollPosition = pos;
checkScroll();
}
private function checkScroll():void
{
if (horlist.horizontalScrollPosition == 0)
{
previmage.visible = false;
}
else
{
previmage.visible = true;
}

if (horlist.horizontalScrollPosition == horlist.maxHorizontalScrollPosition)
{
nextimage.visible = false;
}
else
{
nextimage.visible = true;
}
}
public function itemclick(event:ListEvent):void
{
bigimage.source = event.itemRenderer.data.src;
lblheader.text = event.itemRenderer.data.lbl;

}
/* public function loadimage(imgno:int):void
{
bigimage.source=arr[imgno].src;
lblheader.text=arr[imgno].lbl;
} */
public function imageclick():void
{

if(horlist.selectedIndex < arr.length)
{
horlist.selectedIndex +=1;
horlist.scrollToIndex(horlist.selectedIndex);
//loadimage(horlist.selectedIndex);
checkScroll();

}
}
]]>
</mx:Script>
</mx:Application>

<mx:Script>
<![CDATA[

private var dataList:XMLList =
<>
<Item id="1">
<File>phone.flv</File>
<Detail>Lorem Ipsum text1</
Detail>
</Item>
<Item id="2">
<File>Sample2.FLV</File>
<Detail>Lorem Ipsum text2</
Detail>
</Item>

<Item id="3">
<File>Sample3.FLV</File>
<Detail>Lorem Ipsum text3</
Detail>
</Item>
</>;

private function init():void
{
dgSample.dataProvider = dataList;
}
]]>
</mx:Script>

<mx:Fade id=”fadeIn” alphaFrom=”0.0″ alphaTo=”1.0″ />
<mx:Fade id=”fadeOut” alphaFrom=”1.0″ alphaTo=”0.0″ />

<mx:DataGrid id=”dgSample” rowHeight=”200″>
<mx:columns>
<mx:DataGridColumn id=”dgColumnArchiveSession” headerText=”Videos”
width=”250″>
<mx:itemRenderer>
<mx:Component>
<mx:Canvas width=”100%” height=”100%”  rollOver=”showControls()”
rollOut=”hideControls()”>
<mx:Script>
<![CDATA[

private function showControls():void
{
outerDocument.fadeIn.play([controls]);
}

private function hideControls():void
{
outerDocument.fadeOut.play([controls]);
}

private function playPauseButton_click(evt:MouseEvent):void
{
if (vdoDisplay.playing)
{
vdoDisplay.pause();
}
else
{
vdoDisplay.play();
}
}

private function stopButton_click
(evt:MouseEvent):void
{
vdoDisplay.stop();
}
]]>
</mx:Script>

<mx:VideoDisplay id=”vdoDisplay” left=”0″ right=”0″ bottom=”0″
top=”0″ source=”{data.File}”  />

<mx:HBox id=”controls” styleName=”controllerStyle” alpha=”0.0″
bottom=”0″ left=”0″ right=”0″>
<mx:Button id=”playPauseButton”
styleName=”playPauseStyle” toggle=”true”
selected=”{vdoDisplay.playing}” click=”playPauseButton_click(event)” />
<mx:Button id=”stopButton” styleName=”stopStyle”
click=”stopButton_click(event)” />

<mx:HBox width=”100%” paddingTop=”3″>
<mx:ProgressBar width=”100%” id=”progressBar”
label=”" height=”10″ labelPlacement=”center” mode=”manual” />
</mx:HBox>
</mx:HBox>
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

<mx:DataGridColumn headerText=”Details” width=”300″
dataField=”Detail”  />
</mx:columns>
</mx:DataGrid>

</mx:Application>