Fixing Web Font Padding Issues on Linux/Mac/Android Browsers

Recently I came across an annoying issue with web font (@font-face) in which the text does not appear vertically center within buttons or inputs (see image). Google around, I found that not all web fonts are affected, this defect seem to occur only on Mac/Linux and may vary in different browsers and is commonly referred to as "web font padding issue".

It's interesting enough that although the issue is quite common and has been reported several times but there seem to be no absolute solutions. Most suggested the workaround to set uneven padding to compensate for the shift. I have struggled so much with workarounds for this especially the padding didn't help to correct the alignment across browsers and devices (I preview my app in Chrome/OSX but it runs on iOS Safari and Android browser) so I decided to look into the issue again and thought about typography metrics problems.

Honestly, I know very little about typography and font metrics. I used FontForge (which happens to be easily installed on Ubuntu) to tinker with the troubling font file. After a few hours, I have discovered the problem when I tried to replicate the settings of another good font on the defective one. It was one of my Eureka moments!

HTML5 Wordle Tag Cloud

This is a direct port of my AS3 Wordle Tag Cloud to HTML5. Please read my old blog post for some background.

Some technical notes:

• Thanks to Canvas' RenderingContext2D.measureText(), I can calculate size of the words off browser's stage.
• Initially, I was using Canvas as rendering stage for the tag cloud. However, it demands extra work to make the words interactive. So I decided to use normal block text with CSS3's transform/rotate. The result is texts are searchable and out-of-the-box hyperlinks.
• The position checking process may cause browser hang momentarily if run through all of the words. I have split the process of each word into each RequestAnimationFrame to avoid the script hang.

However, there is still room to improve, for example, enhancing the intersection check and using any angle rotation...

There you go! Check out the live demo and source code.

Fish Boids - Three.js Demo

This is my adaptation from the Three.js Birds Demo which was featured in the famous HTML5 Music Interactive Film The Wilderness Downtown.

The original birds demo was done by Mr.Doob based on the boids simulation. You can read more about behind the scene of The Wilderness Downtown and the flocks of birds simulation from his blog here. (Thank Mr. Doob for your awesome Three.js library and the nice bird demo.)

The significant adaptations that I made to this school of fishes simulation are: the fish objects are PlaneGeometry with bitmap texture; some tweaks to the boids' speed and movement to make them more fish-like; and making the fish wiggle its tail instead of bird wings' flapping.

This fish and the bird demos are used in my side-project for my friend's HTML5 portfolio.

Now, go see the demo. The source code can be found on Github.

A Cave, 3D Stereo Images & 2-State Looping Animation

When I visited this cave during the trip to the central provinces of Viet Nam. I wanted to capture it magnificence and beauty but the cave's texture was too complex to visualize its depth and space on 2D photos. I recalled this 3D photography technique and tried to take some stereo photos of the scenes (take 2 photos of the same scene from 2 slightly different position) and made them into 3D stereo animation when I get back.

Traditionally, these 3D stereo images are presented by a 2-frame animated GIF. But GIF images are not efficient for live photographs and they normally take up more bytes than JPG for large pictures so I decided to use CSS and JavaScript to reproduce the animation with JPG photos.

Basically, the JPG is set as background of a div which has dimensions of half of the image. JS will shift the background-position at intervals revealing half of the background one at a time. And here's the results.

During the making of the effect, I also explored its possibility with CSS3 animation and steps() function. The result is the same without any coding. But for the sake of compatibility for the audience, the said demo still use JS. I put the CSS3 solution on Dabblet for later reference of similar 2-state animation. Check it out.

Tutorial: Realistic Waterfall with CSS3

A recent project requires me to create a realistic running waterfall. For such task, what came first to my mind was to use animated GIF or PNG sprite sheet and loop them frame by frame. Then my friend, Justin, explored more with a semi-transparent water layer overlaying a static waterfall image using Photoshop & Flash. The result was really satisfying. So I decide to adopt it into our project which is pure HTML. Thanks to CSS' background repeat and the new CSS3's animation, the task was really simple to achieve and straight forward.

Here's the demo & source code on Dabblet: http://dabblet.com/gist/2403656

It is worth noting that CSS3's animation is still an experiment feature. You can still achieve same result using JS to shift the background at intervals.

Let me explain step by step to re-create the effect:

Demo: Stage3D Fireworks with Flare3D

My going back to Flash to experiment on Stage3D. The animation make use of Flare3D engine. Thanks to its built-in shaders and particles components, I was able to create the fireworks and the lightning effects without much trouble. However there's still room to improve the fireworks effect with more particles.

View the demo.

Case Study: WebGL 360° Panorama

A 360° walk-through of my office. This is a case study with the ThreeJS 3D engine for HTML5 Canvas and WebGL. I have adapted the ThreeJS WebGL equirectangular panorama demo, making it fall back to Canvas renderer when browser doesn't support WebGL. The overlaying markers are DOM objects. There's some coordinates conversion between ThreeJS 3D world and 2D DOM. In this adaptation, there are 2 spherical panoramas so users can navigate and see more corners of the office. Just for fun and experimental purpose, some snowing effect added on the occasion of Christmas 2011.

Components used:
- ThreeJS WebGL equirectangular panorama demo
- Snowing effect by Seb Lee-Delisle

Finally, check out the demo and grab the source code.

Playing with Wallaby

This is my attempt to convert an old Flash animation (my old animated signature when I was young ;) )  to HTML5 using Adobe's Wallaby tool.

Because of the nature of this animation, a lot of SVG files were generated. The total size of the HTML5 animation is 1.1MB compared to 21.6KB of the Flash counterpart. (OMG, way to much less efficient). I had to edit some JavaScript to add a preloader for it. Another side note is that Wallaby only works with Flash CS5's fla. (The tool failed to open my old animation in CS3 format).

AS3 Wordle Tag Cloud

You should have seen the aesthetic tag cloud above somewhere on the web. It originates from the famous Wordle words cloud (closed source). For the past few days, I have ported an open source Java class to ActionScript and able to render the tag cloud in Flash as seen above. Please refer to this article to have the Java author explain the basic of the algorithm. (Thank Pierre Lindenbaum for the nice implementation)

Flash Camp Hanoi 2010

The young and energetic people

It was great honor for me to be invited to the first Flash conference in Viet Nam, Flash Camp Hanoi 2010. The event is a proving fact that Flash/Flex users community in Viet Nam has grown up and stronger than ever. All details and stories can be found at the official website: flashcamphanoi.com.vn 

(Update: the server is temporarily down, please access the overview article on groups.adobe.com or view the event photos on FCH Facebook page)

Me on stage

I brought to the event the presentation about FLARToolKit and augmented reality in Flash. The slide deck (with links to online demos) has been uploaded by the organizer on slideshare.net.

Announcing as3-karaoke-player, my first open library

Today I’m very excited to announce my first open source library: as3-karaoke-player. It comes from a request to make a small karaoke website. The idea is that karaoke is a popular kind of entertainment in Vietnam so I thought I would make the core rendering engine open source so that everyone especially my fellow developers can make and/or enjoy karaoke online. (About the said karaoke site, of course I only charged the GUI customization and the Red5 recorder)

You can check out or download the source at Google Code site: http://code.google.com/p/as3-karaoke-player/. This library is licensed under Apache License 2.0.

Here's the sample player:

(The background photo is taken by me :P )

Myth Buster: EnterFrame Event Performance

When dealing with animation and tweening in ActionScript, EnterFrame event is the most important factor. However, it is also one of the frequent factors to cause performance issue for your application. Using it efficiently is critical for every application.

The myths

The EnterFrame events reportedly generate 1500 – 1800 event objects per minutes. Imagine, in every instance of your component (for e.g. a text marquee), you add an EnterFrame handler to its own, that number of objects generated per minute will multiply. Keep in mind that, creating an object is one of the slow actions in ActionScript. So avoid creating too many event objects will theoretically improve application performance.

When discussing AS3Signals, I have mentioned an approach (raised by Robert Penner and AlecMcE) which uses a two-frame MovieClip which has some script attached to its frames. The MovieClip loops continuously between 2 frames. When the play head reach a frame, the script attached to it will call the handling function, imitating EnterFrame’s events. Some claims that: “The idea behind the approach is that a frame-loop is an internal Flash player structure. It sits underneath the AS3 functionality, and so it doesn’t produce ENTER_FRAME events”.

The experiments

To clear the myths about EnterFrame event performance and the 2-frame-loop approach, I have constructed an experiment of moving 5000 objects simultaneously using 4 different approaches:

Optimal Unicode range for Vietnamese font libraries

As an old-school tip, in order to display correct Vietnamese Unicode characters, we must include these character sets: Basic Latin + Latin I + Latin Extended A + Latin Extended Additional.

Although those 4 sets contain 994 glyphs, Vietnamese characters scatter in those sets and only take about one third of that number of glyphs. It is a waste to include other Latin characters that Vietnamese language never uses.

So I’ve done a quick experiment and come up with an optimal unicode range for Vietnamese characters (for [Embed] tags and compiled with Flex SDK):

Demystify the “root” property of DisplayObject

Every DisplayObject has a property named “root”. What does this property refer to? Do all display objects share the same root object?

According to Adobe’s Help, the root property is the top-most display object in the portion of the display list's tree structure represented by that SWF file. In other words, root is the document class of that SWF. (By saying document class, I mean the movie clip that is linked with document class in Flash CS or the target class which you compile with Flex SDK)

There are other cases mentioned in the document:

• Root of Stage is the Stage itself.
• Root of a loaded image (jpg, png, gif) whose content is a Bitmap is the Bitmap.
• If a DisplayObject is created by code and (for e.g. new Sprite()), its root is null until it is added to a container which has non-null root. (The container’s root will be passed to its child). The container is not necessary to be on stage.

Using Flash Proxy Class

According to Adobe’s Help, the Proxy class (flash.utils.Proxy) lets you override the default behavior of ActionScript operations (such as retrieving and modifying properties) on an object.

The usage note sounds interesting but this is one of the least used classes in AS3. In fact there are some use cases of this class which prove it is extremely powerful and may help you save many lines of code. Some of those are:

• OrderedObject: an object whose properties order are strictly maintained.
• TraversableObject: an object which allow you to traverse through its declared properties by using for loop.

First let’s see how to use it.

Featured Presentation – Quick As A Flash

“One hundred slides on Flash optimization, covering general theory, code, media, and graphics,” by Grant Skinner.

These slides are recommended to any Flasher who seeks for serious code optimization and extreme performance improvement.

Note: When entering the page, press Left or Right to navigate the slides.

Simple AS3 Line Smoothing

While researching for drawing tools, I’ve come up with a simple implementation of a pencil tool and line smoothing.

Here’s the idea:

• Capture the points drawn by pencil tool in an array.
• Filter a new points array from the original one by skipping points in the middle (to reduce turns & angles)
• Finally, use a simple point-to-point curve drawing algorithm. I use sample code from this article by gskinner.com

The result:

You can find the source of this demo here.

[Vietnamese tag: Làm mượt nét vẽ đơn giản với ActionScript]

as3signals: new approach for AS3 Events

There are times you may find that the built-in events of AS3 are limited and even troublesome. Here are some circumstances that EventDispatchers turn against developers:

1. Objects MUST extend EventDispatcher in order to be able to dispatch events. Implementing IEventDispatcher alone is impossible because the event target is read-only and you cannot change it from outside of EventDispatcher.
2. It’s difficult to manage events. There’s no way you can remove all event handlers attached to an event dispatcher at once. So in some cases, you don’t remove them properly and they start causing bugs. (BTW, using weak references is not reliable and not recommended.)
3. You cannot pass extra data to you listener unless you extends a new Event object
4. You cannot set up your interface in a way that it can enforce implementing classes to dispatch the required events.
5. On performance perspective, creating objects is one of the most evil things. That’s why any advanced programmers must know and practically use objects pool. However, we are still wasting a lot of resources creating event objects, especially repetitive events like mouse move or enter frame.
6. Read here for more critiques on AS3 events

So in order to address those issues, Robert Penner has adopted an alternative to AS3 events namely as3signals. (Follow the link for more info and get the library)

AS3 Type Conversion & Common Mistakes

In this article, I’ll discuss some common mistakes that AS3 developers (including myself) often make when working with (implicit) type conversion.

1. Check whether a dynamic property is set

Dynamic properties can be added to dynamic object at run-time. Consequently, there’s often a need to test whether they are set before using them.

Here’s how some developers do it:

1. var initObj: Object = {embed: true, color: 0xFF0000, text: "Hello" };
2. /* ... */ 
3. if (initObj.embed) { /*apply embed*/ }
4. if (initObj.color) { /*apply this color*/ }
5. if (initObj.text) { /*apply this text*/ }

The first test with Boolean is ok. But be careful when the input for color is black (0x000000) or the text is empty (“”). In that case, zeros and empty strings casted to Boolean equal false, and definitely the code will run incorrectly.

So, the best practice to check whether a dynamic property is set is to do as following:

1. if (initObj.embed != undefined)
2. if (initObj.color != undefined)
3. if (initObj.text != undefined)

Happy Vietnamese New Year 2010

It been a while I haven't done any animation/e-card for my dear friends. This year, I want to make something different to mark my mature in the Flash carear after 2 years. Here it is (click on the thumb to open the flash movie:

HAPPY VIETNAMESE NEW YEAR 2010!
WELCOME THE YEAR OF THE TIGER!

The images are loaded from my FaceBook friends list.

You can find the source code of this app here.

Update 14-June-2010: Profile picture URLs were fetched once via FaceBook API tester and stored in an embedded XML. They may be outdated over time.