Pepsi Super Bowl

 


 
In 2009, I did a contract to build the Pepsi Superbowl site. Conceptualized and designed by The Famous Group, I added Flickr, YouTube, and Gigya APIs in ActionScript, as well as an RSS feed reader. The site would scale to any browser window size and randomly render from a list of Flickr images, as well as present a YouTube playlist of commercials for the Pepsi Superbowl 2009 campaign called Refresh Everything.

Tron

 


 
This highly immersive movie website was built by Heavenspot for Disney in 2010. During that time, Disney hired me to assist with technical integration and development of the site. For example, the developers at Heavenspot needed a persistent storage medium for the user’s avatar data – which had to fit into Disney’s enterprise infrastructure. Web site traffic was extremely high at Disney (some of the highest on the internet), and the use of CDNs and clouds were critical to keep up with the demands. To solve the problem, the Java devs built a back end service to fit the requirements for performance and security. I built the as3 components to work with that service, and assisted Heavenspot with integrating into the site. I also assisted with restructuring the asset locations for CDN deployment , as well as some promotional projects such as a sweepstakes component.
 

 
Before the big site, I worked on making this teaser site which was a placeholder. I took a Flash CS5 demo animation and made it into this interactive version for displaying promotional video and image content.

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 🙂

 

Panda Jam Ads

 

 The ad that pops up over the Facebook Flash game Panda Jam are actually HTML / CSS / JavaScript / and ActionScript all working together. Panda Jam has over 1 million players world wide and monetizes on each ad shown. Inter-level ads display in between levels of the game and use Adap TV’s JavaScript API. For the Ad Sales team, I programmed it with a complex set of factors of how and when to show ads, such as:

  • no ads until the 2nd round
  • don’t show more than 1 ad within a minute
  • no ads for users who made a purchase in the past
  • no more than two ads per game
  • restrict ads to certain geographic regions determined by Facebook API
  • Ad server errors would get trapped and bypass the ad, so the user would not be affected

These settings were all configurable via an xml and may have changed since. Once the ad completes, the game resumes. Using JQuery and the Adap TV JavaScript API, PlayerIO API, and ActionScript’s External Interface, this system was then integrated into other games.Launch Flash!see it

Automating Text Content for Flash E-Learning with Word and Visual Basic

Medsn’s E-Learning Platform

 

 

Within the Microsoft Office suite of applications is a powerful automation tool. They are called Macros when you look through the menus, but are far more powerful than Macros in other applications. You can customize the macros in the Visual Basic programming language. It gives you deep access into the functionality of MS Office applications.

For several years, I architected and maintained the E-Learning platform for Medsn, now Indegene. It was a Flash application to navigate through Flash content, and supported external data sources for text, audio, and quizzes – as well as several other features such as AICC and SCORM tracking. Clients included many of the major pharmaceutical companies as well as medical equipment manufacturers. Here are some samples of the courses I programmed:

Launch Flash! Alcon

Launch Flash! Post Test
Launch Flash! Migrain
Launch Flash! Patient Simulator
Over 100 training courses were developed for this platform and automation was key to get the content writers work into the system. The “parser” was a tool I developed to take a MS Word doc with a predefined table structure, fill it in with content, and then produce the data sources for the training course. This rapid conversion process allowed the writers to iterate and customize content freely.

Script Template

The Script Template is a combination of a Word document template, macros written in VBA ( Visual Basic for Applications ), and forms such as those available in Visual Studio. You can edit macros right from Word, Excel, PowerPoint, or Outlook and have a Microsoft quality IDE.

Macro Editing Environment in Microsoft Word

The automation of Microsoft Office applications is very powerful when combined with a language like Visual Basic.

WiFi Re-Broadcasting with Intel’s My WiFi

When the family and I stay at hotels, the internet wifi charge per device, per day can really add up. Paying for 2 laptops, 2 phones, and a tablet can be a bit too much. I always thought it would be a great idea to connect one device, and share it to other devices by creating a new wireless network of my own. I looked for solutions to this and wasn’t content with having to use a wired (ethernet) connection in order to share, since some hotels now only have wireless.

Then one day I decided to Google the “Intel My Wifi” feature on my Dell PC Laptop, and realized it might be the answer – it was!

How does it work? While my laptop is connected to the hotel room’s WiFi, I can share the connection by creating my own wifi network on the same laptop. Then, other devices can then connect to my new wifi connection (instead of the hotel room’s wifi). What I like better about this solution is:

1)  your devices do not need to be paired (bluetooth)

2) WiFi to WiFi enables you to share internet in almost all hotels

3) you do not have to pay $60/day for internet!

I won’t go into details about how to set it up, other than there should be an icon for it on the task bar ( for Windows PCs). Right click and explore the options, and it should be self explanatory. By the way, Intel My Wifi is a hardware solution and is not commonly available on all laptops.

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.

Frequency Generator

 

 

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

Launch Flash!see it

Back in the early 80’s when I was a young teen, my dad bought me my first computer. It was a Commodore 64 sporting a [then] impressive 64K of memory ( compared to 16 million K in a 16GB computer today ). When you powered it on, you saw a command-line / Basic language interpreter. As a result, the first thing I learned was how to program in Basic. And the first program I wrote was generating sound frequencies, like say… 230hz.

For years I was dissapointed that ActionScript never had this ability, until Adobe finally 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, drum 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/