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.

The area will be undergoing some heavy construction and right now all the shops are closed and boarded up. The new window graphics really help to get rid of the eyesore of broken glass and plywood.

While I was shooting these pictures there were a lot of people walking buy checking out the pictures and trying to fugure out where all these new shops will go.

My favorite shot is the old Taco Bell where we used to get delicious Chaluppas.

Great job to the designer Davina and Bill our officer of collaboration!

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.

APR 14, 2010 2:47 PM
As the retail real estate industry moves into the era of smart phones and tablet PCs, some traditional ways of doing business seem awfully outdated. For example, many leasing professionals still lug heavy folders with property information and marketing materials to meetings with prospective tenants. In addition to being a pain to deal with, these paper documents cost a fortune to produce, even though they have to be tossed whenever a property’s tenant roster or site plan changes.

More here: http://bit.ly/dj4bBs

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“.

We walked the show and stopped at every exhibit, meeting with marketing and leasing folks and incredibly not a single company other than our client, DLC Management Corp, were using database driven, digital property presentations…..in 2009?…all using paper? They all have websites with property listings and leasing interfaces but when it comes to making “deals” as it’s known in this business, they print out “flyers”, cute. Then throw 75% of them away after the shows. Don’t even get me started on the green thing.

Think about this, arguably the most critical industry responsible for our economic recovery is doing business at the speed of trees growing. One would think a faster pace might be in order when racing against extinction.

Check it out on Discovery’s web site:

http://tlc.discovery.com/tv/cake-boss/games/delivery-dash.html