FiftyOneReasons

Interactive Media Development + Exploration

SmartFoxServer Android Samples Delivered


Wayne Helman on September 1, 2011
No Comments

gotoAndPlay(), the developers behind the wildly popular SmartFoxServer multi-user server have released the Android Sample Source Code we here at A51 developed for them.

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.

HTML5 Video


rchohan on August 30, 2011
No Comments

How easy is it to place HTML5 video on web browsers and mobile devices?

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.

Official SmartFoxServer 2X Tutorials Released


Wayne Helman on March 3, 2011
No Comments

The first three five episodes of the Official SmartFoxServer 2X Tutorials have been released by gotoAndPlay() on their SmartFoxServer YouTube channel. I had a lot of fun creating them for the gotoAndPlay() guys and am working on a few more advanced tutorials to add to the series.

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.

Styling TextFieldType.INPUT with a CSS Stylesheet


Wayne Helman on October 23, 2010
2 Comments

One thing that has always bothered me about Flash technologies is the relative lack of support for text layout and HTML. I’ve always thought that if Adobe had paid more attention to laying out text, Flash could have become the de-facto method of content delivery online. Instead, we have to jump through a number of hoops to properly present formated text the way standard HTML does. HTML combined with CSS is a flexible and compact method for a number of reasons and AS3 only supports a limited number of those features. One gapping hole in my opinion is that by default, the TextField class when set to TextFieldType.INPUT can only be styled with TextFormat. All other text can be controlled via CSS and the exception of an INPUT field is simply frustrating. continued…

Flash Based Google Maps Application Delivered for PA Tourism


Wayne Helman on June 9, 2010
No Comments

Roadtrip-a-Matic

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.

Quick Tip: Ever Thought About Using @Font-face for Icons?


Wayne Helman on April 24, 2010
No Comments

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 @font-face bug and fix


Wayne Helman on February 17, 2010
4 Comments

This week we stumbled upon a rather odd bug in IE7 (surprise, surprise) when embedding a EOT font file using the @font-face construct. To save on bandwidth, we often edit out sets of characters from a font that we know will not be used on a site. In this particular instance, we were using this font for headers that were all composed in title case, but displayed in uppercase using the text-transform property. Logically, we saved all our font files with only the uppercase characters-we simply don’t use the lowercase. The site rendered perfectly in every browser (including IE6 and IE8) that supported the @font-face construct with the notable exception of IE7. continued…

Site Launch: Neilson® Dairy Oh!®


Wayne Helman on November 30, 2009
No Comments

Neilson® Dairy Oh®!

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!

A51 & ActionScript 3 Development Task Contest #1


Phil Chertok on November 16, 2009
No Comments

On Friday I participated in the first ActionScript 3 Development Task Contest, which challenged users to divide the stage into a grid and to find all the neighbors of a given display object on that grid.   The key was that the winner should implement their method in the quickest/most efficient way possible. Results would be measured using Grant Skinner’s fantastic Performance Testing Harness. continued…

Stress Testing CakePHP with Pylot


Matt Fisher on November 5, 2009
2 Comments

CakePHP/Pylot

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. continued…