Pie mask in AS3
Friday, November 13th, 2009Sometimes I have the need for a rotational progress bar that acts like a pie growing bigger (or smaller if that strikes your fancy). As usual, I made my own =)
The function drawPieMask takes first the graphics object of the displayObject instance and draws a part of pie on it, percentage set’s how big the part is.
If you want to offset the rotation of the pie (it starts to the right by default) you can set the rotation parameter. Note that rotation is in radians, not degrees, but you can multiply your degrees by (Math.PI/180) to convert to radians.
Lastly, the sides property determines how many sides the circle drawn in the mask has. You can see an example of different pie masks after the code.
To make the code as customizable as possible, it does not make a call to beginFill in case you want to set your own fill (or gradientfill even?).
If you just want to use it as a basic mask, just call beginFill(0) before and endFill() after the call to drawPieMask.
function drawPieMask(graphics:Graphics, percentage:Number, radius:Number = 50, x:Number = 0, y:Number = 0, rotation:Number = 0, sides:int = 6):void {
// graphics should have its beginFill function already called by now
graphics.moveTo(x, y);
if (sides < 3) sides = 3; // 3 sides minimum
// Increase the length of the radius to cover the whole target
radius /= Math.cos(1/sides * Math.PI);
// Shortcut function
var lineToRadians:Function = function(rads:Number):void {
graphics.lineTo(Math.cos(rads) * radius + x, Math.sin(rads) * radius + y);
};
// Find how many sides we have to draw
var sidesToDraw:int = Math.floor(percentage * sides);
for (var i:int = 0; i <= sidesToDraw; i++)
lineToRadians((i / sides) * (Math.PI * 2) + rotation);
// Draw the last fractioned side
if (percentage * sides != sidesToDraw)
lineToRadians(percentage * (Math.PI * 2) + rotation);
}
Example of different sides values. The last circle has a pie with 3 sides as a mask.
You can get the example fla here.
WordPress replaces — with –
Thursday, November 5th, 2009I just recently upgraded my wordpress system, and now it does not show my embedded flash at all. I would be surprised, but this isn’t the first time this happens.
The last time I upgraded I found a blog post on how to fix it, but it’s been a while and I just can’t find that post any more, so I’m writing my own.
So this is the deal: I always embed my flash using the html code that SWFobject recommends:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
<param name="movie" value="myContent.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
After the upgrade, instead of my pretty flash objects I get this funky arrow in my posts:
–>
And if I look at the source, it now looks like this:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
<param name="movie" value="myContent.swf" />
<!--[if !IE]>–>
<object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>–>
</object>
<!--<![endif]-->
</object>
Apparently wordpress replaces
<!–[if !IE]>—>
with
<!–[if !IE]>–>, but when I look into my post to edit it, it still looks fine there.
The reason is that wordpress is trying to make your writing prettier, even if you don’t use the wysiwyg editor. To stop wordpress from doing that, go into your wordpress directory and edit the file wp-includes/formatting.php. On lines 55 and 56 (for version 2.8.5) you should see this text:
$static_characters = array_merge(array('---', ' -- ', '--', ' - ', 'xn–', '...', '``', ''s', '''', ' (tm)'), $cockney);
$static_replacements = array_merge(array('—', ' — ', '–', ' – ', 'xn--', '…', $opening_quote, '’s', $closing_quote, ' ™'),
If not, just look for it, it should be in the top page or two.
Now all you have to do is comment out the array elements you don’t want wordpress to replace. My lines look like this:
$static_characters = array_merge(array(/*'---', ' -- ', '--', ' - ', */'xn–', '...', '``', ''s', '''', ' (tm)'), $cockney); $static_replacements = array_merge(array(/*'—', ' — ', '–', ' – ', */'xn--', '…', $opening_quote, '’s', $closing_quote, ' ™'),
Hope this helps.