Tuesday, September 30, 2008
Monday, September 8, 2008
Sunday, August 17, 2008
AIR You Tube
The you tube video is downloaded from the you tube site and is played in video player control in flex.
Download the air file....
Wednesday, August 13, 2008
Simple Chat system using Blaze Ds....
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...
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>
Sunday, August 10, 2008
Simple Drawing tool in flex
A simple application demonstrating the free mouse drawing in flex....
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
View the application....
Customizing Combobox in Flex
A sample application demonstrating the custom combo box with the image item renderer.
View the application....
Saturday, August 9, 2008
Simple FIle Upload and Download
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.....
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>
Image preloading in flex
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...Monday, August 4, 2008
Desktop Alert program
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...
Wednesday, July 30, 2008
Sample Image Tile List
View the application here.... Source Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="620" height="700" creationComplete="init()"
backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
<mx:Script>
<![CDATA[
import mx.effects.easing.*;
private var myArr:Array;
public function init():void{
myArr = new Array();
myArr[0] = {"image": "img/My Computer.png","caption": "My Computer"};
myArr[1] = {"image": "img/My Documents.png","caption": "My Documents"};
myArr[2] = {"image": "img/Google.png", "caption": "Google"};
myArr[3] = {"image": "img/NotePad.png","caption": "NotePad"};
myArr[4] = {"image": "img/WordPad.png","caption": "WordPad"};
myArr[5] = {"image": "img/Email.png", "caption": "Email"};
myArr[6] = {"image": "img/MediaPlayer.png","caption": "MediaPlayer"};
myArr[7] = {"image": "img/AcrobatReader.png","caption": "AcrobatReader"};
myArr[8] = {"image": "img/iTunes.png", "caption": "iTunes"};
myArr[9] = {"image": "img/Ms Paint.png","caption": "Ms Paint"};
myArr[10] = {"image": "img/Ms Word.png","caption": "Ms Word"};
myArr[11] = {"image": "img/PowerPoint.png", "caption": "PowerPoint"};
myArr[12] = {"image": "img/Excel.png", "caption": "Excel"};
myArr[13] = {"image": "img/Calendar.png","caption": "Calendar"};
myArr[14] = {"image": "img/Search.png", "caption": "Search"};
myArr[15] = {"image": "img/My Music.png","caption":"My Music"};
myArr[16] = {"image": "img/My Pictures.png","caption": "My Pictures"};
myArr[17] = {"image": "img/My Videos.png", "caption": "My Videos"};
tl.dataProvider = myArr;
//mySlide.visible = true;
}
private function onItemClick():void{
myImage.source = tl.selectedItem.image;
myShow.play();
}
private var i:int = 0;
private function onNext():void{
if( i+5 < myArr.length){
tl.scrollToIndex(i+5);
i+=5;
myShow2.play();
}
}
private function onBack():void{
if( i ){
tl.scrollToIndex(i-5);
i-=5;
myShow2.play();
}
}
]]>
</mx:Script>
<!--################ ################-->
<mx:Parallel id="myOver">
<mx:Blur blurXFrom="30" blurYFrom="30" />
<mx:Fade alphaFrom="0.6" alphaTo="1" />
<mx:Resize widthTo="150" heightTo="150" easingFunction="Back.easeOut"/>
<mx:Glow alphaTo="20" blurYTo="20" blurXTo="20" color="0x00ff00" />
</mx:Parallel>
<mx:Parallel id="myOut">
<mx:Fade alphaFrom="1" alphaTo="0.6" />
<mx:Resize widthTo="100" heightTo="100" easingFunction="Back.easeOut"/>
<mx:Glow blurYTo="0" blurXTo="0" />
</mx:Parallel>
<mx:Sequence id="myShow2" target="{tl}">
<mx:Fade alphaFrom="0" alphaTo="1"/>
</mx:Sequence>
<mx:Fade id="myShow" alphaFrom="0" alphaTo="1"/>
<!--################ ################-->
<mx:DropShadowFilter id="dsf" blurX="10" blurY="10" color="0x330000" distance="0" strength="1" />
<mx:GlowFilter id="gf" blurX="10" blurY="10" inner="true" color="0xffffff" strength="3" />
<!--################ ################-->
<mx:VDividedBox x="0" y="10" height="100%" width="100%">
<mx:Canvas width="100%" height="100%" backgroundColor="#FFccff" >
<mx:Button label="→" click="onNext()" x="580" y="458"/>
<mx:Button label="←" click="onBack()" x="0" y="458"/>
<mx:Image id="myImage" width="528" height="439" x="46" y="10" filters="{[gf,dsf]}"/>
</mx:Canvas>
<mx:Canvas label="Canvas 2" width="100%" height="170" id="myCanvas">
<mx:TileList id="tl" x="0" y="0" width="100%" height="100%" rowCount="1"
rollOverColor="0xffffff" itemClick="onItemClick()" selectionColor="0xffccff" backgroundAlpha="0.3" direction="vertical" horizontalScrollPolicy="off"
rowHeight="160" columnWidth="160">
<mx:itemRenderer>
<mx:Component>
<mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
verticalAlign="middle" horizontalAlign="center"
borderStyle="solid" borderThickness="1" borderColor="0xffccff">
<mx:Image id="myImage" source="{data.image}" width="100" height="100" alpha="0.6"
rollOutEffect="{outerDocument.myOut}" rollOverEffect="{outerDocument.myOver}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
</mx:Canvas>
</mx:VDividedBox>
</mx:Application>
Using ActionScript to load Styles at run time
StyleManager.loadStyleDeclarations( "darkroom.swf" );
StyleManager.unloadStyleDeclarations( "darkroom.swf" );
View the application here....
Tuesday, July 29, 2008
Some Flex Resources......
Simple Explanation | More | Demo | Source | |
Component List | ||||
Easy to set up style | ||||
Easy to set up a filter | ||||
Charts Sample |
Flex convenient library..
Library Name | Simple Explanation | More | Demo | Source |
Base64Image | ||||
Json format can easily done | ||||
XML and object debugging is easy | ||||
RSS and Atom is easy to read | ||||
YouTube if you kole | ||||
Flickr if you kole | ||||
Http Client | ||||
Component resize or rotate | ||||
Drag size can pierce panel | ||||
Can read Excel | ||||
URL Address and title of dynamic changes | ||||
I value and changes in the pile-up are useful. The spring or even-tempered | ||||
Flash in the Wii remote control to use | ||||
Flex in IFrame(HTML) if you use kole | ||||
Easy to setup time | ||||
Checking the spelling of a component | ||||
Enhanced Color Picker | ||||
Features such as Stop, Play, fast-froward | ||||
Hand writing recognition | ||||
Queuing downloader |
Graphics
Library Name | Simple Explanation | More | Demo | Source |
Specular | ||||
Specular | ||||
Specular | ||||
Paper shuffling | ||||
Flex book component | ||||
AIR PDF creation | ||||
Pdf creation | ||||
QR code tags can be easily created | ||||
Mouse over a picture can easily be changed | ||||
Limited high-speed slide show | ||||
Cross bar like navigator | ||||
Clock and a small set of valves | ||||
Sound Graph components |
Components
Posts
