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>
Posts
