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.

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)

WordPress hooks

WordPress has conveniently added hooks to its core code, allowing developers the ability to modify content and add functionality without having to hack WordPress source files. These include filters and actions. For these tutorials we will be using both the ‘add_filter‘ and ‘add_action‘ functions.

If you are unfamiliar with WordPress’s hooks, I’d recommend reading their API documentation first.

Creating a media tab

When viewing media in WordPress’s media library, there are tabs for images, video, and audio. I am going to add a “Flash” tab to the list. You can add whatever media tab you require.

Adding file type categories is actually quite easy to do. To add a tab, you first need to know the MIME type of your category. Flash files (.swf files) use the ‘application/x-shockwave-flash‘ MIME type. If you don’t happen to know the MIME type for your files, upload one using the WordPress media button. Once it is uploaded, WordPress displays its type right under the file name.

The WordPress hook to add a category tab to your library is the ‘post_mime_types‘ filter. WordPress uses an array called $post_mime_types to store all of the MIME types it lists in the Media Library. To add a new media type, you simply need to add it to this array. The following code adds a “Flash” media category that lists all .swf files in the library.

function modify_post_mime_types($post_mime_types) {
    $post_mime_types['application/x-shockwave-flash'] = array('Flash', 'Manage Flash', 'Flash (%s)');
    return $post_mime_types;
}

add_filter('post_mime_types', 'modify_post_mime_types');

The array that is stored in the new $post_mime_types entry holds the following values

1. The title of the media type (’Flash’).
2. The title to display when viewing this category in the Media Library (’Manage Flash’).
3. And the title to put on the tab in the Media Library (’Flash (%s)’). The %s is replaced by the number of items in this category.

Extras

WordPress allows you to add both general and specific MIME types. You can add an ‘application‘ type which will show all objects whose MIME type starts with ‘application/‘. To only show a specific file type, use the full MIME type, such as ‘application/x-shockwave-flash‘. Make sure if you are declaring something specific, that you use the full MIME type, not just the value after the ‘/‘.

Here are a few file types you may be interested in.

• PNG: image/png
• PDF: application/pdf
• ZIP: application/zip

You can also remove media types from the list if you’d like. To do this, use the unset function. Here is an example that removes the ‘audio’ category from the Media Library.

function modify_post_mime_types($post_mime_types) {
    unset ($post_mime_types['audio']);
    return $post_mime_types;
}

And there you have it. Total control over the media types listed in WordPress using the WordPress API. In future posts we’ll discuss how to customize uploading, editing and embedding media into your posts. Please post any comments or questions you have.

If anyone has a better name for the “WordPress 2.5 Media API tutorial series” please let me know. That’s a monster to type out.

Coming Soon to a Feed near you

The plan is to make these short and simple. Each one will highlight one or two API hooks available in WordPress and how they work. The first in this series will be released later this week. If you are interested, subscribe to the feed and you’ll be ready to go. Or just check in later this week

If you have any questions or requests, please let me know. Feedback will drive the development of future articles. And as always, donations are very much appreciated.

I am also looking for sponsors of this series if anyone is interested. All the articles will be published freely here irregardless of whether I get any funding. It doesn’t hurt to ask, I hope.
If interested, contact me for terms.

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.

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.

Embedding Flash was a pain

As you may have noticed, I embed a lot of Flash files into my blog posts. Embedding Flash content into WordPress posts is a tedious process at best. There are several options and parameters, all needing to be entered correctly or the object won’t display properly. Add to that the complexity of multiple browser support and you’ve got quite a mess, especially if you are concerned with valid XHTML markup.

Up until this point, I’ve been copy/pasting the object code into my posts. First I ftp the Flash file onto my server. Then I pull up a past post that had Flash in it. Then I copy that code to my new post, and edit the items that have changed such as the src and the object dimensions. Finally I save the post and preview it to see if I entered everything correctly. This takes way longer than it should.

Some recent developments

Last year I came across the SwfObject project. It is a great tool to simplify embedding Flash content. The markup is XHTML compliant, but still works most browsers, including IE6.

Flash forward to last month, when WordPress 2.5 was released. The new release includes the handy shortcode feature as well as improved media support with a nice API.

Flash magic voodoo

Combine the two and for me, you’ve got something magical. Assuming I’m not the only person who embeds heaps of Flash content into their posts, I decided to put together this new plugin: SwfObj.

While there are still a lot of features in the works, this initial version has significantly simplified the process of embedding Flash into my posts. A simple shortcode, such as the following, is all the markup I need to embed them. Here is the new shortcode, and the resulting embedded object.

[swfobj src="http://orangesplotch.com/blog/wp-content/uploads/2008/04/constellation.swf" width="500" height="196" allowfullscreen="true" required_player_version="9.0.0"]

Admittedly this shortcode example isn’t that short. But it sure is a lot shorter and easier to read than the resulting embedded object code.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="swfobj_0" width="500" height="196">
  <param name="movie" value="http://orangesplotch.com/blog/wp-content/uploads/2008/04/constellation.swf" />
  <param name="allowFullScreen" value="true" />
  <!--[if !IE]-->
  <object type="application/x-shockwave-flash" data="http://orangesplotch.com/blog/wp-content/uploads/2008/04/constellation.swf" width="500" height="196" allowFullScreen="true">
  <!--[endif]-->

    <p>The Flash plugin is required to view this object.</p>
  <!--[if !IE]-->
  </object>
  <!--[endif]-->
</object>

For more details on the plugin, visit the shiny new SwfObj WordPress plugin homepage. Feel free to download it and use it on your own site. Any feedback is welcome.

Yesterday, while driving across town with my wife, we engaged in a little conversation. It’s something we like to do to pass the time. Usually I can’t remember much of anything that is discussed during these activities. I could try to blame this on the fact that I am concentrating on driving. However, that theory fails to explain why I have the same time recalling conversations that have happened when I was sitting on the couch at home.

However, yesterdays discussion is still replaying in my mind today. Even stranger, I think my wife’s comments might actually motivate me to take action. This is very odd indeed, when considering the proportion of times she’s asked me to clean up my mess to the times I’ve cleaned up my mess.

So what was it that she said? I believe her exact words were:

No offense, but your site is kind’a boring and ugly. Maybe you should put some flowers on it.

While there won’t be any flowers added, there will be some changes coming to the site. There are a lot of things I don’t like about the current layout. I’ve added a lot of content since it was first pieced together and most of that is hidden away in the archives. That and it’s “kind’a ugly”.

So if you notice things moving around, or colors changing randomly, now you know why. I’ll be hacking things out spontaneously over the next little while until I get the site to a place I’m happy with. At least until my wife stops mocking me.

Maybe I will put some flowers on it.

The first star I see tonight

First we need to make our black sky. This is going to be a black rectangle that covers the entire area of the Stage. We’ll draw this using a Sprite, which is a type of object that can hold graphics, such as black rectangles. Here is how simple it is to make night.

bg = new Sprite();
bg.graphics.beginFill(0);
bg.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
addChild(bg);

The last line adds the bg Sprite to the Stage. This is what triggers the Flash player to actually render the object. Until you put this line in, bg is invisible.

Next we are going to need to draw a star. The stars are just tiny circles, so there isn’t too much to drawing them. Make the star by creating a new Sprite, drawing a white circle in it with a 2 pixel radius, positioning it, then adding it to the Stage so it will be displayed. I’ve made the positioning random so every time you run it, your star will be in a different place. The following Actionscript is all we need to dynamically draw our star.

var star:Sprite = new Sprite();
star.graphics.beginFill(0xFFFFFF);
star.graphics.drawCircle(0, 0, 2);
star.x = Math.random() * stage.stageWidth;
star.y = Math.random() * stage.stageHeight;
addChild(star);

In all of the following examples, you can click on the image to regenerate it.

Here is the resulting dynamically created star.

The Milky Way

One star is nice and all, but what we really want is a whole sky full of stars. The Universe has bajillions of stars, but for this tutorial we’ll just make 100. The nice thing about doing this in Actionscript is that we can make 200 stars just as easily. All you need to do is change one number in the code.

To make lots of stars, we put the star creation in a for loop and run it as many times as we want stars. It may surprise you just how easy it is to make lots of stars now that we know how to make just one. Here’s the code with just two extra lines.

for (var i:Number = 0; i<100; ++i) {
    var star:Sprite = new Sprite();
    star.graphics.beginFill(0xFFFFFF);
    star.graphics.drawCircle(0, 0, 2);
    star.x = Math.random() * stage.stageWidth;
    star.y = Math.random() * stage.stageHeight;
    addChild(star);
}

And you’ve got a starry sky.

Now they say variety is the spice of life, but all of these stars are exactly the same, just in a different location. What we want to do now is make them all different sizes. I am going to vary mine between a radius of 0.25 and 1.5, but you can feel free to make yours whatever size you want. Changing the size of the stars to be random is again, very easy. We just need to change one line of code.

for (var i:Number = 0; i<100; ++i) {
    var star:Sprite = new Sprite();
    star.graphics.beginFill(0xFFFFFF);
    star.graphics.drawCircle(0, 0, ((Math.random() * 1.25) + 0.25));
    star.x = Math.random() * stage.stageWidth;
    star.y = Math.random() * stage.stageHeight;
    addChild(star);
}

Twinkle, twinkle little star

To make this starry sky even better, you can add a little twinkle effect. I’ve been playing around with this quite a bit to try and get just the right effect. You want them to flicker, but not too much. It is a sweet spot between not being able to notice the twinkle, to it being way too obvious and annoying.

The effect is by adding an ENTER_FRAME event handler to each star Sprite. The ENTER_FRAME event handler is a function that is called every frame of your movie. To make the stars twinkle I randomly change their their alpha and size very subtly. Also, I keep the value within a certain limit so that the stars don’t disappear on me. Play around with the effect on your own to find your sweet spot.

public function Twinkle(event:Event):void {
    // get the current star to tweak
    var _self:Sprite = Sprite(event.currentTarget);

    // change the alpha and size of the star
    _self.alpha += Math.random() * 0.02 - 0.01;
    _self.scaleX = _self.alpha * 0.5 + 0.5;
    _self.scaleY = _self.alpha * 0.5 + 0.5;

    // do some bounds checking
    if (_self.alpha < 0.5) _self.alpha = 0.5;
    if (_self.alpha > 1) _self.alpha = 1;
}

To infinity and beyond

You can use this wherever you want to throw some stars into a scene. If you don’t want the stars, or the night sky to cover the entire stage, simply change the bounds from the stage.stageWidth and stage.stageHeight to whatever you want them to be. Or put other elements on top of this, like mountains, or a cityscape or whatever you feel like. The possibilities are as numberless as the stars (sorry, that was really pathetic).

Feel free to download the full source files used to make this. Included is a bonus full screen enabled version. Now that’s exciting!

• Starry Night Actionscript 3.0 source files.

And that’s the end of our tutorial. Hope you enjoyed your stay. Feel free to leave any comments or questions you have. Thanks!

The great thing is how easy it is to do. Here is a handler that turns fullscreen mode on and off.

private function FullScreenSwitch(event:Event):void {
  if (StageDisplayState.FULL_SCREEN == stage.displayState) {
    stage.displayState = StageDisplayState.NORMAL;
  }
  else {
    stage.displayState = StageDisplayState.FULL_SCREEN;
  }
}

There are a few caveats to the system and one of them is really frustrating.

First: fullscreen mode can only be set by the user interacting with something, such as clicking with the mouse. Fullscreen mode can’t just be dynamically turned on without any user interaction. Fair enough. I think I’d be pretty ticked if web sites had banner ads that suddenly went fullscreen on their own.

Second: a little text blurb shows up when the video switches to text mode telling the user they can switch it off by hitting the Escape key. This fades away after a couple of seconds. Again, I think this is great. You don’t want someone who accidentally makes a Flash video full screen to not be able to get out of it.

Third: and very annoyingly, all keyboard inputs are blocked in fullscreen mode. What!?! Apparently Adobe thinks it is a huge security risk to allow keyboard input while in fullscreen mode. I don’t understand this at all, and it totally ruins most of the great ideas I had for implementing fullscreen mode. Can you imagine how much cooler games would be if they were in fullscreen. Too bad! Unless they are mouse only games, you can’t play them in fullscreen. Maybe that’s why I hadn’t heard of this until recently. Better than nothing, though.

For more detailed info on how it all works, check out this fullscreen tutorial over at Adobe.