Form Creator

 


 
In late 2013, I started working at Deluxe Entertainment in Burbank and was debugging several versions of a LAMP stack application with Linux, Apache, MySQL, PHP as well as AMFPHP and Flex. The project was Media Recall, a digital media storage and cataloging system for several major clients including Harpo (Oprah Winfrey), Johnny Carson, Martha Stewart Online, and more. Later on I moved into tools development for the Operations team and created this application. Several of the tools being developed by the team had an XML format for the forms, and creating that XML was becoming a large task. My project was to simplify that by creating a visual tool to create and modify the XML. This tool was also a LAMP stack application, in which my focus was mainly the Flex and PHP.

SlotFriendzy Game – a Passion Project

In 2012, I had a dream of making a successful slot machine game on Facebook. I spent about 6 months on it during my off-time from work. I even formed a Delaware company to own the game  – called Mookie Games Inc.

Concept

The idea of the game was to have a slot machine where the slot items were your friends. It used the Facebook API to grab their profile pictures and basic info about them. You could also launch their profiles from the pictures.
You were given a certain number of coins to begin with, and over time if you ran out, you could purchase more. You could adjust your bet, and the number of pay lines you wanted to bet on. Increasing the pay lines also increased your chances of winning, but increased your wager.
Like real Vegas slot machines, logic was in the game to control your odds of winning, and eventually lead you to making a purchase. I also added lots of free play options such as getting bonuses for each friend of yours that played the game, and how often you and your friends played. Other features such as posting screen captures of your wins, messages on your Facebook wall, and bulk invitations to friends were utilized to make it more viral.

Cloud Deployment

Hoping the game would get used by millions, I decided to learn how deploy cloud based apps using server stacks, virtual machines, load balancers, and distributed databases. I began with Facebook’s default host, Heroku, and then ended up on Amazon Web Services (AWS). I also did research and experimented with others such as App Fog, Google App Engine, and Micorosft Azure.
I picked AWS because of the autoscaling feature. The game was deployed using Git, which would get pushed up to EC2 Virtual Machines behind a load balancer. If the game got heavy usage, more EC2 VMs were automatically launched to handle the load, and then terminated when usage decreased.

Deployment was similar on Heroku, except for the Auto Scaling. I could switch back and forth between Heroku and AWS with the way I had the app set up, using Environment Variables and PHP. I just had to change the url settings on Facebook.

CDN

All Flash swfs, images, and sounds were uploaded to an AWS S3 Bucket. I set up an AWS Cloudfront distribution which used that bucket to copy and cache local versions around the world. This was important as I was doing Facebook advertising for my game in several other countries, and I needed the game to have good performance world wide.

Databases

Both AWS and Heroku apps were using a cloud Database from a company called Xeround ( no longer in business ). An alternative today could be ClearDB. This is basically a cloud hosted mysql endpoint that has synchronized copies hosted around the world, for better performance. Much of the games features required the use of SQL queries, so I chose MySQL over those no-SQL alternatives.

Serverside

The server side language for this app was PHP. It used the PHP APIs for Facebook and AWS S3, but most of the PHP was in AMFPHP service classes to handle database operations and communication with Flash. A gambling transaction api was created in the process that had 2 way encryption between the PHP and Flash, and prevented game cheating.

Front End

The Flash App was my largest ActionScript project ever. I proudly architected some clean reusable MVC OOP code that made it easy to invent, integrate, and update features. The graphics assets were from Flash CS6 and published as SWCs, and Flash Develop was the main IDE for coding.

The End

Even though users were making purchases in the game, it never hit a point where it became profitable. Also, a company in the UK claimed the game’s name was too similar to theirs. Facebook never saw a resolution to the dispute and simply shut down the game. All in all, at its peak, the game had over 25,000 users, and was a joy to develop. It allowed thousands of retirees to gamble on the cheap while seeing pictures of their loved ones 🙂

 

The Back End – Why Remoting is Better…


The back end for most of my flash 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-just edit some configs and upload. It’s been a great journey into PHP/mysql as a back end for AS3, and has allowed me to make several RIA’s (Rich Internet Applications) 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

An expanded version of the getDirectory call, but also uses the file name as a key to more information in the database. This is useful for describing media such as video, sound, and pictures. It’s part of my MediaService class 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.

PHP Source:

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 (images, sound, video). Once you build a player that uses this service, you can update new songs, videos, etc by simply uploading them to the same folder, and the media is automatically available to the application using the service.

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.

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: https://arnoldbiffna.s3.amazonaws.com/asd001/index.html#/id43
  • 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.

INSERT INTO `portfolioFlex` (`ID`, `p_order`, `active`, `p_category`, `p_title`, `p_description`, `p_imgswf`, `p_link`, `swflink`, `launchtext`, `launchbutton`, `skills`, `width`, `height`, `previewID`, `notes`, `creationdate`, `features`, `lockroot`, `blogkey`)
VALUES
	(2,250,'y','1','MP3 Player','Playlist is generated from directory contents, using AMFPHP Flash Remoting. Live volume and balance control. Stereo spectrum display.','mp3player.png','','mp3Spectrum.swf','','','1',345,400,2,'','','4,15','','/2011/02/13/mp3-player/'),
	(106,275,'y','1','Vandalize','Vandalize! is an app that allows you to doodle on pictures and save your artwork. Saved artwork is available for everyone else to see and comment on. Features drawing, saving to JPEG, JPEG quality, and more. It uses a combination of ActionScript, PHP, Flash Remoting, mysql, and XML.','v.png','','vandalize/vandalizeASD.swf','','','',430,400,0,'','','','','/2014/05/04/vandalize/'),
	(43,451,'y','1','Slide Show ','An XML based slideshow viewer with page numbers and a magnify link to the full size image.','slides.png','','myTravelSlideShow.swf','','','1,14,16',480,360,0,'','','1,2,7,11','','/2014/05/04/dynamic-slide-show/'),
	(107,612,'y','','MyTube','Flash remoting based video viewer. Finds .flv files in a folder and allows you to view them as well as comment and see other people\'s comments.Also uses a hit counter from my remoting services.','videocam.png','','MediaBrowserFB4pv.swf','','','',700,600,0,'','','','','/2014/05/04/flex-video-folder-browser/'),
	(41,450,'y','1','Flickr Search Tool','Uses Flickr\'s RSS API to search public images. Each new run starts up with a random feed. Type a word, or words seperated by commas to get specific images. Enter a blank search to get another random feed.','flickr.png','','flickrSearch.swf','PHP programming is used to find all the jpegs and resize them when loading them into flash.','','1,14,16',640,480,0,'','','1,2,3,7,11','y','/2014/05/04/flickr-api/'),
	(108,680,'y','','Frequency Generator','Uses a sine wave to generate a sound that you control. Sound generation is a new AS3 feature in Flash Player 10.','speaker.png','','soundgen1.swf','','','',300,150,0,'','','','','/2014/05/04/frequency-generator/'),
	(100,585,'n','','FaceBook Connect','Uses the Facebook API for AS3 to connect to your facebook account. Demonstrates using GetInfo, GetFriends, and GetAlbums. Login is secure via facebook\'s web site.','facebook.png','','facebook1.swf','Under Construction','','1',550,400,0,'','','7,14','','/2014/05/04/facebook-connect/'),
	(46,300,'y','1','YouTube Search','Uses the YouTube RSS API for searching, and a Google\'s AS3 Chromeless Player API to display video. Searches for videos as you would on YouTube, but renders in a custom way. ','YouTube.png','','http://as3.actionscriptdude.com/YouTubeR.swf','','','1,16,12',800,420,0,'','','1,7,13,14','','/2014/05/04/youtube-flash-api/'),
	(48,575,'y','','Google Map Search','Uses Google Maps Flash API. Geocoder client searches for addresses and shows current address of center. Drag the map to see addresses change. Interactive radius component uses Map API to get correct LAT LONG and distance for calculations.','earth.png','','http://as3.actionscriptdude.com/minimap.swf','Under Construction','','1',460,460,0,'','','7,14','','/2014/05/04/google-maps-api/'),
	(109,700,'n','','SpaceAttack Game','[UNDER CONSTRUCTION]','cube.png','','space-attack.swf','','','',800,600,0,'','','','','');