Abakia Project

For about a week now I’m evaluating Google’s Chrome browser. I’ve to admit that I’m feeling very comfortable with it. But there are still some major flaws with the MacOS version. As first the lack of performance when it comes to display Flash and of course the missing possibility to import or export bookmarks.

I searched Google as well as Twitter and found a lot of hints by Google FAQ, which were useless for my case. Then I found some tips for Windows mentioning the “Bookmarks” file. I discovered, that only the location of the bookmarks file is different. The rest works fine.

Okay, just navigate to /Users/your_user_name/Library/Application\ Support/Google/Chrome/Default/ and copy the Bookmarks file to your desired location. In my case I just got to copy the file to /Users/my_user_name/Library/Application\ Support/Chromium/Default/. The Bookmarks file is a textfile containing a JSON Object. Unlike to the Firefox bookmarks JSON file, the Chrome one is structured and well indented. So it might be a good finger exercise to write an Chrome-JSON to Firefox-HTML converter.

I really hope that the next release finally will include that feature.

I just wanted to share a tasty piece of cake code with you. I’m currently doing some JavaScript research concerning HTML5 canvas. When developing JavaScript using the Firebug extension, there’s the possibility to use window.console.log(string) to output some information. Okay, there’s the alert(string) command, too. But to be serious: it’s totally useless, when it comes to the debugging of some complex loops.

So I spend some minutes to build a Quake style drop down console. It works fine with jQuery 1.3.2. Just add a div Element named with id=”debug” to your HTML code and make use of the attached CSS and JavaScript. Enjoy!

1
2
3
4
5
6
7
8
9
10
11
12
13

#debug {
    position: absolute;
    top: 0px;
    left: 0px;
    width:98%;
    overflow:auto;
    color: #000;
    background:#888;
    outline:1px solid #000;
    font-size:12px;
    padding: 10px;
    height:180px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

    // You probably want to outsource this to "debug.js" or whatever.
    Debug = {};
 
    Debug.log = function (text) {
        var div = $('#debug');
        div.html(div.html() + text + "<br />");
        $('#debug').scrollTop($('#debug')[0].scrollHeight);
    }
 
    Debug.toggle = function () {
        $('#debug').slideToggle('normal', function() {
            Debug.log('toggled console...');
        });
    }
 
    // That's similiar to what's usually "main()"
    $(document).ready(function() {
        $(window).keyup(function(pEvent) {
            switch(pEvent.keyCode) {
                case 32: //spacebar
                    Debug.toggle();
                default:
                    Debug.log('Key #'+ pEvent.keyCode +' was pressed.');
              }
        });
    });

One important advantage of the Flash Technology (besides it’s platform independency) is the ability to embed media resources into your SWF. If you’ve decided to develop your Flash project using third party IDEs like FDT or Flash Develop, there might be some difficulties to embed resources like images, Flash IDE vector graphics or fonts.

In case of images like JPEG or PNG, fortunately there are some very good loading libraries. These loaders allow you to access external resources during runtime. In most cases this is the recommended technique. But sometimes you absolutely have to deliver a SWF with all or some assets embedded.

For image files there is a very easy way to solve the problem. Here is a sample code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

package {
    import flash.display.Sprite;	
 
    public class AssetTest extends Sprite {
        [ Embed(source="embed_this.png") ]
        public static var EmbedThis:Class;
 
        public function AssetTest() {
            var img:Sprite = new Sprite();
            img.addChild(new EmbedThis);
            addChild(img);
        }
    }
}

The magic happens in line 5 and 6. We start by using the Embed metatag to tell the compiler where to pick the image from. In this case we want to embed a file called embed_this.png from the same directory where AssetTest is located at. But caution: If AssetTest is not your main or starter class, you will have to define the path of the source relatively to the main class directory or as absolute path.

This is because the compiler starts with one entry file (the main class) and then climbs up and down the package tree to every class referenced by the imports.

If the main class is located at /Main.as and references to /my_classes/AssetTest.as and you want to load an image from /assets/embed_this.png, the Embed metatag in /my_classes/AssetTest.as has to look like [ Embed(source="../assets/embed_this.png") ]. This ../assets/ means one directory level up and then enter assets.

Line 6 defines a new attribute of type Class. This definition has to be placed right below the Embed metatag. By doing so, the compiler will assign the newly embedded data with the attribute of type Class. So this is why we can create a new instance of EmbedThis at line 10 which results in creating a copy of the embedded image.

The compiler is forced by design to accept, that the embedded data capsuled within EmbedThis is a sprout of DisplayObject. This is why we can add it onto a Sprite to display the image we wanted to load.