First with the styling

#slideWrap creates an extremely wide canvas for the slide to fit on aligned horizontally.
#wrapper then creates a sort of viewport to view the slides through.

<style type="text/css">
#wrapper { clear: left; overflow: hidden; position: relative; width: 520px; }
#slideWrap { clear: both; position: relative; width: 9000px;}
.slide { float: left; width: 520px; }
 
#wrapper #slideNav { float: right; margin: -2.75em 0 2em 0; }
	#slideNav li { display: inline; padding: 0; }
		#slideNav li a {
			background: url(http://cmcilrath.rssready.net/xcel/assets/images/bg_slideNav.png?v=3) no-repeat -12px top;
			display: block;
			float: left;
			height: 12px;
			margin-right: .5em;
			text-decoration: none;
			text-indent: -999em;
			width: 12px;
		}
		#slideNav li a.next, #slideNav li a.prev { width: 10px; }
		#slideNav li a.selected { color: #000; background-position: -12px bottom; }
 
		#slideNav li#prevSlide a { background-position: top left; }
		#slideNav li#prevSlide a.disabled { background-position: bottom left; }
 
		#slideNav li#nextSlide a { background-position: top right; }
		#slideNav li#nextSlide a.disabled { background-position: bottom right; }
</style>

The FBJS script

<script>
<!--
function Each(array, block){
	for (var i=0, l = array.length; i<l; i++){
		block(array[i]);
	}
}
 
var currentSlide = 1;
var maxSlides = 5;
var animating = false;
var slideWidth = 520;
var currentPX = 0;
 
function nextSlide(){
	var nextSlideNum = currentSlide + 1;
	if(nextSlideNum >= maxSlides){ toggleButton('next','disable'); }
	else if (nextSlideNum == 2 && currentSlide == 1){ toggleButton('prev','enable'); }
	currentSlide = nextSlideNum;
	if(animating == false){ scroll('right'); }
	return false;
}
 
function prevSlide(){
	var prevSlideNum = currentSlide - 1;
	if(prevSlideNum == 1){ toggleButton('prev','disable'); }
	else if (currentSlide == maxSlides){ toggleButton('next','enable'); }
	currentSlide = prevSlideNum;
	if(animating == false){ scroll('left'); }
	return false;
}
 
function toggleButton(button,state){
	if(button == 'next' && state == 'disable'){
		document.getElementById('nextSlide').setInnerXHTML('<a href="#" class="next disabled">next slide &gt;</a>').removeEventListener('click',nextSlide);
	}
	if(button == 'next' && state == 'enable'){
		document.getElementById('nextSlide').setInnerXHTML('<a href="#" class="next">next slide &gt;</a>').addEventListener('click',nextSlide);
	}
	if(button == 'prev' && state == 'disable'){
		document.getElementById('prevSlide').setInnerXHTML('<a href="#" class="prev disabled">&lt; previous slide</a>').removeEventListener('click',prevSlide);
	}
	if(button == 'prev' && state == 'enable'){
		document.getElementById('prevSlide').setInnerXHTML('<a href="#" class="prev">&lt; previous slide</a>').addEventListener('click',prevSlide);
	}
}
 
function scroll(direction){
	Each(document.getElementById("slideNav").getElementsByTagName("a"), function(as){
		as.removeClassName("selected");
	});
 
	document.getElementById("slideNav-"+currentSlide).addClassName("selected");
 
	animating = true;
	var pixelShift = slideWidth * (currentSlide-1);
	var startingSlideNum = currentSlide;
	var Slide_container = document.getElementById('slideWrap');
 
	if(direction == 'left'){
		Animation(Slide_container)
			.by('left', '-' + pixelShift + 'px').from('-' + currentPX + 'px')
			.by('right', '-' + pixelShift + 'px').from(currentPX + 'px')
			.duration(300).ease(Animation.ease.both).checkpoint(1, function() {
				if(startingSlideNum == currentSlide){ animating=false; }
				else { scroll('left'); }
		}).go();
	}
	if(direction == 'right'){
		Animation(Slide_container)
			.by('right', pixelShift + 'px').from(currentPX + 'px')
			.by('left', '-' + pixelShift + 'px').from('-' + currentPX + 'px')
			.duration(300).ease(Animation.ease.both).checkpoint(1, function() {
				if(startingSlideNum == currentSlide){ animating=false; }
				else { scroll('right'); }
		}).go();
	}
 
	currentPX = pixelShift;
}
 
function showSlide(num){
	startingSlide = currentSlide;
	currentSlide = num;
 
	if(num > startingSlide){ scroll('left'); }
	else if (num < startingSlide) { scroll('right'); }
 
	if (startingSlide == maxSlides && currentSlide == 1){ toggleButton('next','enable'); toggleButton('prev','disable'); }
	else if (currentSlide == maxSlides && startingSlide == 1){ toggleButton('prev','enable'); toggleButton('next','disable'); }
	else if (currentSlide == 1){ toggleButton('prev','disable'); }
	else if (currentSlide == maxSlides){ toggleButton('next','disable'); }
	else if (startingSlide == 1) { toggleButton('prev','enable'); }
	else if (startingSlide == maxSlides) { toggleButton('next','enable'); }
}
//-->
</script>

FBML Markup

Simple markup here, slideNav controls the slide with onclicks, the JS does the magic.

<div id="wrapper">
	<h2>Header</h2>
	<ul id="slideNav">
		<li id="prevSlide"><a href="#" class="prev disabled">&lt; previous slide</a></li>
		<li><a href="#" id="slideNav-1" onclick="showSlide(1); return false;" class="selected">1</a></li>
		<li><a href="#" id="slideNav-2" onclick="showSlide(2); return false;">2</a></li>
		<li><a href="#" id="slideNav-3" onclick="showSlide(3); return false;">3</a></li>
		<li><a href="#" id="slideNav-4" onclick="showSlide(4); return false;">4</a></li>
		<li><a href="#" id="slideNav-5" onclick="showSlide(5); return false;">5</a></li>
		<li id="nextSlide"><a href="#" class="next" onclick="nextSlide(); return false;">&gt;</a></li>
	</ul>
	<div id="slideWrap">
        <div id="slide_1" class="slide">
			<h3><a href="#">Title 1</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
 
        <div id="slide_2" class="slide">
			<h3><a href="#">Title 2</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
 
        <div id="slide_3" class="slide">
			<h3><a href="#">Title 3</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
 
        <div id="slide_4" class="slide">
			<h3><a href="#">Title 4</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
 
        <div id="slide_5" class="slide">
			<h3><a href="#">Title 5</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
	</div>
	<!-- end slideWrap -->
</div>

What you CAN’T do in FBJS

I learned very quickly, that Facebook JavaScript does not allow some very common native functions such as onload, arrays and alerts as well as access to many properties of the document or window level of the DOM. There are workarounds and alternative methods that you can use instead:

window.onload in FBJS

Instead of using window.onload to initialize your functions, use setTimeout.

setTimeout( function(){  }, 10 );

Even an empty setTimout at the beginning of your script will kick start your functions which would normally auto init (this seems to work fine in canvas, but not so much in tabs).

alert alternative for FBJS

Since you can’t use alert or document.write, use Facebook’s dialog box:

new Dialog().showMessage('Dialog', 'This is text');

document.write alternative for FBJS

Since you don’t have access to the document or window levels of the DOM, you’ll want to setup a little include for testing. I drop in this code when i want to quickly output:

<script>
function logOutput(){
    var text = "This will be inserted into my log div";
    document.getElementById('log').setTextValue(text);
}
</script>
<div id="log"></div>

Trouble with JS Arrays in Facebook

For whatever reason, facebook also decided to rip out support for creating objects which also eliminated the way most of us make arrays:

// new Array() is not supported in FBJS
var myarray = [];
myarray[0] = 'stuff';
 
// or
myarray['foo'] = 'bar';
 
// or 
myarray.push('another example');

More to come as I wrestle further with Facebook. Any tips or comments are greatly appreciated!

What is Zen Coding?

From a general perspective Zen Coding is simply the practice of making lightweight and reusable code to allow for peaceful coding and debugging (that’s my definition anyways). There has been a movement in the front-end development community towards finding new ways to use CSS with semantic markup in order to produce the desired layouts and styles. Now Sergey Chikuyonok has taken that to a whole new level. He’s reversed the idea of Zen Coding using HTML markup to generate CSS Selectors and allowed us to create our markup from using CSS Selectors. This might seem confusing, so lets look at some code:

Plain and simply put, the Zen Coding plugin (supported on multiple text editors) translates code like this:

div#header>ul.nav>li*5

into this:

<div id="header">
	<ul class="nav">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

.. and yet, this is still nothing folks! Dive in deeper over at Smashing Mag

/* COOKIES OBJECT */
var Cookies = {
        // Initialize by splitting the array of Cookies
	init: function () {
		var allCookies = document.cookie.split('; ');
		for (var i=0;i<allCookies.length;i++) {
			var cookiePair = allCookies[i].split('=');
			this[cookiePair[0]] = cookiePair[1];
		}
	},
        // Create Function: Pass name of cookie, value, and days to expire
	create: function (name,value,days) {
		if (days) {
			var date = new Date();
			date.setTime(date.getTime()+(days*24*60*60*1000));
			var expires = "; expires="+date.toGMTString();
		}
		else var expires = "";
		document.cookie = name+"="+value+expires+"; path=/";
		this[name] = value;
	},
        // Erase cookie by name
	erase: function (name) {
		this.create(name,'',-1);
		this[name] = undefined;
	}
};
Cookies.init();

Unfortunately, there’s no easy way to simple update a cookie (correct me if I’m wrong) but this will allow you to delete and re-create as needed:

// Erase cookie "test"
Cookies.erase('test');
 
// Recreate cookie "test" with a new value of "cookievalue" and set to expire in 10 days
Cookies.create('test','cookievalue',10)

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

Validators

• Total Validator: simple HTML/CSS Validator with browser plugin support
• W3C Validator: the organization that defines markup standards, and validates according to those standards
• Cynthia Says: screen reader which will help you with accessibility in mind

Accessibility

• WebAIM: Introduction to Accessibility
• WCAG: Web Content Accessibility Guidelines
• WCAG Overview: Overview of WCAG Standards
• WCAG Tutorial: A useful educational resource to learn the standards
• Section 508: Federal requirements for web accessibility

Javascript Libraries

• jQuery
• Prototype / Scriptaculous
• MooTools

Firefox Plugins for Developers

• CSS Validator
• CSS Viewer
• Web Developer Toolbar
• Firebug

Tutorials

• W3Schools: Very in-depth, free tutorials on the most commonly used web markup and programming languages
• A List Apart: Articles and tutorials on an extensive list of topics
• QuirksMode: Good articles and test pages concerning javascript and CSS

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

Love it or hate it, I re-designed the Chosen Development website. I was growing tired of the Organic theme that I had developed for it originally. Even though it was highly creative and artistic, it was too busy and the colors were too bleh. I decided to go with a VERY simple layout, color scheme and dark, web 2.0 style. This a typical style for me, but I’m proud of that. Chosen development consists mostly of the work of myself and my business partner, Shane and he loves the new design as well. I’ve also integrated our new Creative Brief Interview so that we can automate the initial research and gathering phase.

So check it out, and give me some feedback either way!

Find your strengths and excel above the rest

So many web developers claim to know all when it comes to web, but when put to the test someone that can write “hello world” doesn’t meet the standards the client expected when they said “Do you know PHP?” All developers whether primarily front-end or back-end, should know at least a C level amount in both. To be an awesome back-end developer you need to be able to structure your content in something other than tables or invalid HTML, and to be an awesome back-end developer, you should at least know how to make simple variables and includes to make your job quick and efficient, rather than copying/pasting your doctype and head information on each page. If you want to do well in the next few years, then succeed by being a GURU in at least two of the following:

• XHTML and CSS – with clean and valid markup that works in FF, Webkit, and IE7+
• Flex and ActionScript – flash/animation/design are a huge plus
• JavaScript – with and without frameworks, jQuery or MooTools knowledge a plus
• PHP – cakePHP or codeignitor frameworks will take you to the next level
• .NET – IIS and server administration a plus
• Ruby – Rails will take you to the next level
• JAVA – desktop publishing knowledge a plus

Learn new and trendy technologies

While following trends isn’t always a good idea, trends that have been around for more than just a year and have high demand are usually worth taking a second glance at. In the past 5 years, there are a few major trends that are really growing. I highly recommend picking one of the trends and learning as much as you can about the technology on the side of your current studies and work..

Rich Internet Applications (RIA)

Adobe Flash has always had a strong presence on the web, and that presence is only increasing along with other RIA platforms like Microsoft Silverlight, JavaFX, and the future HTML5. There are almost no major disadvantages to sites built entirely in Flash or other platforms now that search engines like Google are making more of an effort to index RIA content. To top that, Adobe has now adopted a markup language geared more towards developers called FLEX. Flex allows developers to markup their code in MXML while also using ActionScript for animation and then simply, with the click of a button plublish the application in either a SWF for web or as an AIR application for desktop. I strongly believe this is the future of not only the web, but future Operating Systems as well. Google and Ubuntu have already shown a heavy interest in using web applications on the desktop, and phone operating systems are following a similar pattern. While mobile and desktop development are entirely different from web development, learning FLEX is a great way for web developers to cross that threshold and succeed.

Agile Development and Object Oriented code

As the internet reaches the far corners of the Earth, boundaries and barriers are being broken for working remotely on projects. In fact there are many businesses that operate entirely on remote collaboration. This means you need to learn a versioning software and systems (CVS or SVN using Tortoise is a good place to start), how to organize your thoughts and communicate them quickly and effectively over IM or email, and most importantly how to comment and structure your code (for programmers OO principles are a must) so that others can quickly pickup where you left off.

Web Services and Cross-Platform Markup

UML, XML, JSON, REST and SOAP, just to name the most common languages, are becoming a must for nearly every developer. Almost every RIA and API use a language like this to communicate. Any site that is dynamic is probably using at least one of these technologies. I can’t specifically tell you which is more relevant or popular, as it varies per project, but I can tell you that they’re all fairly simple to learn, so I suggest doing your homework or ready a book on each to know at least base knowledge and markup for each of them.

Refine your Interpersonal Communication Skills

As you climb the corporate ladder, or step out into the world of business, it will become more and more important that your written and verbal communication skills are sharp and effective. The gap that used to exist between sales/consulting/design/IT is now closing, and more businesses are switching to an Agile model. This means from the start of a project or team, you may be communicating directly with a client, or with others that don’t know or understand the technology. You’ll need to learn how to explain things so that others can easily understand and relate, as well as sound professional and well educated. These skills are not easy to hone, and require a lot of time. I highly recommend actively getting involved in forums/blogging to improve written communication, perhaps join a local business group or Chamber of Commerce to learn how to communicate better in a professional business setting (another perk to this is the networking), and ask others to correct and help you identify bad habits and mistakes.

• Copyright is an issue for downloading and sharing fonts via the font-face attribute
• Internet Explorer 6-8 do not support font-face
• Font-face could potentially pose a threat if malicious sites attach/spread viruses via the font files

Until font-face is fully adopted, web developers must resort to complimentary or supplementary solutions to make non-traditional typefaces work. There are few major flash and javascript solutions in existence that offer solutions with different approaches to displaying these typefaces. The three major typeface scripts that I am going to discuss are SIFR, FLIR, and Cufón. Before diving into details about each I’d like to point out that all of these solutions that I discuss are 100% SEO friendly, and all require JavaScript (and flash in the case of SIFR) but degrade to standard markup if JS is not enabled, also note that each of these play well with jQuery.

SIFR (Scalable Inman Flash Replacement)

First I must address the acronym, thought not the most relevant seeming, “Inman” is referring to Shaun Inman who originally conceived the idea of using the DOM and Flash together to support non-traditional typefaces. SIFR uses a flash object to render to the font face, and then Javascript to identify the DOM and replace the text as specified.

Pros of SIFR

• Text can be selected
• Does not violate EULA or copyrights, since font is contained within the SWF object
• You can easily add shadows, anti-aliasing, and other text effects in Flash

Cons of SIFR

• Slightly slower load times
• Requires both JavaScript and Flash to be enabled

My thoughts on SIFR

Some people complain that SIFR is harder to implement, but if you’re a front-end web developer it’s vital to learn and master new technologies including really basic flash. All you have to do is open the flash file included in the zip, change the font of the text to the font you want to use, and then publish it. Instructions are included on how to do this and if it is “too challenging” than you’re in the wrong field!

Many have also commented and argued that SIFR is no more secure to stealing a font file and using it on your website. While I do agree with that statement, the issue is a legal matter. Like it or not, and argue it as you may, Adobe Flash is legally allowed to embed and use fonts that the developer has purchased. This is not true for any of the others.

FLIR (Face Lift Image Replacement)

Using PHP (and the GD library) FLIR renders text into a font of your choice by reading the text in a DOM and sending a request to the server with that string and returning an image of that text rendered in the new font. It’s a very clever idea, and works behind the scenes, but it’s not without it’s quirks.

Pros of FLIR

• Does not violate EULA or copyrights, since font is rendered as an image
• Prints in the font rendered since it is an image

Cons of FLIR

• Requires PHP with the GD enabled
• Text cannot be selected

My thoughts on FLIR

While FLIR is fast and efficient with few flaws, one restriction I cannot overlook is the requirement for PHP and GD on the server. Many corporate websites (addressing the big guys, not the freelancers with this one) work exclusively with .NET on Windows/IIS servers without PHP installed at all. This eliminates FLIR from the mix for many websites unfortunately. In addition, FLIR disables the user to be able to select text. This is not a huge draw back if used on headings, but if used on a even body of text then you’re killing usability.

Cufon

Cufon is basically a new and improved version of Typeface.js, with a focus on faster and easier implementation. Cufon uses the browser to draw vector objects using VML (Vector Markup Language) for Internet Explorer and the HTML 5 Canvas element for the more advanced browsers.

Pros of Cufon

• Faster load times than SIFR and FLIR, since it is all JS and nothing more
• Has all the strengths of Typeface.js with fewer weaknesses.

Cons of Cufon

• Violates EULA and copyrights due to fonts being embedded. Not many fonts are permitted to be rendered with this method
• Text cannot be selected
• You can’t apply a hover state to converted text

My thoughts on Cufon

For many, Cufon is the best solution to work with. It allows for rendering on the fly, and works well for a developer to match a design without having to replace each heading with an image. Cufon even works quickly with large bodies of text! One thing I remain disappointed about is text selection; if this library aims to provide a solution for larger bodies of text, then it seems that text selection is a must.

As I have tested and worked with Cufon, I recommend it for the developer looking for a quick solution but only for personal or non-profit website. I’ve talked with a few professionals including a lawyer and confirmed that Cufon is not a legal solution for font-embedding on ANY website, but that unless you’re developing a large profile commercial site, you should be safe to use it freely.

If you’d like to learn more about Cufon, check out the tutorial on TutsPlus.

Read further:

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