Flash loves whole pixels like street punks loved hippies - not a lot.

So what can we do when Flash insists it puts all our pixel-perfect image assets on half pixels, rendering their movements wonkier then a drunken unicyclist? 
We could go through every keyframe and round their x and y positions to the nearest whole number in the properties panel, or (as I discovered today) we could just click a single button. This glorious flash extension works on multiple movieclips at once, can round width & height, x & y, or both!

Every so often when I'm working amongst my fellow flash developers, I'll notice something strangely... inefficient.

A poor sod manually aligning a movieclip to 0, 0, or turning on bitmap smoothing via a series of unnecessary menus, or even setting a movieclips' alpha to 0 with a (gasp) slider.

It's at this point I tap them on the shoulder and mention a plugin which has changed the way I work every day; Queasy Tools. 

This baby does a lot more then mentioned above, it's great for setting custom easing in one click, copy and pasting positions of movieclips, converting text to all caps or all lower case - the list goes on. So if you don't use it already, do yourself a favour and grab it here: 

http://ajarproductions.com/blog/2008/07/15/queasy-tools-panel-v150/

This pesky little problem has been niggling away at me for months, so I finally decided to investigate the problem and find a solution.

It appears as though this is only a problem in Firefox 3+ when you set the 'wmode' parameter to transparent. Now I'm no browser compatibility expert so I'll take someone else's word on this but Firefox renders and handles the default style of the outline property of the object tag differently to other browsers.

Solution

Set the object tag's outline property to 'none'

object { outline:none; }

In the most recent project I've been developing I've needed to match up or pair a class name with an identifier from an XML file. Something like this:

<spriteID>SomeClass</spriteID>
[object SomeSprite]

A possible solution to achieve this is demonstrated pseudo code below.

var stageSprite:Object = stageSprit;
var stageSpriteClass:Object = Object(stageSprite).constructor;
var xmlClassName:Object = getDefinitionByName(xmlSpriteID);

if(stageSpriteClass == xmlClassName){
   return true;
}

 Usually you can achieve this dynamically without the need to to compare and associate clips but in case you need to do it this way, you now know how.

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 ;)

For the first time today i used FileReference in Actionscript. There are multiple uses of this but the one i was interested in concerned downloading. I jumped into *Flash's intuitive help section* and attempted to perform the desired outcome (saving an mp3 file locally).

So it all worked great, until i tried to save the file. Nothing happened after pressing save in the dialog box. Turns out the culprit was scope. I created a local function instance of FileReference instead of creating a class instance. When the dialog box opens it needs a reference it can get back to otherwise it's lost and the operation can never be completed.

For a more structured walkthrough check out Adobe's help on the matter.

De MonsterDebugger is an Air application from De Monsters that comes with a handy set of features. One of its better known features includes editing properties and calling methods at runtime. This alone definitely makes it a nifty little debugger. It also displays xml as a tree that is collapsable and expandable. At times the overall tree structure can be somewhat clunky but it's enough to get me using it. The only catch with these perks is that all your properties and methods need to be public so that they are accessible.

To enable MonsterDebugger in your application instantiate it first like this:
this.monsterDebugger = new MonsterDebugger(this);
this is the reference to the root of the application. This line alone allows to modify methods and properties throughout your application.

To make a trace you would write this:
MonsterDebugger.trace(this, xml);
this is the reference targeted object.

One last thing to consider is that you export the classes needed for MonsterDebugger from the Air application to the client side folder. To do this navigate to the following in the Air app:
File > Export Client Class
Point to the folder that contains all your application's classes

Download the Air application Version 2.51

Recently I was asked to create to animate water splashing from out from the wheel of a moving car, as if it was driving through a puddle. I studied animation at university, so I can say with some small amount of authority that animating water is generally considered one of the more difficult things an animator can do.

 

Probably the easiest way to solve the problem is to use video of water with a transparent background that has been modelled in a 3D application.

 

I used a video from iStock similar to this one:

http://www.istockphoto.com/stock-video-8526304-water-splashes-in-slow-motion-preview-darker-than-original.php

it didn’t have the perfect splash I needed, but there were enough different types of splashes and angles to be able to piece something together with multiple layers and some After Effects trickery.

 

The biggest problem I encountered was that iStock footage uses Quick Time with Photo JPEG compression which doesn’t have an alpha channel. You can however still create an alpha channel using a “luma track matte”, as this tutorial shows. A luma track matte is basically where After Effects creates an alpha channel based on luminosity while keeping the integrity of the original footage.

Check out the video tutorial here:

http://vimeo.com/7385956

 

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.

?_?