At the same time, it needed to look good on the iPad. This of course, brought up a completely different discussion since the existing site looked and functioned quite nicely using the iPad safari browser. The only downside, from the clients perspective (and potential users), it didn’t give the feeling of an Ipad app, which in itself, gives the website a substantial amount of value (real or illusional). So the solution; allow the user to easily switch between the mobile and full version of the site. I foresee this becoming a standard practice. ESPN.com does an excellent job of executing this with a nice splash screen prompting the user to choose either mobile or standard.

Anyway, back to making it feel like a mobile app/experience without creating a drastically different version of the site. Yall ready know what it is, Jquery Mobile. Jquery, surely becoming one of those buzz words which can be thrown around vicariously with absolutely no knowledge of what-the-heck it is. It’s cool. I get it. I appreciate the effort. Jquery mobile, however, is a slightly different can of worms.

I’ll let http://jquerymobile.com/ explain it best:

“A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.”

I gotta say, the setup was a breeze. The only modifications we made to the html were adding a few html 5 attributes such as:

‘data-role=”page” data-role=”listview” data-theme=”c”

Jquery Mobile takes care of the rest.

The majority of the work lies in rethinking the way your users will interact with the site now that it’s displayed with ¼ of the screen real estate. In addition, users interacting with your site on a mobile browser are more likely to be looking for a very specific snippet of information and they will want to find it fast. In other words, you need to remove all the fluff. Once you get the whole ux dilemma resolved, your 90% of the way there.

Of course, it’s always good to specify your own mobile css overrides for certain scenarios. One good example is; the CMS required the contact information be editable in one large CK editor rich text block. The contact information was formatted in tables (oh no). For the mobile devices these tables where too wide to fit the smaller screen size effectively without zooming. So, throw in a lil:

table.contact td {display: block !important;}

BAM! We are good.

There is one caveat. Jquery mobile, it’s in alpha release (ughh). A little bit of risk, very little, but based of our testing with multiple mobile platforms, there have been no glaring issues. So Jquery Mobile, I’m an official fan.

Everyone has their own little tweaks to their function. Isn’t there a built in function to do something so trivial ?

Yes, it’s the NumberFormatter class, Why does nobody talk about how to use the NumberFormatter class that has been around since Flash 9/CS3 Era ?

I’m not sure, but if you don’t want to roll your own here is some example code to get you started.

Adobe’s website gives you instructions on how to use it in a more flex style manner, if you want a pure as3 example.

// Import the class

import mx.formatters.NumberFormatter;

function somefunction(value:Number):void

{

  // Initialize the NumberFormatter Object

  var fmt:NumberFormatter = new NumberFormatter();

  var formattedString:String;

  // Set some of the options available

  fmt.precision = 2;
  fmt.useThousandsSeparator = true;

  // Format our value and return a formatted string

  formattedString = fmt.format(value);

  // Do something with our newly formatted string

  someobject.sometextfield.text = formattedString;

}

Works like a champ.

Here at no.inc we try to keep things fresh, support new technologies and devices. So recently we have a client who wants some videos on their site, and we decide to make it work with both PC’s and mobile devices (and specifically the iPhone and iPad).

The Approach

Well, since flash 9.0.115 flash supports h.264 video encoding, the iPhone and iPad support html5 and the <video> tag, and also support h.264 encoding. So the idea is to encode the videos in h.264, detect some mobile devices (iPad, iPhone) and serve up the same file in 2 different ‘players’. Now I know what you’re saying, most modern browsers also support html5 and the <video> tag, so we could just deliver it like that. Well … IE9 isn’t out yet, and IE8 and below don’t support it, besides, I’m not quite sure html5 and video have become a standard and gotten all the kinks out, so we’re sticking with flash for the PC.

First Round Success

This round was easy, basically encode our videos to h264, write a flash video player in as3, have it take the video file as a flashvar argument and serve it up, swfObject to embed it.

<?php
 /* if $iphone is false, insert the swfObject code that will replace the div with our flash player */
 if(!$iphone):
 ?>
<script type="text/javascript">
 var flashvars =
 {
  auto: 0,
  preview: "/images/<?=$brand?>/vid-pre-<?=$vidId?>.jpg",
  skindir: "swfs%2f",
  video: "<?=("/videos/$brand/$vidId.mp4")?>",
  width: "640",
  height: "360",
  type: "mp4"
 };

 var params =
 {
  menu: "false",
  wmode: "transparent"
 };

 var attributes =
 {
  id: "aVid",
  name: "aVid"
 };

 swfobject.embedSWF("/swfs/player.swf", "player", "502", (282 + 40), "9.0.115", "/swfs/expressInstall.swf", flashvars, params, attributes);
 </script>
<?php
 endif;
 ?>

Now we just need to detect a mobile device, and serve up different content pointing to the same video:

<?php
/* this goes in the header */
$agent = $_SERVER['HTTP_USER_AGENT'];
$iphone =
 ( (strpos($agent, 'iPhone') != false) ||
 (strpos($agent, 'iPad') != false) ||
 ((strpos($agent, 'AppleWebKit') != false) && (strpos($agent, 'Mobile') != false)) ||
 ((strpos($agent, 'AppleWebKit') != false) && (strpos($agent, 'webOS') != false)) ||
 (isset($_GET['iphone']))
 ) ? 1:0;
?>

<?php
 if($iphone):
 ?>
 <video id="aVid" width="502" height="282" controls="controls" poster="images/<?php echo"$brand"; ?>/vid-pre-<?=$vidId?>.jpg">
 <source src="videos/<?=$brand?>/<?=$vidId?>.mp4" type="video/mp4"></source>
 </video>
 <?php
 else:
 ?>
 <div id="player">
 <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
 </div>
 <?php
 endif;
 ?>

So what we’re looking at above is, we added the code to give us a true or false statement in the variable $iphone if we detect a mobile browser that can do html5 and the video tag.  If $iphone is true, we output the video tag code pointing to our ${vidId}.mp4, otherwise we output the div that swfobject will replace (and inside the div is the info to get your flash player if you don’t have it).

and we’ll change the doctype too if we’re serving up html5:

<?php
if ($iphone):
?>
<!DOCTYPE html>
<?php
else:
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?php
endif;
?>

So this works, like a champ… for the most part.

* First of all, the iPhone doesn’t appear to even fetch the file if  file extension is not .mp4.  Flash wants to make its h264 file extension as .f4v, but its ok with them named .flv, or .mov, or probably anything!

* Second, encoding a video using adobe’s h264 encoder doesn’t mean it works with the iPhone, however, encoding a video for the iPhone works with flash.  I recommend using handbrake with the iPhone setting and ‘Web Optimized’ checked.

This setup works and we’re happy with it.  But here’s where the headache comes in.

The headache

First let me explain the problem:  While testing the iPhone, and the PC everything seemed fine.  Then while thinking we are done, we notice the iPad is behaving irregular.  Basically with this setup the iPad has some odd race condition or something, the <video> tag loads in the video, and the poster comes in and shows a preview of the movie, but the play button is gone.  It’s not related to the controls argument on the video tag, its not the actual poster, something was just messed up.

Upon diagnosis of adding/removing/changing things around we found that removing the included external javascript files caused it to work properly.  Well that doesn’t make sense really, so we changed the js files, changed the contents of the js, replaced the js with empty files… basically if the js files were included (and external js), it would hide the play button.  It doesn’t matter WHAT the js is, if its garbage, jQuery, an alert… if you include external js, you lose play.

We found that moving the <javascript> tags to the bottom of the file (we were thinking race condition, or socket limitation or something), this fixed it… the js was there, the js worked, the play button was there, the video plays! YAY! ….

That is until we went back to the iPhone.  Now this is where things got really weird.  The newly discovered iPhone bug was some how related to the change of the iPad code, but it made less sense than the iPad bug.  Now the iPad’s bug was it would hide the play button.  The iPhone bug would give the ‘invalid video codec’ symbol.  What ?  Invalid codec ?  You just played this file earlier…  While checking the webserver logs, the iPhone doesn’t even attempt to fetch the .mp4 file and check its codec, it just says invalid codec, and you get none.

Trying to figure out the culprit of this one took about 2 days of headaches.  We stripped the html down and found it’s somehow related to the stylesheet…. not the contents of the stylesheet, the inclusion of an external stylesheet.

Let me give you an example.

<link rel="stylesheet" href="css/all.css" type="text/css" media="all" />

You can remove type and media arguments without any difference.  If you change the rel or remove it, it suddenly works again!, if you remove the href, it suddenly works again!, if you point the href to a empty file, or just put in ‘fisdanfois’ gibberish, it doesn’t work… the file doesn’t have to be valid it can be a 404, it just simply won’t work if you have that link tag.  We ended up with a small test file… that consisted of nothing really, as plain as below:

<!DOCTYPE HTML>
<html>
<head>
 <link rel='stylesheet' href='css/all.css'/>
</head>
<body>
 <video controls>
 <source src='vidoes/video.mp4'></source>
 </video>
</body>
</html>

That html above, does not work.  If you remove the <link> tag, it works, if you change rel= to something it works…

So after these 2 long days of debugging, we didn’t put 2 and 2 together until we backtracked far enough to undo the iPad fix.  Undoing the iPad fix made it work again, but we were puzzled because the <link> tag was there, and it worked! … so it must have been directly related to the <javascript> tag movement.  Now it’s not that the iPhone doesn’t like <javascript> placed somewhere, it simply doesn’t want to have a <link> tag in the header, without a <javascript> tag pointing to an external file….

I can’t explain it, all I know is what I seen.  Sure, it makes no sense, it has to be some bug with the iPhone, and iPad for that matter, different bugs, both related to something in the <head>.  We already spent too much time on this fiasco, so the only solution was to specifically look for the iPad’s agent string, and move the js if its an iPad.  I know, it’s lame but I have to move on.

// in the top of the php file, after the $iphone detect
$ipad = strpos($agent, 'iPad') != false;

// in the head
<?php if(!$ipad): ?>
<javascript includes>
<?php endif; ?>

// at the bottom of the file
<?php if($ipad): ?>
<javascript includes>
<?php endif; ?>

Well there you go, I hope apple fixes this bug, but until then feel free to just do what we did, maybe you can save a few hairs from falling out.

Recently we had trouble with a flash piece for a client.  The swf’s we made would not load and just show the loading progress bar.  Upon further investigation it turns out we changed the swf to wmode transparent.  Now I know from past experiences that flash’s internal timing changes with transparent and normally I recommend it be avoided at all costs, but this is a simple piece, just a little image gallery with some tweens, not a game where fps and timing are important.

Being stuck at the preloader lead me to believe something with the preloader is not acting right in wmode transparent.  It turns out the ProgressEvent.PROGRESS event’s are not firing.  Why ?  I can’t say, but I think Adobe needs to look into wmode transparent as this isn’t the only odd thing that happens.

The fix is to simply use an Event.ENTER_FRAME event to check the preload status rather than a ProgressEvent.PROGRESS, since Event.ENTER_FRAME event’s still fire flawlessly.

Normal preloader code:

this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, loading);

var pct:Number = 0;

function loading(event:ProgressEvent):void
{
 pct = event.bytesLoaded / event.bytesTotal;
 loading.loadedBar.scaleX = pct;
 trace(pct);
 if(pct >= 1)
 {
   this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, loading);
   gotoAndPlay(2);
 }
}

wmode = transparent preloader:

this.addEventListener(Event.ENTER_FRAME, loading);

var pct:Number = 0;

function loading(event:Event)
{
 pct = this.loaderInfo.bytesLoaded / this.loaderInfo.bytesTotal
 loading.loadedBar.scaleX = pct;

 trace(pct);

 if(pct >= 1)
 {
  this.removeEventListener(Event.ENTER_FRAME, loading);
  gotoAndPlay(2);
 }
}

**** UPDATE 7/26/2010 By Paul ****

I haven't tested it, but looking through the changelog for 10.1 flash player I noticed:
"[FP-1585] loaderInfo Event.COMPLETE not dispatched if wmode is "transparent" or "opaque". (2345794)"
This may be related to the progress bug as well, makes sense, there's just an event dispatch problem in wmode transparent.

Adobe _MAY_ have fixed this bug.  That doesn't help the stragglers using old flash versions, but its better then nothing.

Its about time some of the bigger names starting phasing out support of IE6. Even Microsoft would much prefer users upgrade to IE7. From a html/css perspective, including support for decade-old IE6 always adds a fair amount of additional debugging time.

My latest trend has been to ‘coax’ users to upgrade. I try to keep all functionally intact but almost purposely cut back on some of the eye candy and additional interactivity. For instance, If I have a nice little png drop shadow or hover effect on a div.. IE6, no drop shadow for you!  Everything works, but.. you want an upgraded experience, upgrade your browser, please.

Read the full story here at BBC NEWS: http://news.bbc.co.uk/2/hi/technology/8488751.stm

At no|inc we love creating online games ( check out Water Street Fighter, Cake Boss)!

Recently we had the opportunity to license a copy of our Accordion Hero game to MVNP, a marketing firm out of Honolulu for their own spin “Ukulele Hero“.

ReferenceError: Error #1065: Variable MyClass is not defined.

It turns out, that because I have no reference to using the class statically, the compiler is optimizing out the ‘MyClass’ class.

Since there appears to be no compiler directive to force a class to include (the import statement doesn’t force it) by using it once.

The easiest thing to do is just create an array of all my dynamic classes, as so:

var forceIncludeClasses:Array = [

MyClass,

MyClass2,

MyClass3

];

Since I’m calling this from an init function, there should only be a microsecond of slowdown during startup and the array’s scope isn’t global so the garbage collector should clean it up.

Here is a more complete snippet of using dynamic classes.

/* import my classes */
import com.noinc.MyClass;
import com.noinc.MyClass2;
import com.noinc.MyClass3;
/* the utility import that allows us to get a class reference to my dynamic classes */
import flash.utils.getDefinitionByName;

/* init function, called at creationComplete */
function init():void
{
   var forceIncludeClasses:Array = [
      MyClass,
      MyClass2,
      MyClass3
   ];

   createInstance("com.noinc.MyClass");
}

/* called to create instances of my classes */
function createInstance(className:String):void
{
   /* className is a string reference to my class, using the full package name, coming from XML in my code */
   /* Even though statically I could just do var x:MyClass = new MyClass(), getDefinitionByName */
   /* Appears to not be happy with just MyClass... */

   /* A handle to the class is returned */
   var tmpClass:Class = getDefinitionByName(className) as Class;

   /* We are using * for our variable type because we don't know ahead of time what class this function will use */
   var tmpOb:* = new tmpClass();
   /* set whatever additional properties you want */
   tmpOb.property = "whatever";
   /* Add the instance to the stage */
   addChild(tmpOb);
}