Pages

Friday, October 26, 2012

App: Flash to HTML live communication without using Javascript

This is a demo in which by using flash we can create a dynamic text web-page. You're going to see it's application in my future blogs. We can create flash applications in which the swf will take care of calculations, etc. and the webpage text would get updated from inside.

Demo:

This text will get re-written over here by using id="fl2htmltop" and clicking on the provided button.



Similarly, this text will also get re-written by using id="fl2htmlbottom".

Note:
  1. <param name="allowscriptaccess" value="always" />
  2. <div id="fl2htmltop">Sample text to re-written over here.</div>
  3. <div id="fl2htmlbottom">Sample text to re-written over here.</div>

Thursday, October 25, 2012

App: Number Base Converter

This program is a number base converter. It's working is described below:

Number (in base aà Change base from base a to b à Number (in base b)
or
Na à Change base à Nb

where,
  • Na = Number (in base a)
  • Nb = Number (in base b)

Enter the input Number & it's Base and enter the ouput Number & it's Base. Then press convert button.

App: Net Connection Checker

I have developed this net connection checker utility tool to check the net connection at real-time. It is of great help while developing or testing FMS or Red5 based application. The user is only required to put the URL of that media server.



Note
  • FMS stands for Adobe's Flash Media Server
  • RED5 is a name of an open source media server

Thursday, October 18, 2012

Android: How to install Adobe AIR on Android emulator?

To install Adobe AIR run-time on Android emulator, follow this format for creating the batch file:

Format:

$ [drive-name]:
$ cd "[path-to-android-sdk]\android-sdk-windows\platform-tools"
$ adb -e install -r "[path-to-AIR-runtime-apk-file]"


Sample for Adobe Flash CS5.5:

$ d:
$ cd "D:\Programs\android-sdk_r15-windows\android-sdk-windows\platform-tools"
$ adb -e install -r "C:\Program Files (x86)\Adobe\Adobe Flash CS5.5\AIR2.6\runtimes\air\android\emulator\Runtime.apk"


Sample for Adobe Flash Builder 4.5:

$ d:
$ cd "D:\Programs\android-sdk_r15-windows\android-sdk-windows\platform-tools"
$ adb -e install -r "C:\Program Files (x86)\Adobe\Adobe Flash Builder 4.5\sdks\4.5.0\runtimes\air\android\emulator\Runtime.apk"


Note: The system should have Adobe Flash CS5.5 installed prior to running this batch file.

Android: How to install application on Emulator via command-line?

To install an Android application file (*.apk) on Emulator, follow these steps:

Step-1: Create a blank batch file.
Step-2: Open the file in editor.
Step-3: Copy the format:

$ [drive-name]:
$ cd "[actual-path-to-android-sdk-folder]\android-sdk-windows\platform-tools"
$ adb -e install -r "[actual-path-to-apk-file]"

Step-4: Paste it in the file.
Step-5: Replace the instruction-text inside square-bracket with the actual paths.
Step-6: Verify it, if it looks similar to the sample given below:

$ d:
$ cd "D:\Programs\android-sdk_r15-windows\android-sdk-windows\platform-tools"
$ adb -e install -r "D:\Workshop\Flash\ANDROID\test1\test1.apk"

Step-7: Save the file.

Now double-click the batch file to install the app in android emulator.

Note: This method can be used while development when the developer need to install the *.apk file again and again.

Android: How to start Emulator from command-line?

To create the batch file to open the emulator via command-line, follow the steps given below:

Step-1: Create a blank batch file.
Step-2: Copy this format:

$ [drive-name]:
$ cd [path-to-android-sdk]\android-sdk-windows\tools
$ emulator -avd [android-emulator-name]


Step-3: Paste it in the batch file.
Step-4: Edit the instruction-text inside square-bracket accordingly.
Step-5: Verify the modified text, if it looks similar to the one given below:

$ d:
$ cd D:\Programs\android-sdk_r15-windows\android-sdk-windows\tools
$ emulator -avd AndroidSimulator


Step-6: Save the file.

Now the batch file is ready to be used. Just double-click on the batch-file to run the emulator.

Wednesday, October 17, 2012

AS3: Custom Tab-bar Controller


Flash movieclip architecture:
<movieclip name="tab_mc">
 <frameset>
  <frame name="normal">
   <textfield name="caption" framespan="4"></textfield>
   <graphics color="#333333"></graphics>
  </frame>
  <frame name="over">
   <graphics color="#666666"></graphics>
  </frame>
  <frame name="down">
   <graphics color="#999999"></graphics>
  </frame>
  <frame name="disabled">
   <graphics color="#333333" alpha="0.7"></graphics>
  </frame>  
 </frameset>
</movieclip>

<movieclip name="tabbar_mc">
 <frameset>
  <frame>
   <movieclip name="tab1" instanceof="{tab_mc}"></movieclip>
   <movieclip name="tab2" instanceof="{tab_mc}"></movieclip>
   <movieclip name="tab3" instanceof="{tab_mc}"></movieclip>
  </frame>
 </frameset>
</movieclip>

Class source-code:
package engine.ui 
{
 import flash.display.MovieClip;
 import flash.events.MouseEvent;
 import flash.text.TextField;
 /**
  * ...
  * @author Abhishek Kumar
  */
 public class CTabBar 
 {
  private var Container:MovieClip;
  
  private var proceed:Function;
  
  private var activeTab:String;
  
  public function CTabBar(mc:MovieClip) 
  {
   Container = mc;
   
   defaultState();
  }
  
  private function defaultState():void
  {
   for (var o:* in Container)
   {
    Container[o].gotoAndStop('normal');
    Container[o].buttonMode = true;
    Container[o].mouseChildren = false;
   }
   
   activeTab = Container.tab1.name;
   Container.tab1.gotoAndStop('down');
  }
  
  public function setLabels(list:Array):void
  {
   for (var i:int = 0, len:int = Container.numChildren; i < len; i++)
    TextField(Container['tab' + Number(i + 1)].caption).text = list[i];
  }
  
  public function getActiveTabIndex():int
  {
   return  Number(activeTab.substr(activeTab.length - 1));
  }
  
  public function attachListeners(callback:Function):void
  {
   proceed = callback;
   
   for (var o:* in Container)
   {
    Container[o].addEventListener(MouseEvent.MOUSE_UP, onClick_Tab);
    attachEffects(Container[o]);
   }
  }  
  
  private function onClick_Tab(me:MouseEvent):void
  {
   activeTab = MovieClip(me.currentTarget).name;
   
   for (var o:* in Container)
   {
    if(Container[o].name != activeTab)
     Container[o].gotoAndStop('normal');
   }
   
   var tabIndex:int = getActiveTabIndex();
   proceed(tabIndex);
  }
  
  private function attachEffects(mc:MovieClip):void
  {
   mc.addEventListener(MouseEvent.MOUSE_OVER, onOver_Container);
   mc.addEventListener(MouseEvent.MOUSE_OUT, onOut_Container);
   mc.addEventListener(MouseEvent.MOUSE_DOWN, onDown_Container);
  }
  
  private function detachEffects(mc:MovieClip):void
  {
   mc.removeEventListener(MouseEvent.MOUSE_OVER, onOver_Container);
   mc.removeEventListener(MouseEvent.MOUSE_OUT, onOut_Container);
   mc.removeEventListener(MouseEvent.MOUSE_DOWN, onDown_Container);
  }
  
  private function onOver_Container(me:MouseEvent):void
  {
   MovieClip(me.currentTarget).gotoAndStop('over');
  }
  
  private function onOut_Container(me:MouseEvent):void
  {
   if(activeTab == MovieClip(me.currentTarget).name)
    MovieClip(me.currentTarget).gotoAndStop('down');
   else
    MovieClip(me.currentTarget).gotoAndStop('normal');
  }
  
  private function onDown_Container(me:MouseEvent):void
  {
   MovieClip(me.currentTarget).gotoAndStop('down');
  }
  
 }

}

AS3: Sliding Toggle Switch like iPhone


The movieclip format would be like this:
<movieclip name="controller_mc" width="200">
 <frameset>
  <frame name="left">
   <movieclip name="slider_mc" x="0" width="100"></movieclip>
   <graphics framespan="2">
    <textfield name="caption1">ON</textfield>
    <textfield name="caption2">OFF</textfield>
   </graphics>
  </frame>
  <frame name="right">
   <movieclip name="slider_mc" x="100" width="100"></movieclip>
  </frame>
 </frameset>
</movieclip>
The source code of the class is given below:
package engine.ui 
{
 import flash.display.MovieClip;
 import flash.events.MouseEvent;
 /**
  * ...
  * @author Abhishek Kumar
  */
 public class CToggleSwitch 
 {
  private var Container:MovieClip;
  private var proceed:Function;
  
  private var toggle:int;
  
  public function CToggleSwitch(mc:MovieClip) 
  {
   Container = mc;
  }
  
  public function initiate():void
  {
   Container.buttonMode = true;
   Container.mouseChildren = false;
   
   toggle = 1;
   toggleState(toggle);
  }
  
  public function setLabels(list:Array):void
  {
   Container.caption1.text = list[0];
   Container.caption2.text = list[1];
  }
  
  public function attachListeners(callback:Function):void
  {
   proceed = callback;
   Container.addEventListener(MouseEvent.CLICK, onClick);
  }
  
  public function detachListeners():void
  {
   Container.removeEventListener(MouseEvent.CLICK, onClick);
  }
  
  private function onClick(me:MouseEvent):void
  {
   toggle = (toggle == 1)?2:1;
   toggleState(toggle);   
   
   proceed(toggle);
  }
  
  private function toggleState(state:int):void
  {
   switch (state)
   {
    case 1: Container.gotoAndStop('right');
     break;
    case 2: Container.gotoAndStop('left');
     break;
   }
  }
  
 }

}

AS3: Grid Algorithms


Algorithm-1

Is is using horizontal and vertical lines to create grid.
public function main(maxRows:int, maxColumns:int):void
{
 var containerWidth:Number = Container.width - 1;
 var containerHeight:Number = Container.height - 1;
 
 var cellWidth:Number = containerWidth / maxRows;
 var cellHeight:Number = containerHeight / maxColumns;
 
 var sprite:Sprite = drawGrid(maxRows, maxColumns, cellWidth, cellHeight, containerWidth, containerHeight);
 sprite.name = 'grid';
 Container.addChild(sprite);
}

public function destroy():void
{
 Container.removeChild(Container.getChildByName('grid'));
}

private function drawGrid(rowCount:Number, colCount:Number, rowGap:Number, colGap:Number, rowLen:Number, colLen:Number):Sprite
{
 var sprite:Sprite = new Sprite();
 var position:Number;
 
 var shapeRow:Shape = new Shape();
 for (var i:int = 0; i <= rowCount; i++)
 {
  position = rowGap * i;
  shapeRow = drawLine(position, 0, position, colLen);
  sprite.addChild(shapeRow);
 }
 
 var shapeCol:Shape = new Shape();
 for (var j:int = 0; j <= colCount; j++)
 {
  position = colGap * j;
  shapeCol = drawLine(0, position, rowLen, position);
  sprite.addChild(shapeCol);
 }
 
 return sprite;
}

private function drawLine(x1:Number, y1:Number, x2:Number, y2:Number):Shape
{
 var shape:Shape = new Shape();
 shape.graphics.moveTo(x1, y1);
 shape.graphics.lineStyle(1, COLOR_BORDER);
 shape.graphics.lineTo(x2, y2);
 return shape;
}

Algorithm-2

It is using series of rectangles in horizontal and vertical direction to make a grid.
public function main(maxRows:int, maxColumns:int):void
{
 var containerWidth:Number = Container.width - 1;
 var containerHeight:Number = Container.height - 1;
 
 var cellWidth:Number = containerWidth / maxRows;
 var cellHeight:Number = containerHeight / maxColumns;
 
 var sprite:Sprite = drawGrid(maxRows, maxColumns, cellWidth, cellHeight);
 sprite.name = 'grid';
 Container.addChild(sprite);
}

public function destroy(maxRows:int, maxColumns:int):void
{
 // to avoid memory leakage first remove all the child elements
 var o:* = Container.getChildByName('grid');
 for (var i:int = 0; i < maxRows; i++)
  for (var j:int = 0; j < maxColumns; j++)
   o.removeChild(o.getChildByName('c' + i + j));
 // then remove the parent container
 Container.removeChild(o);
}

private function drawGrid(rowCount:Number, colCount:Number, cellWidth:Number, cellHeight:Number):Sprite
{
 var subcontainer:Sprite = new Sprite();
 for (var i:int = 0; i < rowCount; i++)
 {
  for (var j:int = 0; j < colCount; j++)
  {
   var sprite:Sprite = createCell(cellWidth, cellHeight);
   sprite.x = cellWidth * i;
   sprite.y = cellHeight * j;
   sprite.name = 'c' + i + j;
   subcontainer.addChild(sprite);
  }
 }
 return subcontainer;
}

private function createCell(w:Number, h:Number):Sprite
{
 var sprite:Sprite = new Sprite();
  var shape:Shape = new Shape();
  shape.graphics.beginFill(COLOR_DEFAULT);
  shape.graphics.lineStyle(1, COLOR_BORDER);
  shape.graphics.drawRect(0, 0, w, h);
  shape.graphics.endFill();
 sprite.addChild(shape);
 return sprite;
}

Ways of representing Flash Movieclip architecture as pseudo-code


Way-1: JSON
Here is a representation of a Movieclip architecture in JSON format.
{
  movieclip: {
    name: 'controller_mc',
    data: {
      frame: [
        {
          name: 'normal',
          data: {
            textfield: {
              name: 'caption',
              framespan: '4'
            },
            graphics: {
              color: '#333333'
            }
          }
        },
        {
          name: 'over',
          data: {
            graphics: {
              color: '#666666'
            }
          }
        },
        {
          name: 'down',
          data: {
            graphics: {
              color: '#999999'
            }
          }
        },
        {
          name: 'disabled',
          data: {
            graphics: {
              color: '#333333',
              alpha: '0.7'
            }
          }
        }
      ]
    }
  }
}
The same pseudo-code can be shown in a more compact manner.
{
  movieclip: {
    name: 'controller_mc',
    data: {
      frame: [
        {
          name: 'normal',
          layer: {
            textfield: { name: 'caption', framespan: '4' },
            graphics: { color: '#333333' }
          }
        },
        {
          name: 'over',
          layer: {
            graphics: { color: '#666666' }
          }
        },
        {
          name: 'down',
          layer: {
            graphics: { color: '#999999' }
          }
        },
        {
          name: 'disabled',
          layer: {
            graphics: { color: '#333333', alpha: '0.7' }
          }
        }
      ]
    }
  }
}
Way-2: XML
It can be also represented as XML tags that seems more sleek & compact.
<movieclip name="controller_mc">
 <frameset>
  <frame name="normal">
   <textfield name="caption" framespan="4"></textfield>
   <graphics color="#333333"></graphics>
  </frame>
  <frame name="over">
   <graphics color="#666666"></graphics>
  </frame>
  <frame name="down">
   <graphics color="#999999"></graphics>
  </frame>
  <frame name="disabled">
   <graphics color="#333333" alpha="0.7"></graphics>
  </frame>  
 </frameset>
</movieclip>

AS3: Custom Button Controller - 2


Here is the pseudo code for the flash application architecture of custom-button movieclip.
<movieclip name="controller_mc">
 <frameset>
  <frame name="normal">
   <textfield name="caption" framespan="4"></textfield>
   <graphics color="#333333"></graphics>
  </frame>
  <frame name="over">
   <graphics color="#666666"></graphics>
  </frame>
  <frame name="down">
   <graphics color="#999999"></graphics>
  </frame>
  <frame name="disabled">
   <graphics color="#333333" alpha="0.7"></graphics>
  </frame>  
 </frameset>
</movieclip>
The controller class of the custom button.
package engine.ui 
{
 import flash.display.MovieClip;
 import flash.events.MouseEvent;
 /**
  * ...
  * @author Abhishek Kumar
  */
 public class CButton 
 {
  private var Container:MovieClip;
  private var proceed:Function;
  
  public function CButton(mc:MovieClip) 
  {
   Container = mc;
  }
  
  public function initiate():void
  {
   Container.mouseChildren = false;
   Container.buttonMode = true;
   Container.gotoAndStop('normal');
  }
  
  public function setLabel(label:String):void
  {
   Container.caption.text = label;
  }
  
  public function attachListener(callback:Function):void
  {
   proceed = callback;
   Container.addEventListener(MouseEvent.MOUSE_UP, onUp);
   Container.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
   Container.addEventListener(MouseEvent.MOUSE_OVER, onOver);
   Container.addEventListener(MouseEvent.MOUSE_OUT, onOut);
  }
  
  public function detachListener():void
  {
   Container.removeEventListener(MouseEvent.MOUSE_UP, onUp);
   Container.removeEventListener(MouseEvent.MOUSE_DOWN, onDown);
   Container.removeEventListener(MouseEvent.MOUSE_OVER, onOver);
   Container.removeEventListener(MouseEvent.MOUSE_OUT, onOut);
  }
  
  private function onUp(me:MouseEvent):void
  {
   Container.gotoAndStop('normal');   
   proceed();
  }

  private function onOver(me:MouseEvent):void
  {
   Container.gotoAndStop('over');
  }

  private function onOut(me:MouseEvent):void
  {
   Container.gotoAndStop('normal');
  }

  private function onDown(me:MouseEvent):void
  {
   Container.gotoAndStop('down');
  }

 }

}

App: Interact - Multiplication of Proper/Improper fractions

This application was made for demo purpose that by using flash technologies the understanding of the concept can be made a lot easier for the learner.

App: Cryptographer - Blowfish

The application can encrypt or decrypt a message based on the provided key. It is using Blowfish algorithm to do so.

Software: Compiler Agent

The Compiler Agent is a GUI based desktop application to work on top of command-line. It can speed-up your command-line repetitive work, like compiling a program again and again. To use this application, user can set a template for command-line parameters. Then browse & select files/folders to insert the path in the template.

Download Link: CompilerAgent_v3.3.zip

The screen-shots of the application are given below:





Tuesday, October 9, 2012

Mobilesite: Thomas H. Heist Insurance Agency

Let me share my experience of creating a mobile-site using using jQuery Mobile for one of my client heistinsurance.com.

They already have the website for desktops. It is based on WordPress. Now they want a mobile-site for the same. And they choose to use the same database for the form submission, so that there will be a single point of reference.

Though it was a bit tricky but somehow I had successfully completed the project. Here is the snapshot.

Link: http://heistinsurance.com/m/

Since I was using jquery-mobile for mobilesite development but the main website was based on WordPress  So it became very difficult to merge these technologies & platforms. The jquery-mobile is a JavaScript based client-side framework while WordPress is php based server-side framework.

So the major challenge I had faced was to merge these technologies.

One way is to write a script that can insert the submitted form-data directly into the database. But it is not that easy in WordPress because the forms were made dynamically, so if there is 5 fields in a form then after submission you will see the 5 entry in the database that will contain 1 field entry per row. Since it is sharing a common id as a key to extract it back. It seems too complicated to make that plugin which can bypass the flow. As I was not in a mood to change the server-side scripts, so I chose to hack around it.

Then, I thought if there is a form on jquery-mobile then it can submit the data to the database via the main website form. So I had extracted the link where the main website form is submitting data, and modified that relative link into absolute one and put it in my jquery-mobile form. Then tested it ... voila ... it worked! The only hitch was that after submission it re-directs the mobile-site to the website. Now I need to stop this redirection. Then, AJAX came to me as life-saver. Though finding a way to use it perfectly was too tricky. But after banging my head for few days or may be a week got me through it. I swear, this was the biggest challenge in this project. But as I got through the form submission, the validation was also happening for free. It is happening because the serve-side script was handling that. So now I have to just catch those messages and put them at there respective places. That's it!

Now this mobile-site is running successfully at http://heistinsurance.com/m/.