RIA WORLD

custom button skins Flex MXML

2009-02-17T12:55:00.000-08:00

xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">

label="Button"
skin="{null}"
upSkin="{null}"
overSkin="mx.skins.halo.ButtonSkin"
downSkin="mx.skins.halo.ButtonSkin"
disabledSkin="mx.skins.halo.ButtonSkin"
icon="@Embed('assets/Button.png')" />

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

xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">

Button {
skin: ClassReference(null);
upSkin: ClassReference(null);
overSkin: ClassReference("mx.skins.halo.ButtonSkin");
downSkin: ClassReference("mx.skins.halo.ButtonSkin");
disabledSkin: ClassReference("mx.skins.halo.ButtonSkin");
icon: Embed("assets/Button.png");
}

label="Button" />

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

xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">

import mx.skins.halo.ButtonSkin;

[Embed("assets/Button.png")]
private const buttonIcon:Class;

private function init():void {
btn.setStyle("skin", null);
btn.setStyle("upSkin", null);
btn.setStyle("overSkin", ButtonSkin);
btn.setStyle("downSkin", ButtonSkin);
btn.setStyle("disabledSkin", ButtonSkin);
btn.setStyle("icon", buttonIcon);
}
]]>

label="Button"
initialize="init();" />

Create XML the Right way

2008-12-11T00:09:00.000-08:00

I was working in PHP to convert my query results into XML, even though we could create this XML using normal XML header type and printing in all the tags. The problem with this type of development is that you can easily go wrong and encoding special characters could be a pain.

Here is the code for creating XML using DOM, very simple and straight forward.

I found this code from the book "PHP HACKS" by Jack D. Herrington, I thought it was worth sharing.

$books = array(
array(
id=>1,
author => "Jack",
name => "code generation in action"
),
array(
id=>2,
author => "Jack",
name => "podcasting Hacks"
),
array(
id=>3,
author => "Jack",
name => "best of PHP"
)
);

$dom = new DomDocument('1.0');
$dom->formatOutput = true;

$root = $dom->createElement("books");
$dom->appendChild($root);

foreach($books as $book){
$bn = $dom->createElement("book");
$bn->setAttribute('id',$book['id']);

$author = $dom->createElement("author");
$author->appendChild($dom->createTextNode($book['author']));
$bn->appendChild($author);

$name = $dom->createElement("name");
$name->appendChild($dom->createTextNode($book['name']));
$bn->appendChild($name);

$root->appendChild($bn);

}

header("content-type: text/xml");
echo $dom->saveXML();

?>

Building my Music Blog & library application

2008-10-31T11:51:00.000-07:00

Initially started as a project to test the capabilities of flash to load tons of data from an xml file, later I made this into a flash music library application with support of PHP at the back end. I have completed the new version of the same in Flex and its so fast the data loads in a tick of a second.

The latest addition is the video playback functionality which I will be implementing in a weeks time.

visit my current version of Music Blog, a site with a collection of film songs based on Indain classical ragas and a lot more

SCORM 2004 communication wrapper

2008-09-28T11:19:00.000-07:00

Thinking of how to convert your legasy e-learning content to a SCORM 2004 compatible packages.I was also working on a similar requirement and I thought of making a communication wrapper for all this old legacy SWFs . The SCORM wrappe component helps repackaging old SWF contents into SCORM 2004 packages with all the informations stored and used for reports.I have started working on the basic version with simple sequencing features back in mid 2007 it was so successful that we could make more than a 1000 packages with the e-learning content developed way back could be reused and repackaged.The new version with new features are on plan and will update as and when they are in shape.

The packages thus made could be imported into any SCORM 2004 compactible LMS and can have new sequencing features.

Play an online game and chek your knowledge about places

2008-09-28T10:58:00.000-07:00

Its been quite a while I posted some thing on my blog.I am bussy preparing some future with PHP and Flex.For the time being I thought would introduce some old stuf but which really got my attention.This game I did almost an year back, still remember my self struggling to hit the project deadline with my feaver shooting up hardly could hold my head straight but any way got my action scripts right.I am so happy to see that so many people (75000) have played this cute little game.

The game is ver simple you are the bird and you have to find places thats all! The whole world is yours, keep your energy to fly by grabbing some of the fish that come to the ocean surface.

Click here to play!

Accessing Java Objects from Flex

2008-03-15T11:09:00.000-07:00

From Flex it is lot more easier to access methods of Java Objects with out using any services, you can achieve this by using the "mx:RemoteObject" tag which will interact with the Java objects using AMF (Action Message Format).
mx.servicetags.Service
Details of the tag properties are available at adobe Flex language reference.
For detailed reference and example visit ASDoc link

Brush strokes using BitmapData

2008-03-13T07:26:00.000-07:00

Couple of weeks back I was going through the "BitmapData" class that is in the flash display package. My idea was to implement different types of brush (brush stroke) like in the photoshope into a small drawing application.Finally the whole thing became very simple.
The idea is when the user drag the mouse over the canvas we have to draw a pattern, a normal stroke will be a circle or a rectangle but here we need some custom strokes.
First we will identify a pattern which would be a combination of single pixel squares arranged to get the specific pattern.To get this pattern at run time we write a loop which uses the 'fillRect' functionality to create the pattern.
Each brush strokes would be a class on its draw function implements the fillRect according to the pattern.
dummy code will look like this
public function mouseMove(event:Event):void {
if(_drawMe){
brushStroke(_color); }
}

private function brushStroke(_color):void {
var fiber_lng:Number =30;
for(var i:int=0;i<=fiber_lng;i++){
bitmap.fillRect(new Rectangle(mouseX+Math.round(Math.random()*10), mouseY+Math.round(Math.random()*10),_pixelWidth, _pixelHight), _color);
}
}
Since we are only changing the color values of a canvas, this approach has proved very smooth and fast, and the main thing that has to taken care of is not overdoing the loops to create complex strokes.
Hope this will help in some of your application

Developing Custom Events for FLEX

2008-03-06T07:04:00.000-08:00

Ever wondered while coding for events, it would have been great if I had a custom event whose result event target contain what I want , then this is what you should do.

I would make a class called "CustomEvent" extending the "Events" class which will take care of all the custom event details. I also have another class which trigger the events as soon as it get the data from a webservice .

the DataEventHandler class looks something like this

package mypackage{

import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.soap.WebService;
import mx.rpc.soap.LoadEvent;
import mx.controls.Alert;
import flash.events.EventDispatcher;
import flash.events.Event;
import flash.display.Sprite
import components.CustomEvent;

public class DataEventHandler extends Sprite{
private var service_handler:WebService;
private var methodList:ArrayCollection;
private var isLoaded:Boolean = false;

public function startService(path:String):void{
service_handler = new WebService();
service_handler.wsdl= path;
service_handler.loadWSDL();

service_handler.addEventListener(FaultEvent.FAULT,faultHandler);
service_handler.addEventListener(LoadEvent.LOAD,loadHandler);
service_handler.GetOverviewXML.addEventListener(ResultEvent.RESULT,onOverviewResult);
service_handler.GetOverviewXML.addEventListener(FaultEvent.FAULT,faultHandler);
}
private function loadHandler(event:LoadEvent):void {
isLoaded = true;

dispatchEvent(new Event("onLoadService"));
}

private function faultHandler(event:FaultEvent):void {
Alert.show("error :"+event.fault);
}
private function onOverviewResult(r:ResultEvent):void{

dispatchEvent(new CustomEvent("OverviewEvent",r.result));

}
}
The CustomEvent Class looks like this.

package mypackage{

import mx.controls.Alert;
import flash.events.EventDispatcher;
import flash.events.Event;

public class CustomEvent extends Event{

public var itemDescription:*;

public static const OVERVIEW:String ="OverviewEvent"

public function CustomEvent(type:String,description:* ){
super(type,true, true); //bubble by default

itemDescription=description;
}

override public function clone():Event{
return new CustomEvent(type,itemDescription); // bubbling support inside
}

}

}

From the development side I would write

data_handler = new DataEventHandler();
data_handler.startService("servicepath?wsdl");
data_handler.addEventListener(CustomEvent.OVERVIEW,onOverviewLoad);

private function onOverviewLoad(e:CustomEvent):void{

for(var ns:String in e.itemDescription){
Alert.show(ns+ "::"+e.itemDescription[ns]);
}

}
Note how we included the "CustomEvent" target object. use a for loop to get all the data stored by the result object.Hope rest of the code is self explanatory. This classes has been very useful for me.

AIR FLV subtitling application.

2008-03-03T01:45:00.000-08:00

I was tracking the AIR development very closly through Adobe Labs(A greate place to learn RIA) AIR 3.0 Beta along with Flex Builder was a nice toy to play with, then came a requirement to add subtitles to FLV vidoes. The subtitle will be an XML file and tracked by the custom FLV player (which I developed in mid 2007 ) .

Now the trouble was preparing the subtitling file with the accurate time details of each videos, and found that's gona eat up a lot of time, so I thought why not build an AIR application and came up with the "CaptionAir".

The first thing I decided when thinking about the application was that the user are going to play with video files and hence all the button should have key board shortcuts.Other features includes users can load a file by browsing the local files or from a server path.The "start Time" and "End Time" will track the time in between the subtitle has to come.Once the subtitle text is added it comes to a list box below.

Clicking on the list box items will automaticaly takes the application to "Edit" mode and track the video to the appropriate position.Using the time scrubber at the bottom the user can sail to any position of the video and preview how the subtitles will work in run time.Clicking on the save button will export the entire subtitle information into an XML file.

Adding the certification and converting it to an installer and all are fairly simple.

Flex .Net educational portal

2008-03-03T00:40:00.000-08:00

At last our Flex based educational portal is now ready and it is called "GoggleBox". Me and my web tech savvy project mate Sumit was asked to work on an educational portal entirely based on Flex and .Net. The challenge was too good to deny . We first worked on the over all requirements and features that could be implemented.Sumit in no time realised that we need a custom CMS engine to develop and implement this portal, while I was designing the Flex application that could be plugged and played into the system.

In between the development the challenge was to make custom events to communicate with our web service which was solved once I could develop a couple of APIs to handle the issue.Over all it was a challenging and wonderful experience.

The product was an instant hit as soon as it was launched for the BET 2008 shows at London.

visit GoggleBox

I just woke up!

2008-02-29T08:58:00.000-08:00

For the last couple of years I was so busy working that I forgot to update my technical blog(that was bad).Mean while a lot of changes happened in the world of RIA. The winds of change was also brushing me and now am in the midst of FLEX and AIR(Apollo), I know Flash is still their.Now I have decided to update my Tech Blog regularly

adding rows to datagrid at run time

2005-06-09T05:01:00.000-07:00

If you are working with an editable data grid component
and as you reach the last column you need to add the next row
so that the next set of informations can be add do this:

drag a datagrid component to the stage
make you data grid big enough since am not goin to give column width and all
into the code .

once the data is ready to send it also checks for any null rows.here I have only checked for
a specific value before deleting a row.

The context Menu helps to delete any selcted row.
once you delete a row make sure that you reflect the change in the dataprovider
and reload the entire data with the dataprovider if you want to edit the DataGrid agian.

give an instance name : myDataGrid_dg

and give some life with this action script :

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

import mx.controls.gridclasses.DataGridColumn ;

var my_cm:ContextMenu = new ContextMenu();
my_cm.hideBuiltInItems();

var menuItem_cmi:ContextMenuItem = new ContextMenuItem("delete_handle", deleteHandler);
my_cm.customItems.push(menuItem_cmi);

this.menu = my_cm;

function deleteHandler() {
(myDataGrid_dg.removeItemAt(myDataGrid_dg.selectedIndex));
}

data_array = new Array();
data_array =[{name:"", price:"",number:""}];

myDataGrid_dg.dataProvider = data_array;

// this is the simplest way to make a DG ready

myDataGrid_dg.editable =true;

//make the DG editable
var num =0;

listen = new Object();

// a listener object is add to trigger events

listen.cellFocusOut = function(obj){
if(obj.columnIndex ==2){
num ++;
var obj ={name:"", price:"",number:""}
myDataGrid_dg.addItemAt(num,obj);
//here you can also use
//myDataGrid_dg.addItem(obj);
}
}

myDataGrid_dg.addEventListener("cellFocusOut",listen);

send_btn.onRelease=function(){
trace(myDataGrid_dg.length);
for(i = myDataGrid_dg.length ; i >= 0 ;i-- ){
if((myDataGrid_dg.getItemAt(i).price) == undefined||(myDataGrid_dg.getItemAt(i).price) == ""){
myDataGrid_dg.removeItemAt(i);
}
}

}
//each time a cell gets out of focus the event is triggered

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

pop up with image size

2005-02-14T23:08:00.000-08:00

If you are making an image viewier and wnt the pop up to resize according to the image size this is wot u have to do.
I hav'nt used the loader component of flashMX 2004 which make things more simple, here am using the old techique of loading image into an empty movie clip.

to make things working open a new flash doc inside the lib'
make three movie clip.

1.boder_mc -- this will have the outer border of you image that you are showing
2.holder_mc -- this will be any empty movie clip to which you will load the image
3.loading_mc -- this movie clip will have the loading animation

once this is done drag all of them into another movie clip called frame_mc
and drag frame_mc to stage.

keep the same instance name and the order

on the one and only frame paste this code and that's it .

------------------------------------------------------------------------------------------------
var id ;
var x_range;
var y_range;
var counter =1;

function loadImage(){
frame_mc.loader_mc._visible=true;
frame_mc.holder_mc.loadMovie("test.jpg");
id = setInterval(traceAmount,100);
}

function traceAmount() {
frame_mc.holder_mc._alpha =0;
if(frame_mc.holder_mc.getBytesLoaded()== frame_mc.holder_mc.getBytesTotal()){
xrange = frame_mc.border_mc._width -( frame_mc.holder_mc._width+10);
yrange = frame_mc.border_mc._height-( frame_mc.holder_mc._height+10);
frame_mc.loader_mc._visible=false;
clearInterval(id);
id = setInterval(popupSizer,100,xrange,yrange);
}
}

function popupSizer(x:Number,y:Number){

var xdiv_val = x/10;
var ydiv_val = y/10;
frame_mc.border_mc._width -= xdiv_val;
frame_mc.border_mc._height -= ydiv_val;

counter ++;

if(counter == 10){

frame_mc.border_mc._width = frame_mc.holder_mc._width+10 ;
frame_mc.border_mc._height= frame_mc.holder_mc._height+10 ;
frame_mc.holder_mc._alpha =100;
clearInterval(id);
}
}

loadImage();
stop();

----------------------------------------------------------------------------------------------
I have used some constants , be ready to change those and improvise the look and feel of the out put.
Happy coding

how to use PrintJob class

2004-08-23T22:33:00.000-07:00

How to use the Print job class

The new PrintJob class offers some kweel features
who are trying to print dynamic contents or different pages of
contents .You can put into use all ur programing skills to make the
content appear some wer on stage before the addPage() command takes it to
the printer spool.

A sample code will look like this
PrintObject.start() will return a boolean value,to check
for any error in printing.

print_btn.onRelease = function(){
my_pg= new PrintJob();
var myResult = my_pg.start();
if(myResult) {
// I am not writing a dynamic loop here,just to make your self understand
// how addPage() works .First of all make you self underStand that flash
//prints an area of the stage .So you should make any thing that you need
// to print shud be available some were on the stage.
// flash prints every thing as vector so you need to tell flash to print it
// as a bitmap.{printAsBitmap:true}

my_pg.addPage("print_mc",{xMin:0,xMax:468,yMin:0,yMax:485},{printAsBitmap:true},1);
print_mc.gotoAndStop(2);
my_pg.addPage("print_mc",{xMin:0,xMax:468,yMin:0,yMax:485},{printAsBitmap:true},2);

my_pg.send();
}
delete(my_pg);

}

//similarly you cod also print levels
// Starting 50 pixels to the right of 0,0 and 70 pixels down,
// print an area 500 pixels wide and 600 pixels high
// of frame 4 of level 5 in vector format
//(my_pj.addPage(5, {xMin:50,xMax:550,yMin:70,yMax:670},null, 4)

// applying the same logic you cod also print dynamic content in a text area//
//for that make sure that each time you add page you shud need to scroll the
//content up to the next position//

you can download the sample file "CLICK HERE"

new brand of key words in AS2.0

2004-08-05T21:23:00.000-07:00

With the introduction of AS2.0 Flash has
now become more powerful, and the key proteins
are provided by some new sets of key words
which are very essential for object oriented
programming in flash and they are

• class
• static
• public
• private
• get
• set
• dynamic
• intrinsic
• extends
• interface
• implements
• import
We can take a look at each of this in detail..

ADSL2+

2004-07-21T20:37:00.000-07:00

We all know how fast we could surf the internet with a broadband connection,okey then ADSL is the technology that brings us broadband.Now its time for ADSL2+, an improvement in the orginal technology that may revolutionise the way we use the Internet.
The main bottle neck in providing broadband connection is the infrastructure,all those old copper wires running down under our cities may be celebrating its centenary soon.
Chris de Courcy-Bower, Lucent:
"Nowadays we are trying to squeeze 25 megabits per second down
a cable that was only designed to carry three kilohertz of traffic."

And this kind of cabling is knwn as POTS
"Plain Old Telephone System"

DSL is Digital Subscriber Line, and that refers to the connection between you and the exchange, and the A stands for Asymmetric, which means the you can download data faster than you can upload it.

ActionScript 2.0 is oop

2004-07-20T21:58:00.000-07:00

Hi,Did you guys know that ActionScript(AS)2.0 is completly object oriented? ha ha.. Just joking..
But for guys who are new to AS2.0 keep in mind that AS 2.0 is Object Oriented and it gives you much much breathing space as a programmer.Reusability now will have more meaning,you reuse a class you created in AS2.0 by inheriting the functionality of that class in other classes, the fundamental metaphors of OOP mirrors closly the natural world which would realy help you in the design process .
The simplest way of making a class in AS2.0 is like this

take your fav: editor and type in
//---------------------------------------------------------//
class myColor{
public var myStatus:String;

// this is a public function and returns a String value::
public function checkStatus:String(){
myStatus = "cool";
return(myStatus);
}

}
//----------------------------------------------------------//
Now things that are new to AS 2.0::
All class files should be external .as files.
while naming ur as files keep the file name and the class name the same, might not be new if you were using JAVA.
keep the file along with your .fla or flash applications class folder.
so here the file name will be "myColor.as"

In your flash you write
//-----------------------------------------------------------//
var statusChk:myColor = new myColor();
trace(statusChk.checkStatus());

//-----------------------------------------------------------//

and thats it you are into the track :)

For more information tutorials and goodies clickActionScript Learning Guide from Macromedia

If thats not enough and to know more about AS2.0 Click here

New discussion forum

2004-07-19T22:09:00.000-07:00

To all those Macromedia Director developers out there, here is a new discussion forum
I have'nt went in detail to find how deep is the rabit hole but it looks to hold a good amount of information happy surfing to

shocksites

Flash geting too smarter

2004-07-19T21:05:00.000-07:00

As the Interface area become too smaller flash become too smarter
Its so very interesting how Macromedia Flash developed through the years. Now Flash is ever where and its catching up the interest of developers who works for the device market as well.
Keeping up with the latest trends in the market and PDA's and mobile phones happens to be another organ of our body,Flash fits in best when it comes to conveing the Information.Macromedia Flash enabled Televisions and set top boxes are next on the list.
Flash is the smart guy in town, every one seems to know him very well,Most of the webs sites uses Flash.Its realy very flexible yet incredibily powerful with which you could create rich graphics and complex interactions.Flash do go well with all kinds of input devices like touch screens, remote controls, key boards etc.The huge army of developers that the Flash community holds is its biggest asset.

For More Info and to get the development kit check out

development kits @ macromedia.com

Articles and Tutorials

Using Macromedia Flash with Sony CLIÉ

Creating a Macromedia Flash Portfolio for Mobile Devices

Creating XML based graphs

2004-06-23T23:27:00.000-07:00

I was working on some kweel graphing mechanisams with flash MX
that included line graph , 3D bar graphs and some pie charts
This I did for some web sites with PHP to controll the server
side .I will be soon making a smart movie clip of the same to
get values from an xml file and creating the graphs.I will soon
update on the happenings.

Welcome to the

2004-05-26T06:21:00.000-07:00

Hi all welcome to my Blogg I will be updating this with
interesting facts about Flash MX and Director and wot ever I kno..
so happy Blogging