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/swfobj-07-ready-in-time-for-the-holidays/ 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-version-06-released/ http://orangesplotch.com/blog/swfobj-version-06-released/#comments Mon, 17 Nov 2008 21:17:36 +0000 mattc http://orangesplotch.com/blog/?p=113 get the latest version.]]> A new version of SwfObj just shipped out of the factory today. This release fixes a couple of bugs that were recently brought to my attention by users like you.

Taming the big bully

Apparently, unknown to me, this plugin has been inserting swfobj shortcode whenever a media object is imported into a post from the Media Library, whether it is a Flash object or not. That kind of over-aggressive attitude is not welcome around here. As a result I added a media check to the import function. Now the swfobj shortcode is only inserted when embedding Flash objects. I also sent the plugin to time-out and told him he needed to apologize to everyone for his bad behavior.

Class-itis

A minor bug fix that most people probably won’t notice involved cleaning up the class attribute. It was being added to both object tags as well as being placed in a defunct param tag. The class attribute is now only applied to the outer object tag and no defunct param tags to speak of.

I’d also like to take this chance to thank all of you who have sent in feedback both good and bad on this plugin. Thank you for taking the time to contact me so I can continue to improve the SwfObj plugin. And a very big thanks to the generous person who recently sent me a donation as well!
Please continue to send any bug or feature requests you have. All feedback good and bad is appreciated.

]]> http://orangesplotch.com/blog/swfobj-version-06-released/feed/ 4 http://orangesplotch.com/blog/flash-player-10/ http://orangesplotch.com/blog/flash-player-10/#comments Mon, 10 Nov 2008 16:50:43 +0000 mattc http://orangesplotch.com/blog/?p=110 I turned on my computer today and was greeted with a Flash Player update request. Being the curious fellow that I am, I went and checked the release notes and made a very pleasant discovery.

Flash Player 10 supports keyboard inputs in fullscreen mode!

Many of you may not be aware, but when Flash originally added support for fullscreen mode in version 9, they bizarrely blocked everything but mouse inputs when a user switched to full screen. This meant that all interactivity had to come from the mouse. They stated it was a security measure, which may be true, but seemed a bit excessive. It was a real downer for me seeing the possibilities of what could be done in fullscreen mode, and not being able to do them because of the limitations.

But now that is no more. I know I’m not the only one excited about this feature, so get ready to see all of your favorite games now available in fullscreen mode. And hopefully Adobe’s fears of secret fullscreen popups stealing people’s identities won’t come to fruition. We’ll have to wait and see how this feature ends up being used and abused over the next few months.

Update: Guess I should read the fine print. While this does bring support for arrow, shift, spacebar and enter keys; it still blocks input from what they are calling “print” keys. Print keys apparently are all of the letter/number keys on the keyboard. Better than nothing, but still frustrating. No support for text blocks in fullscreen mode. Oh well.

There are some other great features included, so if you are that kind of nerd, go check out the release notes yourself. (WARNING: the notes are in a large pdf that showed up in Chinese in my browser, so you may want to download it rather than viewing it in your browser)

]]> http://orangesplotch.com/blog/flash-player-10/feed/ 0 http://orangesplotch.com/blog/swfobj-version-03-released/ http://orangesplotch.com/blog/swfobj-version-03-released/#comments Fri, 23 May 2008 20:28:19 +0000 mattc http://orangesplotch.com/blog/?p=93 Last night I quietly released version 0.3 of the SwfObj WordPress plugin. The plugin is making steady progress towards an official 1.0 release. I’ll touch on the new features, but try to keep this post short so you can enjoy your Memorial Day weekend.

Upgraded interface

If you use the media toolbar to insert Flash objects into your posts, you will now find a lot more options available for customizing the embedded object. These include width, height, alignment, id, class, allowfullscreen, etc. Any options filled in will be included in the auto-generated shortcode when the object is inserted in the post.



In an effort to keep the library interface clean and practical, the advanced options are tucked away by default. If you want to use them to embed an object, click “Show Advanced Options” and they magically appear. The interface is still a bit cluttered, but its the best I’ve got for now.



The webpage

SwfObj’s official web page also got an upgraded look. It has two fat download and donate buttons. I also added a “recent news” blurb, so you can quickly see any new posts about the plugin. Pretty exciting. Ok, not really.

The future

There is still more to be done on SwfObj. Not all of the Flash parameters are supported yet. The code could use some polishing. And lots of testing and bug fixing. If anyone has any problems or feature requests, please let me know.

Hopefully I’ll get some translations in as well. Any takers?


Updates probably won’t be as frequent as the last two releases, though. Most of the major features are in now. Rather than playing with plugins all the time, I think it’s time to start doing some actual Flash.

]]> http://orangesplotch.com/blog/swfobj-version-03-released/feed/ 7 http://orangesplotch.com/blog/swfobj-plugin-unleashed/ http://orangesplotch.com/blog/swfobj-plugin-unleashed/#comments Tue, 20 May 2008 07:44:12 +0000 mattc http://orangesplotch.com/blog/?p=92 It’s been almost one week since I released the SwfObj plugin for WordPress. In that time its been downloaded 65 times and 2 people have contacted me about it. In my opinion that’s not too shabby. So now what?

SwfObj is overdue for an overhaul. As I stated in my original release announcement, the purpose of this plugin is to take the pain out of uploading and embedding Flash media in WordPress. Right now it makes it easier to embed content, but you still have to upload the Flash files to the server manually, figure out their URLs, and then type out the shortcode. This falls far short of being painless.

Today SwfObj is taking a step in the right direction. Expanded features now make uploading and embedding Flash content into WordPress just a little easier. Still not painless, but closer.

Upload Flash directly

When you install and enable the latest SwfObj release, a new media button will appear in your post editor. This allows you to upload new Flash content to your WordPress Media Library for embedding. Additionally you can view all of the Flash content currently in your library and insert it into your post. Simply click on the “Media Library” to see all of your Flash objects.

Inserting Flash content from the library injects the proper shortcode into the post or page you are editing. Currently it only embeds the “src” and “alt” properties. Any additional properties such as dimensions have to be added manually. Future releases will auto-embed more properties.

Multiple language support

This release also adds international support for the SwfObj plugin. If anyone wants to translate this into their native language, please do. I’d love to have this available in several languages.

Try it out

If you use Flash a lot in your posts and are looking for an easier way to upload and embed them, this plugin may be something you’ll want. Feel free to download the latest version of the SwfObj plugin and try it out. Let me know if you have any questions or comments. I’d love to hear about any features you’d like to see, or problems you have encountered while using it. All feedback, good and bad, is welcome.

]]> http://orangesplotch.com/blog/swfobj-plugin-unleashed/feed/ 1