Anirudh Sasikumar

Welcome

This website is the byproduct of my continuing experiment with hypertext. It's ultimate aim is to be the online equivalent of a crumpled up notebook. Make of it what you will.

Random quote¹:

The standard analogy from the "Objects Are Yummy" School is that a
class is like a cookie-cutter and objects are like
cookies. Presumably, the garbage collector is much like a cookie
monster.
- Meilir Page-Jones, Fundamentals of Object-Oriented Design in UML

Categories:

FlexCPPBridge(1) Flex(18) AIR(8) FrndNet(2) SQL(1) CGI(1) SSH(1) Java(1) Win32(1) Latex(2) Emacs(6) Javascript(2) Notes(3) Gnus(1) CSS(2) Rant(5) C++(2) Linux(6) EmacsWiki(4) Web(4) C(5) Programming(11) General(5)

Latest entries:

Total Posts: 92

anirudhs.chaosnet².org uses valid XHTML³, valid CSS and valid RSS.

^[1] Chosen at publish time from QuotePage.
^[2] CHAOSnet is a networking protocol for LISPMs, ITS and others.
^[3] Though the pages are served as text/html.

Notes

Network Monitor in Flash Builder 4

June 1, 2009 2:30 PM
Developers bank a lot on their IDE. Any minor improvement to the environment that aids them in building applications is always welcome. Flex developers, rejoice! A public beta of the next version of Flex Builder called Adobe Flash Builder 4 is out with a long list of new features and improvements over existing ones. Adobe Flash Builder 4 Beta (formerly called Flex Builder) is out at Adobe Labs. In this post, I will take a detailed look at Network Monitor, which allows you to inspect the HTTP traffic between your Flex application and the server.

Wireshark this, Fiddle that

Developing client side applications require you to inspect the actual HTTP traffic at some point or the other. This is especially true in the case of Flex apps¹ where you don't get the actual HTTP response data back in the case of HTTP errors like 500 or 404.

Ethereal, Wireshark, etc. is a great tool for monitoring network traffic and troubleshooting communication problems. But these tools can't sniff localhost (in Windows) or SSL traffic.

The solution in such cases is to use a local HTTP proxy tool such as Fiddler or Charles. But even then, these tools cannot narrow down requests from other programs and neither can they correlate between the HTTP request and the source code that invoked the request.

How awesome would it be if you could do this right from Flash Builder?
It would be super cool! Enter "Network Monitor"

Network Monitor

The minute I heard of this feature, the first thing that came to my mind is "Goodbye Stream error"².

There's a tab called Network Monitor in the bottom part of Flash Builder 4 along with tabs to Problems, Data / Services, ASDoc, Console. Switch to the Network monitor tab to see what the exact request your Flex app is sending and what response the server gave (HTTP headers and body).

Responses from the server can be viewed inline as a tree when the response is XML or AMF (yes, transparent AMF decoding!). The power users can always see the raw response in its entirety.

You can also double click a request in the view and it will take you to the correct line in the source code from where that request was made. This is awesomeness for me and there's no way you could do that with Fiddler / Wireshark.

Tips for using Network Monitor

You can disable or suspend Network monitor at any point by pressing the appropriate buttons on the top right of the network monitor tab.
Clicking the elapsed time column to sort the requests according to the elapsed time can quickly tell you which request is taking the least time and which the most.
There's also this nifty feature where you can save the entire request / response data along with elapsed time, associated source code, etc. to an XML file.

How does it do that?

Network monitor works by conditionally enabling code in the Flex SDK (depending upon whether Network monitor is enabled or not) that re-routes the Flex RPC calls to an internal proxy. This proxy makes the outward HTTP request. Therefore, it can report the actual HTTP request and response and is not bound by the several security and transformation rules that the Flash Player enforces on network requests.

This is important to understand because:

Only the Flex RPC APIs will be re-routed to the proxy and reported in Network Monitor.

It does not intercept the low-level flash player APIs. For that, you'd still have to depend on other tools.

Writing a Simple HTTPService Application in Flex SDK 4

Try out Network Monitor using this simple application that uses an HTTPService to query the AXNA RSS:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark"   
  xmlns:mx="library://ns.adobe.com/flex/halo" 
  minWidth="1024" minHeight="768"
  creationComplete="service.send()">
  <fx:Script>
  <![CDATA[
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;

protected function service_resultHandler(event:ResultEvent):void
{
    Alert.show("Result is " + event.result.RDF.channel.description);
}

protected function service_faultHandler(event:FaultEvent):void
{
    Alert.show("Fault: " + event.fault.faultString);
}
  ]]>
  </fx:Script>
  <fx:Declarations>
    <mx:HTTPService id="service" 
      url="http://feeds.adobe.com/xml/rss.cfm?query=byMostRecent&amp;languages=1"
      result="service_resultHandler(event)"
      fault="service_faultHandler(event)"
      />
  </fx:Declarations>
</s:Application>

Tip: In Flash Builder 4, you don't have to hand code this, try out the DCD HTTPService wizard. For a long list of excellent Flash Builder 4 data-centric development³ related articles and demos, keep a watch on the Flash Builder 4 page on Sujit's blog.

CategoryFlex Comment(s)

^[1] You get an "Error 2032- Stream Error" because the browser might not give the error response code or body to the plugin.
^[2] Yes, I know that it the monstrous Stream error will not go away, but I will get to see why I got that without running a third party tool.
^[3] There's a Data/Services tab with which you can connect to various server side backends in a wizard workflow to define a service. This service can be dragged and dropped on to a UI component.

Emacs Plugin for Eclipse Ganymede

May 1, 2009 7:31 PM
Eclipse is good. But as a die hard Emacs fan, Emacs is the IDE for me. I needed a better way to quickly switch back and forth between Emacs and Eclipse. So I cooked up an Eclipse plugin that does exactly that. Click a button in the toolbar and the current active window in Eclipse will open in Emacs. It will also try to position the cursor at the same place it was in the Eclipse window. Also, you can configure the plug-in to execute any lisp code after doing this.

This plug-in uses gnuserve (available at Andy Norman's site and at meltin.net) and requires gnuclientw to be in the PATH variable. You can also point to the full path to gnuclientw in the plugin's preferences page.

Screenshots

Emacs Plugin for Eclipse Toolbar and Menu:

Preferences:

Download

The plug-in and its sources can be downloaded from:

com.anirudh.emacseclipse_1.0.1.jar - Put this in your eclipse/plugins directory and restart eclipse.
emacseclipse_source.zip - Source code licensed under the LGPL.

This plugin has been tested with Eclipse ganymede and Emacs 22.1. Not sure if this will work in other versions of Eclipse. If you do manage to get it to work, drop in a comment and I'll update this article.

Note for Flex Builder Users

Strangely, when an Actionscript or MXML file is opened via the Flex Builder plug-in, getSelectionProvider().getSelection().getOffset() returns an offset which does not directly map the character position in Emacs. So this caused the cursor position in emacs to be more than the actual. Till this is worked out, in the case of MXML and AS files, the plugin will only move the cursor to the correct line and not the correct character offset in Emacs.

This issue does not affect the Java or any other perspective.

History

The only way to open a file in Emacs from Eclipse was to right click the file and say "Open In" another editor and pick gnuclientw. This closes the window in Eclipse and any time you open that file, it always opens in Emacs. Needless to say, this was very frustrating.

I had tried out the Emacs Plug-In for Eclipse by Alan Donovan and was disappointed when it did not work. As he had LGPLed his source, I used it to build this plugin.

CategoryEmacs Comment(s)

Flex Datamap Control

March 2, 2009 5:42 PM
Imagine if you could use the same data provider you use for your DataGrid or TileList on a component and it would plot that data on a map based on a "Location" / customizable field. Clicking each item would pop up an item renderer that shows the object associated with that location. Now imagine if changes to your data provider were automatically tracked; you could hold down Control to box select multiple items; you could freely draw on the map with the drawing scaling up and down with the zoom level and you could also save and restore the drawing. Stop imagining. This is exactly what the Flex Datamap control does.

Now that we are done with that grammatically incorrect paragraph, let's get down to business. The primary use case that this control is trying to address is the case where you have data that has location information in it and you want to plot it in a map and show the data associated with that location on clicking it (mapifying a datagrid?). This control is built on top of the excellent Yahoo! AS3 Map component.

Data(map)

The Flex Datamap control takes in a dataProvider similar to the way List / DataGrid does, checks each object for a mapField property (by default "Location") and plots a marker on the map at that location. Any change to the data provider ArrayCollection now reflects in the map. You can add / edit / remove objects or apply a filter function and have the map update automatically (Similar to how DataGrid, List, etc. operate). Though this may sound trivial, there are some subtle points to note: the bounds of the map and the zoom level are automatically adjusted so as to show all the markers.

Datamap also draws an overlay (which the Yahoo AS3 component has APIs for) and tries to make sure the overlay has more enclosed areas.

Item and Marker Renderers

Clicking a marker pops up an item renderer (which you can change) which pans along with the map (there is some lag though) and correctly clips at the map boundaries. You can also specify a marker renderer to specify how each marker is drawn (this feature is built-in with the Yahoo! AS3 Map Component).

Marker Selection

Clicking a marker selects it and selectedObject will point to the data associated with that marker. Control + Click lets you select multiple markers which are accessible via selectedObjects. You can also select markers by holding down the Control key and drawing a selection box with the mouse. Any markers under the selection box get selected (this is a toggle, so if a selected marker was present, it will get unselected).

Free form drawing on the map

Hold down the Shift key and you can draw on the map. The drawing is recorded based on the latitude / longitude so scales and pans correctly with the map. You can also save this data as a Base64 encoded string and restore it by setting the freeformLinesBase64 property.

Demo

You can try out a demo of the component here. The demo tries to address most of the configurable properties of the control (but properties such as enableDrawMode are not there). Try playing around with the editable DG, changing the item and marker renderers, etc.

Credits

The credit for the idea goes to Ramesh Srinivasaraghavan (our Idea Ninja; officially a Senior Computer Scientist and Platform Evangelist) who heads Adobe's India Evangelism team. The initial idea was "mapifying a datagrid". The credit for implementation (and introducing bugs) goes to yours truly.

Download

You need to download and have the YahooMap SWC present in the libs directory for Datamap to work. Once you have that, grab the datamap SWC from here:

Datamap SWC

Just drop in the Datamap SWC in your libs folder and you should be able to instantiate DataMap from MXML. Remember to set your Yahoo! App ID before using the component.

<controls:DataMap
	yahooAppID="yourappidhere" 
	id="mapGrid"
	dataProvider="{mapColl}" 
	mapClick="mapClick(event)"
	enableDrawMode="true"
	mapDoubleClick="mapDClick(event)"
	geocoderFailure="mapFault(event)"		
	width="75%" height="100%" />

If you want a simple use case of the component, take a look at DataMapSimpleExample.mxml in Datamap Example Source.

The component is licensed under the MPL 1.1 and its source is available for download:

Datamap Source
Datamap Example Source

Warning: There probably are bugs in the component. If you happen to stumble across them, send me a mail and I'll try to get it sorted out.

CategoryFlex Comment(s)

Flex OpenID Login Component

February 17, 2009 6:19 PM
OpenID is a free and easy way to login to multiple websites without having to remember a username and password for each site. A hard thing to get right with OpenID is the user experience. Since the concept is new, many users don't know how to deal with it. The right experience is critical to successfully being able to handle OpenID login on your site and this Flex component attempts to solve that problem similar to the way openid-selector does it for HTML.

Personally, I think OpenID rocks and is solving a very important problem on the internet. But consider this: sandbox violation had at least 10 people enter their email address instead of the OpenID URL on the very first day. Some people tried their email, some tried entering "ok", some even tried entering "helpme". Now, the main reason for this was that I had a very simple login dialog. It just said "Sign In / Join" and "OpenID URL". As you can imagine, sandbox violation lost plenty of registrations that way.

I recently cooked up a Flex component so that the OpenID experience on any Flex site can be better than what I had to initially cope with. Kudos must be given to andyjm who built openid-selector for this Flex component is based on that work.

As usual, the disclaimer applies that I am no usability or UI expert, but I do believe this component makes life easier¹ for flex developers handling OpenID login.

Features of the component:

Allows you to type in an OpenID URL.
Also, shows a combobox with a pre-populated list of OpenID providers (both logo and name).
For most of the providers, a username text input appears where any changes are plugged back into the OpenID URL correctly.
Simple help button (graphic stolen from employee directory sample AIR app) to get more information about OpenID.
Minimal styling so that you can apply your own.

You can see a styled version of this component in action at sandbox violation.

Screenshot:

Click on the image above to see a demo of the component.

You can download the source of the component here. It is under the MPL 1.1 license. Instructions on how to use the component is present in OpenIDLogin.mxml.

CategoryFlex Comment(s)

^[1] Statistically proven with the amount of successful logins in the case of sandbox violation.

sandboxviolation AIR App with Offline Support

February 3, 2009 3:32 PM
sandboxviolation has garnered more than 711 unique visits since its launch. Porting it to AIR took only two hours! Hearing about how AIR lets you take your web app to the desktop is one thing. Actually seeing it happen in a span of two hours is freaking awesome. A change of the root tag to WindowedApplication, add a bit of custom chrome, a pinch of offline support by hooking in another listener to your remote object and modifying your Cairngorm delegates, throw in auto update and finally, make the window startup with a size that is suited for the desktop by looking at mainScreen.visibleBounds.

Okay, I already had the auto update part as a component (based on Rich Tretola's work) written beforehand, had played lots with custom chrome before, knew how the mx.rpc and SuperImage components work and knew about Badger. So I knew what I had to look at each stage. But even then, its super awesome to see your application, the code that you labored over and dedicated a part of yourself into take life as a desktop application and work offline beautifully in such a short time frame.

Download / install / get more details about sandboxviolation desktop.

The Devil is in the Details

So, how exactly was this done? I'll explain more about the offline capabilities because the others details mentioned are not as interesting and have been documented elsewhere. This is one case where Cairngorm proved its usefulness yet again.

AIR's URLMonitor class can be used to determine whether you are online or offline. It checks only the first you call start and when it detects changes in the network status. Every time this check is done, I update a boolean in my model.

Initially, I added a default responder to the only single RemoteObject in my application that persists the result object to the filesystem via FileStream's writeObject() call. The key was the operation name. This was a blind approach and had serious overhead for calls I didn't want cached.

To narrow down things, I added the "persisting object to the file" logic to the respective Commands that had to work offline. The delegates were modified to call the RemoteObject when online and call the file store to read the result when offline. With this change I had decent offline capability. Any data viewed when online would be available offline.

Things were rosy till I noticed the avatars were not showing up. I'm using the gravatar service to pull up an avatar based on the email address of the user. So I added support to Ely's SuperImage for persisting the contentLoaderInfo.bytes to a file. With that done, the avatars also worked beautifully.

Voila! Offline support. Wait, but what happens when you are writing a question or answer and the app goes offline? Simple. the data in the post question / answer view is persisted to the file system. When the app is online and the user visits the same view, the data is restored.

As you can imagine, all this writing and reading to the filesystem is quite expensive. So the reads are cached and the write is once only while the app is alive for images.

sandboxviolation desktop can be considered as proof of the promise that Adobe AIR easily lets you take a Flex app to the desktop with offline support. There is an icon now in the web version which leads you to the installation page of the AIR version. So install sandboxviolation desktop and post the gems among your flex / flash questions there so that it becomes an invaluable resource to the community that can be used offline as well (and also puts you on the beginning of the users list based on the amount of up votes your content gets).

CategoryAIR Comment(s)

Syntax Highlighting in AS3

January 12, 2009 1:48 PM

Beautiful code becomes even more beautiful when syntax highlighted. After getting a lot of requests for the code of the syntax highlighting part of sandboxviolation, I've decided to release that part as a free, open source component. as3syntaxhighlight is an AS3 library that supports syntax highlighting of code in a variety of programming languages including MXML and AS3. It can be used for syntax highlighting as you type or for generating HTML which can be applied as htmlText to a TextField or TextArea.

as3syntaxhighlight is an AS3 port of google-code-prettify's prettify.js with some additions and changes. It has support for recognizing AS3 within MXML¹, colors "function" and "var" differently so that the statement "private function" looks like the way it would look in Flex Builder.

Also, I've added an "async" mode to it so that it can syntax highlight in chunks and won't block the UI when fed large amounts of code. The async mode uses Alex Harui's PseudoThread to figure out how much work can be done before the screen blocks.

Try it out by clicking the image below:

To download, visit the google code project page.

In sandboxviolation, while posting a question or answer, you can mix code with text. The code sections have to be enclosed between [code] and [/code] and these parts are syntax highlighted using as3syntaxhighlight. Actually, as3syntaxhighlight was solely developed for sandboxviolation.

This is one of the coolest features in sandboxviolation and it totally rocks when you can type in code and it gets syntax highlighted just like in an IDE.

CategoryFlex Comment(s)

^[1] This was added recently to google-code-prettify as well.

sandboxviolation - Flex Q & A site with live syntax highlighting on Google App Engine

January 6, 2009 7:42 PM
Inspiration comes from the strangest sources. In my case, the way the font Myriad Pro Black looked with drop shadow on a Flex Application Control Bar¹ made me want to design and develop a full fledged text based Flex application². Being bombarded with Flex related questions all the time, a Q & A site for the flex and flash community seemed a logical choice. Adobe Inspire and stackoverflow.com heavily inspired me and I wanted to see for myself how my attempt at implementing a Q & A site in Flex would look like. The result is sandboxviolation.appspot.com - a site built in Flex on Google App Engine for the flex and flash community where users can post questions / answers and vote a question or answer up or down earning "reputation" points along the way.

sandboxviolation logo.

Developing on Google App Engine

Google App Engine (GAE) is very intriguing considering the amount of computing power that it puts at a developer's disposal. Building an application on GAE was something on my list ever since I first heard of it. Working within the limitations that GAE and its datastore imposes is challenging and gratifying in its own way³ even for implementing something as simple as paging the questions when they are sorted on votes or views. That though deserves its own blog post.

During development, Aral Balkan's excellent blog posts related to GAE were immensely helpful.

OpenID is used for login⁴. GAE's undocumented full text search (SearchableModel) is used to search through question titles though it seems to return all the records when noise words are queried.

Syntax Highlighting

Apart from being in Flex and running on GAE, another unique detail about sandboxviolation is live syntax highlighting of code as you type it. Google has this amazing javascript library called google-code-prettify that can syntax highlight almost any language⁵. I ported this beauty into ActionScript, tweaked it a bit to add support for recognizing ActionScript within MXML and coloring "function" and "var" a little differently so that the statement "private function" looks like the way it would look in Flex Builder. The result is a custom TextArea that can syntax highlight code sections written in almost any programming language.

I must admit that I'm the type of programmer that fusses over silly things like the font the code is displayed in. I needed to have a font for code that would match with Myriad Pro Black. Consolas Bold fit the bill, but you need to purchase a license to embed it in a flash / flex application. Then I looked upon Inconsolata which is a beautiful monospaced free open source font. It was too thin compared to Myriad Pro Black, but since the author published the source of the fonts, I made it slightly bolder.

Take a look at how the code looks on the site.

Design

Designing sandboxviolation has been fun and I must say I enjoyed it immensely. Much of the design choices are personal and out of my love for programmatic skins and graphics. They are not necessarily following the best practices.

The first component I did was the custom UIComponent on the top right that indicates asynchronous activity; a circle moves along the inner boundary of a ring to show progress. The triangular voting button and circle depicting a tag in the tags view are all programmatic skins applied to the button. The progress bar is also programmatically skinned to depict it as a chain of circles as visible in the initial loading and login processing bar.

Somehow, I love the way the combo box showing the sort order looks. That was only CSS though.

There are two custom effects. One which slides the entire list so that the selected question comes on top and another which is invoked on the click of the voting button. Red / green bitmap copies of the voting button move up / down.

I tried to implement a smooth scrolling List based on Alex's efforts and succeeded partially. My implementation works decently in most cases. But it has some serious bugs and disadvantages like the lack of mouse wheel scrolling support. This also deserves its own blog post which will be coming soon.

Searchability

As I was not sure how well google would index the textual content in the flex application since I'm using the framework RSL, I'm also spitting out HTML for each question and its answers and generating a sitemap XML file which lists links to the HTML version of all questions. Visiting the HTML version of a question redirects the user to the Flex version (effortlessly done thanks to Flex 3 Deep Linking) regardless of who they are. There is no sneaky misdirection; users are informed of this in the HTML version and are redirected regardless of who they are. The HTML version is solely for improving searchability.

Community

sandboxviolation is by no means intended to compete with flexcoders or the official Adobe forums. Instead it is intended to complement them by preserving good questions and answers related to flex and flash. The site is solely targeted at developers who are into flash and flex.

To improve the ranking of questions, users can vote on questions and answers. Votes on a question or answer also increases or decreases the author's "reputation" points. All questions and answers will be heavily moderated.

Why Flex?

One of the aims while developing sandboxviolation was that the above question would transform into "Why not Flex?" while thinking about developing such sites.

Post your feedback regarding bugs⁶, ideas or the above question at sandboxviolation.uservoice.com.

CategoryFlex Comment(s)

^[1] Maybe Debussy's Clair De Lune might have also played a little part.
^[2] Yes, even after seeing the responses from people to Adobe Inspire being in Flex.
^[3] I'm hoping that the site won't go down because of the short term CPU limits.
^[4] Issue 404 with urlfetch was fixed.
^[5] Sadly, Lisp isn't one of them.
^[6] Being in an alpha state, there are bound to be many bugs.

Chunked Encryption in AS3 via as3crypto

December 15, 2008 6:17 PM
as3crypto is a feature rich cryptography library for ActionScript 3. I've cooked up versions of CBCMode and ECBMode¹ that process the data in chunks so that symmetric encryption / decryption can be pseudo-threaded. The key use case for this is if you want to perform symmetric encryption or decryption on a large block of data in AS3 and do not want the UI to block.

Usage:

var algo:ISymmetricKey ;

// use AES, DES or any symmetric algorithm
algo = new AESKey(keyBytes);
// OR
algo = new DESKey(keyBytes);

// for ecb, use ECBStreamMode class. 
// Both classes implement ICipherStream
var cbc:CBCStreamMode = new CBCStreamMode(algo);

cbc.encryptUpdate(barr);
// if required, output bytes can be consumed here to 
// keep memory usage minimal by accessing cbc.getOutputStream().
cbc.encryptUpdate(barr2);
outputBytes = cbc.encryptComplete(barr3);

cbc.clearOutput();

cbc.decryptUpdate(barr);
cbc.decryptUpdate(barr2);
outputBytes = cbc.decryptComplete();

//free mem. Instance is unusable after this call
cbc.dispose();

Download the code here: SymmetricStream.zip.

CategoryFlex Comment(s)

^[1] There are several ways of processing the plaintext or ciphertext when using a symmetric cryptographic algorithm. ECB stands for Electronic codebook and in this mode, the plaintext block of data is simply encrypted with the key. CBC stands for Cipher-block chaining and in this mode, the plaintext is XORed with the previous block's ciphertext before being encrypted with the key. In CBC mode, each ciphertext block is dependant on all plaintext blocks upto that point.

Adobe Riathon 2008

November 21, 2008 9:37 AM
Developer contests are almost always awesome. You get a good chance of winning something groovy and getting a look at some of the best applications your peers come up with while doing something you love. Take heed, fellow Indian Flash / Flex / AIR developers. Here's your chance to attend such a contest: The Adobe Riathon 2008.

Not only do you have a chance to win cool stuff (IPhone, Home theater systems, IPod nanos, etc.), you also have a chance to gain the recognition you deserve for your cool application.

Submit your application by the 26th of November, 2008 and if it is an eye catcher, you get to go on stage at the Grand Ashok, Bangalore for a demo showdown. Do take some time out to read the rules and regulations and terms and conditions carefully at the Adobe Riathon website.

Contestants, stay abreast of new developments in the Adobe Platform by visiting the Adobe Labs website.

Good luck to all and may the GUI be with you!

CategoryFlex Comment(s)

Flex Photo Album using a Custom Page Flip Effect and Deep Linking

November 4, 2008 3:50 PM
The page flip effect found in Ely's Flexbook or flash page flip is simply amazing. But the cool thing about Ely's post was that he had also posted an explanation of the page flip effect which inspired me to try my own hand at it. After a few hours of coding and stealing some code from Ely's original sample, i had a decent version of it up and running minus the cool gradient shadows. Then I added a turnPercent variable to it so that the amount of flip can be tweened and made into a Flex effect. The Flex effect supports flipping and resetting back to the original state. My site was missing a photo gallery section¹ and though a lisp / html version of it is there in code form, I decided to write a Flex version utilizing this effect for the heck of it. As always, the source code is also available.

To try it out, click on the image to launch the application².

Flex Photo Album using Custom Page Flip Effect and Deep Linking Home

Some of the cool and unique things about this application:

The home view shows thumbnails of the photos. Move the mouse over an album and a play button appears next to it. If you mouse over this play button, the topmost thumbnail flips to reveal the next thumbnail and so on.
In the album view, previous and next buttons trigger the flip effect. You can also download and open the photo in the browser.
Only two photos are downloaded at a time while viewing. When next is clicked, one more is set for download.
It supports deep linking. You can copy a URL pointing to a particular photo and send it to a friend. When he pastes it, he will be taken to that exact photo.
The photos resize according to the available screen size while preserving the aspect ratio.
Clicking on the previous button does the reverse of page flip which actually looks cool. Sort of.

Photos in the sample albums are stolen from Ely's Displayshelf sample. The flowers album is my own lack of expertise with the camera though.

The source code is available for download.

CategoryFlex Comment(s)

^[1] Not that I take a lot of good photos.
^[2] It is also accessible from LinksPage.