I've had a very eventful couple of years. But I have really missed my home here at orangesplotch. It's time to get back in the saddle and ride off into the sunrise. Yes, that's sunrise, because today is a new day. Welcome back! I've missed you all. Lots of great things to come: tips, tutorials, and hopefully even a site makeover.

To celebrate, here's a link to National Geographic's "Life in Color: Orange". Lots of wonderful photos to show just how fantastic of a color orange is.

Enjoy!

Let me first make it clear that I am not trying to discourage developers from using web fonts. Like any web designer out there, I am very excited about the possibilities that services like Typekit have made available to the masses. No longer are we stuck with Georgia and Verdana as our only font options for every site. Web fonts are fantastic! I'm glad we cleared that up, let's move on.

Moving on

I recently posted a tutorial on using Javascript to make an object follow the position of the mouse. One day I noticed that in my demos the object was no longer underneath the mouse. Instead there was a gap. If I moved the demo further down on the page, the gap between the object and the mouse got bigger. What had changed to cause this offset when the page worked fine a few days earlier? I hadn't changed any of the code.

The answer was web fonts. But, you might ask, how could something so wonderful as web fonts do something so horrible as breaking all of your innocent Javascript math? Whether or not you are actually asking that, I'll give you the answer. It was actually pretty obvious once I sat down and worked it out. So here you go —

Web fonts breaking DOM object positions explained

The code I used to store the object positions was executed on the DOM load event. Technically this is the moment that the browser has loaded its content and rendered the page. This is when all of the object positions are supposed to be final. Except that when using web fonts, the page isn't finished rendering yet.

Web font loading happens after the DOM has completed loading. Once the fonts have finished loading, the text is re-rendered using the downloaded fonts. This is why on some sites you see the text shift around shortly after the page has loaded.

Since I was getting object positions before the fonts were loaded, the positions I saved were not valid. They were not the positions of the objects once the fonts were loaded and the text had finished moving. And because the shifting gets larger the further down the text you go, the offsets in my demo were bigger the further down the page I placed it.

So what is the solution?

Well one way to fix it would be to continuously get the object positions. This way the position you have will always be correct. The problem is that constantly polling the browser for current object positions places an unnecessary load on the browser and can slow your scripts.

Thanks to the hard-working guys at Typekit, there is a better way. Instead of constantly polling for the current positions and offsets, you only have to get them once, right after the web fonts have finished rendering and all of the object positions are final. Typekit makes this easy with its font event callbacks.

To fix my demos, I simply added an event handler that updates the object positions once the web fonts are rendered. I've included a snippet of the code so you can see how it works.

// Javascript to execute when fonts become active
try {
  Typekit.load({
    active: function() {
      offset1 = $('#mouse-position-demo').offset();
      offset2 = $('#mouse_follower_demo').offset();
    }
  })
} catch(e) {}

For more info on these events and other things you can do with them, read Typekit's article discussing their callbacks. If anyone has their own tips in using Javascript and web fonts together, please post them in the comments.

Setup

This tutorial is going to focus on a div (the "stage") and an image inside it (the "follower"). With Javascript we will make the "follower" follow the mouse inside the "stage".

To make things easy, I am using the jQuery Javascript library. For those who aren't familiar with jQuery, it is a Javascript library that simplifies cross browser scripting by creating a set of common commands for doing common tasks. Feel free to use whatever Javascript library you prefer. While the syntax may be different, the principals we'll use in this tutorial can be applied to any of the common Javascript libraries.

Getting the mouse position

The first thing to do is to track the mouse. Using jQuery, we create a mouse move event listener. An event listener is a function that is executed every time an event happens. Every time the user moves the mouse, this listener will capture its new position.

Notice the e in the following code. That is the event object and in jQuery, mouse events have a pageX and pageY property that represents the position of the mouse on the page. So far it's pretty simple.

// track and save the position of the mouse
$(document).mousemove( function(e) {
  mouseX = e.pageX;
  mouseY = e.pageY; } );

Now we want to be moving our image around inside of our "stage" div only. So we'll need to convert the mouse position, which is given in terms of the full page, to be in reference to the "stage". So here is the additional code to get the relative mouse positions.

// get the stage offset relative to the page
$(document).ready( function () {
  offset = $('#stage').offset();
} );

// track and save the position of the mouse
$(document).mousemove( function(e) {
  mouseX = e.pageX;
  mouseY = e.pageY;
  relMouseX = mouseX - offset.left;
  relMouseY = mouseY - offset.top;
} );

The box below shows the difference between the relative positions and the absolute position.

Placing the image

So now that we know where the mouse is in relation to our "stage" div, we just need to put the "follower" image in that same spot. We could place the image in the same mousemove handler. However, this can lead to jerky performance in some browsers and won't allow us to do the more sophisticated animations that are discussed in later tutorials.

For a smoother, more robust animation, we're going to create a function that we will run at a fixed time interval. For those Flash developers out there, this is similar to the onEnterFrame event.

So the first thing we need to do is to setup our fixed interval function. 30 Hz or 30 frames per second is a standard animation rate. It's fast enough that your eye doesn't notice any jitter, but slow enough that older computers can usually handle it. Most monitors operate at 60 Hz, so going faster than that won't change the resulting effects. If you have a really complex computation driving your animation, you may want to reduce the rate to 20 or even 10 Hz to avoid bogging down the user's computer. One of the big complaints of Flash animation is how slow it makes the computer. The last thing you want is for your website to slow a user's computer to a crawl.

In Javascript to repeatedly call a function at a fixed interval of time we use the setInterval function. As parameters, it takes the function you wish to call at that frequency and the amount of time in milliseconds that you want the function called.

The following code calculates the time interval in milliseconds for a 30 Hz frame rate and then tells the browser to run the "animateFollower" function at that rate.

frameRate =  30; // the number of frames per second
timeInterval = Math.round( 1000 / frameRate );
atimer = setInterval( "animateFollower()", timeInterval );

You might notice that we set 'atimer' equal to the return value of the setInterval command. This allows us to stop the animateFollower function from running later if we'd like. We won't use it in this tutorial, but it is a good habit to get into.

Backing up a little, you'll recall that I gave the image a unique ID to make it easier for later. Well this is where it makes things easy. In jQuery, to get an HTML object by its ID, all you have to do is type $('#OBJECT_ID'). So for our image, we'll call it using $('#follower').

So now we just need to make our animateFollower function and have it position the image where the mouse is. And here's the code to do that. As you can see, there really isn't that much to it.

function animateFollower() {
  $('#follower').css('left', relMouseX);
  $('#follower').css('top', relMouseY);
}

And here is our code in action below.

The End

And that's all there is to it. As you can see, with the help of jQuery, it really is very easy to make an object follow the mouse with Javascript. I've used an image in this tutorial, but you can use whatever HTML element your heart desires.

I've created a simple demo of the tutorial for you to download and tweak to your hearts content. Try playing with the frame rates to see how smooth or jerky you can make it move. And start having some mouse following fun on your own sites. This is definitely not a Flash only effect anymore.

Questions or comments are welcome below. Or feel free to contact me directly. Enjoy!

Keeping up with WordPress 3.0

There are a couple WordPress developments which are relevant to the SwfObj plugin.

First of all, with the 3.0 release WordPress now uses the latest swfobject.js file (version 2.2) so SwfObj no longer needs to re-register it. As a result, I've linked it up to the default swfobject.js file in WordPress 3.0+ installs. However, swfobject.js is still included in the plugin for WordPress installations that are using version 2.9 or older. The plugin automatically loads the most appropriate file for you.

Speaking of WordPress 2.9, apparently they fixed a bug that prevented me from using wp_enqueue_script in SwfObj and I didn't know about it until recently. Prior to version 2.9, if you set up WordPress on a secure server, with SSL, then the wp_enqueue_script function caused a bunch of security errors to pop up in the browser. Because of this, I avoided using this function. Now that it is fixed, though, I'm using it, which should make the plugin integrate much smoother with any installation of WordPress. Again, I've taken measures to make it backwards compatible with previous versions of WordPress as well.

A Newer More Powerful Alt

Additionally I've modified the way alt content is labelled in the shortcode. Several users have had problems getting more complicated alt content to load properly using SwfObj. After trying to escape, unescape, quote and otherwise get the complex alt content they were using to work under the original schema I'd set up, I gave up and decided to rewrite it.

To get the code to render properly, alt content now should be placed between opening and closing swfobj shorttags. Here is an example of the before and after.

Before: [swfobj ... alt="<img src='alt_image.jpg' />"]
After:  [swfobj ...]<img src="alt_image.jpg" />[/swfobj]

The change is meant to be simple. The original method is still supported, so upgrading won't break all of the content you've already got embedded in all of your posts. But from here on out I would recommend using the new way to include alt content. It allows you to embed more complicated content to support browsers that don't have Flash. I'm looking at you Apple. The Flash embed button now uses this method to include alt content in the swfobj tags as well.

Always Squashing Bugs

I've also fixed several other bugs that users were kind enough to point out to me. I really appreciate all of the feedback everyone has given for this plugin and especially those of you who have been kind enough to donate to the project. Thank you for all of the great support that is helping to make this plugin even better.

If you have any questions, bug reports or suggestions please send them over.

Thanks again and happy embedding.

I tried looking for a better way online, but couldn't find anything. Because of this, I came up with my own little bash function. And here it is, copied directly from my .bash_aliases file.

# Go up directory tree X number of directories
function up() {
	COUNTER="$@";
	# default $COUNTER to 1 if it isn't already set
	if [[ -z $COUNTER ]]; then
		COUNTER=1
	fi
	# make sure $COUNTER is a number
	if [ $COUNTER -eq $COUNTER 2> /dev/null ]; then
		nwd=`pwd` # Set new working directory (nwd) to current directory
		# Loop $nwd up directory tree one at a time
		until [[ $COUNTER -lt 1 ]]; do
			nwd=`dirname $nwd`
			let COUNTER-=1
		done
		cd $nwd # change directories to the new working directory
	else
		# print usage and return error
		echo "usage: up [NUMBER]"
		return 1
	fi
}

Basically what this function does is allows you to type up X to go up X number of directories. So if I wanted to go up 3 directories, in my bash prompt I would just type up 3 instead of cd ../../...

Additionally, up defaults to going up a single directory. So instead of typing up 1 for cd .., you just have to type up. I've found that I can type up a lot faster than hitting the '.' key twice. For all the time I spend in the bash command prompt, little improvements like this go a long way.

If you think this might help you out, go ahead and copy that function into your .bash_aliases and enjoy.

An explanation

For those of you who aren't content to just copy/paste this function into your .bash_aliases, and actually want to know how it works, here's a breakdown of the code above.

COUNTER="$@";
# default $COUNTER to 1 if it isn't already set
if [[ -z $COUNTER ]]; then
	COUNTER=1
fi

This beginning chunk passes any arguments given to $COUNTER. If there is no argument, then $COUNTER is set to 1. -z checks if a variable is set to an empty string (i.e. null).

# make sure $COUNTER is a number
if [ $COUNTER -eq $COUNTER 2> /dev/null ]; then

This is a great trick I learned from http://grzechu.blogspot.com/2006/06/bash-scripting-checking-if-variable-is.html for checking if a variable is numeric or not. It returns 1 if $COUNTER is a number and 0 if it isn't. In the else block, at the bottom of the script, I have it print a usage statement telling them to provide a number and then I return a 1. Returning a 1 in a shell script means something went wrong. Returning a 0 means the script executed without any problems. If the function gets to the end without any return statements it will default to returning a 0.

So all of that code is for getting the input, setting it to a default and doing some basic error checking. Now onto the meat of this bash function.

nwd=`pwd` # Set new working directory (nwd) to current directory

I think the comment on this line make it pretty clear what we're doing. This is our starting directory and we are going to go up from here.

# Loop $nwd up directory tree one at a time
until [[ $COUNTER -lt 1 ]]; do
	nwd=`dirname $nwd`
	let COUNTER-=1
done

The until statement is just another form of a while loop in bash. Only it loops while the statement is false instead of while it is true, i.e. "until" the statement becomes true. So here we are looping until our $COUNTER variable is less than 1, which would be 0.

Each iteration of the loop we set $nwd to the next directory up. We do this by using the dirname command which chops off the last directory in $nwd. The nice thing about dirname is that once you get to the root directory /, it just returns / without throwing any errors. So we don't need to check if $COUNTER is more than the number of directories in our current path. It will just get up to the root directory and stop there.

And of course we need to decrement $COUNTER each iteration.

cd $nwd # change directories to the new working directory

Finally we change directories to $nwd. In my original script I changed directories inside the until loop. Instead of setting $nwd, I had a cd .. command. However, doing that meant that I couldn't cd - back to the directory I had started from. Changing the script so that it only does the cd command once meant that cd - still works to get me right back to the original directory. By the way, if you don't know about cd -, it's a very convenient command for jumping back to the directory you were previously in.

If you have any questions about this function, or see ways to improve it, please let me know. I may be reinventing the wheel here, but I couldn't find anything online to add this functionality so I thought I'd post my own solution. If you know of a better way to do this, please post it in the comments.

Instead of waiting for everything to be pixel-perfect, I'll be updating the blog here shortly with the changes. That way I can start publishing tutorials again. And instead of forcing everything to be perfect before I upgrade the site, I'll probably continue tweaking things indefinitely from here on out.

Look for some changes, and those promised tutorials soon.

[archives]

No, I really don’t believe that, but there are plenty of people who do.

To make things a little interesting, this year I’m going to focus on recreating several of my Actionscript tutorials using Javascript instead. We’ll see how succesful I am. In any case it should mean that I end up learning a whole lot. Hopefully any readers who come across these tutorials will learn something, too.

Dynamic vs. Static Embedding

Prior to this release, the only option for embedding Flash objects with SwfObj, was statically. This embeds the objects directly into the html rendered by WordPress.

By dynamically embedding them, WordPress instead places a div tag on the page that holds the alternative content only. Once the page has loaded, Javascript replaces this alternative content with the Flash object.

I'll defer you to the official SwfObject project for the advantages and disadvantages of either SwfObject embedding method.

How to embed objects dynamically

By default, SwfObj is set to embed statically. If you would rather use dynamic embedding by default on your site, it is very easy to change the settings. Go to Settings > SwfObj and in "Default Embedding Mode" select "Dynamic Publishing". Save your changes and you're all set.

If you ever want to use the other method for a particular post, you can override the default with the new dynamic_embed attribute. Here are a couple examples.

[swfobj src="..." dynamic_embed="true"] ← (embedded dynamically)
[swfobj src="..." dynamic_embed="false"] ← (embedded statically)

Other developments

In more exciting news, Joen Asmussen the developer behind the Flash Shorttags SwfObject Plugin requested that I merge in features from his plugin so he could discontinue it in favor of SwfObj. As a result, you can also use the [flash] shorttag to embed your Flash objects. I really appreciate Joen approaching me about merging our two plugins. It makes things simpler for everyone out there looking for an easier way to embed Flash on their WordPress site.

I originally developed this plugin for myself because embedding Flash was such a pain. It's been great to see so many other people getting value from it as well. Thanks to your help and suggestions SwfObj continues to improve. Please continue to send any comments or suggestions you may have as you use it on your sites. And if you really want to show your appreciation, feel free to buy me lunch.

Actually, I thought SwfObj was ready for the WordPress upgrade. I use a beta version to try and stay ahead of the curve. The plugin worked fine in my beta so it was good. Then I came across BraveNewCode's plugin checker and discovered the SwfObj plugin was breaking a cardinal rule. FAIL!

Plugin No-No

According to the plugin checker, my plugin was not compatible with the latest WordPress release for the following reason:

Uses 'wp-content' directly in code

Translated, this means I was hardcoding the wp-content path in my plugin, rather than using the WP_PLUGIN_URL constant.

As of WordPress 2.6, the wp-content directory can be located anywhere the site admin wants it to be. By hardcoding this path, anyone who had moved it would get errors when they tried to use the SwfObj plugin. There's a good post on how to correct the wp-content hardcoding problem if you are guilty of it too.

SwfObject 2.2

SwfObject also released an update. In response, I've updated SwfObj to use the latest SwfObject code, version 2.2. Onward and upward we go!

And there you have it, the latest SwfObj build. An updated SwfObject release and some compatibility fixes. All are available now at a WordPress repository near you.

Jump straight to the source code if you'd like to skip the details.

The eye

First you need to create three Sprites for each eye. The pupil, the eye, and the mask for the pupil. The mask for the pupil needs to be identical in shape to the part of the eye where the pupil shows. In my case, the eye and the mask for the eye are identical circles. To make things easier on yourself, the registration point for both the pupil and the eye should be located at the center of each.

For this tutorial, I'll be doing everything in basic Actionscript. However, you are free to use images or MovieClips for your eyes. In fact I'd encourage it, as that will look way better than my goofy circle eyes.

I'm not going to bother pasting my eyeball creation and placement Actionscript here, since it isn't important to the tutorial. If you really want to see it, just download the source code at the bottom of the article.

So now that you have your eye, pupil and mask, place them on the screen wherever you want. Make sure you mask the pupils with the mask object. Otherwise you'll have some weird floating pupil effect. Again, I'm doing all of this in the Actionscript, but you are free to manually place everything on the stage. That's actually the easier way to do it, since you can see exactly where they are going.

It follows me everywhere I go

Ok, enough talk about making and placing eyeballs on the stage. The real reason you are reading this is to see how to get your eyes to follow the mouse. As I said before, the code is really simple.

First calculate the offset between the mouse position and your eye. In this case I have two eyes, so I created the _focalPoint object to compare against. My _focalPoint is located right between the two eyes. This allows both eyes to move together in uniform instead of getting cross-eyed in the middle. The following code goes in your EnterFrame handler function.

// calculate mouse offset
var distx:Number = mouseX - _focalPoint.x;
var disty:Number = mouseY - _focalPoint.y;

Finally we reposition the pupils based on this offset. You will notice that we are scaling down distx and disty. This is so the eyes don't move so far that they are no longer visible. I am using a factor of 25. You may need to change this depending on how wide or thin your stage is and where you position the eyes. Experiment a little to get it just right.

// set the eyes according to the mouse offset
_pupil1.x = _eye1.x + (distx / 25);
_pupil1.y = _eye1.y + (disty / 25);
_pupil2.x = _eye2.x + (distx / 25);
_pupil2.y = _eye2.y + (disty / 25);

Because we set the registration point of both the eye and the pupil Sprites, we can use the eye .x and .y properties to place the pupil. This makes the code a lot cleaner as you can see.

And there you go. Nice rolling eyes going everywhere your mouse goes. Like I said, it's a very easy effect to make once you know how to do it. No complex trig. No fancy classes. Just plain simple Actionscript.

Eye Following Downloads

• Rolling Eyes Actionscript 3.0 source file.

If you have any questions, please let me know either in the comments below or through the contact form. I'd love to see what you guys come up with this. So go set your mouse following eyeballs free. Enjoy!