Obligatory Flickr post

Had a few hours (well actually I didnt but I couldn’t but I needed a break from ‘work’ 😉 ), so I decided to refactor some of the code from Flexamp and create a few ‘widgets’ (I am beginning to hate that term by the way). Anyway, I had the basic application out in like 20 minutes but I wanted to see if I could do something a little more fun. So I tried to create a tsunami kind of Flickr photoshow when the images expaned when you rolled over them. So the logic was simple:

  • Load the Flickr Images
  • Populate a Tilelist with the data with a custom itemRenderer
  • In the itemRenderer, on rollover set the Image component’s source to the large image url
  • invalidate the tilelist so that the new image can be drawn larger than irs neighbours

Unfortunately that didnt work and here is why that seems to be:

According to the Flex docs for TileList:

You can set the size of the tiles by using the 
rowHeight  or columnWidth properties. 
Alternatively, Flex measures the item renderer 
for the first item in the dataProvider 
and uses that size for all tiles.

So looks like you cant have a custom tile with different dimensions than the rest of the tiles.
So after two hours I was back where I started from. I’ll try to play around more with it and see if I can do something about it.

The only thing i did learn was that to get to the _root of the application you need to reference it as Application.application

[SWF] /blog/swf/flickr.swf, 450, 475 [/SWF]

PS: The Search Button seems to require clicking twice. Not sure why.

Flickr changes bust Flexamp and other Flash apps

Flickr changed the crossdomain file on their servers a few days back breaking Flash applications across the www. The flickr crossdomain file at http://www.flickr.com has been removed and Flash developers have been asked to point their applications to api.flickr.com. Unfortunately I missed the news and so far the last few days, related media has not been working. Hopefully I’ll get down to recompiling it soon. I looked around the many Flex apps using Flickr and most havent updated their apps.
In other news I have also started a new page to point to Flex links I have found on the web. I keep jumping from computer to computer and am not completely in love with del.icio.us (mostly because of the UI …. I wish it looked more like popurls basically one big page of links) so it seemed like a good idea.
I still havent had too much time to put up source code for tutorials and stuff but hopefully that’ll come soon.

Stripes and Gradients

One of the designs I am working on has a truckload of stripes over color gradients on different elements throughout the application. Now I could either have custom graphics for the elements embedded in the fla or do the more fun thing and write a class that drew stripes for me. So here it is. These are the first released classes from my voodoo framework (more on that later).

The Stripes class works as follows:
It creates a BitmapData object draws two rectangles, one semi-transparent and the other transparent. The BitmapData is then drawn on the target MovieClip using beginBitmapFill after being skewed by a Transformation Matrix.

[SWF] /blog/swf/Main.swf, 500, 600 [/SWF]

You can download the zip file with the AS file and fla here. I have also included the GradientRect class which lets you easily draw gradient rectangles on any MovieClip.

P.S. Thanks to unijimpe for the wp-swfobject plugin. Easiest way to embed swfs in WordPress.

Blogging from FlexSeminar, NY

Well, here I am, or rather have been for the last 5 hours, at the Roosevelt hotel, attending the Real World Flex Seminar.. Whats it been like? demos….loooots of demos. And thats exactly what I came for. Seeing some of the apps that adobe has developed has been pretty interesting. Some interesting apps I have seen are a complete CMS system (ShadoCMS) and a ColdFusion Framework for writing Flex apps based on CF backends. Not that many other application vendors although there are a bunch of consulting houses out here.

Got a few doubts cleared for FlexAmp v2 ;).

Links for the day:

Loading skins at Runtime

Static methods vs. Singletons

For the last 2 years, I have been working on a number of very intense projects that involved a truckload of AS2 code (I cant imagine ever doing it in AS1). As of today, the framework is pretty extensive with enough functionality to make the day-to-day stuff a breeze. However, there is always room for improvement so I keep flipping things around trying to make the most agile and adaptable system I can.

Some of the designs I recieved for an upcoming project looked like they could benefit from a little reorganization on the framework end. The situation was this: The designs for the user-controls (scrollbars, buttons, text inputs, etc) seemed to reuse the same drawing elements. For example the input areas for checkboxes, text inputs, etc looked exactly the same. So I figured, it would be neat if the controls in the framework could instantiate an application level graphics toolkit and pass MovieClips to it. The toolkit would then draw on the MovieClip to conform to the look and feel of the application. This made the controls in the framework fairly agnostic to the application look and feel.

The system works perfectly only if all the application-level graphics toolkits implement the same methods. For example, all toolkits would need a method to draw a text-input background or a button state etc. The whole idea of polymorphism fits wonderfully here: define an interface and let each implementation implement the functions that you mandate. Unfortunately in my case there was a snag: The simplest way I implemented the first toolkit was by making it have a series of static functions. So, for example, my text-input control code looks like:

class TextInput extends BaseControl{
private var _toolkit:IUIToolkit;
private var background:MovieClip;

/* init code */

public function set toolkit(t:String{
this._toolkit = eval(t);
}

public function build():Void{
if(this._toolkit==undefined){
throw new ToolkitUndefinedError();
return;
}
_toolkit.drawTextInputBg(this.background);
}
}

A point to note above is that toolkit name is being sent in as a string. This ensures that you are not compiling any application level toolkit when you compile the framework. When you do the eval, the class name sent is evaluated and a class object is returned. This is the Flash equivalent of Java’s Class.forName().

Unfortunately, since all the functions in the toolkit class were static methods and Interfaces cannot define static methods, there was no way for me to ensure application toolkits would define the methods mentioned. The only solution was to have a singleton implementation for the toolkit so that you always instantiate ONE instance of a toolkit and use that.

Although that does seem like the best scenario, I am still not completely convinced especially in light of the AS3’s discontinuation of private constructors (sigh !). Anyways lets see how this works out.

I can always refactor later ;).

p.s : I found a rather interesting discussion on singletons here

Off to NY for the Real World Flex Seminar

Whew. The approval came just in time. I am off to the Real World Flex Seminar in NY on the 14th. While I have attended enough Adobe pitches on Flex 2 , I am more interested in how other industries are percieving it. Probably the most interesting session would be the one that talks about integrating Java and Flex 2. Coming from a Java background myself, hopefully I will have a better understanding of how Adobe imagines the workflow to be for a Java developer writing Flex apps.