mxml.it

The widely adopted open protocol for instant messaging XMPP (also called Jabber) is a de facto standard used in various instant messaging systems. The aim of this article is to show how quick and easy it is to create a real time application using this protocol that relies on a restful architecture.

In order to start playing with Flex and the XMPP protocol you have to select the server you prefer and install it.
My choice is Open Fire (http://www.igniterealtime.org/), and the main reasons for this choice are:

•    It’s fully compliant to the standards
•    It’s very easy to install
•    It can work with several databases in addition to the built-in one (it supports MySQL, PostgressSQL, Oracle, SQLServer and IBM DB2)
•    It can interact with OpenLDAP and / or Active Directory
•    It can track all the IM traffic and store it as XML files
•    It has a great log panel
•    It can easily administer chats and rooms
•    Options allow control over room moderation, maximum occupancy, presence information, and more
•    There is a good ActionScript library that can interact with Open Fire

In order to setup your environment you have to follow the wizard provided with the Open Fire installer (I suggest you keep in place the built-in database and the default settings) and then you can login on your localhost to the administrative console.
Create a new Flex project with you favorite IDE and add the XIFF library (http://www.igniterealtime.org/downloads/download-landing.jsp?file=xiff/xiff_3_0_0-beta1.zip) to the project.
As you can see the XIFF library is very rich and it supports more or less all the features of the XMPP protocol.
In a project I worked on, some of the junior developers’ first reactions to the XIFF library and to the restful architecture you can get with the XMPP protocol was to interrupt development in order to study all the protocols and servers we were using for the project.
This reaction led me to write down a “driver” that can deal with the XIFF library and the XMPP protocol in order to avoid any panic in the development team and to prevent people from wasting time on a concept that was beyond the scope of the project itself.
Let’s think of this driver as a layer component that hides the complexity and the richness of the XIFF library to make things easier.
In order to show you how it works I created a very simple application with the following features:

•    Anonymous and registered login
•    Chat services discovery
•    Personal chat room creation and destruction
•    Room user list
•    Friends request support (accept and deny)
•    Messages broadcast

The user interface of this demo is quite simple and easy to understand, take a look to it on-line.

The driver is made up of several classes, events and value objects but it’s really simple to use because the two most important files you have to know are two interfaces and a class used to discover the available services

•    IRealTime
•    ServiceBrowser
•    IChatControls

The first one is responsible for the connection to the XMPP server and for the initialization of communication between client and server.
Available methods are:

•    init(port:int, resource:String):void;
// initialize the connection over a specific port and
// send the appropriate resource type the XIFF library
•    connect(domain:String, anonymous:Boolean, user:User = null):void;
// connect to a specific domain using anonymous login or an User object that is made up by username and password
•    disconnect():void;
// self explanatory
•    keepAlive(live:Boolean):void;
// keep the connection with the server alive also
// after long period of inactivity
•    connection():XMPPConnection
// return the established connection instance
•    startRealtime(room:OpenFireRoomEssentials):void
// create or join an existing room

The class that implements this interface is the RealtimeManager, each instance of which can dispatch some events. To keep things simple, the class actually wraps some events defined in the XIFF library using a custom event class. Dispatched events are:

•    UserAccessEvent.CONNECTED
•    UserAccessEvent.LOGIN
•    UserAccessEvent.LOGOUT

The ServiceBrowser class is responsible for discovering chat services, the rooms defined on each service and the details of each room.
All information is made available through a series of events. Events dispatched from the ServiceBrowser class are:

•    AvailableRoomsEvent
•    AvailableServicesEvents
•    DetailRoomEvent

Each event provides information about the services available on the server, the rooms that are active on a specific service and the detail of a specific room (needed in order to launch the realTime method).

The last interface you should know about is the IChatControls. Methods defined by this interface are:

•    updatePresence( show:String, status:String ):void;
// send to the roster the user status
•    joinRoom(room:Room, jid:UnescapedJID):void;
// join a specific room and using the JID initialize the loading of the roster
// and the set up of the room
•    isValidJID( jid:UnescapedJID):Boolean;
// check if the JID is valid or not
•    sendMessage(message:String = null, html:String = null):void;
// send a message in the joined room, it supports both html and plain text
•    sendMessageTo(text:String, tojid:EscapedJID):void;
// send a message to a specific user
•    createRoom(room:Room):void;
// create a personal room
•    destroyRoom(room:Room, reason:String = null):void;
// destroy the personal room the user has created
•    leave():void;
// allow the user to leave the current room
•    invite(userId:EscapedJID):void;
// invite a specific to the personal room
•    addFriend(user:RoomOccupant):void;
// add an user as a friends to the user roster
•    removeFriend( user:RosterItemVO ):void;
// remove a specific user from the friends list
•    grantSubscription(id:UnescapedJID, status:Boolean = true):void;
// grant to an user the request of subscription to the friends list
•    denySubscription(id:UnescapedJID):void;
// deny the subscription to a specific user
•    personalRoom():Room;
// recover the personal room created by the user
•    dispose();
// free the memory and the event listener

The class that implements this interface is the ChatManager, which can dispatch events in order to distribute the data recovered and managed internally, and the events are:

•    FriendsInvitation.FRIEND_REQUEST_INCOMING
•    FriendsEvent.LIST_RECOVERED
•    FriendsInvitation.FRIEND_REQUEST_DENIED
•    FriendsInvitation.FRIEND_REQUEST_ACCETPED
•    FriendsInvitation.FRIEND_LIST_REMOVED
•    ChatMessageEvent.GROUP_MESSAGE
•    PersonalRoomEvent.ROOM_DESTROYED
•    RoomUsersEvent.JOINED
•    RoomUsersEvent.LEFT
•    RoomUsersEvent.PRESENCE

As in the case of the RealtimeManager class, these events wrap some events defined in the XIFF library in order to keep things a little bit simpler and to prevent concepts like rosters, persistent rooms, etc. from becoming a problem during development.

Now you know everything you need to start using this driver that keeps things simpler and easier to understand.
Come back for one moment to the image that shows the user interface of our application, and let’s examine what we have to do to make it work.
In order to set up our application we have to put in place the following workflow:

•    Create an instance of the IChatControls interface implementer
•    Create an instance of the IRealTime interface implementer
•    Define the listeners for the UserAccessEvent.LOGIN event
•    Create an instance of the ServiceBrowser class in the UserAccessEvent.LOGIN handler and recover the services available through the currentServices() method
•    Handle through the user interface the data propagated through the events of the ServiceBrowser class
•    Invoke the joinRoom() method of the IChatControls interface implementer

Create a new Flex application, add the XIFF library to your libs folder and grab the source code of the driver you can get here www.mxml.it/tutorials/xiffdriver.zip.
First of all, define the user interface in the main MXML file of the project

<mx:Panel width="30%" title="Authenticate" left="5" top="5">
<mx:Form width="100%" id="inputForm">
<mx:FormItem width="100%" label="Authentication Method:">
<mx:ComboBox id="method" change="handleMethodChange()">
<mx:dataProvider>
<mx:Array>
<mx:Object label="Anonymous" value="ANONYMOUS" />
<mx:Object label="Plain" value="PLAIN" />
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
</mx:FormItem>
<mx:FormItem width="100%" label="Server:">
<mx:TextInput width="100%" id="server" text="{SERVER_DEFAULT}" />
</mx:FormItem>
<mx:FormItem width="100%" label="Username:">
<mx:TextInput width="100%" id="username" text="gino" enabled="false" />
</mx:FormItem>
<mx:FormItem width="100%" label="Password:">
<mx:TextInput width="100%" displayAsPassword="true" text="latino" id="password" enabled="false" />
</mx:FormItem>
</mx:Form>
<mx:HBox width="100%" horizontalAlign="right" paddingRight="18" paddingBottom="10">
<mx:Button label="Connect" id="connectButton" click="connect()" />
<mx:Button label="Disconnect" id="disconnectButton" click="disconnect()" enabled="false" />
</mx:HBox>
</mx:Panel>
<mx:Label id="userID" y="230" text="Here the uinque OF id will appear..." fontWeight="bold" left="5"/>
<mx:Label y="253" text="Available chat services" left="5" />
<mx:List id="chatServices" labelField="jid" y="273" left="5" width="30%" change="recoverChats(event)"  height="100"/>
<mx:Label y="379" text="Available persistent chats" left="5"/>
<mx:List id="persitenteChats" labelField="name" change="chatDetails(event)" y="399" left="5" width="30%"  height="100"/>
<mx:Label y="503" text="Room essentials information" left="5"/>
<mx:TextArea id="roomDetails" y="523" left="5" width="30%" height="100"/>
<mx:Button label="::: join the selected room :::" y="627" left="5" width="30%" click="joinRoom()"/>
<mx:Button label="::: leave the selected room :::" y="654" left="5" width="30%" click="leaveRoom()"/>
<mx:TextInput y="682" left="5" width="30%" id="roomName"/>
<mx:Button label="::: create new room :::" y="710" left="5" width="30%" click="createTemporaryRoom()"/>
<mx:Button label="::: destroy room :::" y="736" left="5" width="30%" click="destroyTemporaryRoom()"/>

<mx:Label y="10" text="Users list" right="5" fontWeight="bold"/>
<mx:DataGrid id="usersList" right="5"  top="35" enabled="false" width="40%"  height="150"/>
<mx:Button y="188" label="Add as a friend" click="addUserAsFriend()" right="5" enabled="false" id="addFriend"/>
<mx:ComboBox id="userStatus" dataProvider="{ChatManager.PRESENCE_VALUES}" change="updateStatus(event)" y="429" right="5" enabled="false" width="40%" />
<mx:Label y="220" text="Friends list" right="5" fontWeight="bold"/>
<mx:DataGrid id="friendsList" right="5" top="245" enabled="false" width="40%"  height="150"/>
<mx:Button y="398" label="Remove friend" right="5" click="removeUserAsFriend()" enabled="false" id="removeFriend"/>
<mx:TextArea id="roller" y="460" width="40%" right="5" height="100" enabled="false"/>
<mx:HBox width="40%" y="570" right="5">
<mx:TextInput id="msg"  width="80%" enabled="false"/>
<mx:Button id="send" label="send" width="20%" click="chatManager.sendMessage(msg.text);msg.text = ''" enabled="false"/>
</mx:HBox>
<mx:HBox width="40%" y="600" right="5">
<mx:TextInput id="requestFrom"  width="80%" enabled="false"/>
<mx:Button id="accept" label="accept" width="20%" click="handleRequest(true)" enabled="false"/>
<mx:Button id="deny" label="deny" width="20%" click="handleRequest(false)" enabled="false"/>
</mx:HBox>
<mx:TextArea y="630" right="5" width="40%" height="60" id="requestsLog" enabled="false"/>

Next, open a script tag and define the constants used inside the application:

private const SERVER_DEFAULT:String = "wip.gnstudio.com";
private const PERSONAL_ROOMS_SERVICE:String = "conference";
private const PERSONAL_ROOM_SUFFIX:String = "presenter";

The first one represents the address of your Open Fire installation, the second is the name of the service on which personal rooms will be created and the third is the suffix that will be added to all personal room names.

Create the class members you need to store an instance of the 3 main actors of the application

private var realtimeManager:IRealtime;
private var chatManager:IChatControls;
private var serviceBrowser:ServiceBrowser;

and the class members needed to store the details of the room the user is going to join, the unique identifier provided by the XMPP server (inject this in the chat manager to perform all operations related to a user) and the unique identifier of the user that performs a friend request

private var roomDetailsInfo:OpenFireRoomEssentials;
private var currentRequestId:UnescapedJID;
private var unescapedJID:UnescapedJID;

In order to start playing with the driver classes, perform the override of the childrenCreated method and define here both instances of the IRealTime implementer and of the IChatControls implement and the event handlers needed to manage the data propagated from these classes

override protected function childrenCreated():void {

super.childrenCreated();

connectionType = "ANONYMOUS";

chatManager = new ChatManager();
chatManager.addEventListener(RoomUsersEvent.JOINED, onRoomJoin);
chatManager.addEventListener(RoomUsersEvent.LEFT, onRoomLeft);
chatManager.addEventListener(RoomUsersEvent.PRESENCE, onRoomPresence);
chatManager.addEventListener(FriendsEvent.LIST_RECOVERED, onFriendsList);
chatManager.addEventListener(ChatMessageEvent.GROUP_MESSAGE, onGroupMessageReceived);
chatManager.addEventListener(FriendsInvitation.FRIEND_ADD_NOT_SUPPORTED, onFriendsNotSupported);
chatManager.addEventListener(FriendsInvitation.FRIEND_REQUEST_INCOMING, onFriendsRequest);
chatManager.addEventListener(FriendsInvitation.FRIEND_REQUEST_DENIED, onFriendsRequestDenied);
chatManager.addEventListener(FriendsInvitation.FRIEND_REQUEST_ACCETPED, onFriendsRequestAccepted);
chatManager.addEventListener(FriendsInvitation.FRIEND_LIST_REMOVED, onFriendsListRemoved);
chatManager.addEventListener(PersonalRoomEvent.ROOM_CREATED, onPersonalRoomCreated);
chatManager.addEventListener(PersonalRoomEvent.ROOM_EXISTS, onPersonalRoomExists);
chatManager.addEventListener(PersonalRoomEvent.ROOM_DESTROYED, onPersonalRoomDestroyed);

realtimeManager = new RealtimeManager();
realtimeManager.init(5222, "xiff");

realtimeManager.addEventListener(UserAccessEvent.LOGIN, onUserLogin);
realtimeManager.addEventListener(OpenFireErrorsEvent.ERROR, onOpenFireError);

}

Let’s start exploring one by one all the methods registered as listeners in the childrenCreated method.
The onRoomJoin listener handles the UI, enabling it after user login

private function onRoomJoin(e:RoomUsersEvent):void {

usersList.enabled = userStatus.enabled = roller.enabled = msg.enabled = send.enabled = friendsList.enabled = true;
requestsLog.enabled = accept.enabled = requestFrom.enabled = deny.enabled = true;
removeFriend.enabled = this.addFriend.enabled = true;

usersList.dataProvider = e.usersList;

}

The onRoomLeft method handles the UI, disabling controls after the user has left a room

private function onRoomLeft(e:RoomUsersEvent):void {

usersList.enabled = userStatus.enabled = roller.enabled = msg.enabled = send.enabled = friendsList.enabled = false;
requestsLog.enabled = accept.enabled = requestFrom.enabled = deny.enabled = false;
removeFriend.enabled = this.addFriend.enabled = false;

usersList.dataProvider = null;
friendsList.dataProvider = null;

}

The onRoomPresence method is the handler used to get the status of a specific user, in this sample it simply shows some logs, in a real implementation this is the method in which you have to update the status of a specific user in the room user list

private function onRoomPresence(e:RoomUsersEvent):void {

trace("Current user", e.userData.jid, "status:", e.userData.show, e.userData.status)

}

The onFriendsList method is responsible for populating the list of friends (i.e. the roster)

private function onFriendsList(e:FriendsEvent):void {

friendsList.dataProvider = e.freindsList;

}

the onGroupMessageReceived method handles all messages sent against the ‘general’ chat

private function onGroupMessageReceived(e:ChatMessageEvent):void {

roller.text += "[" + e.from + " @ " + (e.lastMessage.time || "") + "]:" + e.lastPlainMessage + "\n";
callLater(scrollText, [roller]);

}

The onFriendsNotSupported method catches the notification that anonymous users cannot add another user to their friends list

private function onFriendsNotSupported(e:FriendsInvitation):void {

Alert.show("Chat not configured for friends support...", "Attention!");

}

The onFriendsRequest method handles friend requests that come from another user, storing that user’s unique identifier and updating the user interface controls

private function onFriendsRequest(e:FriendsInvitation):void {

currentRequestId = e.jid;
requestFrom.text = "Friend request from " + e.jid.bareJID + ", accept?\n";

}

The onFriendsRequestDenied method notifies the application that a friend request has been denied by another user

private function onFriendsRequestDenied(e:FriendsInvitation):void {

requestsLog.text += "Friend request from " + e.jid.bareJID + ", DENIED!!!!!!!!\n";
callLater(scrollText, [requestsLog]);

}

The onFriendsRequestAccepted method notifies the application that a friend request has been accepted

private function onFriendsRequestAccepted(e:FriendsInvitation):void {

requestsLog.text += "Friend request from " + e.jid.bareJID + ", accepted!!!!!!!!\n";
callLater(scrollText, [requestsLog]);

}

The onFriendsListRemoved method handles the event that notifies the application that a user has been removed from the friends list

private function onFriendsListRemoved(e:FriendsInvitation):void {

requestsLog.text += "Removed from " + e.jid.bareJID + ", friend list!!!!!!!!\n";
callLater(scrollText, [requestsLog]);

}

The onPersonalRoomCreated method simply gives an Alert to notify the application that the personal room has been created

private function onPersonalRoomCreated(e:PersonalRoomEvent):void {

Alert.show("Your personal room has been created....", "Attention!");

}

The onPersonalRoomExists method notifies the user that his personal room already exists and that another one cannot be created (this is not a limitation of XMPP but only a feature of the driver that doesn’t allow more than one personal room per user)

private function onPersonalRoomExists(e:PersonalRoomEvent):void {

Alert.show("Sorry, you can have only one personal room....", "Attention!");

}

The onPersonalRoomDestroyed method handles notifications that the personal room a user joined has been destroyed

private function onPersonalRoomDestroyed(e:PersonalRoomEvent):void {

Alert.show("Sorry, the room you are chatting has been destroyed....", "Attention!");

}

The onOpenFireError method handles all errors; in this sample implementation it handles only the 401 error code that means that a registered user has inserted wrong username and password

private function onOpenFireError(e:OpenFireErrorsEvent):void {

if (e.errorCode == 401) {

userID.text = "wrong credentials";

}

}

The on method handles anonymous or registered logins and initializes the ServiceBrowser instance and all the listeners needed to recover the information from this class. It’s important to note here that the realtimeManager instance is finally connected, that the keepAlive property is set to true and that the ServiceBrowser instance uses the connection to the server to start exploring available services

private function onUserLogin(e:UserAccessEvent):void {

userID.text = "logged as " + e.username;
unescapedJID = e.unescapedJID;

var serverJID:EscapedJID = new EscapedJID(e.unescapedJID.domain);

serviceBrowser = new ServiceBrowser(serverJID, realtimeManager.connection);
serviceBrowser.addEventListener(AvailableServicesEvents.SERVICES_RECOVERED, onAvailableServices);
serviceBrowser.addEventListener(AvailableRoomsEvent.ROOMS_RECOVERED, onAvailableRooms);
serviceBrowser.addEventListener(DetailRoomEvent.ROOM_DETAILS, onDetailRoom);

serviceBrowser.currentServices();

connectButton.enabled = false;
disconnectButton.enabled = true;

realtimeManager.keepAlive = true;

}

The listeners registered to the events dispatched from the ServiceBrowser are those that populate the controls of the user interface (i.e. the list of services and available rooms) and that store information about the room the user is going to join

private function onAvailableServices(e:AvailableServicesEvents):void {

e.target.removeEventListener(e.type, arguments.callee);

chatServices.dataProvider = e.currentServices;

}

private function onAvailableRooms(e:AvailableRoomsEvent):void {

persitenteChats.dataProvider = e.currentRooms;

}

private function onDetailRoom(e:DetailRoomEvent):void {

roomDetailsInfo = e.details;

}

All the building blocks needed to handle the real time communication provided through XMPP are now in place. The following code list includes all the methods called from the user interface and it’s self-explanatory: you will now be able to run the application against your Open Fire installation

private function handleRequest(status:Boolean):void {

if (status) {

chatManager.grantSubscription(currentRequestId, true);

} else {

chatManager.denySubscription(currentRequestId);

}

currentRequestId = null;

}

private function chatDetails(e:ListEvent):void {

var jid:EscapedJID = new EscapedJID(e.itemRenderer.data.jid);

serviceBrowser.roomDetails(jid)

}

private function recoverChats(e:ListEvent):void {

var jid:EscapedJID = new EscapedJID(e.itemRenderer.data.jid);

serviceBrowser.currentChatRooms(jid)

}

private function leaveRoom():void {

chatManager.leave()

}

private function joinRoom():void {

chatManager.joinRoom(realtimeManager.startRealtime(roomDetailsInfo), unescapedJID);

}

private function updateStatus(e:ListEvent):void {

var item:Object = e.currentTarget.selectedItem;

chatManager.updatePresence(item.label, item.data);

}

private function removeUserAsFriend():void {

chatManager.removeFriend(friendsList.selectedItem as RosterItemVO);

}

private function addUserAsFriend():void {

chatManager.addFriend(usersList.selectedItem as RoomOccupant);

}

private function handleMethodChange():void {

if (method.selectedItem.value != "ANONYMOUS") {

username.enabled = true;
password.enabled = true;

} else {

username.enabled = false;
password.enabled = false;

}

connectionType = method.selectedItem.value;

}

private function connect():void {

if (connectionType == "ANONYMOUS") {

realtimeManager.connect(server.text, true);

} else {

var user:User = new User();

user.username = username.text;
user.password = password.text;

realtimeManager.connect(server.text, false, user);

}

}

private function destroyTemporaryRoom():void {

if (chatManager.personalRoom) {

chatManager.destroyRoom(chatManager.personalRoom);

}

}

private function createTemporaryRoom():void {

var roomDetails:OpenFireRoomEssentials = new OpenFireRoomEssentials();
roomDetails.name = PERSONAL_ROOM_SUFFIX + roomName.text;
roomDetails.category = PERSONAL_ROOMS_SERVICE;

chatManager.createRoom(realtimeManager.startRealtime(roomDetails));

}

private function disconnect():void {

realtimeManager.disconnect();
chatManager.dispose();

connectButton.enabled = true;
disconnectButton.enabled = false;

chatServices.dataProvider = [];
persitenteChats.dataProvider = [];

usersList.enabled = userStatus.enabled = roller.enabled = msg.enabled = send.enabled = friendsList.enabled = false;
requestsLog.enabled = accept.enabled = requestFrom.enabled = deny.enabled = false;
removeFriend.enabled = removeFriend.enabled = false;

}

internal function scrollText():void {

arguments[0].verticalScrollPosition = roller.verticalScrollPosition + 8;

}

Conclusion
The real time applications are really engaging, both for the end user and for a developer. Sometimes people can be afraid of the potential difficulties in this kind of application but, as you have seen in this article, you don’t have to be a rocket scientist to be able to start playing with it.
The XMPP standard is not the only one available for the Flash Platform; the great advantage that comes with this standard is that you can handle several client side applications (developed with different technologies) with the same back end logic.

Image file formats are standardized means of organizing and storing images, let’s start to recap the building blocks of them in order to move faster in our flex applications.

Image file size (expressed as the number of bytes) increases with the number of pixels composing an image, and the color depth of the pixels and we use the words color depth or bit depth (usually a computer graphics term) in order to descibe the number of bits used to represent the color of a single pixel in a bitmapped image.

The color depths are summarized as following:

1-bit color (21 = 2 colors) monochrome, often black and white
2-bit color (22 = 4 colors) CGA, gray-scale early
3-bit color (23 = 8 colors) many early home computers with TV displays
4-bit color (24 = 16 colors) as used by EGA and by the least common denominator VGA standard at higher resolution
5-bit color (25 = 32 colors) Original Amiga chipset
6-bit color (26 = 64 colors) Original Amiga chipset
8-bit color (28 = 256 colors) most early color Unix workstations, VGA at low resolution, Super VGA, AGA, color Macintoshes.
12-bit color (212 = 4096 colors) some Silicon Graphics systems, Neo Geo, Color NeXTstation systems, and Amiga systems in HAM mode.
16-bit color (216 = 65536 colors) some color Macintoshes.

You can easily understand by the following images list (tanks to wikipedia) how much the color depth can impact the quality of your images.

There are two types of image file compression algorithms, lossless and lossy.

Lossless compression algorithms reduce file size without losing image quality, though they are not compressed into as small a file as a lossy compression file (when image quality is valued above file size, lossless algorithms are typically chosen).
Lossy compression algorithms take advantage of the inherent limitations of the human eye and discard invisible information, most lossy compression algorithms allow for variable quality levels (compression) and as these levels are increased, file size is reduced.

The most common image formats you can deal with in order to create image manipulation algorithms are: JPEG, TIFF, PNG and GIF.

JPEG (Joint Photographic Experts Group) files are (in most cases) a lossy format, the DOS filename extension is JPG (other operating systems may use JPEG).
Nearly every digital camera can save images in the JPEG format, which supports 8 bits per color (red, green, blue) for a 24-bit total, producing relatively small files so it’s usual that an application acquires images in this format.
JPEG files suffer generational degradation when repeatedly edited and saved are increased, file size is reduced so be careful to save too often the changes you do in your application.
The Exif (Exchangeable image file format) is an algorithm incorporated in the JPEG software used in most cameras, its purpose is to record and to standardize the exchange of data between digital cameras and editing and viewing software.The data is recorded for individual images and includes such things as camera settings, time and date, shutter speed, exposure, image size, compression, name of camera, color information, etc.
When images are viewed or edited by image editing software, all of this image information can be displayed and you can use them to create faster visualization tools.

The TIFF (Tagged Image File Format) is a flexible format that normally saves 8 bits or 16 bits per color (red, green, blue) for 24-bit and 48-bit totals, respectively, using either the TIFF or the TIF file extension. TIFFs compression algorithm are lossy and lossless and some offer relatively good lossless compression for bi-level (black & white) images.
The TIFF can handle device-specific color spaces, such as the CMYK defined by a particular set of printing press inks and for this reason is quite diffused in printing and in the photographer world.

The PNG (Portable Network Graphics) file format was created as the free, open-source successor to the GIF that supports true color (16 million colors) while the GIF supports only 256 colors.
The PNG file excels when the image has large, uniformly colored areas, the lossless PNG format is best suited for editing pictures, and the lossy formats, like JPG, are best for the final distribution of photographic images, because JPG files are smaller than PNG files.

The GIF (Graphics Interchange Format) format is limited to an 8-bit palette, or 256 colors, this makes the GIF format suitable for storing graphics with relatively few colors such as simple diagrams, shapes, logos and cartoon style images.
It uses a lossless compression that is more effective when large areas have a single color, and ineffective for detailed images or dithered images.

Each format has it’s own structure and in order to be able to manipulate images deeply you have to refer to each specific format, here is a list of all the file format specifications http://www.martinreddy.net/gfx/2d-hi.html.

You can consider the image manipulation process divided into two separate steps, the image transformation (rotation, zoom, vertical flip, mirroring, etc.) and the pixel manipulation.
In order to perform transformation the most efficient in Flex and in ActionScript is the affine geometry.

Affine geometry is a form of geometry featuring the unique parallel line property where the notion of angle is undefined and lengths cannot be compared in different directions, it is a generalization of Euclidean geometry characterized by slant and scale distortions.
Affine geometry can be developed in terms of the geometry of vectors, with or without the notion of coordinates, so an affine space is distinguished from a vector space of the same dimension by ‘forgetting’ the origin (sometimes known as free vectors).
Affine geometry can be seen as part of linear algebra, re-open your high school books and take a deep breath!

In linear algebra, linear transformations can be represented by matrices.
Matrices allow arbitrary linear transformations to be represented in a consistent format, suitable for computation (i.e. your transformation data are represented in a way that can be used with any software)…this also allows transformations to be concatenated easily (by multiplying their matrices).

For rotation by an angle θ clockwise about the origin, the functional form is x’ = xcosθ − ysinθ and y’ = xsinθ + ycosθ

Written in matrix form, this becomes

To represent affine transformations with matrices, we must use homogeneous coordinates, this means representing a 2-vector (x, y) as a 3-vector (x, y, 1), and similarly for higher dimensions.
All ordinary linear transformations are included in the set of affine transformations, and can be described as a simplified form of affine transformations hence, any linear transformation can be also represented by a general transformation matrix.

A matrix is a rectangular array (or table) of numbers consisting of any number of rows and columns it consists of m rows and n columns is known as an m x n matrix, this value represents the matrix’s dimensions.
You’ll commonly seen matrices with numbers in rows and columns surrounded by two large bracket symbols

Affine transformations are transformations that preserve collinearity and relative distancing in a transformed coordinate space, this means points on a line will remain in a line after an affine transformation is applied to the coordinate space in which that line exists.
It also means parallel lines remain parallel and that relative spacing or distancing, though it may scale, will always maintain at a consistent ratio.

Flash provides a 3 x 3 matrix in which u,v,w are sort of dummy here though their values remain as 0, 0, 1
You can manipulate the others properties (a,c,c,d,tx and ty) in order to get a transformation, following some examples

• Translation: tx or ty changes would move either x pixels or y pixels
• Scale: a or d changes would affect xScale or yScale
• Skew: b or c changes skew either parallel to the x or y axis
• Rotation: a,b,c and d changes affect the rotation (for an angle θ  a is cos(θ ), b is sin(θ ), c is -sin(θ ) and d is cos(θ ))

The properties of the Matrix class in ActionScript are basically just a collection of your main a, b, c, d, tx, and ty properties those you need to be concerned about when dealing with transformations, additional methods are also provided to make working with these matrices easier.
Some of the more common methods are:

translate(tx:Number, ty:Number) : voidscale(sx:Number, sy:Number) : void

rotate(angle:Number) : void

identity() : void

Flash Player 10 expands greatly on the drawing API in ActionScript, more so than any other version of the Flash Player since the initial introduction of the drawing API in Flash Player 6
New features include:

• Use of vectors (typed arrays) for improved throughput and use of memory
• Support for non-zero winding rules
• An API for drawing triangles with support for 3D perspective rendering
• Drawing API data objects

The introduction of vectors help a lot developers to make more efficient and powerful transformations

Vectors are almost exactly like arrays at their core, having pretty much the same API

There are only a few real differences:

• Elements within a vector all share the same type
• Vectors have an additional property, fixed, which determines whether or not the length of the vector can change dynamically
• The vector constructor allows for two optional arguments, length and fixed
• There is no equivalent to the bracket ([]) array constructor

The Graphics class contains now the drawTriangles method

public function drawTriangles(vertices:Vector.<Number>, indices:Vector.<int>=null, uvtData:Vector.<Number>=null, culling:String="none");

This method uses a Vector.<Number> to specify point locations for a path to be drawn, only with drawTriangles, the commands internally are predefined to use the point locations to draw triangles (Every 3 points, i.e. 6 numbers, represents a triangle path to be drawn)

It seems now that we are starting to talk about 3D because 3D models (in the end) are represented by a collection of triangles in space this is a good starting point for the 3D… Why talking about 3D in Flash if we are dealing with images manipulation?

Trough triangle the transformations are now faster and accurate, affine transformations and the division in triangles of an image help you to get a better image manipulation procedure, see the demo to understand that the drawing mechanism is totally different (no cutting on the sides of the image as if you are working with the classic bitmap transformation.

Let’s start now with some building blocks you need in order to play with pixels and better understand the code that is contained in the luminance, gray scale, tint and red eye correction demos you’ll get at the end of this post.

In order to perform advanced manipulation on an image you need to start to play with the pixels of an image, ActionScript provides a lot of class to help you on this task, the most relevant are

• Bitmap
• BitmapData

The Bitmap class represents display objects that represent bitmap images data, These can be images that you load with the flash.display.Loader class, or they can be images that you create with the Bitmap() constructor.

The Bitmap() constructor allows you to create a Bitmap object that contains a reference to a BitmapData object.
After you create a Bitmap object, use the addChild() or addChildAt() method of the parent DisplayObjectContainer instance to place the bitmap on the display list.
I said “image data”, the BitmapData class let you play with this data (i.e. pixels).
You can use the methods of the BitmapData class to create arbitrarily sized transparent or opaque bitmap images and manipulate them in various ways at runtime.
This class lets you separate bitmap rendering operations from the internal display updating routines of Flash Player and moreover by manipulating a BitmapData object directly, you can create complex images without incurring the per-frame overhead of constantly redrawing the content from vector data.
Each 32-bit integer is a combination of four 8-bit channel values (from 0 to 255) that describe the alpha transparency and the red, green, and blue (ARGB) values of the pixel.
There is a complete list of all the method of the class in the ActionScript documemntation, I would like to point your attention on the histogram method added to the player 10 that computes a 256-value binary number histogram of a BitmapData object

histogram(hRect:Rectangle = null):Vector.<Vector.<Number>>

This is one of the key to play with the luminance effect in Flex.
Trough the combination of different pixel manipulation methods you can get complex effects like luminance
Relative luminance follows the photometric definition of luminance, but with the values normalized to 1 or 100 for a reference white.
Like the photometric definition, it is related to the luminous flux density in a particular direction, which is radiant flux density weighted by the luminosity function of the CIE Standard Observer.
For RGB color spaces that use the ITU-R BT.709 primaries relative luminance can be calculated from linear RGB components:

Y = 0.2126 R + 0.7152 G + 0.0722 B

Let see the demos to see a lot of pixel manipulation in place, in order to get the source of the effects you see here please refer to the nabiro images packaging you can get here http://agile.gnstudio.com/nabiro.

• Gray scale and tint component for flex http://www.mxml.it/samples/imagemanipulation/grayscale/NabiroGrayScale.html 
• Luminance effect and color channel manipulation in flex http://www.mxml.it/samples/imagemanipulation/luminance/NabiroLuminance.html
• Red eyes correction in flex http://www.mxml.it/samples/imagemanipulation/redeye/RedEyeDemo.html