As part of our ongoing development in the air traffic logistics and weather forecasting space, we developed a three-dimensional prototype for tracking flight path data and meteorological readings using Flex, Papervision 3D and PureMVC.

The framework is configured for using multiple APIs for mapping services from Yahoo and Google, as well as receiving live data streams from different sources. A number of custom controls were developed and integrated into the application, including altitude and rotation controls. The application can be re-used for any three dimensional map-based visualization such as weather patterns, demographic, political or economic data.

Related posts:

1. Nice List of Data Visualization Tools
2. Data Visualization is About More than Just Pretty Pictures
3. Data visualization and the art of conveying information

I'm skeptical that the tools assume a rigid and defined workflow between design and development, which would make them useless for building applications in an agile iterative manner. Perhaps the format necessitated it, but each of the online tutorials I went through assumed that the front end interface would be completely finished graphically before any coding started. This is just not the case in any projects I have worked on. In reality, design iterates along with development. It evolves as new requirements are uncovered. Catalyst does maintain a dynamic link to its source PSD or IA files, and therefore conceivably designers could iterate on those files as developers are working on application logic. But I get the sense that Catalyst wasn't created with that workflow in mind, and using it for iterative design/development would lead to major inefficiencies.

I hope to use it more as I have time, and hopefully get it involved soon as a prototyping tool on an upcoming project. Then I'll learn some more about its strengths and weaknesses. I've only spent about an hour total on it as of this writing, so I'm not expert, but these were just my first impressions. Feel free to let me know what you think.

Related Services: Flex, Flash and Air, Custom Software Development

Related posts:

1. Performance Optimization for Flash Player
2. Pathfinder releases version 1 of its Flash Platform microsite (codename Mica)
3. Skinning Flex with Illustrator CS3

We recently launched a new Touch Screen Kiosk deployed in both Adobe Air and Flex. Touch Screen Kiosks pose some interesting usability challenges, some of which overlap with those for the iPhone. Take a look at a video demo or read the longer case study on the Pathfinder site.

Touch Screen Kiosk Demo

Related posts:

1. Adobe “Open Screen” is not “Open Source”
2. the iPhone and Touch screen technology
3. Hedge Fund Analytics in Flex

Optimizing Flash performance is certainly the most boring part of Flash Platform development but it's a cornerstone without which you, the Flex developer, can not do without.

An app is worth nothing unless you provide that effortless flow of interaction at all times.

There is not too much information on this topic as it is not the most interesting one but here are some simple guidelines that have helped me tremendously over the time, as well as a few great papers.

Firstly, one simple rule: Don't try to do too much at the same time. As a RIA developer, figure our a way to engage the user usefully while you spread out the workload so the app doesn't choke. Remember, we are dealing with people. People don't need to have something done faster for 14 milliseconds, they need to know what's going on.

Second simple rule. I know we are all developing on flying fortresses of computers because we need a lot of juice in development. But start testing early on a crappy machine. Not that your end user will necessarily have a crappy machine but it will show tell-tell signs of where the app might need some improvement.

Than for Flex Builder users, do use the Profiler. The more you use it, the more it will make sense and after a while you will start seeing some really useful information that you might have not found out about otherwise.

Other than that, read these articles. They really helped me a lot to understand the way Flash Player works and plan accordingly in the shortest time.


Optimizing Flex Application by David Coletta

David makes a great point: designating between improving actual performance vs. perceived performance. That point is worth gold. Also provides excellent examples/solutions for particular problems.


Garbage Collection from Alex’s Flex Closet

Hardcore nuts and bolts of garbage collection. Look for the link to ppt.


ActionScript 3 Performance Tuning by Matt Chotin

A great overview of what Flash Player does with your code.


Some Actionscript 3.0 Optimizations by Dennis Ippel

Apart from some really nice examples, there is a list of references for Flash optimization at the bottom of the post.


And at the end, seeing is beliveing. Try these suggestions and see for yourself what makes a difference.

Related posts:

1. Flash Player on iPhone gossip
2. Mouse wheel (scroll) Event in Flash Player running on a Mac
3. Flash Technology vs. Flash Developer

Now we have a new player in Flash Remoting arena - ZendAMF. Why should anybody care when AMFPHP was just fine?

A few reasons.

1. First of all, both come from Wade Arnold, who has provided the Flash community with these custom tailored, top shelf, free, Flash Remoting systems.
As far as I’ve noticed, Wade is putting his time now in ZendAMF which is a tell-tell sign to begin with.

2. I really like the custom class mapping in ZendAMF. It offers quite some flexibility in comparison to AMFPHP. Options are explained (options - wow!) under "3.2.4. Typed Objects".

Of the three approaches, I personally prefer the setClassMap method in the bootstrap file because it provides me with a single point of reference.

3. It's a part of a PHP MVC framework called Zend. Not that I have tried it out much so far, but it sounds appealing that there is a MVC framework that you can rely on behind this.

4. Once you get through all the quirks, it is really easy to set up. The major issue that I had was making PHP files always processed as PHP5 which is necessary for the Zend Framework to run.

I didn't know that at the time so I was cursing away but eventually I found this little line for .htaccess file that did just that:

AddType x-mapp-php5 .php

Otherwise, Zend setup is easy as pie and you can read about it here.

5. Lastly, Adobe supports it. Sure sounds good.

Here are also some video tutorials that might be useful to start with:

Zend_Amf-classmapping

Getting Started with Zend AMF (Zend_Amf) - Part One

I'm curious to hear opinions about ZendAMF as I'm about to adopt it as a standard in production.

Related posts:

1. Google learns to crawl Flash
2. Using Flex Code Generator (FCG) with Flex & PureMVC
3. Flash Technology vs. Flash Developer

Here is some follow up information from the Flex Camp Chicago '09 Community Showcase presentation.

Beer Hunter

Technologies:

• Adobe Flex
• Ruby on Rails (RubyAMF)
• Degrafa

Flight-Tracking

Source and other resources for this prototype can be found here.

Technologies:

• Adobe Flex
• Papervision3D
• Yahoo Maps
• Degrafa

Pathfinder-Development.com

Technologies:

• Adobe Flex
• TweenMax
• Google Analytics
• PureMVC
• Degrafa

Related posts:

1. Using Flex Code Generator (FCG) with Flex & PureMVC
2. Upcoming Conference: FITC Chicago 2008, June 22-23
3. Hedge Fund Analytics in Flex

Related posts:

1. The Blogs Have Moved
2. PureMVC, Spanning the Platform Spectrum?
3. Touch Screen Kiosk in Adobe Air

Starting out with PureMVC is not a particularly easy task. It is a good thing that there are decent documentation and examples, at least for AS3. At first when I read the documentation, it made sense only on a high level, but translating that high level understanding to code right away was out of the question. I solved this initial sticking point by looking at a couple of AS3 examples like CafeTownsend and EmployeeAdmin, where you can see how the framework works on the right size demo app, not too big and not too small.

One of the things that you will first notice is a constant repetition of code when creating your Mediators and Proxies. Nothing bad about it, it's all for a good cause, but it's extra time. Flex Code Generator (FCG) by David Deraedt is an excellent tool that saves you time by automatically doing the obvious. And more.

• It creates Mediators and Proxies.
• It can create AS3 Value Object out of PHP, Java or C#.
• It can create AS3 Commands and Business Delegates out of your Remote Service files.
• It can publish AS3 files you made directly to your development environment.

The greatest thing about it is that it has an extremely easy to use interface. Like any other code generator, it can not do all the work for you. That is your job. But for the part that it does -- and it's the laborious part too -- it does it well. I have read comments about bugs but I haven't experienced them myself yet. The author of the project is not thinking of taking this any further than it is at the moment because Adobe seems to be picking this issue up. You can read about this more at the bottom of this page. Until they do, FCG is a great tool to use to bump up your Flex productivity with PureMVC. Kudos to David for making it available!

Related posts:

1. Flare on PureMVC in Flex example
2. Learning PureMVC the Hard Way (is there any other way?)
3. PureMVC, Spanning the Platform Spectrum?

So we recently had a powwow between all the different parties to talk about MVC and this convergence. With the exception of the insufferable Mac and iPhone developers and their disgustingly mature Cocoa framework, we all agreed it would be nice to have an application level MVC framework for each platform. We also agreed that Swing is a great example of what happens when the vendor doesn't provide such a thing -- spaghetti code that relies on component level MVC and hard wiring at the application level. There are a few MVC frameworks for Swing, such as TikeSwing and Spring Rich Client (soon to be superseded by Spring Desktop), but for every Swing app that has this sort of design, there are hundreds that are just a mess.

Most of us felt that RIA's, including Flash and Flex apps, were suffering from the same framework vacuum. Wouldn't it be nice, we thought, if there was a common framework between all of these platforms, that brought application level MVC to the party? Sasha, our Flex lead, mentioned PureMVC, a "simple" framework that has its origins in ActionScript. It now has ports to Java, GWT, C#, Objective-C, PHP, Python and JavaScript. We'll be evaluating this framework over the next few months to see if it is suitable as a general solution for our RIA's and desktop apps.

If any of our readers have experience with PureMVC or any other cross platform MVC frameworks, feel free to comment.

Related posts:

1. Learning PureMVC the Hard Way (is there any other way?)
2. Using Flex Code Generator (FCG) with Flex & PureMVC
3. Flare on PureMVC in Flex example

The purpose of this demonstration is to use Yahoo Map and Papervision3D as a base for creating/importing 3D Objects with reference to actual locations on planet Earth using the Adobe Flex framework.

In this post I will be covering how to integrate Yahoo Maps AS3 API as an Interactive Material in PV3D 2.0 and solutions to the following problems:

- Security sandbox violation when using Yahoo Map as MovieMaterial (i.e. BitmapData.draw problem)
- Mapping Longitude and Latitude values to X and Y coordinates of a PV3D material
- Dragging Yahoo Map in PV3D (avoiding the map panning collision with PV3D)
- Simple gauge component from the ground up using basic trigonometry
- Simple tilt component again using basic trigonometry
- Making a visual component using Degrafa

Demonstrations of these solutions are packed in this air application for which you can also see and download fully functioning source code.

The application was built in Flex 3 using following API's:

Yahoo Maps AS3
You can download it here.
Also don't forget to acquire a free API key to run your app online. It is not necessary for local testing in debugger through Flex.

Papervision3D 2.0 (Great White)
You can find excellent tutorials here.
Source is available as a SVN repository here.

Degrafa
Official site: http://degrafa.com/
SWC is available here.

Security sandbox violation when using Yahoo Map as MovieMaterial i.e. BitmapData.draw() problem

When processing a MovieMaterial, PV3D uses the infamous BitmapData.draw method in MovieMaterial/bitmapDraw. This is a problem because the method will not yield a result if the origin of BitmapData is not in the same domain.
In case you have access to the server that you are loading the image data from, you can solve this problem by adding an appropriate crossdomain.xml file to that server.

This article from Adobe’s Deneb Meketa covers security updates in Flash Player 9 including very important changes to the crossdomain.xml structure. Whenever you have a Flash security based headache, this is a good starting point.

In case you can’t put crossdomain.xml on the image origin server, as is the case with Yahoo severs, you are supposed to use the checkPolicyFile property of the LoaderContext class, but that works only if we are directly loading the image data ourselves.

In our case image (map tiles) loading is being handled by YahooMap.swc and we don't have access to the aforementioned process. We could do an override, if we knew where the darn thing was, which I don't.

Sadly, the only solution for this problem that I could implement was by using Air, which is why I'm sharing this as an Air app rather than via a browser version - Air is much easier to deal with when it comes to security. As far as I'm concerned, problem solved for now.

I did hear some gossip that this will be sorted out in Flash Player 10, but who's going to wait for that?

I still haven't quite given up on this issue, as it is highly annoying roadblock to some cool browser based projects.

Mapping Longitude and Latitude values to X and Y coordinates of a PV3D material

This is done very straightforwardly by capturing the YahooMapEvent. It goes something like this:

private function getAllCoordinates(e:YahooMapEvent):void
{
clickedLong=Number(e.data.latlon.lon);
clickedLat=Number(e.data.latlon.lat);

clickedX=Number(e.data.point.x);
clickedY=Number(e.data.point.y);
}

You add a listener with this line:

yahooMap.addEventListener(YahooMapEvent.MAP_MOUSE_CLICK, handleMapClick);

Although this is a very simple thing, it allows you to convert Latitude and Longitude to the X and Y coordinates of the referring Material and you can play with it from then on. For instance, I used it to map flight trajectories based on GPS data (including GPS altitude) in 3D space. Fun stuff!
Dragging Yahoo Map in PV3D (avoiding the map panning collision with PV3D)

Dragging a YahooMap is super simple using the Yahoo Map API. It’s a convenient single line:

yahooMap.addPanControl();

When the map is processed by PV3D and you try to drag it, it starts jumping all over the screen, probably because of some event collision with PV3D. Luckily, we can get around this one by making our own custom dragging method as follows (note that this only describes the concept, the working version is in source):

private function mMove( e:InteractiveScene3DEvent ):void
{
// This code is run when the mouse is moved on the plane.
movieParent.x = mouseX -e.x;
movieParent.y = mouseY -e.y;

if(Application.application.stopMovingMap==false)
{
Application.application.yahooMap.panControl.panEnabled=false;
f=true;
}
else if(Application.application.stopMovingMap==true && Application.application.isAnythingBeingDragged==false)
{
if(f)
{
oldX = e.x;
oldY = e.y;
f=false;
}
Application.application.yahooMap.panControl.panEnabled=true;

newX=e.x
newY=e.y

xDiff= newX-oldX;
yDiff= newY-oldY;

Application.application.yahooMap.setCenterByPixels(new Point(xDiff,yDiff));

flightsContainer.x = flightsContainer.x-xDiff;
flightsContainer.y = flightsContainer.y-yDiff;

oldX=newX;
oldY=newY;
}
}

You can look at the missing variables and event listeners in the source.

Simple gauge component from ground up using basic trigonometry

What I wanted to achieve was to rotate the 3D cube on which the map rests around the Z axis. Simple, right? So I used a VSlider component and gave it a range from 0 to 360 to capture the angle of rotation. And that’s where problems started. When the 3D map is under VSlider, both start acting up and jumping across the screen. All the issues in this app smell of the same thing - something to do with Mouse Down and Mouse Move events in PV3D. I’m still looking.

Being annoyed by the problem I started thinking about other approaches and a gauge component came to mind as the best visual representation of the functionality I was trying to achieve.

I naturally tried using some of the ready made gauge components available online, but with all of them I had some kind of issue. Either it was the inability to skin them properly, or to set the scope to full 360 degrees.

In the end I decided to refresh my trigonometry knowledge and made the component myself.

At the same time, this solved the VSlider going crazy issue. Why? I’ll post it when I find out.

Simple tilt component again using basic trigonometry

When in Rome... I used the same principle as in simple gauge component to add to user experience and visually show the angle that the 3D map is tilted by.

Making a visual component using Degrafa

Degrafa is such a priceless framework. Just in case you don’t know, it’s used for manipulating SVG’s (vector based graphics) in Flex 3, giving you a lot of power in customizing your visual components. It is the best solution for mapping in Flex that I have ever seen!

In this particular app it wasn’t absolutely necessary but it’s there to visually enhance the arrow button. I really wanted the arrow to look like it does in the example. Look at the source to see the details. Actual SVG data was created in Illustrator.

All in all, combining API’s is certainly going to get you into trouble. But combining ideas can amount to a sum greater than it’s parts. I love it.

If anything is not clear to you, look at the code to see all the in’s and out’s. If it’s still not clear, shoot me a message.

Related Services:
Flex, Flash and Air, Custom Software Development

Related posts:

1. Papervision3d 2.0 (Great White) in Flex 3 (Part I)
2. Flex Gauge Component Example with source
3. Flex Camp Chicago ‘09 Community Showcase Presentation Summary

Currently in beta release, with new iterations coming quickly, Tumblweed lets you post photos, quotes, links, audio and full blog posts - any of Tumblr's supported content types - without hitting your browser. None of this would be possible, of course, without Tumblr's http-based API. But props to Tumblweed creator David Merino for building an application that's minimalist yet user-centric.

Tumblweed currently supports a subset of the functionality you can access on-site. You can create posts, though editing or deleting them appears to be wonky (at least on my machine, a MacBook Pro running OS X Tiger). You can drag-and-drop photos instead of using a clunky, web-based upload mechanism. You can even copy images directly from the clipboard.

It would be nice if Tumbleweed provided better visual feedback about the image currently being uploaded. I expect such usability issues to improve in subsequent releases. In the meantime, thoughtful touches abound. For instance, the Snapshot dialog lets me take a photo using my Mac's built-in camera and upload it to Tumblr just like any other photo.

As a blogging client, Tumblweed already delivers value. As a showcase for AIR, it overcame my cautious cynicism about Adobe. The melding of webapp and desktop capabilities proves as compelling in practice as it did in theory at last year's Adobe MAX conference. It pains me to admit it, but I find myself eager to build an AIR app of my own.

Related posts:

1. Mash Note: WordPress
2. Mash Note: Foxmarks bookmark synchronizer
3. Mash Note: Ninjawords online dictionary

Obviously there's going to be lots of talk about how to develop Flex and Flash applications. Also how to develop online/offline apps with Adobe Air. Heck you'd think Adobe was a sponsor.

If designing RIA's with Flash/Flex/Air is your thing, you want to be here. It's not free, but based on last year's event, well worth the $125-$250 (depending on which sessions you go to).

Update: If you sign up here with our special ninja supporter code of PATH15, you get 15% off.

Related posts:

1. Flex Camp Chicago ‘09 Community Showcase Presentation Summary
2. Upcoming No Fluff Just Stuff conference
3. Adobe MAX 2007 conference: An effective sales pitch for AIR