If you have no idea what the title of this blog post is referring to, check out this page which explains the idea. It's some pretty simple triginometry.

For those of you who've ever tried (like me) to do this in flash (or I imagine any programming language), you probably will have run into problems using code like this:

rotation = Math.atan(y / x) / Math.PI * 180;

This line is basically just converting a unit vector into an angle which is used to rotate a sprite. Simple enough right? Well check out the output:

Two of the arrows are fine, the other two are pointing the wrong way.

The solution is to change the code to use atan2 as follows (passing in the y & x, without doing any division):

rotation = Math.atan2(y, x) / Math.PI * 180;

Which fixes the output as below:

This also means you don't have to worry about divide by zero errors.

This may seem pretty obscure, but one day you'll be doing this and you'll remember this post and thank me ;)

If you've ever experienced this one, there's an obscure reason: the bandwidth profiler.

If you have the bandwidth profiler turned on when you publish in Flash, stage.stageHeight will be 100px less than it should be.

?_?

If you've been working with Flash for a while, you will have probably come across this one. Some fonts will be fine when they're being used in Photoshop, but mysteriously won't be available in the droplist when you're trying to use them in flash. Normally this happens when you're trying to use a couple of different weights of the same family.

The reason this happens is because of the internal font names. Basically, embedded into all font files are a few different pieces of meta information, including a couple of different names. Photoshop is pretty smart about distinguishing between different versions of the same font, but Flash is not. So sometimes to get a certain font to work in Flash, you need to edit these internal names.

How do you do it?

Step 1: You need an application that can edit font information. For years I've used Altsoft FT master to do this, but it's a bit pricey, and I think a cheaper alternative is Typograf.

Step 2: Open Typograf and browse to the correct font.

Step 3: Right click the font and choose properties. 

Step 4: Edit all four of these to use the same exact text (copy and paste it from the Postscript name for example)

• Font Family
• Full Name
• PostScript name

I've done a bit of testing here, and you'd think that it would be easy to narrow it down to which particulay internal name Flash uses. Unfortunately that's not the case, so edit all of the names and make them all the same.

Step 5: Save the file (as a copy!)

Step 6: Uninstall the original font

Step 7: Re-install the new font file

Step 8: Get back to your flashing

Note: this guide is for PC, I'm not sure if the problem exists on the Mac, and if it does, I'm not sure if this will fix it ;)

This is awesome:
http://www.adobe.com/devnet/flash/articles/timelinewatcher.html

Basically, instead of sticking this on frames in the timeline:

dispatchEvent(new Event("animationHasFinished"));

You can just listen for frame label events:

timelineWatcher = new TimelineWatcher(this);
timelineWatcher.addEventListener(TimelineEvent.LABEL_REACHED, handleTimelineEvent);

I'm so excited I don't even mind that this long line of code is breaking the formatting of this blog!

Often when you're using video in flash (embedded in the timeline), you'd like to be able to do one of these things:

1. Play it backwards, using prevFrame() for example or
2. Jump to an arbitrary frame using gotoAndStop(frame)

Unfortunately this isn't normally possible. This is because when video is encoded, it's not really storing every frame, it's storing the difference between frames. So frame 1 is stored in total, but frame 2 is really storing just the pixels that are different between frame 2 and frame 1, frame 3 is storing the differences between 2 and 3 etc.

The problem with this is that it's an inherrently one directional process - if you want to play a video backwards, the information isn't available. The solution? When you import a video into flash (by dropping it into the timeline) you can change your import settings to make it possible to play backwards.

If you set the "Key frame interval" to 1 (2 is also sometimes good, experiment for yourself for best results) playing backwards is now possible.

The benefits are:

• The video will look better quality when stopped on any frame
• The video can be played in reverse
• You can jump to any frame in the video

The drawbacks:

• There's only one but it's significant - massive increase in filesize! Often this is prohibitive :(
  

Check out the example and happy flashing!

If you want to use a mask that isn't a regular "on/off" mask (for example you want to use a gradient as a mask) here's how you do it in flash:

You have to set both the mask and the thing you're masking to use bitmap caching. You also need to set the mask with code (not using a mask layer in the IDE).

So some example code would be:

sprite1.cacheAsBitmap = true;
sprite2.cacheAsBitmap = true;
sprite1.setMask(sprite2)

Note: this requires version 8. Also note, this picture actually has no relevance to this topic, I just thought it was cool.

Bounce.easeIn getting you down? Strong.easeOut not quite right? Well there are a couple of ways to use completely custom easing curves with TweenLite.

The first is the official way, which is great ... the problem is of course that it costs money. And we're in the middle of a financial crisis over here!

So this guy has also written his own way of doing it. You draw the curve using his flash app (terrible interface, but it works) and then use the resulting array of bezier points with the ZigoTween class.

Here's a code example, and the files you need are attached to this post. Happy easing!

var zt:ZigoTween = new ZigoTween([{Mx:0,Nx:0,Ny:-1000.00000,My:0,Px:500,Py:500},{Mx:500,My:-500}] );
TweenLite.to(mc,1,{x:200,ease:zt.ease});

ZigoTween.zip (976.00 bytes)

rokkan_bezierdefiner.swf (31.75 kb)

Most of the experiments I make these days have something to do with either fractals or Box2D, so I had this brilliant thought on the weekend ... how about fractal trees in Box2D! Ok, maybe it's not that brilliant.

It's pretty straightforward demo right now, but there's something cool about seeing physics-ey trees swaying realistically (as there is with most stuff in physics engines).

If anyone's interested in the source I'll release it at some point. Hopefully it'll end up being used as part of a game that I have in mind, look out for more updates :)

Great new game I came across last night ... very simple gameplay but speeds up really fast. I love games that make me feel like I'm achieving the impossible, almost like I can't believe I'm keeping up with the game.

You might have seen the 2D flash version of Portal that came out around the same time that the full game from Valve did. Well I would say that someone over at Dice did, because here's the exact same thing for Mirror's Edge (a recent Parkour based FPS).

Interesting idea, I guess there's no better way to market a game than ... another game! Obviously a huge amount of effort has gone into making it, but I guess in terms of traditional marketing spend for these things it's a drop in the bucket. There's a lot of money being made selling games these days...