Flex And Flash

Adding custom component in Flex Data Grid Header

Abhilash ,WEB and UI Designer — Wed, 07 Jan 2009 06:25:06 GMT

Hi all

this is very help full for us

we can add custom component in data grid header using headerRenderer

the code is given below

        <mx:DataGridColumn width="30" >
             <mx:headerRenderer>
                <mx:Component>
                <mx:Image source="assets/task/img_attach.png"/>
                </mx:Component>
            </mx:headerRenderer>
         </mx:DataGridColumn>

Easy deploy Flex Application with Stax

Abhilash ,WEB and UI Designer — Tue, 23 Dec 2008 05:53:31 GMT

what is Stax

�??The fastest way for developers to build, manage and scale Java applications on EC2"

Stax provides easy deployment of test and production environments, a local development model, and strong integration with existing development tools, frameworks, and processes.

please review the given links

http://www.stax.net/

The magic of Silverlight and Deep Zoom

Abhilash ,WEB and UI Designer — Fri, 19 Dec 2008 04:40:32 GMT

Create a photo mosaic with

2442 unique images

where you could zoom into each image

just click on this link

http://robburke.net/images/deeplol.html

Image Snapshot code for adobe flex

Abhilash ,WEB and UI Designer — Tue, 02 Dec 2008 06:59:42 GMT

private function Snapshot ():void
    {
        var bmpd:BitmapData = new BitmapData(product.width,product.height);
        bmpd.draw(product);
        var ohSnap:ImageSnapshot;
                ohSnap = ImageSnapshot.captureImage(bmpd, 0);
                var imgString:String = ImageSnapshot.encodeImageAsBase64(ohSnap);
        }

in this "product" means your product or your application "id".
or you can use any of the component "id" which you want to Snapshot.
the "imgString" is the string of your snapshot component.

Adobe AIR sample application (all in one news) , example

Abhilash ,WEB and UI Designer — Thu, 27 Nov 2008 05:11:43 GMT

Hi All,

My new application in adobe AIR.

This is only a simple application for see all news in single window just install the air application and use this.

all in one news

Application and source code. the links are given below

https://share.acrobat.com/adc/document.do?docid=182d1801-6521-4ff9-aec4-b83268eafa0d

https://share.acrobat.com/adc/document.do?docid=384b2a88-7ff3-4047-b2bf-4a41ddd2a7d9

if you have any question mail me: abhilathi@gmail.com

A Flex scroll bar theme(skinning) based on a music volume controls.

Abhilash ,WEB and UI Designer — Wed, 19 Nov 2008 06:44:35 GMT

This is only a Custom Scroll Bar Using CSS

just put this style and images in application

the images and style are given below

-----------------------------------------------------------------
<mx:Style>
    ScrollBar {
     up-arrow-skin: ClassReference(null);
     down-arrow-skin: ClassReference(null);
     trackSkin: Embed(source="ScrollBarTrack.png", scaleGridLeft="2",

scaleGridTop="17", scaleGridRight="3", scaleGridBottom="18");
     thumbUpSkin: Embed(source="ScrollBarThumb_up.png", scaleGridLeft="7",

scaleGridTop="9", scaleGridRight="8", scaleGridBottom="10");
     thumbOverSkin: Embed(source="ScrollBarThumb_over.png",

scaleGridLeft="7", scaleGridTop="9", scaleGridRight="8",

scaleGridBottom="10");
     thumbDownSkin: Embed(source="ScrollBarThumb_down.png",

scaleGridLeft="7", scaleGridTop="9", scaleGridRight="8",

scaleGridBottom="10");
}

</mx:Style>
-----------------------------------------------------------------

use green images for OverSkin and DownSkin(ScrollBarThumb_over.png,ScrollBarThumb_down.png)

use gray image for UpSkin(ScrollBarThumb_up.png)

use line images for trackSkin(ScrollBarTrack)

if any question feel free to ask me. :)

Skinning of a ProgressBar component in Adobe Flex

Abhilash ,WEB and UI Designer — Mon, 10 Nov 2008 09:51:58 GMT

I have only explain
how to completely change the skin(appearance) of the ProgressBar component.
to change skin i have use some .png images
the images are given below
you can also change the images and make attractive ProgressBar component.

image1:

image2:

image3:

image4:

the source code is given below

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Style>



    ProgressBar
        {
            bar-skin:                       Embed(source="progress_barra.png", scaleGridTop="3",

scaleGridBottom="4", scaleGridLeft="5", scaleGridRight="6");
            track-skin:                     Embed(source="progress.png", scaleGridTop="4",

scaleGridBottom="5", scaleGridLeft="4", scaleGridRight="6");
            track-disabled-skin:            Embed(source="progress_dis.png", scaleGridTop="4",

scaleGridBottom="5", scaleGridLeft="4", scaleGridRight="6");
            indeterminate-skin:             Embed(source="progress_charning.png");
            indeterminate-move-interval:     13;

        }
</mx:Style>


    <mx:ProgressBar x="10" y="77" width="200" labelPlacement="bottom" indeterminate="true"/>

</mx:Application>

skinning TitleWindow component for create a pop-up window in adobe flex

Abhilash ,WEB and UI Designer — Thu, 06 Nov 2008 09:08:17 GMT

In this example, you must create 3 files that are

1.pop.mxml(application)
2.Samplepop.mxml(component defines a TitleWindow container )
3.Style.css(CSS for skinning TitleWindow)

the source code are given below

---------------------------------------------------------------------------
pop.mxml
----------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="Styles.css"/>
<mx:Script>
    <![CDATA[
        import mx.managers.PopUpManager;
        private function call():void
        {
        var pop:Samplepop = new Samplepop();
        PopUpManager.addPopUp(pop,Application.application as DisplayObject,true);
        PopUpManager.centerPopUp(pop);
        }
    ]]>
</mx:Script>
    <mx:Button click="call()" label="Click to display popup" horizontalCenter="0" verticalCenter="0"/>
</mx:Application>

---------------------------------------------------------------------------
--------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="300" height="100" backgroundSize="100%"
    showCloseButton="true" close="PopUpManager.removePopUp(this)">
    <mx:Script>
    <![CDATA[
        import mx.managers.PopUpManager;

    ]]>
</mx:Script>

</mx:TitleWindow>

--------------------------------------------------------------------------
Style.css
-------------------------------------------------------------------------

TitleWindow {

            borderAlpha: 0;
            backgroundAlpha: 1;
            dropShadowEnabled: false;
            background-color:#383838;
            drop-shadow-enabled:false;
            highlight-alphas:0,0;
            border-color:#383838;
            borderStyle: solid;
            cornerRadius: 10;
           roundedBottomCorners: true;


        }

Flash Player 10 is now live!!

Abhilash ,WEB and UI Designer — Wed, 15 Oct 2008 11:19:42 GMT

Flash Player 10 went live on Adobe.com.

Flash Player 10 introduces creative expression features

3D Effects, Pixel Bender filters and effects, enhanced drawing API, a new text engine, new sound APIs and color management ect.

http://www.adobe.com/products/flashplayer/features/

Setting up Subversion with Adobe Flex 3(Install Subversion in Flex)

Abhilash ,WEB and UI Designer — Tue, 22 Jul 2008 10:06:29 GMT

This tutorial will show you how to setup Subversion (SVN) with Flex and how you use it. SVN is a great tool to backup your files, let others work on the same project and keep track of all versions of a file.

by Jens C. Brynildsen

http://www.flashmagazine.com/tutorials/detail/setting_up_subversion_with_adobe_flex_3/

Flex-Spy

Abhilash ,WEB and UI Designer — Mon, 14 Jul 2008 06:36:17 GMT

Kind of what Firebug does for HTML/Ajax applications but for Flex 2.0/3.0 applications.

Flex-Spy allow you to inspect and dynamically change most properties and styles of the visual components in your Flex application

The link is given below

http://code.google.com/p/fxspy/

http://www.mieuxcoder.com/data/2007/12/FlexSpy-1.2/dashboard.html

Simple Flex Effects Example and Simple Flex Image Slideshow (image gallery) with source code

Abhilash ,WEB and UI Designer — Fri, 11 Jul 2008 09:24:45 GMT

just change the path of image

<mx:Image source="../no_image.png"/>

and put your image path here

<mx:Image source="your image path"/>

*-------------------------------------------------------------------------*

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="930" height="468">

<mx:WipeUp id="wipeOut" duration="1000"/>

<mx:WipeUp id="wipeIn" duration="1000"/>

<mx:Script>

<![CDATA[

import flash.net.navigateToURL;

import mx.controls.Alert;

[Bindable]

private var i:int=0;

private function previous():void

{

if(i==-1)

{

p.visible=false;

}

else

{

i=slideshow.selectedIndex-1;

n.visible=true;

}

private function next():void

{

if(i==4)

{

n.visible=false;

}

else

{

i=slideshow.selectedIndex+1;

p.visible=true;

}

private function url1():void

{

navigateToURL(new URLRequest('http://www.google.co.in/firefox?client=firefox-a&rls=org.mozilla:en-US:official'),'_blank');

}

]]>

</mx:Script>

<mx:HBox width="693">

<mx:Button label="previous" id="p" click="previous()"/>

<mx:ViewStack width="545" height="402" id="slideshow" selectedIndex="{i}" >

<mx:VBox hideEffect="{wipeOut}" showEffect="{wipeIn}">

<mx:Image source="../no_image.png"/>

<mx:LinkButton label="view site" click="url1()"/>

</mx:VBox>

<mx:VBox hideEffect="{wipeOut}" showEffect="{wipeIn}">

<mx:Image source="../no_image.png"/>

<mx:LinkButton label="view site" click="url1()"/>

</mx:VBox>

<mx:VBox hideEffect="{wipeOut}" showEffect="{wipeIn}">

<mx:Image source="../no_image.png"/>

<mx:LinkButton label="view site" click="url1()"/>

</mx:VBox>

<mx:VBox hideEffect="{wipeOut}" showEffect="{wipeIn}">

<mx:Image source="../no_image.png"/>

<mx:LinkButton label="view site" click="url1()"/>

</mx:VBox>

<mx:VBox hideEffect="{wipeOut}" showEffect="{wipeIn}">

<mx:Image source="../no_image.png"/>

<mx:LinkButton label="view site" click="url1()"/>

</mx:VBox>

</mx:ViewStack>

<mx:Button label="next" id="n" click="next()" />

</mx:HBox>

</mx:Application>

*---------------------------------------------------------*

Flex itemRenderer with source code

Abhilash ,WEB and UI Designer — Wed, 09 Jul 2008 09:18:07 GMT

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   <mx:VBox width="100%"    paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" >
   <mx:Script>
       <![CDATA[
           import mx.collections.ArrayCollection;
           [Bindable]
           private var arrList:ArrayCollection = new ArrayCollection([
         {label: "About us", data: 0},{label: "Contact us", data: 2},
         {label: "privacy policy", data: 4},{label: "Terms of use", data: 6}]);

       ]]>
   </mx:Script>

<mx:HBox width="100%" height="100%">


           <mx:VBox width="100%" height="100%" >
               <mx:Label text="Flex item render" width="100%" />

               <mx:List dataProvider="{arrList}" width="100%" height="100%"
                   backgroundColor="#F8F8F8">
                   <mx:itemRenderer>
                       <mx:Component>

                           <mx:CheckBox/>

                       </mx:Component>
                   </mx:itemRenderer>
               </mx:List>
           </mx:VBox>

       </mx:HBox>

</mx:VBox>
</mx:Application>

Using special characters in your Flex applications

Abhilash ,WEB and UI Designer — Wed, 02 Jul 2008 10:04:26 GMT

To make special characters and accented letters show up on your Flex pages, use a special set of codes called character entities, which you insert into your HTML code and which your browser will display as the corresponding symbols or characters you want.

http://www.webmonkey.com/reference/Special_characters

http://blog.flexexamples.com/2007/08/02/using-special-characters-in-your-flex-applications/

Adobe Thermo

Abhilash ,WEB and UI Designer — Tue, 17 Jun 2008 05:47:58 GMT

"Thermo" is an upcoming Adobe product that makes it easy for designers to create rich Internet application UIs. Thermo allows designers to build on familiar workflows to visually create working applications that easily flow into production and development.

Features

Use drawing tools to create original graphics, wireframe an application design, or manipulate artwork imported from Adobe Creative Suite tools.
Turn artwork from Adobe Photoshop, Illustrator, or Fireworks directly into functional components that use the original artwork as a �??skin�??.
Define and wire up interactive behavior, such as what to do when a user clicks on something, without having to write code.
Easily design UIs that work with dynamic data, such as a list of contacts or product information, without having access to the actual data source. Design-time sample data can be used as a realistic placeholder when laying out an application, testing interactivity, and choreographing motion.

http://labs.adobe.com/wiki/index.php/Thermo

Class diagram of container components

Abhilash ,WEB and UI Designer — Mon, 16 Jun 2008 06:36:20 GMT

Every container provided by the Flex framework has a set of rules by which it lays out its children. Flex uses these rules to measure the available space for children, and to decide where children are positioned. A VBox container, for example, arranges its children vertically, placing only one item per row. Similarly, an HBox container arranges its children horizontally. Every container in Flex was designed with a purpose (see Figure). Knowing when to use a particular container is important as you build your Flex applications.

Reordering children using the display list API

Abhilash ,WEB and UI Designer — Mon, 16 Jun 2008 05:09:12 GMT

This basic example covers a few important concepts. First, the initial layout contains

six buttons within a Tile container, each labeled according to its order within the

Tile. A button at the bottom is used to call a function to move the last child to the

beginning of the Tile container. In moveToTheBeginning( ), the index of the last child

is retrieved, which is zero-based. Next, a reference to the last child in the display list is

obtained using getChildAt( ). After the last child index is retrieved, setChildIndex( )

is called and passes a reference to the button instance and a new index.

--------------------------------------------------------------------------

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

private function moveToTheBeginning( ):void

{

// Retrieve the index of the last child, child indices are zero-based

var lastChildIndex:int = tileOfLabels.numChildren - 1;

// Get a reference to the last child

var child:DisplayObject = tileOfLabels.getChildAt(lastChildIndex);

// Change the index of the child

tileOfLabels.setChildIndex(child,0);

}

]]>

</mx:Script>

<mx:Tile id="tileOfLabels">

<mx:HBox backgroundColor="red" width="50" height="50"/>

<mx:HBox backgroundColor="green" width="50" height="50"/>

<mx:HBox backgroundColor="blue" width="50" height="50"/>

<mx:HBox backgroundColor="black" width="50" height="50"/>

</mx:Tile>

<mx:Button label="Move to the beginning" click="moveToTheBeginning( )"/>

</mx:Application>

----------------------------------------------------------------------

Flex sample application with full source code

Abhilash ,WEB and UI Designer — Fri, 13 Jun 2008 06:54:30 GMT

The Flex Store application shows some of the user experiences that the Adobe Flex 2 framework provides. The Products page shows how you can use states, transitions, and UI techniques, such as showing more information as space becomes available, to improve your application. For example, if you change the filter options in the panel on the left, you can see the phones drop out and move around in the main Catalog panel.

http://www.adobe.com/devnet/flex/samples/flex_store/

Create a simple Sliding Menu Bar with Flex and ActionScript

Abhilash ,WEB and UI Designer — Wed, 11 Jun 2008 10:40:17 GMT

In this tutorial, you will learn how to create a menu with a point underneath it that moves left and right based on which button the user is click. This tutorial is created with Flex and ActionScript 3.

please use this image for point

the code is given below

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" >

<mx:Move duration="800" id="moveb" target="{point}"/>

<mx:Script>
    <![CDATA[
        import mx.controls.Alert;
        private function buttonmove(e:Event):void
        {
            moveb.xTo=e.currentTarget.valueOf().x;
            moveb.yTo=e.currentTarget.valueOf().height;
            moveb.play();
        }
    ]]>
</mx:Script>
    <mx:VBox horizontalAlign="left" verticalGap="0" >
    <mx:HBox >

        <mx:HBox   click="buttonmove(event)" id="a" backgroundColor="red" height="30" width="100"/>
        <mx:HBox click="buttonmove(event)" id="b" backgroundColor="black" height="30" width="100"/>
        <mx:HBox click="buttonmove(event)" id="c" backgroundColor="green" height="30" width="100"/>
        <mx:HBox click="buttonmove(event)" id="d" backgroundColor="yellow" height="30" width="100"/>
        <mx:HBox click="buttonmove(event)" id="e" backgroundColor="blue" height="30" width="100"/>
    </mx:HBox>
    <mx:HBox width="100" id="point" horizontalAlign="center" >
        <mx:Image source="../point.png" />
    </mx:HBox>
    </mx:VBox>
</mx:Application>

Web Desktop Application Framework

Abhilash ,WEB and UI Designer — Wed, 11 Jun 2008 04:32:07 GMT

Cool Flex Web Desktop Application Demo

the links are given below

http://ajana.wordpress.com/

http://abhisekjana.elementfx.com/mainapp/demo.html

Adobe ConnectNow

Abhilash ,WEB and UI Designer — Tue, 10 Jun 2008 06:12:27 GMT

Adobe ConnectNow is a great way to share ideas, discuss details, and complete work together �?? all online. Reduce travel costs, save time, and increase productivity with a web conferencing solution that is easy to access and simple to use.

https://www.acrobat.com/?app=brio&si=1&trackingid=COYSP#/brio/GoToMyMeeting/

Flex Ajax Bridge

Abhilash ,WEB and UI Designer — Tue, 10 Jun 2008 06:07:48 GMT

Flex Ajax Bridge

The Adobe® Flex® Ajax Bridge (FABridge) is a small, unobtrusive code library that you can insert into an Flex application, a Flex component, or an empty SWF file to expose it to scripting in the web browser.

The Flex Ajax Bridge (FABridge) is a small code library that you can insert into an Flex application, a Flex component, or an empty SWF file to expose it to scripting in the browser.

Rather than having to define new, simplified APIs to expose a graph of ActionScript objects to JavaScript, with FABridge you can make your ActionScript classes available to JavaScript without any additional coding. After you insert the library, essentially anything you can do with ActionScript, you can do with JavaScript.

http://livedocs.adobe.com/flex/3/html/help.html?content=ajaxbridge_1.html

Flash Player 10

Abhilash ,WEB and UI Designer — Fri, 06 Jun 2008 11:07:59 GMT

Flash Player 10

introduces new expressive features and visual performance improvements that allow interactive designers and developers to build the richest and most immersive Web experiences. These new capabilities also empower the community to extend Flash Player and to take creativity and interactivity to a new level.

http://labs.adobe.com/technologies/flashplayer10/

AIR Application sample

Abhilash ,WEB and UI Designer — Fri, 30 May 2008 05:28:48 GMT

First AIR Application

create new flex project and change the application type to desktop application

then paste the code

<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Hello World">

<mx:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/>

<mx:Style>

WindowedApplication

{

background-color:"0x999999";

background-alpha:"0.5";

}

</mx:Style>

</mx:WindowedApplication>

After complete export it in to AIR application

Flex2 Style Explorer(Apply style for flex components )

Abhilash ,WEB and UI Designer — Fri, 30 May 2008 05:22:13 GMT

Flex2 Style Explorer

Apply style for flex components

The Flex 2.0.1 Style Explorer provides a visual way for you to see how changing style settings of Flex 2.0.1 user interface components will affect the display of your application.

http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

Adobe Releases Creative Suite 4 (CS4) Beta

Abhilash ,WEB and UI Designer — Tue, 27 May 2008 11:09:50 GMT

Adobe Releases Creative Suite 4 (CS4) Beta

Earlier today, folks at Adobe released 3 applications of the Creative Suite 4 (CS4) line-up, respectively the Dreamweaver, Fireworks and Soundbooth. These applications are available for download and test drive over at Adobe Lab. For Dreamweaver and Fireworks, you can enjoy full version for at least 2 days, and for existing customers you can request a serial number to activate the respective beta for the duration of the prerelease period. For those who are interested in Soundbooth beta, you can request for a beta serial number, provided that you have a legit copy of CS3 product (Photoshop, Illustrator, Dreamweaver, Fireworks) serial number.

http://labs.adobe.com/

add column total of data grid in flex

Abhilash ,WEB and UI Designer — Thu, 22 May 2008 09:43:19 GMT

add the total of a column from that grid and display it in a label

the code is given below

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >

<mx:Script>

<![CDATA[

import mx.controls.Alert;

[Bindable]

private var ttt:int = 0;

private function totalcal():void

{

var rowCount:int = arrColl.length;

for(var i:Number = 0;i<rowCount;i++){

myGrid.selectedIndex = i;

ttt += Number(myGrid.selectedItem.score);

}

Alert.show(ttt.toString())

}

]]>

</mx:Script>

<mx:ArrayCollection id="arrColl" >

<mx:source>

<mx:Array>

<mx:Object score="85" />

<mx:Object score="48" />

<mx:Object score="71" />

<mx:Object score="88" />

<mx:Object score="24" />

<mx:Object score="64" />

<mx:Object score="76" />

<mx:Object score="93" />

<mx:Object score="88" />

<mx:Object score="48" />

<mx:Object score="76" />

</mx:Array>

</mx:source>

</mx:ArrayCollection>

<mx:HBox height="100%">

<mx:DataGrid dataProvider="{arrColl}" height="100%" id="myGrid">

<mx:columns>

<mx:DataGridColumn dataField="score"/>

</mx:columns>

</mx:DataGrid>

<mx:Label text="{ttt}"/>

<mx:Button click="totalcal()"/>

</mx:HBox>

</mx:Application>

Cairngorm architecture

Abhilash ,WEB and UI Designer — Thu, 17 Jan 2008 06:50:53 GMT

Cairngorm architecture diagram for flex development

http://www.cairngormdocs.org/tools/CairngormDiagramExplorer.swf