I’ve been fol­low­ing from afar the pro­gresses in 3D engines for Flash for some years. Recently I wanted to dive in the Z dimen­sion, be it fake nev­er­the­less. So here’s an overview of the cur­rent situation.

The good

Per­for­mances

Until the likes of Paper­vi­sion, dynamic 3D ren­der­ing was rarely used in Flash web­sites. The lat­est Flash Play­ers brought some con­se­quent changes upon pro­cess­ing speed. Hence it allowed some 3D engines with rea­son­able per­for­mances to peek their nose in the community.

3D engines give an extra dimen­sion to cre­ativ­ity, though they aren’t fit for com­plex scenes yet. Even the Alter­na­tiva engine has its lim­its, those of the Flash Player. It’s been a few years since the com­mu­nity asked for hard­ware sup­port so that we can get rid of some slow per­for­mances. Well, with the Flash Player 10, you will be able to choose dif­fer­ent dis­play modes like nor­mal, direct and GPU. You have to be very care­ful if you decide to set the GPU mode.

These modes in gen­eral should be con­sid­ered still in beta, there may be a lot of bugs until pos­si­bly Flash Player 11 so use caution.

This quote is by Jody Brew­ster who gives some pre­cious Flash Player 10 GPU accel­er­a­tion tips on his blog.

Gimme the sources

Most of the 3D engines in Flash are free, both for per­sonal and com­mer­cial use. And most of them are open source (except Alter­na­tiva, to my knowledge).

The bad

Looks

3D engines also mean an extra dimen­sion of com­plex­ity, and increased risks to make bad visual designs. This can lead to an “UGH” fac­tor where the 3D looks either dull or slow or complicated.

It usu­ally holds true that the big­ger the scene, the slower and lag­gier. Same goes for details and the amount of objects on the scene. Your bitmaps may also look very jaggy or ali­aised so you will loose the “smooth” graph­ics fac­tor. You can always try to make up with nice 3D motions.

Do not expect your 3D to look as smooth as a 3D video ren­der from a soft­ware like 3DSMax. Depend­ing on the engine, you might as well endure back­face culling prob­lems, basi­cally mean­ing some poly­gons of your 3D object won’t show up when sup­posed to do so.

In the image above, you can see a part of msnbc Spec­tra. You can eas­ily dis­tin­guish that the text on the vio­let panel is weirdly dis­torted with the Paper­vi­sion engine. The “wow” effect is here but this visual bug makes it a lit­tle less impres­sive. FIVe3D would have been com­mand­able here as it dis­plays fonts using the vec­tor API of Flash. That “detail” aside, Spec­tra is still a very nice exam­ple of a good 3D user interface.

Update on 23 July 2008 (by Seb) :

The rea­son for that dis­tor­tion is that the Flash­Player can only per­form skew trans­for­ma­tions on bitmaps; in order to get any kind of 3D stretch we need to resort to using this hack.

Things are how­ever improved with Flash­Player ver­sion 10 — we now have the abil­ity to do proper 3D per­spec­tive stretch­ing on bitmaps, and so this hor­ri­ble dis­tor­tion should be a thing of the past.

Overkill

You have seen it com­ing, why not build 3D Flash ban­ners ? A 3D engine (in activ­ity) con­sumes a lot of CPU power. Think twice before going all out with a super-3d-banner-of-the-death which plays con­tin­u­ously heavy 3D stuff. Who said com­mon sense ?

Hack and slack

In the end, Flash is still not ready for 3D. The Z dimen­sion is now afford­able thanks to the devoted work of some flash­ers but their engines are built on a weak plat­form, that is the Flash Player. It still can­not han­dle bitmap pro­cess­ing quickly, which is the biggest bar­rier to 3D. Alex Cove (author of the 2D physics engine APE), asks “does it always have to be a hack ?” truth­fully. Is Adobe wait­ing for some mir­a­cles from the com­mu­nity to move on to 3D ? Flash Player 10 is a begin­ning to this but it doesn’t even include Z-sorting so you end up doing it manually…You end up tak­ing Away3D and wait­ing for the Flash Player 11 patiently.

Still, Adobe has been lis­ten­ing a tad bit to the community’s requests (busi­ness obliges), as Macro­me­dia did in the past. Changes like that take some time, espe­cially for the Flash Player which wasn’t meant for 3D in the first place.

3D real time engines

Sandy

Sam­ple : Telenor Body Lan­guage, Sandy demo

Orig­i­nally, the project had sev­eral mem­bers but it is bit of a run­down now, with only one mem­ber left, Thomas Pfeiffer.

Sandy is not to be over­looked how­ever. It’s the first open source 3D engine and it has some very pow­er­ful fea­tures with light rendering.

Paper­vi­sion

Sam­ples : Audi Rhythm of lines and msnbc Spec­tra

Paper­vi­sion rose with a bet­ter com­mu­ni­ca­tion and is backed by some noto­ri­ous Flash per­son­al­i­ties. All that Sandy didn’t have.

It’s by far the most famous of the 3D engines avail­able, and one of the most com­plete too. It is avail­able at ver­sion 1.5 on the blog’s down­load links. The next Paper­vi­sion 2, called Great­White, is in beta cur­rently and only avail­able on SVN repository.

Away3D

Sam­ple : Fifa Street 3

It is con­sid­ered as an exten­sion of Paper­vi­sion, though the two authors had to rewrite a lot of the base classes. The project is hosted on away3d.com.

Away3D still lacks doc­u­men­ta­tion a lot. From what Rob Bate­man said, this will be solved soon.

As announced in an arti­cle on Papervision’s blog, Away3D is planned to merge with Paper­vi­sion Great­White. Update on 12 July 2008 (thanks Seb) : Paper­vi­sion has by now inte­grated a part of Away3D’s fea­tures. Both projects are still on going.

WoWEngine

Sam­ple : tech­ni­cal demo

Jerôme Birem­baut devel­opped the WoWEngine and nicely made it avail­able to every­one on his blog.

This engine is very inter­est­ing because it mixes some bases of Sandy with an exten­sion Jerome wrote of the 2D physics engine APE. The result is a 3D engine with physics fea­tures like col­li­sions, cloth and rope sim­u­la­tions to name a few.

It is very likely you’ll use this engine if you want both 3D and physics inter­ac­tions within your application.

Alter­na­tiva

Sam­ple : 3 demos on their web­site.

This engine is a killer. It is devel­opped by a russ­ian team. They’re invited at the com­ing Adobe MAX at Milan, in decem­ber (2008), one extra rea­son to attend this huge event.

Alter­na­tiva has been pub­licly released but it is free for per­sonal use only. Licences must be pur­chased for com­mer­cial use. You should take a look at what this engine can do. One word for them : Отлично !

FIVe3D

Sam­ples : FIVe3D home­page itself which includes 5 samples

Math­ieu Badi­mon wrote a small 3D Engine as “an open source code for the con­cep­tion of inter­ac­tive vector-based 3D ani­ma­tions”. The FIVe3D home­page is a good imple­men­ta­tion of the engine.

This engine relies upon the Flash Player to han­dle vec­tors, rather than bitmaps with the afore­men­tionned engines.

One of its strengths, aside from being very light (10KB), comes from the way the engine han­dles fonts. With FIVe3D, you can use any font you want to any size with­out barely any ali­ais­ing or ugly text arti­facts you might see in Paper­vi­sion. A good choice for titles and head­ers. The lit­tle short­com­ing to this is that you have to use addi­tional font data (stored as an AS3 class). It is for­tu­nately gen­er­ated auto­mat­i­cally by the tool Math­ieu pro­vided on the FIVe3D web site but it still weighs around 50KB for sim­ple fonts.

Update on 23 July 2008 (thanks Seb, again) : attempt­ing to ren­der a lot of text with FIVe3D will result in a fram­er­ate drop due to the heavy cal­cu­la­tions that the vec­tors imply for the Flash Player.

What engine shall I pick for my project ?

You don’t nec­es­sar­ily have to choose only one 3D engine. You can eas­ily use mul­ti­ple engines, each for a dif­fer­ent use. This point was dis­cussed last month at the AUGG (Adobe User Group of Geneva) meet­ing about real time 3D engines.

So for instance you could make some intro with large titles with FIVe3D, then dis­play some sim­ple tex­tured objects with Paper­vi­sion and con­straint them phys­i­cally with WoWEngine. Even among the sam­ples listed above, there are cer­tainly some cases where sev­eral engines were used together.

Not to men­tion many projects don’t rely on sole 3D but also blend some videos of 3D ren­ders as you can see in the Fifa Street 3 sample.

Can I import 3D models ?

Yes you can. Sandy, Paper­vi­sion and Away3D can import Col­lada files to dis­play com­plex meshes (read less sim­ple than just a sphere or a few boxes).

Some 3D soft­wares can’t export do not have a built-in exporter for Col­lada files yet. If you want to export using this for­mat, you’ll cer­tainly find some free exporters since Col­lada is an open stan­dard based on XML.

Another pos­si­bil­ity is to use the AS3 Geom Class Exporter either for 3DSMax or Blender. It will gen­er­ate .as files and the advan­tage is that the engine won’t have to parse the file since it’s Action­Script already.

Isn’t Flash CS4 going to wipe out those engines ?

No it isn’t. If ever Adobe adds a fully fledged 3D plat­form within the Flash Player, the 3D engines of then will adapt and make use of its new ben­e­fits. Some engines like FIVe3D might be in direct chal­lenge with the next Flash CS4 fea­tures. How­ever I don’t think Flash CS4 will be released before late 2008 and it’s not even sure if the so-called “3D” fea­tures will be as easy to use for coders as what’s avail­able cur­rently through open source projects.

Is it worth it to go 3D finally ?

With­out a doubt, yes it is ! Just imag­ine : you can dynam­i­cally ren­der basic 3D. For instance, the amount of Cov­er­Flow com­po­nents for Flash/Flex has exploded thanks to those 3D engines listed above. A proof that sim­ple and effec­tive UIs are also rel­e­vant in 3D sometimes.

And it is not lim­ited to com­mer­cial enter­tain­ment web­sites at all. Embed­ded user inter­faces are yet another mar­ket you can tar­get. The InteliSea appli­ca­tion pre­sented last year at MAX 2007 includes some sim­ple 3D to dis­play the sea state for a boat. Another proof you can make “seri­ous” appli­ca­tions with 3D (and some­times it might be mandatory).

I will talk in a fur­ther arti­cle about GIS (Geo­graphic Infor­ma­tion Sys­tem) and 3D with Flex. It’ll be a nice follow-up.

This post is an analy­sis of the cur­rent sit­u­a­tion about those entwined mat­ters, quite use­lessly con­tro­verted I dare say. The tech­nol­ogy I’ll focus on is Flash/Flex but it applies for Sil­verlight and other plat­forms as well.

In this arti­cle, when I talk about dif­fer­ent “views”, I mean dif­fer­ent tech­nolo­gies used to dis­play some con­tent, be it Flash, Sil­verlight, Java FX, etc.

Con­tent crawling

Ear­lier practises

The idea of pre­sent­ing a mul­ti­ple views (or aspects) for some con­tent isn’t new at all. It has been a com­mon prac­tise for a some web agen­cies to develop two web­sites for their clients, one in HTML and one in Flash. The very pur­pose of that is to be (sup­pos­edly) acces­si­ble to 100% of the web users and also to be search engine optimized.

The Flash view would pro­vide more inter­ac­tive con­tent to the vis­i­tors on broad band whilst the HTML web­site would be focused on clar­ity, quick infor­ma­tion look up and acces­si­bil­ity. Build­ing a Flash and an HTML web­site for the same con­tent (more or less) involves dupli­ca­tion of sim­i­lar work BUT dif­fer­ent skills. Such a strat­egy con­sumes more time and more peo­ple, more resources. In return, you can opti­mize your HTML view for search engines and page rank­ing for the ben­e­fits of the Flash view.

The huge advan­tage of this is that your dynamic (and sta­tic) HTML con­tent is crawled by search engines and you can pro­pose a redi­rec­tion to the vis­i­tors who may like to browse the Flash view instead.

Recent evo­lu­tion

Ever since Google and other search engines were able to look into .swf files, some peo­ple have thought “fine ! all the con­tent within my Flash web­site will be indexed !”. They need to know what is sta­tic and dynamic con­tent. They also need to know the very basic thing : how an RIA works.

Sta­tic con­tent is embed­ded con­tent, you find it in the result­ing file, .swf for Flash or Flex. Dynamic con­tent is loaded from exter­nal sources like data­bases, so data is NOT in the appli­ca­tion itself.

Most of the RIAs work dynam­i­cally. Search engines CANNOT index dynamic con­tent, mean­ing directly from the data­bases. What do search engines see when they look into my Flash web site then ? Almost noth­ing. They can see the title and descrip­tion and a few sta­tic things in the Flash library. That’s all.

Nowa­days

It is often the case cur­rently that Flash web sites remain in Flash alone for the HTML view is a loss of time com­pared to its devel­op­ment cost. With the ris­ing of RIAs on the web, more peo­ple are look­ing for SEO solutions.

A recent trend among Flash and Flex devel­op­ers is to talk about some ulti­mate SEO weapon called XSLT. It’s actu­ally not a big deal. How­ever, we can use it to make what was a huge bother before : a sec­ond view of the same data model.

First of all, XSLT works on XML doc­u­ments and is quite pow­er­ful to trans­form them into any result you need, like HTML. In most cases how­ever, the web site’s data is stored in a rela­tional SQL data­base so it’s an extra step to retrieve data and trans­form it into XML to then feed it to XSLT. And log­i­cally, you’d use the same XML for your RIA but it’s not manda­tory indeed.

Even though XLST trans­forms data, you still have to write and test the whole thing and XSLT is quite touchy, there’s no room for errors. Depend­ing on the com­plex­ity of your out­put, it may be quite a pain. The point is that it still con­sumes less time than the for­mer HTML view devel­op­ment I dis­cussed about BECAUSE the rai­son d’être of the HTML ver­sion for RIAs is not the same any­more. The XSLT out­put is meant for search engine bots and acces­si­bil­ity.

If you look at the HTML view from the cur­rent XSLT imple­men­ta­tions, it’s very sim­ple, even with­out lay­out some­times. Stan­dard users with­out the Flash Player wouldn’t want to surf on such plain and bor­ing HTML. So why isn’t it focused on those users ? Because it would be the same as the for­mer solu­tion. The pur­pose of the XSLT imple­men­ta­tion here is to pro­vide an aver­age solu­tion, a first step towards SEO for RIAs on the web.

To my knowl­edge, there aren’t many web­sites with such an imple­men­ta­tion yet. A “ref­er­ence” in the mat­ter is the Flex direc­tory. If you dis­play the HTML sources, you’ll see numer­ous div lay­ers con­tain­ing the direc­tory data.

Deep link­ing

Talk­ing about deep link­ing a few years ago was only a mean to empha­size that Flash web­sites just couldn’t do it.

The solu­tion has come with Actionscript’s Exter­nal­In­ter­face : anchors han­dled by Javascript for deep link­ing.

Cur­rently, this method is more and more used in Flash and Flex web appli­ca­tions for it’s quite easy to imple­ment. As stated above, deep link­ing is achieved through HTML anchors. Why is that ? Because anchors avoid the browser from reload­ing the win­dow, thus restart­ing your whole web appli­ca­tion. How­ever, anchors aren’t the per­fect answer to the problem.

Con­sider this deep link­ing example :

HTML web site : www.yoursite.com/article/roundup-is-lethal

RIA web site : www.yoursite.com/#article/roundup-is-lethal

Obvi­ously, the first URL is bet­ter. There’s no workaround at the moment but it’s a lit­tle sac­ri­fice con­sid­er­ing you can deep link an RIA. How it works ? Javascript lis­tens to changes in the URL and noti­fies the RIA if some­thing hap­pens. The RIA can also call a Javascript method to update, or rather rewrite the URL when the RIA state changed.

Talk­ing about Flash, there is a nice library called SWFAd­dress that pro­vides you with those func­tion­al­i­ties (for Flex, there is also a built-in library). Be aware that imple­ment­ing deep link­ing in an RIA must be planned. It is not a lot of work but you have to decide what will be deep linked or not and archi­tect your appli­ca­tion accordingly.

Search engine bots

Detec­tion

The strat­egy above requires to detect search engine bots. You need to know who’s com­ing on your web appli­ca­tion in order to serve either HTML con­tent or the rich appli­ca­tion itself.

There is no absolute mean to detect every sin­gle search engine bot because there are thou­sands of them. So you will prob­a­bly use a smaller list­ing of the most impor­tant search engines bots on the web.

Fake user agent

Ineluctably, the ways to detect the real user agent of a given vis­i­tor aren’t per­fect. The motto for secu­rity related mat­ters is to min­i­mize most of the crit­i­cal weak­nesses, not to build the per­fect defense. It is pos­si­ble to ver­ify the iden­tity of a user agent to some extent, and that will be suf­fi­cient for most of the evil and vio­lent crawlers. You can do it with DNS lookup and MySQL caching for instance.

Search engine optimization

Cloak­ing

First of all, I saw a lot of talks about cloak­ing when it comes to pro­vide both Flash and HTML views of a web­site. It is often used to intro­duce the killing line “it could get you banned from Google !!”.

I even found a redun­dant post among sev­eral SEO sites that hap­pily empha­size that SWFOb­ject is con­sid­ered “dan­ger­ous”. If that state­ment is true, many Flash web­sites have a prob­lem as SWFOb­ject is famous right now. How­ever, those alert­ing posts you can read are all dated from 2007 and many things change in one year so it might not be dan­ger­ous anymore.

Google bot (I don’t know for the other bots) dis­likes that we hide con­tent, be it by css or like SWFOb­ject does, by using DIV lay­ers to hide the HTML under the Flash layer.

Nev­er­the­less, if your con­tent in HTML matches what you can find in your Flash view, there shouldn’t be any prob­lem. But you’re still at risk.

Rumors and gossip

As I was look­ing up the web for insights about Flash and SEO, I read on Google’s forum some com­ments whose author some­times doesn’t know what he/she’s talk­ing about, hin­der­ing the dis­cus­sion about how to bet­ter designs so that RIAs can be search engine opti­mized.

It is a fact that human beings dis­like changes. It is also a fact that peo­ple often do not seek fur­ther than what is affirmed. They like an idea or not and if you con­front them, they will fight for it. In case of the SEO com­mu­nity, talk­ing about Flash and SEO will never fail to gen­er­ate a few worth­less com­ments like “con­sider using gifs instead of Flash”.

To the peo­ple who still do not under­stand and keep think­ing about the cur­rent sit­u­a­tion as a war between HTML and Flash, I’ll write this : given a sit­u­a­tion, a con­text, a full-flash web­site or RIA is a rel­e­vant answer to a prob­lem, as it might not be in another sit­u­a­tion. That’s all there is to it.

It’s no use telling “Try to use Flash only where it is needed”. You can find this very “advice” on Google’s web­site but it’s quite stu­pid to write that under the “Best use of flash” title. The same state­ment about “using some­thing only when needed” is valid for every­thing anyway.

RIA and search engine

With the spread of RIAs, search engines are likely to col­lab­o­rate with Adobe and Microsoft as Google did with the Adobe Search Engine SDK. It’s merely the begin­ning of a new era of visual con­tent though. Some day, I believe search engines will pro­vide sup­port and crawl dynamic con­tent, with the col­lab­o­ra­tion of both the data hold­ers and index­ers. On top of this, video con­tents are spread­ing on the web. Index­ing their con­tent (not only their titles as Dai­ly­mo­tion, Youtube and the likes do) is going to be one of the next chal­lenges for search engines too.

Acces­si­bil­ity

Upset­ting matter

Why talk about acces­si­bil­ity now of all times ? It’s not totally off-topic. SEO is a kind of acces­si­bil­ity for search engines after all.

As a part of the talks about ergonomic designs in Flash, acces­si­bil­ity is some­thing every­one knows but vaguely. You can eas­ily find a few peo­ple who argue that screen read­ers can’t read Flash con­tent, the bot­tom line being “Flash is bad, make your web­site in HTML because it’s accessible”.

First of all, Flash does have acces­si­bil­ity fea­tures. How­ever, they’re often ignored because it’s even less likely design­ers will care for the blind peo­ple when their appli­ca­tion is more visually-oriented than HTML websites.

Blind peo­ple

We had a meet­ing one month ago with the pres­i­dent of the Swiss Fed­er­a­tion of the Blind and Visu­ally Impaired. He showed us how he, as a blind, “sees” the web. He got a screen reader and it was my first time lis­ten­ing to one such equip­ment. I was stunned. The voice was fast, so insanely fast that any­one but a trained ear like his could understand.

So he went on and told us many HTML web­sites aren’t prop­erly acces­si­ble to blind people.

Take for instance those ugly HTML web sites that pile texts and news every­where pos­si­ble in the lay­out. Even at an alien-like voice speed, the screen reader seems to talk with­out cease. Bet­ter yet : the menus in Javascript. Let’s assume we have a com­plex menu with a hun­dred but­tons nested in cat­e­gories. They are hid­den by javascript and show up only on rollover/click on a cat­e­gory in the main bar. On the other hand, the screen reader reads the HTML so it tells the whole hun­dred but­tons’ label. Unbearable.

Then he went onto some Flash web­sites and although the screen reader had to wait for some ani­ma­tions to end, it enu­mer­ated the but­tons and the con­tent cor­rectly. It is not an idyll though. HTML is still more sup­ported by screen read­ers in general.

Con­clu­sion

You can opti­mize your RIA for search engines with the solu­tion dis­cussed above. It increases acces­si­bil­ity as well because you expose HTML to the crawlers and peo­ple who don’t have the RIA plu­gin. Nev­er­the­less, bear in mind that its pri­mary objec­tive is not to be a replace­ment of the RIA itself.

Update 1 on 24 June 2008 : If you want to test an exam­ple with code, Ahmet wrote a nice arti­cle about this con­cept, based on what he found in the Flex direc­tory. There’s even a schema.

Update 2 on 6 July 2008 : The sit­u­a­tion has evolved quite a bit, with Google­bot attempt­ing to crawl dynamic data. You might want to read my arti­cle about that.

After a first leap into design pat­terns dri­ven devel­op­ment with pixlib in AS2, fol­lowed later by an imple­men­ta­tion of Cairn­gorm, I decided to look for AS3 frame­works so I browsed the web and found this arti­cle talk­ing about a so-called PureMVC. I dis­liked the name at first (as if it mat­ters !), not to men­tion the arti­cle wasn’t prais­ing the frame­work at all. It made me curi­ous. I had to try it.

I took a look at the puremvc’s dia­gram and won­dered if I had missed some­thing essen­tial in my learn­ing of design pat­terns since I had never thought this far seen such an imple­men­ta­tion of MVC. I got the big pic­ture thanks to the doc­u­men­ta­tion and sam­ples on puremvc.org. I really appre­ci­ated the note­wor­thy efforts put in doc­u­men­ta­tion. The best prac­tices doc­u­ment is maybe one of the most use­ful doc­u­ments that answered (some of) my many ques­tions as every­thing was hazy in the begin­ning. Also, I have come across 10 tips for work­ing with PureMVC which is very useful.

For a time, it was good. Prob­lems appeared later on.

Abstrac­tion

This frame­work moti­vates me because it helps (forces) think­ing a level above in terms of abstrac­tion. Notwith­stand­ing this, it is still cloudy in my mind. I often have found myself won­der­ing what to do. For exam­ple let’s say I have a sec­tion of a web­site, Sec­tion­Medi­a­tor, that wants to pop­u­late its view with a list of but­tons whose data is loaded into Sec­tion­Re­mot­ing­Proxy. Let’s sup­pose all the classes I talk about below are reg­is­tered to the Appli­ca­tion­Fa­cade. My options :

1. Send­ing a Noti­fi­ca­tion (with­out body) that the Sec­tion­Medi­a­tor lis­tens to, then retrieves the Sec­tion­Re­mot­ing­Proxy and gets the data it needs from the proxy by access­ing it directly
2. Send­ing a Noti­fi­ca­tion, whose body is an Array of Item­DataVO (vari­able object), that the Sec­tion­Medi­a­tor lis­tens to, then use the array of vari­able objects to pop­u­late its viewComponent
3. Send­ing a Noti­fi­ca­tion that will trig­ger a Com­mand which will retrieve both the Sec­tion­Medi­a­tor and Sec­tion­Re­mot­ing­Proxy instances so as to get the data of the lat­ter to trans­mit it to a method of the for­mer. Basi­cally, the com­mand does the job of updat­ing the SectionMediator’s viewComponent.
4. Mix­ing options 2 and 3 : send a Noti­fi­ca­tion whose body is the VO that will trig­ger a Com­mand that needs only to retrieve the Sec­tion­Medi­a­tor and feed it the vari­able object from the Notification’s body.

Option 3 aug­ments loose cou­pling but is that really the best choice ? I read that Com­mands should be used as much as pos­si­ble and a Com­mand should know the least pos­si­ble the classes it’s using. So Option 4 might as well be my choice. But wait ! It’s actu­ally a com­pli­ca­tion of Option 2…which in turn is a com­pli­ca­tion of Option 1. Am I back to the begin­ning ? It may be so.

I still don’t know what is my choice. I’ll exper­i­ment some more and see what happens.

I thought it was a very nice move from Yahoo to pro­vide the com­mu­nity the free Astra project. I wanted to try their com­po­nents, espe­cially the YahooMap com­po­nent because I wasn’t sat­is­fied with the AFComponents’s GMap I used in some AS2 projects.

GMap short­com­ings

I’ve come across sev­eral prob­lems with the GMap component.

• The com­po­nent is pro­vided in an .mxp with­out sources and that led to the same prob­lem as for the TXEFF com­po­nent
• GMap can be ani­mated and that’s very cool to zoom, pan with the map scal­ing and mov­ing smoothly. Ok the fun stops here. Even though the con­cept is nice, it forces the com­po­nent to pre­load tiles from dif­fer­ent depths so that the zoom ani­ma­tion does not zoom on empty tiles. Same goes for pan­ning. In AS2 there is no way to force a loader to stop load­ing some­thing. GMap is in AS2. Load­ing too many tiles + can’t stop load­ing the use­less tiles = whoops !
• GMap con­nects to prox­ies on afcomponents.com not on google.com. That leads to prob­lems such as really slow load­ings.
• GMap was some­times refused imagery because Google blocked it upon too many requests.
  

  “Too many requests from the same ip is inter­preted as an auto­matic request, which makes it unable to bypass google’s secu­rity system”

GMap is a good com­po­nent though. It is rather well doc­u­mented and the forum is a big help for in-depth infor­ma­tion search. It helped me not wast­ing time on draw­ing ugly maps on Illus­tra­tor (because maps weren’t some­thing afford­able for small/medium clients not so long ago). How­ever, the lack of con­trol upon the com­po­nent and its inher­ent com­plex­ity makes it some­times go haywire.

YahooMap in Flash CS3

Now let’s talk about YahooMap. I read rather quickly that there was a YahooMap com­po­nent for AS3 so I down­loaded it and what the hell ? It’s a Flex com­po­nent. This is quite a prob­lem since I’m on a project with Flash CS3. A quick google search and I found Josh Tynjala’s blog with an inter­est­ing solu­tion.

Two good things about this. First I learnt about Appli­ca­tion­Do­main and how you can access to classes loaded dynam­i­cally from a swf. Sec­ond, I learnt that a .swc com­po­nent is actu­ally an archive file that you can decom­press with some­thing like Pow­er­Ar­chiver. I down­loaded his code and files and inte­grated this con­cept in my cur­rent project. Then came the time when I wanted a cus­tom marker on my map…

Cus­tom mark­ers for YahooMap

The prob­lem with Josh’s tem­po­rary solu­tion (they’re going to make a Flash CS3 com­po­nent of the YahooMap soon) is that you have to browse the YahooMap doc­u­men­ta­tion and find out how the classes are related, then import them dynam­i­cally and see what hap­pens. It was a lit­tle strug­gle to under­stand how a Marker is built. I read some­where that the mark­ers are exten­sions of Sprite. Basi­cally, for a cus­tom marker you should extend the Sim­ple­Marker or Search­Marker class, or imple­ment the IMarker inter­face in your cus­tom class. ARGH ! The for­mer is impos­si­ble since you can­not extend a non-existing class (remem­ber YahooMap’s classes are loaded dynam­i­cally from the library.swf). The lat­ter would take too much time when I just want a cus­tom image to show instead of the SimpleMarker.

This lit­tle ugly hack removes the graph­ics that the Sim­ple­Marker gen­er­ates and lets you add your own images/shapes/whatnot.

// We cannot strong type "marker" here
var marker = new SimpleMarker();
marker.latlon = new LatLon(lat, lon);
_map.markerManager.addMarker(marker);
 
// Remove the black shape
marker.removeChildAt(0);
 
// Remove the remaining grey shape
marker.removeChildAt(0);
 
var yourCustomMarkerGraphics:Sprite= new Sprite();
marker.addChild(yourCustomMarkerGraphics);

That’s it ! You got your cus­tom marker. Alright, it’s a shabby and des­per­ate solu­tion but I needed the com­po­nent to work asap.

Code hint­ing and documentation

In the Flash GUI, TXEFF behaves well and nice but when you want to use it in a code envi­ron­ment like FlashDe­velop, it is a pain to open the doc­u­men­ta­tion (on PDFs) and browse through it till you find, or not, the method/properties you were look­ing for. First, a javadoc-like doc­u­men­ta­tion would help. Sec­ond, AS3 wrap­per classes would be very wel­come. When I import TXEFF in FlashDe­velop, cre­ate a new instance and write “myEf­fectIn­stance.” and wait for a list­ing of the avail­able meth­ods and attrib­utes, noth­ing shows up. Alright, it’s a detail but still disappointing.

Black­box

The cause of this is the way the com­po­nent is meant : a black box. The component’s sources are obfus­cated and we only have access to .mxp files. At first I thought I’d write an inter­face that defines all the meth­ods used in the com­po­nent but it’s a par­tial solu­tion for there are a lot of attrib­utes that can’t be defined in the inter­face. I’d need to write a wrap­per class but it’s just a bother to do that now.

In spite of this, I strongly rec­om­mend jumpeyecomponents’s TXEFF. It is a big help which lets you con­cen­trate on other tasks. This exhaus­tive review on web­de­sign­er­wall (beau­ti­ful blog btw) shows you the com­po­nent thor­oughly. You can also test a few effects on the txeff web­site.

Pric­ing

TXEFF costs 169$. It’s not that of a big invest­ment con­sid­er­ing you’re very likely to use it in sev­eral projects, if you’re a Flash/Flex designer, that is.

A sam­ple done in a few minutes

Click any­where in the swf to replay.

[kml_flashembed movie=“http://www.noirmatstudios.com/blog/wp-content/uploads/flash/TXEFFSimpleTest.swf” height=“200” width=“400” bgcolor=”#000000″/]