In my last post regarding sIFR, I compared sIFR against a few of the other popular font replacement methods such as Cufon and FLIR. Since there is obviously a great deal of interest in the subject of font replacement, I figured it would be beneficial to show a deeper analysis at sIFR which I believe is the superior out of the three.

A deeper look at pros of sIFR

sIFR is quite different to the many font replacement techniques in the wild. Instead of manually generating each header through an image generator such as FLIR and Cufon do, sIFR is able to load a flash object and replace each element on the fly. The scripted effect works for roughly 95% of world wide web users according to statistics for Flash support and JavaScript support in modern browsers. Note also, that sIFR is by no means required, and degrades gracefully if the user does not have one of these components required. I’m sure some purists would react with contempt, but this method causes no harm to usability and only effects load time if used incorrectly (such as replacing body text rather than headers).

sIFR… what’s not to love?

First and foremost, implementation can be slaughtered. For an inexperienced developer, sIFR can take up to an hour to implement (from what I’ve heard in complaints anyways) and can cause pages to load slowly. From my experience, both are due to an incompetent developer, as sIFR is quite easy to implement if you understand all front-end technologies (which you should be a front-end developer) and only causes slow load time if its used for large blocks of text. Compare sIFR to the first wave of Web 2.0 technologies.. to this day I see wannabe developers implementing 20k+ javascript libraries to do one simple “jiggle” or “ajax” ability, which you can do with a few lines of code if you understand raw JavaScript. We can’t blame the technology for human error.. sIFR is brilliant. It may have a ways to go before it’s perfect, but respecting the principles of semantics, usability, and accessibility.. sIFR by far is winning the race against Cufon and FLIR.

Now to address the purists and their complaint about flash and JS dependency. Plain and simply, if a user falls within the 3-10% that doesn’t have Flash or JavaScript enabled, then BIG DEAL. That’s what good old HTML/CSS are for.. a fall back solution. Should we punish those with modern browsers and technologies for the minority that will get a slightly-less-quality rendering? I don’t punish modern browsers by neglecting the wonders of CSS 3. If Internet Explorer sees a box with square corners instead of rounded.. BIG DEAL. So why should we fight about whether a user has JS or Flash enabled? Heck, you can even use image replacement at that point, if you really want to.

The Big Picture

The real issue is that there aren’t enough fonts supported in Internet Explorer. If we want to point fingers and find something to criticize, there it is. Firefox, Safari, Chrome, Opera.. they’re all supporting more CSS properties such as @font-face. However, due to copyright laws and support from Internet Explorer we are bound to 5-10 fonts that we can reasonably assume the user has installed, and that’s ALL we’ve got. Solutions have been offered and argued but the problems are still much broader.. ranging from font licensing, support and rendering, with no clear solution in sight.

sIFR is one solution of many offered by developers fighting a war for creative freedom. It’s here and now, it’s legal despite the font, and regardless of the few quirks.. it’s usable. If you use it, then I hope you implement it well. If you protest it, then I hope you have valid reasons, and aren’t just complaining because you’re ignorant. Take this post with a grain of salt.. it’s my 2 cents and nothing more.

Read further:

Cufon vs sIFR vs FLIR
Style vs SEO
Fonts and the Law

For too long I’ve put off learning Flash because I never liked the layout of the program, but I decided today that like it or not, flash is a very popular front-end development tool. Being a front-end developer it’s important to know every tool and technology to some extent and understand the inner workings of each technology and how to integrate them with other markup and programming. So let’s dive into some screenshots and descriptions and learn Adobe Flash.

Getting to know the program

Create a new Flash File (Actionscript 3.0)

• Create a new Flash File by going to File > New > Flash File (Actionscript 3.0)
• Change the document size and frame rate to your liking (Modify > Document), I used 640 x 310 and 18 fps
• Use the Rectangle tool and draw a rectangle on Layer 1 with the color you’d like
• Create any other layers or draw any other objects or place text. I created a text object on top of the rectangle
• Name “Layer 1″ to “Background” and create a new layer named “Code”
• Save the Document

Create a new Actionscript File

Paste in the code

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210

/* Blurry Lights Animation */
 
package Classes
{
	/* Import required classes */
 
	import flash.display.MovieClip;
	import flash.filters.BitmapFilter;
	import flash.filters.BlurFilter;
	import flash.events.Event;
 
	public class Lights extends MovieClip
	{
		/* Vars */
		private var lightsNumber:int;
		private var xSpeed:int;
		private var ySpeed:int;
		private var lightsDir:String;
		private var areaW:int;
		private var areaH:int;
		private var lights:Array = new Array();
 
		/* Main function */
		public function init(areaWidth:int, areaHeight:int, numberOfLights:int, lightSize:int, lightColor:uint, minimumScale:Number, hSpeed:int, vSpeed:int, dir:String, quality:int):void
		{
 
			/* Set variables */
			areaW = areaWidth;
			areaH = areaHeight;
			lightsNumber = numberOfLights;
			lightsDir = dir;
 
			/* Use a for to create the parameter-specified number of lights*/
			for (var i:int = 0; i < numberOfLights; i++)
			{
				/* Create the specified number of lights */
 
				var light:MovieClip = new MovieClip();
 
				/* Set random speed to x and y based on the params*/
 
				xSpeed = Math.floor((Math.random() * (hSpeed - -hSpeed + 1)) + -hSpeed);
				ySpeed = Math.round((Math.random() * vSpeed) + 0.5);
 
				light.xSpeed = xSpeed;
				light.ySpeed = ySpeed;
 
				/* Create lights */
 
				light.graphics.beginFill(lightColor);
				light.graphics.drawCircle(0, 0, lightSize / 2);
				light.graphics.endFill();
 
				/* Set a position based on the params specified */
 
				light.x = Math.floor(Math.random() * areaWidth);
				light.y = Math.floor(Math.random() * areaHeight);
 
				/* Add blur, we declare the var here to get a new blur w/every light */
 
				var b:int = Math.floor(Math.random() * 10) + 5;
 
				var blur:BitmapFilter = new BlurFilter(b,b,quality);
 
				var filterArray:Array = new Array(blur);
 
				light.filters = filterArray;
 
				/* Change alpha */
 
				light.alpha = Math.random() * 0.6 + 0.1;
 
				/* Scale */
 
				light.scaleX = Math.round(((Math.random() * (1 - minimumScale)) + minimumScale) * 100) / 100;
				light.scaleY = light.scaleX;
 
				/* Add the lights */
 
				addChild(light);
 
				/* Store lights in an array to use it later */
 
				lights.push(light);
 
				/* Check for lights direction */
 
				checkDirection();
			}
		}
 
		/* Check direction */
		private function checkDirection():void
		{
			for (var i:int = 0; i < lights.length; i++)
			{
				switch ( lightsDir )
				{
					case "up" :
 
						lights[i].addEventListener(Event.ENTER_FRAME, moveUp);
 
						break;
					case "down" :
 
						lights[i].addEventListener(Event.ENTER_FRAME, moveDown);
 
						break;
					case "right" :
 
						lights[i].addEventListener(Event.ENTER_FRAME, moveRight);
 
						break;
					case "left" :
 
						lights[i].addEventListener(Event.ENTER_FRAME, moveLeft);
 
						break;
					default :
 
						trace("Something weird just happened!");
				}
			}
		}
 
		/* Move Up function */
		private function moveUp(e:Event):void
		{
			e.target.x += e.target.xSpeed;
			e.target.y-=e.target.ySpeed;
 
			/* Reset light position, Y first, then X  */
 
			if (e.target.y + (e.target.height / 2) < 0)
			{
				e.target.y = areaH + (e.target.height / 2);
				e.target.x=Math.floor(Math.random()*areaW);
			}
 
			if ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > areaW)
			{
				e.target.y = areaH + (e.target.height / 2);
				e.target.x=Math.floor(Math.random()*areaW);
			}
		}
 
		/* Move Down function */
		private function moveDown(e:Event):void
		{
			e.target.x+=e.target.xSpeed;
			e.target.y+=e.target.ySpeed;
 
			/* Reset light position, Y first, then X */
 
			if (e.target.y - (e.target.height / 2) > areaH)
			{
				e.target.y = 0 - (e.target.height / 2);
				e.target.x=Math.floor(Math.random()*areaW);
			}
 
			if ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > areaW)
			{
				e.target.y = areaH + (e.target.height / 2);
				e.target.x=Math.floor(Math.random()*areaW);
			}
		}
 
		/* Move Right function */
		private function moveRight(e:Event):void
		{
			e.target.x+=e.target.ySpeed;
			e.target.y+=e.target.xSpeed;
 
			/* Reset light position, Y first, then X */
 
			if (e.target.y - (e.target.height / 2) > areaH || e.target.y + (e.target.height / 2) < 0)
			{
				e.target.x = 0 - (e.target.height / 2);
				e.target.y = Math.floor(Math.random()*areaH);
			}
 
			if ((e.target.x - e.target.width / 2) > areaW)
			{
				e.target.x = 0 - (e.target.height / 2);
				e.target.y = Math.floor(Math.random()*areaW);
			}
		}
 
		/* Move Left function */
		private function moveLeft(e:Event):void
		{
			e.target.x-=e.target.ySpeed;
			e.target.y-=e.target.xSpeed;
 
			/* Reset light position, Y first, then X */
 
			if (e.target.y - (e.target.height / 2) > areaH || e.target.y + (e.target.height / 2) < 0)
			{
				e.target.x = areaW + (e.target.width / 2);
				e.target.y=Math.floor(Math.random()*areaH);
			}
 
			if ((e.target.x + e.target.width / 2) < 0)
			{
				e.target.x = areaW + (e.target.width / 2);
				e.target.y=Math.floor(Math.random()*areaW);
			}
		}
	}
}

• Note the line “package Classes” near the top. This is the name of the folder that will contain your class file. Make sure you have this folder in the same directory as your other flash file and that the name of the folder matches the name of the package.
• Save the file inside your “Classes” directory

Add your Actions to your Flash File

You’ve created the ActionScript file and Lights class, now all you need to do is call that class and pass the parameters to the script. Do this by going to Window > Actions and pasting in the code. Save and preview / publish and you’re done!

import Classes.Lights;
 
  var light:Lights = new Lights();
 
  light.init(640, 310, 10, 300, 0xFFFFFF, 0.5, 1, 1, "up", 2);
 
  addChild(light);

Want more?

Read more of the programming side