Tumble Bee - my first iPhone app!

'Tumble Bee' has been on the iTunes store for a few weeks now, but I'm am only just now getting round to posting about it here.

Not that I'm advertising or anything (although I suppose a few sales wouldn't hurt), but I have to admit that it's quite addictive. My top score is 263 jumps. If anyone gets higher, please let me know.

But even more importantly, there is nothing better to a programmer than feedback. Please please please feel free to let me know what you think of the game and how it can be improved. I'm all ears towards unbiased, useful comments.

Please visit the TumbleBee iTunes page to check out more about the app as well as the few screen shots that I've put up.

Download Tumble Bee

Fix for jQuery Ajax and json_encode problem

I came across something that really interested and surprised me today. There I was coding happily for one of my latest projects in which I needed to return values from a .php file via Ajax / $.get using jQuery. The aim was to build an array of filtered results from the SQL database and then pass them on to jQuery which would update the HTML on the page and display the results in real time.

I used json_encode( array ) on the PHP side and jQuery.parseJSON(data) on the jQuery side to get the array into something usable for jQuery. The problem was that the array that was jSON encoded was, as I mentioned, filtered on the PHP side. Below is the sort of thing I was doing.

$checkAgainst=array("1","2","3","4","5");
$whatsMissing = array("1","3","4","5");
$finalArray=array_diff($checkAgainst,$whatsMissing);	
echo json_encode($finalArray);

Here's what's happening. I've set up an array $checkAgainst which contains values that I want to check to see if they exist in another array I've set up called $whatsMissing. In this simple example, you can probably see that the number that is missing is '2'. So when we run the array_diff() and save the results to $finalArray we should be left with the value '2'. The last thing to do is output this array as jSon using json_encode(). Done! Great ...or so I thought.

The code below is jQuery code and is similar to what I used to parse the json encoded data.

$.get('getJson.php',
   function(data){
      var obj = jQuery.parseJSON(data);	
      alert(obj)
   }
);

This bit of code simply makes contact with the PHP file containing the PHP code above and the returned data is then parsed using jQuery.parseJSON(); and the resulting data is saved to a variable called 'obj'. Simple, right? Wrong! The only thing that was returned seemed to be an empty array. Of course it isn't empty. We know it's not. So what went wrong?

Well, if we tried to return any old array from the PHP code, it would work fine. I noticed the problem was that the jSON returned was a mess. The nodes were out of order and sometimes missing. The culprit, you guess it, array_diff()!

Solving the problem is really easy. I added sort($finalArray); to the PHP file before outputting the data which sorted the data correctly and jQuery was successfully able to parse it properly. What an nuisance!

Firebug-like Capabilities in Safari Browser

For a while now I have been using Firefox because.. well it's simply brilliant. However I always have found that it sometimes moves like a dog and there are just times when I can't afford to wait around. In some cases, switching over to Safari is faster but it doesn't have Firebug features... or at least so I thought.

On Mac OSX just run the following in Terminal (/Applications/Utilities/Terminal.app ),

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

and restart Safari. On restart, go to any web page and right click to show a pop up menu. Selecting 'Inspect Element' will pull up something that looks very similar to Firebug.

I haven't really played around with it all that much yet but I assume that it doesn't have features such as those found in Flashbug and PHPbug, but I normally use other solutions to those anyway as I have found better results elsewhere. But for your general HTML and CSS, it looks like a good alternative.

No such file or directory - /tmp/mysql.sock

I've been playing around with a little Ruby on Rails recently and while trying to connect to my MAMP development databases, I came across the following error when using rake db:migrate.

No such file or directory - /tmp/mysql.sock

I have to admit that this baffled me for a while, but after reading around on the net, it suddenly hit me. 'I'd been having one of my stupid moments', I thought as I added the following line to my database.yml file

socket: /Applications/MAMP/tmp/mysql/mysql.sock

I'd been looking for a file in a place where one had no right to be. Why on earth would there be a mysql.sock when there was no sql database? All my development database reside inside MAMP, so it makes sense then that that is where I would find my mysql.sock file.

I realize that this isn't really a big problem for most, but I thought that this could be a potential blind spot for other PHP developers new to Rails and thought I'd best help out.

Smoothing Loaded Images in AS3

Today, there I was, sitting at my desk working hard on a project involving loading images into a ActionScript constructed gallery. I needed the images in the gallery to animate and scale, as one would expect to be able to do with rich internet content.

Herein the problem lies, because the images looked very pixelated when they did anything other than just remain still.

Now, this isn't a big problem if you know how to go about it the right way, but I would imagine that there are tons of people out there who need to do the same kind of thing in their galleries, and probably 9 times out of ten are frustrated by the quality of the images output in the flash player. After all, rich internet applications should display rich image content. Then it hit me! Why not write a little about it here and spread the message that, although the flash player can sometimes be a CPU hog, it is something special, even when dealing when dealing with images.

As you will have probably seen by now, in the top left of this post there is a .swf file playing a scaling image, which reads "I love AS3" (and I admit proudly that I do). At the bottom of the swf there is a button, which when pressed will add/remove bitmap smoothing to the image loaded. Smoothing in ActionScript 3 is surprisingly simple and can be done by setting the smoothing property of any Bitmap instance to true. Take a look at the example below.

var ldr:Loader = new Loader();
addChild(ldr);
ldr.scaleX = ldr.scaleY = 5;
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
ldr.load(new URLRequest("myImage.jpg"));

function imageLoaded(event:Event):void{
   var contentToSmooth:Bitmap = event.target.content;
   // contentToSmooth.smoothing = true;
}

If we were to compile this code as it, assuming we've entered the correct URL to the image, we should see our image scaled by 5x and looking quite pixelated depending on how high the quality is of the image used. Now all we have to do to see the effects of smoothing is uncomment line 9 by removing the // from the beginning and recompile. This time you should notice a much less pixelated image displayed, even at 5x the size.

If you're interested in the example at the top left of this post, you can download the source code below.

Sequal Pro - Impressive!

I've been working a lot in PHP lately and almost always to connect to a mySQL database. I'm used to working in Terminal and the command line to create, read, update and delete (CRUD) my web pages and for people just starting out with mySQL, there is of course the more user-friendly phpMyAdmin. However, I've been mooching around the net and stumbled upon something I now don't know why I hadn't searched for before - Sequal Pro.

So what does it do?

Sequal Pro is a database management software and it's quite quite slick, let me tell you. There is virtually no wait time for pages of information to reload/refresh, as opposed to using phpMyAdmin, and it's more visually convenient than using the command line as it has a really easy to use GUI which allows you to view databases, tables and their contents with a few clicks of the mouse. The best of it all is that it's free. You can check it out here on the Sequal Pro web site.

I am so impressed with this little gem that I wanted to post a recommendation here to urge everyone who uses mySQL to at least try it out.

Loading Fonts at Runtime with latest Flex 4 SDK

I wrote a post a while back about loading fonts at runtime. Nothing there has really changed, but I did want to clarify one thing on here. I just discovered that when embedding fonts with the lastest Flex 4 SDK, I got an error with the following

[Embed(systemFont='OCR A Std', 
fontName="OCR",
mimeType="application/x-font", 
unicodeRange="U+0041-U+005A")]

The error read:
Error: exception during transcoding: Cannot embed local font 'nameOfFont' as CFF. The CSS @font-face 'local()' syntax is not supported. Please specify a path directly to a font file using the 'url()' syntax. For [Embed] syntax the 'systemFont' attribute is not supported. Please specify a path directly to a font file using the 'source' attribute.

I found that adding the following solved this problem.

[Embed(systemFont='OCR A Std', 
fontName="OCR", 
embedAsCFF='false',
mimeType="application/x-font", 
unicodeRange="U+0041-U+005A")]

" No transcoder registered for mimetype 'text/fxg' " Error

Well, this has really bugged me for a while now... I've been using an older version of the Flex 4 SDK until recently and have never had this problem. When I downloaded the latest nightly, I was struck with the fear that I would never again be freely able to use FXG the way I had previous. I just couldn't understand why the Flex 4 SDK wouldn't be able to transcode Adobe's shiny new toy - FXG. It just didn't make sense. I actually wrote another rather popular post about how to embed FXG in ActionScript which showed the following method of using FXG.

[Embed(source='Flower.fxg')]
private var Flower:Class;		
private var flower:Sprite = new Flower();

But why wouldn't something that worked before, work now? For a moment, I thought it was a way to make you buy software that supported this feature, but that didn't make sense either, since the SDK is free as well as having an open source version.

Then it hit me. I'd remembered watching a video that someone from Adobe (at least he said he was) had posted online. The video showed something along the following lines

import Flower;
var flower:Flower = new Flower()
addChild(flower);

I could never get this to work in the older versions of the Flex 4 SDK but that's right folks! What was pretty simple before has become even simpler! Now just treat the FXG graphic as you would any other class and the magic is retained. In the word of David Bowie, "Wham bam thank you mam!"

Trace Statements with the FLEX SDK

This is a topic I have long since intended to write about, but never got round to it. Well, anyway... trace statements in flex/flash are something that I would imagine we all use all the time, mostly for debugging purposes. There is a great little extension for the Firefox plugin FireBug called FlashBug, which allows trace statement output directly from within the browser. It is also possible to view this output via Terminal on OSX/Linux and command prompt on Windows. However, there are a few things that need to be set up.

First create a file call "mm.cfg" and place it in the following location:

On OSX: /Library/Application Support/Macromedia/mm.cfg

On Win: C:\Documents and Settings\username\mm.cfg

On Linux: home/username/mm.cfg

Next open the mm.cfg file and type the following inside.

ErrorReportingEnable=1

TraceOutputFileEnable=1

It may be obvious, but ErrorReportingEnable controls the ability to view error output and TraceOutputFileEnable controls the ability to view trace output. Setting each of these values to 1 turns these properties on. If, for example, you didn't want to view error output, simply turn the 1 to a 0, or delete the line ErrorReportingEnable.

Anyway, moving on. Create an ActionScript file that uses trace statements. I've pasted an example below for convenience. For test purposes, just save it as Main.as.

package{	
   import flash.display.*;
	
   public class Main extends MovieClip{

      public function Main(){
         trace("Trace output is working");
      }
   }
}

Next we need to compile it. If you aren't sure how to do this, you can take a look at my other post: Compile AS files with Flex SDK, which gives a more detailed "how to", or simply use Terminal/Command Prompt to open up fsch found inside the bin folder of the flex sdk (which you should already have), and type the following, obviously swapping in the location and file names where necessary.

mxmlc -o=output_location/your_filename.swf -file-specs=your_file_location/Main.as

This should compile the Main.as file and you should be left with a .swf file saved at the location you entered. Before you open this file, you will need to install the flash debug player from the Adobe website. You will find it under Debugger Versions. Once you have that installed run the swf file. A file called flashlog.txt containing any errors and/or trace output will be created in the following location:

On OSX: /Users/username/Library/Preferences/Macromedia/Flash Player/Logs/flashlog.txt

On Win: C:\Documents and Settings\username\Application Data\Macromedia\Flash Player\Logs\flashlog.txt

On Linux: home/username/Macromedia/Flash_Player/Logs/flashlog.txt

To view this information in real time simply use FlashBug with Firefox or type the follow into Terminal

tail -f /Users/{username}/Library/Preferences/Macromedia/"Flash Player"/Logs/flashlog.txt

For added convenience to anyone using TextMate, go to Bundles > Bundles Editor > Show Bundle Editor and click on the little plus sign on the bottom left hand side of the bundle editor window. Choose New Command and name it whatever you want. I named it Tail Output. Make sure Save:Nothing, Input:None and Output:None are selected. Next enter the following content into the Command(s) window changing {username} to the name of your home folder on OSX (This is just a little bash program I wrote to tell Terminal to tail the FlashLog.txt file).

Note* tail -f and /User/{usersname}... should be on the same line.

#!/bin/bash
 
aplscr="tell application \"System Events\" to set terminalRunning to (exists process \"Terminal\")

tell application \"Terminal\" to activate
tell application \"Terminal\" to do script \"tail -f 
/Users/{username}/Library/Preferences/Macromedia/'Flash Player'/Logs/flashlog.txt\" 
 in front window"

osascript -e "$aplscr" &>/dev/null &

Next set Activation: Key Equivalent, and enter whatever shortcut you want to activate the command in Terminal. I chose ⌘T (T for tail). For the Scope Selector, enter source.actionscript.3.

After all that's done, it's probably best to quit and restart TextMate. Now all you have to do to start viewing the errors and trace out is press your Key Trigger in TextMate while editing an ActionScript file and Terminal should start up and read out all the trace statements.

And that's it! By this point, if you've done it right, you should be getting readout on Errors and Trace statements and all should be well.

Removing Duplicates from Arrays in AS3

Of late, I haven't been posting much on here because I am a little bogged down with work right now. I'm working on a few projects at the same time which is really taking up all of my time. One such project, however, gave me an interesting problem whereby I needed to remove duplicates from an array that was being looped, and on each loop items in the array were removed from the flash display list. Thus, if the same item was found again in the array during another loop and didn't exist anymore in the display list, it caused an error. Here's how I got around it.

package{	
   import flash.display.*;
	
   public class Main extends MovieClip{

   public function Main(){
      var array:Array = ["1973", "1963", "1999", "1879", "1879", "1963", "1999", "1973"];
      trace(array); //traces the original array	in which each item occurs twice;
		
      var newArray:Array = removeDuplicates(array);
      trace(newArray);//traces 1973,1963,1999,1879
   }
		
   private function removeDuplicates(array:Array):Array{
      for (var i:uint = array.length; i > 0; i--){
         if (array.indexOf(array[i-1]) != i-1){
            array.splice(i-1,1);
         }
      }
			
      return array;
      }
   }
}

Pretty simple really. All that's happening is that we loop backwards through the array we pass into the removeDuplicates function. While we move backwards through the array, we use indexOf to find the chronological value at i, and thus if any values found at the end of the array match elsewhere in the array but the indexes don't, the one at the end of the array gets pulled or "spliced" from the array. If you think about it, it makes sense.

I'm pretty sure someone will find a need for this. Hope it helps.