orangeSPLoTCH » Flex

SwfObj Version 0.9.2

mattc — Sat, 05 Dec 2009 05:17:48 +0000

Big changes are finally here in SwfObj land. Thanks to the encouragement of fantastic SwfObj users, such as yourself, I’ve mustered up the motivation to implement what I consider to be a major feature. Dynamic Embedding of Flash objects is finally available with SwfObj.

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.

Flash Tutorial: Eyes Following the Mouse

mattc — Tue, 21 Apr 2009 13:59:25 +0000

Have you ever seen those paintings where the eyes are always looking at you no matter where you stand. Well, sorry, this tutorial won’t teach you anything about painting. This simple Flash tutorial goes over how to make a pair of eyes follow the mouse using Actionscript.

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!

Tutorial: Polar Coordinate Plotting in Actionscript

mattc — Fri, 17 Apr 2009 14:52:26 +0000

A long, long time ago someone requested that I post a tutorial based on some polar coordinate experiments I was doing. I think it’s about time to get this post published.
As usual, if you are just interested in the code, you can skip straight to the source.

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.

SwfObj Version 0.6 Released

mattc — Mon, 17 Nov 2008 21:17:36 +0000

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.

Flash Player 10

mattc — Mon, 10 Nov 2008 16:50:43 +0000

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)

SwfObj version 0.3 released

mattc — Fri, 23 May 2008 20:28:19 +0000

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.

SwfObj Plugin Unleashed

mattc — Tue, 20 May 2008 07:44:12 +0000

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.

Actionscript Tutorial: Starry Night

mattc — Tue, 29 Apr 2008 14:11:27 +0000

This is a very basic Actionscript tutorial that will show you how to make a sky full of twinkling stars. Everything for this tutorial will be done in Actionscript, using Actionscript 3.0. It is targeted at novices, but hopefully pros and newbies alike can get something from it. Make a wish on the first star you see and maybe your dreams will come true.

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!

Flash Fullscreen Fun

mattc — Wed, 23 Apr 2008 20:09:56 +0000

While delving deep into the mysteries of Actionscript 3.0, I came across something that really made me smile. Apparently the Flash Player 9.x allows for FullScreen mode. I must have been living in a cave for the past couple of years. How have I never seen this before?

Click anywhere on the video to go to fullscreen mode.

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.

Flash Tutorial: Elastic Object Follower

mattc — Thu, 17 Apr 2008 14:55:04 +0000

In this tutorial I will show you how to make one object follow another object in Flash. Then I’ll show you how to make the effect more elastic. It’s up to you to figure out an application for it. I use it a lot to get things to follow the mouse around.

The following scripts are written in Actionscript 3.0. However, I’ve also included a .fla done in Flash 8 in for anyone who wants to see it in Actionscript 2.0. If you just want the files, feel free to jump down and download them now.

We’re following the leader!

So first we need to get one object to follow the other object around. Having a two year old son and a dog, I have a lot of experience with things following you. In these examples, the object follows the mouse pointer.

Getting an object to follow the mouse is fairly simple in Flash. In fact, you can just use the startDrag() function, but that sticks the object to the mouse. We’d like it to follow at a distance, so we’ll need to make our own function to do that. This function will be an EnterFrame event handler.

Rather than documenting the entire script here, I’ll just focus on where the real action is. The full Actionscript files are available for download at the end of the article.

private function FollowMouse(event:Event):void {
    // follow the mouse, but not too closely
    distx = follower.x - mouseX;
    disty = follower.y - mouseY;
    follower.x -= distx / 10;
    follower.y -= disty / 10;
}

Basically, all we do here is figure out how far away the follower object is from the mouse. Then we move the object a certain amount closer. Here we are moving 10% closer each frame. And here is the resulting mouse following effect.

Mouse Follower

Now add some elasticity

Now that the object is following, let’s add a little personality to the effect. I know when my son is following me around, he rarely makes a straight path directly to me, nor is he always able to stop once he’s caught up.

Rather than directly moving towards the mouse, we’ll use momentum to insert some elasticity to the objects response. This makes it appear that the object is attached to the mouse by a rubber band. And it is surprisingly easy to do.

private function FollowMouse(event:Event):void {
    // follow the mouse in a more elastic way
    // by using momentum
    distx = follower.x - mouseX;
    disty = follower.y - mouseY;
    momentumx -= distx / 3;
    momentumy -= disty / 3;

    // dampen the momentum a little
    momentumx *= 0.75;
    momentumy *= 0.75;

    // go get that mouse!
    follower.x += momentumx;
    follower.y += momentumy;
}

You will notice that we had to dampen the momentum a little. This keeps it from bouncing indefinitely off the screen. The number you use here needs to be between 0.0 and 1.0. Anything else and you’ll have flubber that shoots off the screen, never to return.

The closer this value is to 1.0, the faster your object will move and the more it will swing around. The closer it is to 0.0, the slower it will move and the less it will overshoot its target. Experiment with it a bit to get the effect you want. You can also speed or slow the object by changing the number that you divide the distance by when adjusting the momentum.

Elastic Mouse Follower

Follow another object

So now you can follow the mouse. What about when you want to follow something else? That’s what makes this script so simple, just replace mouseX and mouseY with the x and y of the object you want to follow and you are set.

distx = follower.x - leader.x;
disty = follower.y - leader.y;

Download the fun

Please feel free to leave any comments or questions you may have about this tutorial. That’s what the comments are all about.