AIR You Tube

Sample application demonstrating the You tube functionality in AIR.

The you tube video is downloaded from the you tube site and is played in video player control in flex.

Download the air file....

Simple Chat system using Blaze Ds....

Sample BlazeDS chat Translation system...

Download the BlazeDs....

The application using google ajax translation api for the conversion.

The logs are displayed as per the translation...

SlideShow Component in AIR

Sample Slideshow component in AIR. It uses local shared objects...

FileSystemList Component with a custom item renderer...

Download the AIR file...

Find the Source code below.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    showGripper="false" showInAutomationHierarchy="false" showStatusBar="false" showTitleBar="false"
    horizontalScrollPolicy="off" verticalScrollPolicy="off"
    borderThickness="0" keyDown="onKey(event)" focusEnabled="true" tabEnabled="true"
    creationComplete="init()" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#000000, #000000]" xmlns:jirox="net.jirox.*">
<mx:Script>
<![CDATA[
import mx.effects.Fade;
import mx.controls.Alert;

[Bindable]private var dir:File;
private var so:SharedObject;

//Intialization

private function init():void{

    this.setFocus();
    this.nativeWindow.x = 0;
    this.nativeWindow.y = 0;
    this.nativeWindow.width  = Capabilities.screenResolutionX;
    this.nativeWindow.height = Capabilities.screenResolutionY;
    //Shared Object GET
    so = SharedObject.getLocal("PictureViewerAIR");
    if( so.data.mydirectory ){
        //Folder path Information
        var select:File = new File(so.data.mydirectory);
        fst.directory = select;
    }else{
        //No Selection Dialog, Set the Directory
        setDir();
    }
}

private function closeHandler():void{
    //so.flush();
}

//Directory Settings
private function setDir():void{
    dir = File.documentsDirectory;
    dir.browseForDirectory("Please Specify the Images Folder");
    dir.addEventListener(Event.SELECT , onSelect );
}

//Directory Selection Event.
private function onSelect(e:Event):void{
    this.nativeWindow.alwaysInFront = true;

    var select:File     = e.target as File;
    so.data.mydirectory = select.nativePath;
    fst.directory       = select;
    fst.selectedIndex   = 0;   
}

//Slide Show Timer
private var timer:Timer = new Timer( 20000 );
private function startSlideShow():void{
    timer.addEventListener(TimerEvent.TIMER , myTick );
    timer.start();
    myTick(new TimerEvent("TIMER"));
}

private function myTick(e:TimerEvent):void{

    if( fst.selectedIndex >= fst.dataProvider.length - 1 ){
        fst.selectedIndex = 0;
    }else{
        fst.selectedIndex = fst.selectedIndex + 1;       
    }
    myImage.source = fst.selectedPath;
    myShow.play();
}
private function onClick(event:Event):void{
    //if (!selectedFile || selectedFile.isDirectory)
     var select:File = fst.selectedItem as File;
     if( select.isDirectory ){
     }else{
         myImage.source = fst.selectedPath;
         var f:Fade = new Fade();
         f.alphaFrom = 0;
         f.alphaTo   = 1;
         f.play([myImage]);
     }
}
private function onKey(e:KeyboardEvent):void{
    if( e.charCode == 119 &&  e.ctrlKey ){
        this.nativeWindow.close();   
    }
}
private function myFilter(item:Object ):Boolean{
    return !item.isDirectory;
}
]]>
</mx:Script>
<mx:Style>
global{
}
VScrollBar {
   cornerRadius: 15;
   highlightAlphas: 0.79, 0.2;
   fillColors: #195eb9, #adf8ff, #195eb9, #adf8ff;
   fillAlphas: 1, 1, 1, 1;
   borderColor: #999999;
   trackColors: #c0c0c0, #FFFFFF;
}
HScrollBar {
    cornerRadius: 15;
   highlightAlphas: 0.79, 0.2;
   fillColors: #195eb9, #adf8ff, #195eb9, #adf8ff;
   fillAlphas: 1, 1, 1, 1;
   borderColor: #999999;
   trackColors: #c0c0c0, #FFFFFF;
}
Alert {
    titleStyleName: "alertTitle";
    messageStyleName: "alertMessage";
    buttonStyleName: "alertButton";
    dropShadowEnabled: true;
    shadowDistance: 0;
    shadowColor:#000000;
    shadowDirection: right;
    cornerRadius: 10;
    embedFonts: true;
    borderColor: #333333;
    backgroundAlpha: 0.55;
}
.alertTitle {
    letterSpacing: 0;
    fontSize: 14;
    color: #ffffff;
}
.alertMessage {
    letterSpacing: 0;
    fontSize: 14;
    fontWeight: normal;
    color: black;
    backgroundColor:#ffffff;
}
.alertButton {
    backgroundColor:#333333;
    letterSpacing: 0;
    fontSize: 12;
    cornerRadius: 10;
    fontWeight: normal;
    textRollOverColor: white;
    color: red;
}
</mx:Style>

<mx:Sequence id="myShow" target="{myImage}" duration="20000">
    <mx:Fade alphaFrom="0" alphaTo="1" duration="1000"/>
    <mx:Fade startDelay="18000" alphaFrom="1" alphaTo="0" duration="1000"/>
</mx:Sequence>

<mx:Image id="myImage" x="0" y="0" width="110%" height="110%" verticalAlign="middle" horizontalAlign="center"/>

<mx:LinkButton x="1094" y="0" label="Close" color="0x666666" click="this.nativeWindow.close()" top="0" right="0"/>
<mx:LinkButton x="10" y="0" label="Select Folder" click="setDir()" color="0x666666"/>
<mx:LinkButton x="99" y="0" label="SlideShow" color="0x666666" click="startSlideShow()"/>

<mx:FileSystemList  x="0" y="33" id="fst" width="200" height="100%" filterFunction="myFilter"
    extensions="{['.jpg','.jpeg','.png','.gif']}" itemClick="onClick(event)" backgroundAlpha="0.5" borderColor="0x666666" backgroundColor="0x000000">
    <mx:itemRenderer>
    <mx:Component>
        <mx:HBox horizontalScrollPolicy="off">
            <mx:Image source="{data.nativePath}"  width="30" height="30"/>
            <mx:Label text="{data.name}" width="180" height="30" color="0xcccccc"/>
        </mx:HBox>
    </mx:Component>
    </mx:itemRenderer>
</mx:FileSystemList>

</mx:WindowedApplication>

Simple Drawing tool in flex

A simple application demonstrating the free mouse drawing in flex....

View the application....

Source Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" height="634">
    <mx:Style>

        Application {
            backgroundGradientColors: #ffffcc, #ff99cc;
            backgroundGradientAlphas: 1, 1;
            themeColor: #000066;
            color: #000066;
        }
        MenuBar {
            backgroundGradientColors: #ffffcc, #ff99cc;
            backgroundGradientAlphas: 1, 1;
            themeColor: #000066;
            color: #000066;
            borderColor: #ff99cc;
            borderThicknessLeft: 11;
            borderThicknessTop: 10;
            borderThicknessBottom: 11;
            borderThicknessRight: 10;
            cornerRadius: 10;
            headerHeight: 22;
            backgroundAlpha: 0.82;
            highlightAlphas: 0.54, 0.72;
            headerColors: #e7e7e7, #ff6699;
            dropShadowEnabled: true;
        }
        Button {
            cornerRadius: 7;
            textIndent: 2;
            paddingLeft: 4;
            paddingRight: 4;
            paddingTop: 4;
            paddingBottom: 4;
            highlightAlphas: 0.67, 0.4;
            fillAlphas: 0.6, 0.67, 0.48, 0.36;
            fillColors: #ff9999, #ff00cc, #ff33cc, #ff99cc;
            fontSize: 16;
        }
        TextArea{
            borderColor: #ff99cc;
            borderThicknessLeft: 11;
            borderThicknessTop: 10;
            borderThicknessBottom: 11;
            borderThicknessRight: 10;
            cornerRadius: 10;
            headerHeight: 22;
            backgroundAlpha: 0.82;
            highlightAlphas: 0.54, 0.72;
            headerColors: #e7e7e7, #ff6699;
            dropShadowEnabled: true;
        }
        Panel {
            borderColor: #ff99cc;
            borderThicknessLeft: 11;
            borderThicknessTop: 10;
            borderThicknessBottom: 11;
            borderThicknessRight: 10;
            cornerRadius: 10;
            headerHeight: 22;
            backgroundAlpha: 0.82;
            highlightAlphas: 0.54, 0.72;
            headerColors: #e7e7e7, #ff6699;
            dropShadowEnabled: true;
        }
    </mx:Style>
    <mx:Script>
        <![CDATA[
            import mx.events.MenuEvent;
            import mx.events.IndexChangedEvent;
            private function init():void{       
                setBrushSize();
                setBrushPalette();
            }
            //Set Brush
            private function setBrushPalette():void{
                //addchild();
                for( var i:int = 1 ; i<= 16 ; i += 2 ){
                    var bCanvas:Canvas = new Canvas();
                    bCanvas.name = "brush-"+i;
                    bCanvas.width = 32;
                    bCanvas.height = 32;
                    bCanvas.graphics.beginFill( 0x00000000 , 1.0);   
                    bCanvas.graphics.drawCircle( 32 , 32 , i);
                    bCanvas.graphics.endFill();   
                    BrushPalette.addChild( bCanvas );
                    bCanvas.addEventListener(MouseEvent.CLICK , function(event:MouseEvent):void{
                        var tmpArray:Array = (event.target.name).split("-");
                        myLog.text = (event.target.name).split("-");
                        hideBrushPalette();
                        thickness.value = tmpArray[1];
                        setBrushSize();
                    });
                }
            }
            private function showBrushPalette():void{
                BrushPalette.visible = true;
            }
            private function hideBrushPalette():void{
                BrushPalette.visible = false;
            }
            private function setBrushSize():void{
                myCanvas.graphics.clear();
                myCanvas.graphics.beginFill( 0x00000000 , 1.0);
                myCanvas.graphics.drawCircle( myCanvas.width/2 , myCanvas.height/2 , thickness.value  );   
                myCanvas.graphics.endFill();
            }
            private function clearCanvas():void {
                canvas.graphics.clear();
            }
            private var oldX:Number, oldY:Number;
            private function onMouseDown(e:MouseEvent):void {
                oldX = e.localX;
                oldY = e.localY;
            }
            private function onMouseMove(e:MouseEvent):void {
                if (e.buttonDown) {
                    var g:Graphics = canvas.graphics;
                    var mx:Number = e.localX;
                    var my:Number = e.localY;       
                    if( mode == "modeBrush" ){
                        myLog.text += mode;
                        g.lineStyle(thickness.value, fgColor.selectedColor);
                        g.moveTo(oldX, oldY);
                        g.lineTo(mx, my);
                    }else if( mode == "modeErase" ){
                        myLog.text += mode;   
                        g.lineStyle(10,bgColor.selectedColor);
                        g.moveTo(oldX, oldY);
                        g.lineTo(mx, my);
                    }else{
                        myLog.text += "none";
                    }
                    oldX = mx;
                    oldY = my;       
                }
            }
            //On Change Event
            private function onChange(event:MenuEvent):void{
                var m:String = event.item.@value;
                if(  m == "filter_sharp" ){
                    onSharp();       
                } else if ( m == 'filter_blur' ){
                    onBlur();   
                }
            }
            private function onSharp():void{
            }
            private function onBlur():void{
            }
            //ツールモード選択
            private var mode:String = "modeBrush";
            private function setMode(m:String):void{
                myLog.text += mode;   
                mode = m;
            }
        ]]>
    </mx:Script>
    <mx:Sequence id="show">
        <mx:Move xFrom="-300" xTo="10" duration="300" />
    </mx:Sequence>
    <mx:Sequence id="hide">
        <mx:Move xFrom="10" xTo="-300" duration="300" />
    </mx:Sequence>
    <mx:Panel width="448" height="420" x="153.5" y="177" title="drawing" layout="absolute">
        <mx:Canvas id="canvas" width="427" height="377" mouseMove="onMouseMove(event)" mouseDown="onMouseDown(event)" x="0" y="0" borderStyle="solid">
            <mx:Button x="342" y="10" label="clear" click="clearCanvas()"/>
        </mx:Canvas>   
    </mx:Panel>
    <mx:Panel x="10" y="177" width="135.5" height="420" layout="absolute" title="Tool">
        <mx:Button x="20.25" y="4" label="Brush" click="setMode('modeBrush')"/>
        <mx:Button x="10" y="339" label="●" click="setMode('modeCircle')"/>
        <mx:Button x="11.25" y="181" label="Erase" click="setMode('modeErase')"/>
        <mx:Button x="57.5" y="339" label="■" click="setMode('modeRect')"/>
        <mx:ColorPicker id="bgColor" x="46.5" y="139" width="36" height="34" selectedColor="0xffffff"/>
        <mx:ColorPicker id="fgColor" x="32" y="123" width="36" height="34" selectedColor="0x0000ff"/>
        <mx:NumericStepper id="thickness" x="24.75" y="93" value="4" minimum="1" maximum="100" change="setBrushSize()"/>
        <mx:Canvas x="24.75" y="40" width="65" height="45" id="myCanvas" borderColor="#ff00ff" borderStyle="solid" click="showBrushPalette()"/>
    </mx:Panel>
    <mx:MenuBar x="10" y="138" id="menuBar" labelField="@label" width="712.5" height="32" itemClick="onChange(event)">
        <mx:XMLListCollection id="menuXml">
            <mx:XMLList xmlns="">
                <menuitem label="File" >
                    <menuitem label="New"   value="file_new" />
                    <menuitem label="Save"   value="file_save"/>
                    <menuitem type="separator" />
                    <menuitem label="Exit"   value="file_quite"/>
                </menuitem>
                <menuitem label="Edit">
                    <menuitem label="Clear" value="edit_clear" />
                    <menuitem label="Undo" value="edit_bak" />
                </menuitem>
                <menuitem label="Filter">
                    <menuitem label="Sharp"  value="filter_sharp"/>
                    <menuitem label="Blur"    value="filter_blur"/>
                </menuitem>               
                <menuitem label="Help">
                    <menuitem label="HowTo" value="help_howto"/>
                    <menuitem label="About" value="help_member"/>
                </menuitem>
            </mx:XMLList>   
        </mx:XMLListCollection>
    </mx:MenuBar>
    <mx:TextArea x="609.5" y="177" width="113" height="420" id="myLog" backgroundAlpha="0.47" color="#c0c0c0"/>
    <mx:HBox x="10" y="120"  backgroundAlpha="0.9" height="50" width="482" id="BrushPalette" backgroundColor="#ff80ff" showEffect="show" hideEffect="hide" visible="false"/>
    <mx:Image x="10" y="10" width="712.5" height="120" source="@Embed('assets/banner.jpg')" autoLoad="true" id="myImage"/>
</mx:Application>

Rotating the image by 360 degree

A sample application demonstrating the rotation of image image by 360 degree. The image snapshots are taken in all angles and are loaded as per the slider value.


View the application....

Customizing Combobox in Flex

A sample application demonstrating the custom combo box with the image item renderer.



View the application....

Simple FIle Upload and Download

A sample application demonstrating the file upload and download functionality using flex an php.

Watch out the max file upload size in php.ini settings..


View the application here....

Image Dragging animation

Sample application demonstrating the Image drag and drop in Flex with animation.

The image gradually fades away from the source tile list with a sound effect.

View the application here.....

PHP Session in flex.....

A sample application to demonstrate the session id using flex and PHP

Whenever you press the hts.send button in the upper left corner...The count value is returned for that session.

The right corner login button is used for the login management...

The trick in php is the session ID managed by the browser cookies to save it...

ini_set ( 'session.use_cookies', 1); 

ini_set (' session.use_only_cookies', 1);

PHP Code:

<?php

ini_set('session.use_cookies'     , 1);


ini_set('session.use_only_cookies', 1);


session_start();

$_SESSION['cnt'] ++;

if( $_POST['name'] == "testuser" && $_POST['passwd'] == "testpwd" ){

    $_SESSION['login'] = 1;


}else{


    $_SESSION['login'] = null;


    unset( $_SESSION['login'] );


}

var_dump( $_POST);

var_dump( $_GET);


var_dump( $_COOKIE );


var_dump( $_SESSION );


?>

Flex Code:

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

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


    <mx:Script>


        <![CDATA[


            private function init():void{


            }


            private function submitLogin():void{


                hts.method = "POST";


                hts.send({


                    "name":nameTxt.text,


                    "passwd":passwdTxt.text


                });


            }   
        ]]>


    </mx:Script>


    <mx:HTTPService id="hts" url="http://yoursite/sessionTest.php" resultFormat="object"/>


    <mx:TextArea x="10" y="39" width="310" height="365" text="{hts.lastResult}"/>


    <mx:Button x="245" y="9" label="hts.send" click="{hts.send();}"/>


    <mx:Panel x="342" y="20" width="336" height="238" layout="absolute" title="Login Form">


        <mx:Form x="30" y="30">


            <mx:FormItem label="Usename" required="true">


                <mx:TextInput id="nameTxt" text="testuser"/>


            </mx:FormItem>


            <mx:FormItem label="Password" required="true">


                <mx:TextInput displayAsPassword="true" id="passwdTxt" text="testpwd"/>


            </mx:FormItem>


        </mx:Form>


        <mx:Button label="Login" click="submitLogin()" x="212" y="120"/>


    </mx:Panel>


</mx:Application>

 

View the application here....

Image preloading in flex

A sample application demonstrating the Image preloading.

A swf animation will be shown till the image is fully loaded.

A sample component has been developed to load the image and show the animation till that point of time.

All you need to give is...



View the application here...

Desktop Alert program

I have written a desktop Alert Program in AIR for getting a desktop alert when a user posts an entry in the guest book.

Run the air file....Post an entry here

You would get an desktop alert within 3o secs. This needs a bit of server side scripting....cron job in ActionScript...

A sample program is already present in adobe devnet...


Download the Air file...