Flash trace app for Mac OS X

Download FlashTraceThe other day my FlashTracer (Firefox add-on) and my FBTracer (FireBug extension for Firefox) stopped working (again!). I’m so tired of these flash tracing tools doing this to me all the time and as an addition I’ve wanted a stand-alone tool for my flash trace for a while, so I can have the Flash trace and Safari windows visible at the same time, without the need for Firefox (or a massive debugging tool – I just want a simple trace output). That’s why this time I wrapped up a small Mac OS app that simply opens Terminal and shows the user the Flash trace output in a Terminal window.

This is no magical app, it still demands that the user has the DEBUG version of Flash player installed and that your flash trace text file is in this directory:
~/Library/Preferences/Macromedia/Flash Player/Logs/flashlog.txt
(the ~ meaning your home directory in unix talk)

The app is downloadable below and is free for you to use. Note that I release the app with a GPL license and your are welcome to use, distribute and change it. You can open the app using the AppleScript Editor. I would love to hear if you make any useful additions to it but cannot provide any support, sorry.

Enjoy!

Download FlashTrace.app here

Great video tutorials for the amateur photographer

If you’re interested in photography you should take a look at these video tutorials from pro photo life. They give great tips on everything from color management to lighting to simply great ways of think when setting up the scene, and explained in an easy-to-understand way. He also avoids urging the viewer to buy over-expensive gear, but often rather explains how to accomplish great results with affordable equipment.

phpThumb and imagerotate()

One of the PHP libraries I use the most is phpThumb, because of its ease to use and portability. Simply putting the folder in the web root is usually sufficient to get started. One thing has annoyed me for a while though, and it is that I couldn’t get the rotating commands to work.

After some research I discovered that the imagerotate() function in GD library (a library that handles many of the graphics processing in phpThumb) is only available in the bundled version of GD library (that is: the version that sometimes comes bundled with PHP). That is not the case for me and I have my own server with lots of sites on, and didn’t feel like recompiling PHP just to get the imagerotate function to work.

So, in this new light, I looked for a function replacement using ImageMagick instead (a much better image processing library, but rarely installed by default) and found this one somewhere. Simply put it at the bottom of your phpthumb.functions.php file and *poof* rotating images in phpThumb will start working.

if ( !function_exists( 'imagerotate' ) ) {
    function imagerotate( $source_image, $angle, $bgd_color=null ) {
        $angle = 360-$angle; // GD rotates CCW, imagick rotates CW
        $temp_src = '/tmp/temp_src.png';
        $temp_dst = '/tmp/temp_dst.png';
        if (!imagepng($source_image,$temp_src)){
            return false;
        }
        $imagick = new Imagick();
        $imagick->readImage($temp_src);
        $imagick->rotateImage(new ImagickPixel(), $angle);
        $imagick->writeImage($temp_dst);
        //trigger_error( 'imagerotate(): could not write to ' . $file1 . ', original image returned', E_USER_WARNING );
        $result = imagecreatefrompng($temp_dst);
        unlink($temp_dst);
        unlink($temp_src);
        return $result;
    }
}

Maintaining state on Tree Component while updating remote data

I suppose I’m not the only one who’s had problems with maintaining the state of a flex tree component upon updating the data. Recently I encountered the problem again and decided to crack this nut once and for all. As it turned out it was a lot easier than I had anticipated.

The Scenario
In this particular case I had a tree component displaying a hierarchical view of the pages of a web site. Upon making some certain changes, like dragging and dropping pages to reorder them I felt the need to change the order server-side and reload the data, rather than changing the order inside the dataProvider. I just like it that way better.

The Problem
So before I reloaded the data I saved the tree’s open items in a variable called openTreeItems and when I received the new data I tried to reset it by using tree.openItems = openTreeItems.
Nothing happened.

The Research
So I started doing some research and quickly discovered that to make this work the component uses the uid property and on updating the data for the dataProvider Flex reassigns new uid’s to the items in the collection. So, in short, Flex doesn’t recognize the items as the same items after the reload, because of the new uid values.

I encountered this article in the Flex 3 Help pages and started experimenting with creating custom classes that implemented the IUID interface and soon discovered that this was way to complicated for the (actually) quite simple problem I had. The pages in my database had unique ID’s! Why the h*ll couldn’t I use these values as the uid values instead of the built-in values?

The Solution
I suddenly had an idea: what if I simply add the uid property to my data serverside by using the id value I already had? This could be done in many ways but I chose to alter my SQL query like so:
“SELECT pages.id, pages.id uid, … FROM pages…”
. This way the value would be passed on into Flex the same way as all the other values.

And, voilà, it worked!
After this tiny alteration of my SQL query Flex recognized my items as the ones saved in the openTreeItems variable and when using tree.invalidateList() before the update and tree.validateNow() after the update there isn’t even a flicker upon updating the data. Sweetness!

Hope this helps anyone that has had the same problem.

Firebug equivalent for Internet Explorer

I guess I’m not the only one who’s been searching for an IE equivalent of Firebug. Being a Mac developer using Visual Studio simply to be able to debug my web sites in IE has never really been an option and the Internet Explorer Developer Toolbar is too simple for my needs. I want to be able to debug JavaScript, not just CSS and HTML DOM. Long have I pulled my hair trying to find out why the h*ll something is working fine in Firefox/Safari but not in IE.

The other day I came across the DebugBar by the French Toulouse-based company Core Services. It’s excellent! Well, not as simple, clean and accurate as Firebug, but still way ahead of all the other debug solutions I have found for Internet Explorer. And it also has some good features that Firebug is missing.

Vive la France!

Google Analytics and Flex using ExternalInterface

A big issue for people creating flash sites is getting the site to work well with Google Analytics. “The page doesn’t refresh. How can I track the clicks?”

Well, it is actually very easy. If you look at the trace script Google Analytics gives you to add to your HTML code you can find a call to a method that actually records the event. This method is simple to call using JavaScript.

I have solved it like this in my latest Flex App (which is a public site). NOTE: This is for the new trace code version.

1. Paste the Google Analytics trace code as usual just before the </BODY> tag.
Check your Google Analytics account for the correct code.

2. See to it that your embedded flash works with ExternalInterface.
This can be a bit tricky, but in my experience the things that do the trick are to change allowScriptAccess to always and inside the Flex App call a custom JavaScript function on creationComplete like so: ExternalInterface.call(‘initFlash’). In my html this initFlash function creates a variable reference to the embedded flash. This sort of “creates the connection” between them. I’m not sure why this is so, but for me it works, so I’m happy with that. If there is a need I would be glad to create a more thorough tutorial on the use of ExternalInterface. Just let me know.

3. Create a custom JavaScript that passes the URL you want to register to the Google Analytics script.
This is not necessary, but I have found it easier to work with, as you don’t need to edit you call from inside of Flex if something changes in the Google code or such.

function trackURL(url)
{
    pageTracker._trackPageview(url);
}

4. Call your custom javascript from within Flex.
I created a static class for this. (I love static classes). I named it Analytics.as and placed it in the root source folder in the Flex App. It looks like this. All it does really is call the JavaScript using ExternalInterface, but putting it within a static class lets you call it from anywhere in your application without having to pass on references to this or that object or function.

package
{
   public class Analytics
   {
      import flash.external.ExternalInterface;

      public static function track(url:String) : void
      {
         ExternalInterface.call("trackURL", url);
      }
   }
}

And anywhere in your app write:

Analytics.track('/path_to_tha_page_you_want_to_track/');

(NOTE: You have to start your path with a slash).

There you go. It now should track the URL:s you want and give you nice statistics.

MySQL Sample Data Creator

A year or two back I was in a real need of a lot of sample data for testing a web tool I was working on, so I wrapped up a small tool to generate sample data by defining a few parameters and choosing how many rows to add, using Flex 2 (or perhaps 1.5, don’t remember). Well today the need arose again, so I went through my old backup files and found it again. I thought I’d put it up on the web so as maybe someone else could be helped by it. I know it’s not perfect and only spent a few hours creating it, but if you have any suggestions on how to improve it please write a comment and let me know what you think. I would be glad to update it and eventually make it a really useful tool.

Go to the MySQL Sample Data Creator 1.0