Papervision App on FaceBook

Using the Papervision library, and the Graph API Facebook  library, I had the idea to build a 3D wall of images from these cool components over at FlashLoaded. I considered using their component, but decided to build my own. I had already built a 3D Carousel as part of my portfolio interface, and thought, well, a  3D Wall is just a bunch of carousels on top of each other… SO I revisited my old carousel and build it up to the wall.

This is turning into a long term side project, and I’m learning along the way. I really like the way FaceBook setup their FQL language, and so far I have been using a few tables along with FQL Multiqueries. This allows my app to do several SQL-type (FQL ) queries in one shot and get back the data in one object.

Some sample FQL calls I’m using:

Get data about the user’s friends:
SELECT uid, name, pic,status FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = me()) LIMIT 1000
Get Status/Post messages from each user ( depending on how recent in your Stream )
SELECT source_id,message, created_time FROM stream WHERE source_id IN (SELECT uid2 FROM friend WHERE uid1  = me()) LIMIT 1000
What’s great is that these calls are AS3 native within the api ( but really use JavaScript and JSON externally). There are quite a few tables of data so just imagine the apps you could make…

As of 4/18/2011, I have 57 users on this app, 20 of them are Facebook friends. Lets see if I can beef it up and make it viral!

Portfolio Application

I was looking for a way to display CS4, CS5, Flex 3, and Flex 4 content all in one contiguous Flash experience. Turns out Flex 4 (FlashBuilder) was the best choice! It has proven very stable compared to CS5 as a swf in swf container environment, and does not seem to have any issues with Flash components. Whenever I had free time, I added more items to the portfolio or more features to the portfolio application.

Launch Flash!see it

Perhaps the biggest piece of programming in my online portfolio is the portfolio application itself. It’s not described anywhere in the portfolio, so I’m doing it here.

Here’s a list of features it has:

  • Database Driven: All portfolio items are assembled in a mysql database with info such as title, description, swf path, etc. From the database, you can choose items in the sliding “accordion” component, or the 3D image wheel – both on the left side.
  • Data Services: Data is fetched using Flash Remoting, I wrote the PHP services that feed my ActionScript structured, binary compressed data
  • Integrated WordPress Blog: Portfolio Items described in the blog are linked to the items in the portfolio, and the blog entries can be read while in the site. Click the “W” icons to see.
  • XML Menu system: I can easily add links and items that trigger AS3 functionality. Also, items can be launched in a JavaScript LightBox just by populating the xml
  • Windowing system: Allows you to view multiple items at once and move them around
  • Layout Control: Sizes to any ( decent ) resolution and automatically adjusts the layout to compensate, even when you resize the browser during viewing
  • 3D Item Selector: A custom PaperVision 3D component I built to select items. Selected items have a yellow 3D polygon above them, and highlighted items use a glow effect.
  • Deep Linking: Using Asual SWFaddress, you can link directly to individual portfolio items such as the Slideshow example:
  • Shadowbox: Some portfolio items launch in a JavaScript box overlay. This allows it to launch html content in a separate window without “leaving” the site
  • Full Screen Mode: Click the “Max” button in the top right corner
  • Cascading Windows & Close All functionality: in the Appearance menu
  • Code Generated Wallpaper: in the Appearance menu. Uses a radial gradient

The structure of the portfolio could be reused to develop a large application where interactive modules are loaded and unloaded as needed. Floating windows and dialog boxes, along with the menu system are all elements of this. The code is an MVC ( Model View Controller ) structure that I find easy to update and build on.

The portfolio was rendered dynamically from the database, following a path of mysql -> PHP -> AMFPHP -> Flex.