Papervision App on FaceBook

Try it on FaceBook.

So it’s more advanced than a Hello World app. It uses 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!

The Back End – Why Remoting is Better…

 

The back end for most of my online portfolio is using AMFPHP Flash Remoting. It’s a free library that came out years ago. I still like it because its performs well and is easy to install on a shared web hosting account ( I don’t have access to the server for executable installs, and can not restart it ). By easy, I mean you upload a folder of PHP files and it’s ready to go. It’s been a great journey into PHP/mysql as a back end for AS3, and has allowed me to make several RIA’s on my own.

For Flash based apps that use a back end, I like Flash Remoting better than JSON, AJAX, REST services, or server side generated xml. I have an opinion on this because I’ve used all of them. Here’s my reasons:

• Flash sends and receives native Flash objects with any level of hierarchy and complexity. For example, an array of objects containing strings, numbers, and other objects containing arrays of objects. This leads to the next point:
• No serialization or de-serialization is required, ( the information received is Flash native ). For example, in AS3, you might access your returned data with “response.people.id[7].areaCode“
• It’s faster because it’s compressed binary, rather than large uncompressed strings
• It’s faster because it’s socket layer communications, rather than standard http requests

Also, for some speed demo on this, see James Ward’s benchmark.

I know that this particular implementation of Flash Remoting might not suit the needs of a large, enterprise based back end – but there are enterprise level remoting solutions out there. Several flavors are available, not only with PHP, and not all opensource. I’ll post some links of these:

Adobe Live Cycle ( JAVA )

WebORB (.NET, JAVA, PHP, Rails)

Adobe Flash Media Interactive Server

BlazeDS ( JAVA )

Zend AMF ( PHP )

getDirectoryAndFilesInfo

Kinda like getDirectory, but also looks up the file name in a database and returns the whole record if it’s found. This is useful for describing media such as video, sound, and pictures. It’s part of my MediaService in AMFPHP.

To try it out:

1. go to http://as3.actionscriptdude.com/amfphp/browser/
2. Click on MediaService
3. click on getDirectoryAndFilesInfo
4. for the dir_ parameter, type in public/vids
5. click on Submit Query
6. You should see a list of objects containing information about each video file

This is used in the Video Playlist example.

function getDirectoryAndFilesInfo($dir_)
{ 

// create an array to hold directory list
$result = array();

$directory=”../../” . $dir_;

$result = array();

// create a handler for the directory
$handler = opendir($directory);
//do not allow if directory contains “..” SECURITY BREACH!
$breach = strpos($dir_,”..”);
if ($breach === false  ) {

// keep going until all files in directory have been read
while ($file = readdir($handler)) {
if ($file != ‘.’ && $file != ‘..’)
{
$path_parts = pathinfo($file);
$ext=strtolower($path_parts["extension"]);
$fObj=array();
$fObj["name"]=$file;
$fObj["size"]= filesize($directory . “/” . $file);
$fObj["extension"]=$ext;
$fObj["isdir"]=is_dir($directory . “/” . $file);

if ($fObj["isdir"] || $ext==”flv” || $ext==”jpg” || $ext==”mp3″ || $ext==”png”)
{

$sql2=”SELECT COUNT(*) FROM comments WHERE file= ‘$file’”;
$query2 = mysql_query($sql2);
$getrow2 =  mysql_fetch_array($query2);
$fObj["commentcount"]=$getrow2[0];

$sql=”SELECT *  FROM filedetails WHERE filename= ‘” . $file . “‘”;
$query = mysql_query($sql);
$getrow =  mysql_fetch_array($query);
$fObj["lookup"] = $getrow ;

array_push($result,$fObj);
}
}
}

// tidy up: close the handler
closedir($handler);
}
return $result;
}

getDirectory

“getDirectory” is part of my PortfolioService in AMFPHP. It gets the files in a directory and provides info about them such as the name, size, and extension. This information can be read by Flash via Flash Remoting and is received as an array of objects which is binary compressed.

It’s real usefulness is for media viewers (jpg, flv, png, gif, mp3). Once you build a player that uses this service, you can update new songs, videos, etc by simply uploading them to the same folder.

To see live data similar to image above:

1. go to http://as3.actionscriptdude.com/amfphp/browser/
2. Click on PortfolioService
3. click on getDirectory
4. for the dir_ parameter, type in mp3
5. click on Submit Query
6. You should see a list of objects containing information about each mp3 file

The “mp3″ query is used by the MP3 player example.

function getDirectoryAndFilesInfo($dir_)
{ 

// create an array to hold directory list
$result = array();

$directory=”../../” . $dir_;

$result = array();

// create a handler for the directory
$handler = opendir($directory);
//do not allow if directory contains “..” SECURITY BREACH!
$breach = strpos($dir_,”..”);
if ($breach === false  ) {

// keep going until all files in directory have been read
while ($file = readdir($handler)) {
if ($file != ‘.’ && $file != ‘..’)
{
$path_parts = pathinfo($file);
$ext=strtolower($path_parts["extension"]);
$fObj=array();
$fObj["name"]=$file;
$fObj["size"]= filesize($directory . “/” . $file);
$fObj["extension"]=$ext;
$fObj["isdir"]=is_dir($directory . “/” . $file);

if ($fObj["isdir"] || $ext==”flv” || $ext==”jpg” || $ext==”mp3″ || $ext==”png”)
{

$sql2=”SELECT COUNT(*) FROM comments WHERE file= ‘$file’”;
$query2 = mysql_query($sql2);
$getrow2 =  mysql_fetch_array($query2);
$fObj["commentcount"]=$getrow2[0];

$sql=”SELECT *  FROM filedetails WHERE filename= ‘” . $file . “‘”;
$query = mysql_query($sql);
$getrow =  mysql_fetch_array($query);
$fObj["lookup"] = $getrow ;

array_push($result,$fObj);
}
}
}

// tidy up: close the handler
closedir($handler);
}
return $result;
}

Portfolio Application

http://www.actionscriptdude.com

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.

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 have free time, I add more items to the portfolio or more features to the portfolio application. 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 Google Maps example: http://as3.actionscriptdude.com/#/id48
• 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.

Frequency Generator

http://as3.actionscriptdude.com/#/id108

• Click play and drag the slider to alter the frequency
• Sound is generated with a sine wave
• Live spectrum display

Back in 1983 when I was 14 years old, my dad bought me my first computer. It was a Commodore 64 sporting (then) an impressive 64K of memory ( compared to 4 million K in a 4GB computer ). When you turned it on you were in some sort of command-line / Basic language interpreter, so the first thing I learned was how to program in Basic. And the first program I wrote was generating frequencies, like say 230hz.

For years I was wondering why ActionScript never had this ability – and then – Adobe recently released it in Flash Player 10. Generating raw frequencies is nothing exciting unless you want to annoy someone or their dog, but it’s the building block to something more exciting – synthesizers, beat machines, sequencers, and electronic music. I’ll post some links later of some developers who have taken this to a whole new level.

http://www.sonoport.com/

 

 

MyTube Remoting Video Playlist

http://as3.actionscriptdude.com/#/id107

A video playlist with titles, descriptions, and commenting. Uses my MediaService in AMFPHP to accomplish the back end. Build in Flex 4 using standard components.

Also see getDirectoryAndFilesInfo

FaceBook Connect Flash API

http://as3.actionscriptdude.com/#/id100

Once you log into Facebook and give this app permission, it can obtain some basic data about you, your friends, and your albums using the Graph API. The user interface is just a simple data grid showing the information in a table, but one day I may make something interesting out of it.

Google Maps Search

http://as3.actionscriptdude.com/#/id48

• Type in and search for cities, addresses, and land marks within Flash
• Different views including satellite imagery
• Reverse Geo-coding:  move the map and the address of where you are displays on the bottom
• Added my own interactive layer “Drag Radius”

The task at hand was to build an “Area Selector” in Flash. You could go to an address in a city, drag a highlight over the area, and then get  information about it. Currently it shows LAT/LONG/area/radius. Adding the area and radius was not easy. It has to account for the zoom level. So, a 1″ radius could be 1/10 sq Mile, or it could span half of the planet, depending on your zoom level. The other feature I added was Reverse Geo-coding. Zoomed in to the max in Satellite view, I could position the map so that the centerpoint would reveal the address of the building underneath. Dragging the map more triggers address lookups on each move.

The Google Maps API for AS3 is here: http://code.google.com/apis/maps/documentation/flash/

You have to sign up for an API key, but its well worth it.

Dynamic Slide Show

http://as3.actionscriptdude.com/#/id43