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.

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!

Polar Coordinate Basics

In Flash, like most other graphics applications, elements are positioned using the Cartesian coordinate system. While you may not be familiar with the name, you are probably familiar with the way it works. Location coordinates are set using x and y positions. “x” represents a horizontal offset from the origin (top left corner of the screen), and “y” represents the vertical offset from the origin.

The polar coordinate system also uses two values, r and θ (theta). “r” is the radial distance from the origin, and “θ” is the angular offset from 0 (a line going straight up from the origin). The following image shows the differences between the two coordinate systems.

That’s all the explaining of the two coordinate systems that I’ll waste your time with here. If you’d like to learn more about them, you can consult Wikipedia.

• http://en.wikipedia.org/wiki/Polar_coordinate_system
• http://en.wikipedia.org/wiki/Cartesian_coordinate_system

So why do we care? When positioning things in Flash, it is usually easier to use the default Cartesian (x, y) system. However, for positioning objects that rotate around a fixed point, the Polar Coordinate system is much more efficient.

For example, here are two ways to move an object in a circle around the screen. One uses Cartesian coordinates and one uses Polar coordinates.

// Cartesian coordinate circle
obj.x = radius * cos(t);
obj.y = radius * sin(t);
t += increment;

// Polar coordinate circle
obj.theta += increment;

As you can see the code is much simpler in the Polar coordinate example. We didn’t have to deal with cos or sin, and we only had to change one value of the object (θ) since the radius of the circle doesn’t change. Are you convinced?

Unfortunately Flash does not directly support Polar coordinate plotting. It’s an easy problem to get around, though. For my work, I’ve created an Actionscript class derived from the Sprite class which adds Polar coordinate functionality. I call it PolarSprite. How’s that for creative! I’m not going to pretend that I’m the first person to have done this, or that my class is the most elegant/efficient one out there. But it works great for me.

How to go Polar

I’m not going to go into the details of my PolarSprite class. You can look at the source code if you really want to see how it works. However, I will quickly show you the translation from polar coordinates (r, θ) to Cartesian coordinates (x, y).

x = offset_x + r * Math.cos( theta );
y = offset_y + r * Math.sin( theta );

The offsets are used to set the origin of the polar coordinate somewhere away from the top left corner of the screen. Usually, you want the center of the rotation to be in the center of the screen when you have an object orbiting around in a circle.

Experimenting in Polar

Now that you know how to translate from the Polar coordinate frame into the Cartesian, the real fun begins. Here is some example AS3 code using the PolarSprite class to make an object move in a simple circle.

public function PolarCircle(){
  // create and initialize the animation
  inc = 0.1; // how much to rotate each frame
  hero = new PolarSprite();
  hero.SetOrigin(250, 50);
  hero.r = 50; // radius of the circle animation
  hero.addChild(new BigHero()); // BigHero is the flying guy graphic
  hero.addEventListener(Event.ENTER_FRAME, this.Rotate);
  addChild(hero);
}

private function Rotate(event:Event):void {
  // rotate the image in a circle
  hero.theta += inc;
}

And there you go. Flying, polar-coordinate Flash fun. For all my talking, it really isn’t that complicated to do. In a later post I’ll go over ways to get some really cool variations in your animations, but for now, here’s a little teaser.

Polar Source

Here are the source files for your downloading pleasure. Feel free to use them however you’d like. And if you really want to make my day, send me a link so I can check out your work. Enjoy!

• Polar Coordinate Actionscript 3.0 source files.
]]> http://orangesplotch.com/blog/tutorial-polar-coordinate-plotting-in-actionscript/feed/ 2 http://orangesplotch.com/blog/tutorial-polar-coordinate-plotting-in-actionscript/ http://feedproxy.google.com/~r/orangesplotch/~3/lvGjTLbBOVY/ http://orangesplotch.com/blog/ciales-that-once-our-eyes-watered/#comments Fri, 27 Feb 2009 16:02:42 +0000 mattc http://orangesplotch.com/blog/?p=164

My New Favorite Album

Ok, not really. I put this together on a dare from a friend to go to this page and do what it said: http://www.buzzfeed.com/peggy/wikipedia-names-your-band. Basically, you generate some random results on a few sites and throw them together into the next “album of the year“. My random amalgamation resulted in this album cover. Why Wikipedia chose Ciales for me, I’ll never know.

Go try out your own luck.

By the way, that big Aviary stamp at the bottom is because I made this in Aviary while taking a five minute break at work. If you are interested, Aviary has some really nice online image editing programs. I assume if you have a paid account, they won’t put their logo on everything you make.

I’m sure I’ll be getting some interesting search referrals on this post.

]]> http://orangesplotch.com/blog/ciales-that-once-our-eyes-watered/feed/ 0 http://orangesplotch.com/blog/ciales-that-once-our-eyes-watered/ http://feedproxy.google.com/~r/orangesplotch/~3/PH-VucJgEg4/ http://orangesplotch.com/blog/feedburner-torched-my-feeds/#comments Fri, 13 Feb 2009 17:50:19 +0000 mattc http://orangesplotch.com/blog/?p=153 I’m not sure exactly how long ago, I’m guessing over a month, Feedburner changed the way their feeds are handled and broke my homepage. It wasn’t until this week that I discovered the problem. And then it took several days to figure out what was going wrong. Now that it is resolved, I thought it might be nice to pass along the fix in case anyone else is having similar issues.

I import my blog feed into my site’s homepage. It seemed like a good idea to put the latest articles there. To distribute my feed, I’ve been using Feedburner because of all the handy features they provide for at no charge. Recently when I went to take a gander at my home page to my horror, the articles section was blank. GASP! Turning on error reporting revealed that my feed parser was getting a “404 Page not found” response from Feedburner. However, when I view the feed in my browser, it showed up fine.

Feed Flame-out

Apparently Feedburner and other Google feed distributors have waged war against bad feed readers that don’t properly cache results. Depending on the number of page views, these readers can end up requesting a feed thousands of times a day. A cached feed need only be updated sporadically throughout the day.

Fight Fire with Fake UserAgents

The way that Feedburner and Blogger decipher whether a feed is coming from a credible source, or from an abusive one is via the User Agent. Anything that doesn’t have a User Agent defined, or that has the User Agent defined as one of the offending services gets the “404 Page not found” error. Regular browsers like Firefox, and Internet Explorer get the feed without any hiccups.

In my case, my original feed parser wasn’t passing a user agent when it made the request, so it got a 404 error. Thinking my parser was broken I switched to SimplePie. SimplePie got the same error which is when I started to investigate further. While SimplePie does use a valid useragent, it has been blacklisted by Google. Apparently a lot of developers using SimplePie run it with caching disabled. To finally get it working I had to remove the SIMPLEPIE_USERAGENT from the useragent string. It is a simple fix in SimplePie if you know to do it. I just added the following line as explained in the SimplePie API.

$feed->set_useragent('Mozilla/4.0');

Despite endorsing these sneaky habits, I’d like to go on the record as supporting being a good netizen and caching all of your external sources locally. Your site will be faster because it won’t have to reload the feed each time a user visits the page, and you won’t be burning up someone else’s bandwidth as well. It’s a win-win.

Depending on the feed parser you are using, you may have a more difficult time setting the useragent to properly bypass this issue. Here are a couple of other links that may help.

http://blog.obishawn.com/2008/06/feedburner-404-error.html

http://weblogs.asp.net/jstengel/archive/2008/07/24/useragent-fix-for-the-rsstoolkit-2-0-0-0.aspx

And there you have it. Now you have to tools to fix your broken feed requests. At least until something else breaks.

Final Flame

So right before publishing this, I find out that Feedburner is about to burn out completely. Feb 28th is the final day to move your feeds over to Google. After that your feed links will return a 404 File Not Found error. More info on the move here: http://www.dailyblogtips.com/time-to-switch-from-feedburner-to-google/ I’ll be transferring my feed right now.

]]> http://orangesplotch.com/blog/feedburner-torched-my-feeds/feed/ 0 http://orangesplotch.com/blog/feedburner-torched-my-feeds/ http://feedproxy.google.com/~r/orangesplotch/~3/0T5H84Lr954/ http://orangesplotch.com/blog/an-experiment-in-greed/#comments Fri, 30 Jan 2009 19:43:54 +0000 mattc http://orangesplotch.com/blog/?p=143 So for the past month-ish I’ve been trying out a little experiment. I added an extra ad block to my articles page to see if I suddenly saw a dramatic increase in advertising revenue on the site.

I was hoping that advertising might help offset some of the costs of hosting this website. I’m not paying too much to host it and it wouldn’t take that much advertising revenue to pay for it. Why not give it a try?

The Scientific Method

Being an experiment, I’d better pull out some of my 6th grade science reports to make sure I document this properly. Feel free to correct me on my methods. Especially if you are currently in elementary school and therefore have the scientific method fresh in your young sponge-like minds.

Hypothesis

I’ve always had text ads in the sidebar and recently I’ve started to see a trickling of change come in each month as a result. My very official hypothesis is the following:

Adding an additional adblock in the main content area of my site will result in more advertising revenue.

Seems like a logical assumption to me.

Procedure

I added a new advertising block to the main content column of my site. Admittedly, I’m not a big fan of ads, so I tried to place the new block as discretely as possible. It slipped into the related entries block just below each article.



The block is in a good contextual location where users are likely to look after finishing an article. Ads here lead the user to content related to the page they are on and thus enhance the user experience. Like I said, I’m not a big fan of ads, so if I am going to use them, then they are going to be as un-annoying as possible. A bit of an oximoron, I know.

Observations

• Total advertising revenue from January 1st to January 29th: $0.01.
• Total articles posted from January 1st to January 29th: 0.
• Number of American presidents inaugurated from January 1st to January 29th: 1.

Conclusion

It’s been a bad month.

There are a lot of things I could blame the lack of advertising income on. The continuing global economic collapse. The fact that more Presidents have been inaugurated than I’ve posted articles this year. Either way, that extra ad block isn’t pulling its weight. And it’s annoying.

Unless there is a sudden spontaneous spike in revenue, he is going on the chopping block. Who or what will take his place? Perhaps Mr. Empty-light-blue-box will get his spot back. He certainly looked better there.

This concludes our experiment.

]]> http://orangesplotch.com/blog/an-experiment-in-greed/feed/ 0 http://orangesplotch.com/blog/an-experiment-in-greed/ http://feedproxy.google.com/~r/orangesplotch/~3/P9EQCjKFmAQ/ http://orangesplotch.com/blog/swfobj-07-ready-in-time-for-the-holidays/#comments Thu, 18 Dec 2008 16:07:26 +0000 mattc http://orangesplotch.com/blog/?p=123 To get the holidays rolling right, I’ve just updated SwfObj. Actually this release is in response to the changes in media handlers with WordPress 2.7. But it still sound nicer to say it’s just for the holidays.

From URL

The main change in 2.7 that necessitated this release is the “From URL” tab in the media upload/insert popup. This requires a new handler in the plugin. I also took the time to add all of the features available for uploaded swfs to swfs linked to using the “From URL” tab.

Holiday Bugs

There are always bugs to be squashed and this release includes a few of fixes as well. One to note is that the alt content is no longer automatically wrapped in <p> tags. This means you can put it in whatever wrapper you’d like.

2009 is coming

I do have some plans for upgrading the project in ’09. The major update I’d like to make is to enable dynamic embedding of swfs using SwfObject as an alternative to static embedding. I’ve had a couple of requests for this feature so I know others are looking for it, too.

If you have anything you’d like to see added/improved in ’09 please let me know.

Thanks again to all who have provided feedback and support. Hope everyone has a happy holiday season!

]]> http://orangesplotch.com/blog/swfobj-07-ready-in-time-for-the-holidays/feed/ 4 http://orangesplotch.com/blog/swfobj-07-ready-in-time-for-the-holidays/