Tutorials from August, 2008

Hacking sIFR 2′s Font Replacement

sIFR 2

With sIFR 3 still in beta, let’s explore hacking sIFR 2 to behave with more of today’s Flash functionality.

To get started, download sIFR 2. A common complaint about sIFR font replacement is that the fonts look too pixelated or light. A quick trick to fixing this is to up the Flash version from 6 to 8. Edit “sifr.js” on line 7 change “var a=6″ to “var a=8″ so that we’re detecting for version 8. The fonts won’t look perfect, but they will be noticeably better.

Next, we can add letter-spacing functionality to sIFR. Open up “dont_customize_me.as” (don’t worry) and place this at line 92:

if (letterSpacing != null) fmt.letterSpacing = Number(letterSpacing);

With this technique we control the letter spacing using flash vars:

sFlashVars:”otherflashvar=true&letterSpacing=2″

Finally, when you publish, make sure to export it for Flash version 8 with ActionScript 2.0. … (more…)

Privatize a Group of JavaScript Functions

It’s a common problem in JavaScript: to use private functions you define them as an object. Later, when interfacing this object with some JavaScript library, you discover that several of the namespaces overlap.

While there is certainly some debate as to how to write an unobtrusive set of JavaScript functions, the most elegant solution is as always very simple. Basically, you wrap the set of functions in a nameless function, and then call this function immediately. The syntax we are going to use works like this:

(function(argument) {
alert(argument);
}) (‘What you want to alert’);

If you’re unfamiliar with the notation, we are declaring a nameless function, then calling this function immediately with the final set of parentheses.

This is an excellent way to isolate any functions since everything is protected within the scope of the function. Now let’s strip it down a bit, … (more…)

Folding Side Nav with jQuery

With jQuery, coding side navigation with drawers that expand and collapse is a piece of cake.

Let’s start with some best-practices HTML/CSS navigation:

<ul id=”side-nav”>
<li class=”current”>
<a href=”/”>Products</a>
<ul>
<li>
<a href=”/apples”>Apples</a>
</li>

<li>
<a href=”/bananas”>Bananas</a>
</li>
</ul>
</li>

(more…)