SmartFoxServer 2X is the latest server offering from gotoAndPlay() and we were honoured to be asked to write the Android samples for the server. There are three samples in total starting with the most basic Connector sample, and concluding with a playable tick-tack-toe game call SFS Tris.

Previously, A51 was asked to develop a complete multi-player top-down Racing Game for SFS2X to showcase some of the new functionality available in the SFS2X server release. Both projects now reside on the official SmartFoxServer website and all source code and documentation is available for download.

Not very, as we, at A51, have lately discovered. Our client, General Purpose Pictures, wanted to completely redesign their company’s site, and recognizing the importance of being mobile-friendly, the new site had to be developed completely in HTML. To include a video file on their home page, and acknowledging that Adobe Flash was not an option, we turned to HTML5.

The latest HTML version has been developed to be compatible with audio and video functionality, a sort of alternative to Adobe Flash, and to an extent, it has delivered. However, getting it to work across multiple browsers and across multiple devices, was definitely the biggest challenge we experienced.

Here’s a bit of a background on the project: We wanted to place an HTML5 video on General Purpose Picture’s home page, that would automatically play and loop continuously. A fairly new video functionality, it’s not quite compliant across all browsers, so we could easily get it working on one browser, but then it wouldn’t play on another. You see, Google Chrome uses a webkit engine that supports H.264 as a web video codec, whereas, Firefox is supported by .ogv files for HTML5 video.

 if($.browser.mozilla)
        {
          $('#video').append('<video poster="/img/gpp_video_poster.jpg" preload="none" autoplay="autoplay" loop="loop" tabindex="0"><source id="ogv" src="/video/intro.theora.ogv" type=\'video/ogg; codecs="theora, vorbis"\' /></video>');
        }
        else if ($.browser.msie)
        {
            var ieVersion = $.browser.version;
            if(ieVersion < 9)
            {
                $('#video').append('<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" standby="data is loading..." codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="480" height="376"><param name="src" value="intro.mov"><param name="autoplay" value="true"><param name="type" value="video/quicktime" width="294" height="166"><param name="controller" value="true"><embed src="intro.mov" width="294"  height="166"autoplay="true" controller="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></object>');
            }
        }
        else
        {
          $('#video').append('<video width="294" height="166" preload="none" autoplay="autoplay" controls="none" loop="loop" tabindex="0"><source id="mp4" src="/video/intro.mp4" type="video/mp4" type=\'video/mp4; codecs="avc1.42E01E, mp4a.40.2"\' /></video>');
        }

So, we had to convert the video file to compatible formats, using this free converter in order to have the video file play on various browsers and devices. The disparity across browsers means that each time a user lands on this page, it has to detect which browser is being used, and then replace the video tag accordingly, using jQuery.

On top of all of that, mobile devices also behave differently. For every HTML5 video tag, you can set controls that include auto-play, looping, etc., but for mobile devices, like iPads, setting controls is not an option, so the video file shows up but the user has to manually press play to watch it. And one more thing, on the server you have to make sure to add the MIME types or configure your htaccess file, otherwise the Apache server won’t deploy the video file.

AddType video/ogg .ogv
AddType audio/ogg .oga
AddType video/mp4 .mp4
AddType video/webm .webm

So, was it worth it to venture into HTML5 video? Absolutely. Although it looks simple enough, it’s a process that requires a ton of workarounds and significant testing. But in the end, the video works on all web browsers and mobile devices, and it looks great. Client happy, A51 happy.

SmartFoxServer 2X is the latest release from goToAndPlay() and offers a substantial performance boost over it’s predecessor (SFS 1.6.9) as well as some really innovative and useful features. I highly recommend having a look at the new server if you’re interested in developing multi-player games or applications. Some of the new features include an enhanced Admin Tool, enhanced security, UDP support, binary transfer, message compression, a new game API, high resilient connection system, room categorization, match expresion engine, and an entirely new server side extension architecture.

We’ve been working extensively with SFS 2X already having created a sample game that will soon be released on the SmartFoxServer website. Keep a look out for the full source code and walkthrough, but in the meantime, have a peek at the recently released tutorials on YouTube.

To overcome this deficiency, we can load a CSS stylesheet and transform styles into a TextFormat by using the StyleSheet.transform() method. We can pass in the StyleSheet and a style to apply. Using StyleSheet.getStyle(), we can retrieve an object that contains all of our style information for a specific CSS definition – say, span.myStyle { color: #ffccff; }. The transform() method will convert that style into a TextFormat for us and we now have dynamic CSS styling for out INPUT fields.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

public static function createInputTextField($style:String = null, $css:StyleSheet = null):TextField
{
	 /*
	Usage:
		var css:StyleSheet = new StyleSheet('span.myStyle { color: #ffccff; }');
		var tf:TextField = createInputTextField('span.myStyle', css);
		addChild(tf);
	*/
 
	var input:TextField = new TextField());
	input.type = TextFieldType.INPUT;
	input.border = true;
	input.borderColor = 0x000000;
 
	if($style != null) input.defaultTextFormat = $css.transform($css.getStyle($style));
 
	return input;
 
}

Now, with a single StyleSheet, we can style ALL TextField instances – the way it should be.

PA Tourism's Roadtrip-a-Matic

Recently, we released a Flash based Google Maps application we built for Pennsylvania Tourism: Roadtrip-a-Matic. The application encourages users to enter a beginning and ending address and maps out the route through a scenic tour of Pennsylvania. There are a number of routes to choose from, each with a plethora of points of interest.

The app makes use of a number of different Google Maps API methods to invoke step-by-step directions, calculate distances and project travel time.

Hugs and kisses go out to our good friends in Philly, Red Tettemer, who drove the project and knocked it out of the park.

Nettuts

Nettus+ was kind enough to publish an article I authored on using the CSS3 @font-face declaration for purposes other than fonts. There are a number of applications and it opens up a number of different doors.

Have a read on Nettuts.

Here’s the demo. You can also download a ZIP of the demo here.

IE7 only displayed the first character of each word in the proper font-the rest of the characters were displaying in the browsers default font. Scratching our heads, we finally figured out that since the headers where actually written as title case-and therefore containing lowercase characters, that even though the text-transform property was deployed and characters where appearing in uppercase, IE7 required the lowercase letters to exist in the EOT file to display the uppercase characters (intuitive isn’t it). So the simple fix was the rebuild the EOT file with both upper and lowercase even though the lowercase characters are never used.

Neilson® Dairy Oh®!

A51 is pleased to announce the launch of a new updated website for Saputo’s Neilson^® Milk brand Dairy Oh!^®. Dairy Oh!^® contains DHA, an Omega-3 fatty acid, contributes to good health and normal growth and development. The focus of the campaign was to elaborate on the benefits of milk high in DHA. The overall campaign creative was developed by Clean Sheet Communications. A51 developed the “one page website” concept for the campaign, designed the creative and developed the website.

The website uses jQuery to scroll up and down a stack of books held by a young girl, displaying selected content in a callout window. Both English and French versions are available.

A big thanks goes out to Clean Sheet and their team for putting so much trust in us!

Well the results are in and while I did not win I am certainly please with my results.  My entry was in the top half of the results and not far behind contest organizer Mike Chambers’ entry.

The contest taught me a lot about AS3 optimization, mainly that bit-wise operations can seriously increase your speed performance.  I definitley need to brush up on my 1′s and 0′s.

You can take a look at my entry here and all the other implementations here.

Big thanks for Ian Stewart for helping me with my class and Mike Chambers for organizing the contest.  I can’t wait until the next one comes along as I am sure I’ll be able to improve my performance.

Using Pylot to Load Test CakePHP

Since we like to use the CakePHP framework here at A51 we figured it would be great if we could find or develop a tool to load test our sites as we developed them to weed out any issues that would be caused in a high load production environment. After some research, we found a small open source application called Pylot (http://www.pylot.org) which is made for testing performance and scalability of web services. Pylot generates concurrent load (HTTP Requests), verifies server responses, and produces reports with metrics. Tests suites are executed and monitored from a GUI or shell/console.

I decided to use CentOS 5.4 (stable) for my testing and started with a clean install of the OS with just the base packages and no window manager. Pylot requires a couple dependencies for different actions you may want it to perform. First is Python, and since Pylot requires Python 2.5+ I needed to compile Python from source as CentOS repository only had 2.4.3. The next dependencies were NumPy (http://sourceforge.net/projects/numpy)  as well as MatPlotlib (http://sourceforge.net/projects/matplotlib) which are both used for generating graphs.

Now that my system was ready to run Pylot I needed to setup a test case (ie. a list of what and how I wanted a site to be tested). Pylot sets up tests cases with simple XML files. In it’s simplest form, a test case would look like this:

<testcases>
  <case>
    <url>http://www.foo.com/bar</url>
  </case>
</testcases>

To run the test we run the run.py script in the base directory of the Pylot source. Pylot will run a designated amount of clients for a designated amount of time on the URLs listed in the test case XML document and then generate a results directory with a nice HTML file to display the findings.

As great as the data that comes of out Pylot is, it wasn’t good enough to point out to us what exactly what slowing the site down, it would just tell you what pages where slower then others. What we needed was a way to generate MySQL performance data from Pylot and combine the two data collections together to see where the site was slow under n amount of users and what MySQL queries were causing that.

It finally dawned on me to just use the debug feature in CakePHP, which generates a query log  per page load. For Example,

Since Pylot downloads the page render to a log file all I needed to do was write a script to parse the log files right after the testing finished and log all the query times. I decided to write my script in PHP as it would allow me to easily build a web interface for future tests by co-workers. With some string manipulation we can parse out the time per query which allows us to find the fastest and slowest query per page load as well as the overall query time per page load. This information coupled with the fact that Pylot is gathering these tests results based of a defined user base over a set period of time means we can see if certain queries perform differently when experiencing a higher load.

Simple web interface for testing. Image shows a test running 100 agents concurrently over a 1 minute test.

Pylot Web Frontend Results. Displays the slowest and fastest results of the test. Log files are broken down into each agents tests.

Final MySQL query results showing total queries & query time on the server.

Our initial find was with regard to the DESCRIBE queries that were being run on page loads. For some reason our pages were spending more then half their query time on these DESCRIBE queries. After some research on the topic we found that we weren’t alone being a little confused about these queries. Many people simply said that turning the debug off was stopping the DESCRIBE queries but we seemed to prove otherwise with the use of MySQL slow query logging.

We found that the only way to actually get rid of the DESCRIBE queries was to have a cache setting.  Therefore the DESCRIBE queries are dependant on the cache setting. If the cache is disabled, we will get DESCRIBE queries which allow the CakePHP framework to understand the database layout. If cache is turned on, the DESCRIBE queries will fire once and cache the result, meaning the subsequent users will not trigger them.

NOTE: Global cache setting in app/config/core.php (Configure::write(‘Cache.disable’, true);)

The more I use this system the more I seem to like it. We now have free reign to test our applications in our office with as many concurrent users as our servers can handle. We have found some interesting issues so far – relating from MySQL configuration to networking configuration to  fan speed and temperature control.

It goes to show that production level testing in a development environment can really pay off.