Drawing Curved Lines Simplified

I’m bad at drawing curved lines in ActionScript. I’m always too lazy to figure out how to calculate exactly where the control point should go when using curveTo. Because of this, most of my experiments have relied on drawing a lot of short straight line segments to simulate curves, rather than figuring out how to draw the curves properly. For example, my tree experiments are drawn entirely with straight line segments.

While revisiting my grass simulations I decided to bite the bullet and figure out an easy way to work with curves. The result is a couple of “spikes” or isolated test cases that demonstrate the logic behind converting a series of straight lines into a nice looking curve.

The basic concept is to bisect each of the straight lines, then draw a curve between the bisections, using the original points as the curve’s control point. Nothing new I’m sure, but it works really well for me, because I can continue to think in straight lines, but draw in curves.

Continue reading →

Cut By The Wind

I showed this experiment at FitC Toronto, then forgot to post it until today.

I’ve been experimenting on and off with grass simulations in ActionScript 3 (ex1 , ex2) for a little over a year. I recently rewrote the logic to draw the grass and wanted to build out a new experiment to use it. (I’ll be posting a bit about the drawing mechanism in the next day or two)

The result was cutByTheWind, which you can see below. I tried to do something that was more cinematic than most of the pieces I’ve built to date, and had some form of open ended narrative. This isn’t really my usual forte, but I’m fairly happy with the results. It is very CPU intensive, so don’t be surprised to hear your fans start up.

Special thanks to Keith and his lovely wife for translating the title into Japanese.

Continue reading →

Core AS3: Modulus

I’ve decided to start a little series of articles on the blog called Core AS3 that will deal with small, simple snippets of code (<5 lines) that are very useful but not particularly self-evident. I often encounter questions at workshops and conferences about small coding constructs that I take for granted, and it occurred to me it might be helpful to document and share them with the community.

The first article in this series is about modulus. Modulus, which is represented by the percent sign % simply returns the remainder of a division operation. For example, 21 modulus 5 is 1. This is handy for a lot of different things, but I’m going to focus on four of them: alternation, frequency, wrapping, and two dimensional data sets.

All code will be simplified to focus on the concept at hand. Most of it should also be applicable to any similar language (ActionScript 2, ActionScript 3, JavaScript, etc)

Continue reading →

Building the Flash Player 10 Demos

We were recently approached by Adobe to build a simple set of demos for the Flash Player 10 beta. The concept was to deliver a set of very simple, feature specific demos and descriptions tied together by a consistent theme. We thought it would be fun to key the demos off of the Astro code name, and develop a fake product box with a retro-space feel.

The end result was released on Adobe labs today. You can check it out here:

http://labs.adobe.com/technologies/flashplayer10/demos/

Continue reading →

SparkTable: Visualize Easing Equations

I often talk about the important role visualization plays in my work. I personally don’t really understand things until I can see them. One example of this that I showed at FitC this year was the SparkTable tool I use to visualize and compare easing equations. It’s very simple, but I’ve found it very useful when trying to choose between two similar eases, such as a quintic versus exponential ease. It’s also very handy when developing custom easing equations.

Simply queue up a bunch of easing equations to test, then sit back and watch the results.

Continue reading →

Designer ScrollBars in Flex 3

It seems like every UI design we are asked to implement these days has what I call “designer scroll bars” – skinny little tone on tone scroll bars that have no scroll arrows. While I’m not a big fan of these scroll bars for a number of reasons (not least of which is usability), they are still something we’re required to do on a fairly common basis.

Luckily, in Flex 3 hiding the scroll arrows, and making the scrollbar thinner is a fairly simple task that you can accomplish globally with just a few lines of CSS.

Continue reading →

gProject Acquired By Adobe!

We’ve been getting lots of questions about why gProject has not been updated to support ActionScript 3. Until now I have not been in a position to respond appropriately, but today I’m happy to announce that Adobe acquired gProject late last year. Since then, we have been working with the Flash team to completely overhaul the panel for AS3, add new functionality, and significantly improve the interface.

As a result of the Adobe acquisition, we will no longer be developing gProject and have deprioritized our support for gProject as a product.

We will continue to offer gProject for Flash 8 and CS3 for the immediate future, but it will not be updated further. The product page for gProject and panel pack will be updated immediately to reflect this.

If you purchased gProject in the past 3 months, and have any concerns, please contact us through our support form.

RegExp Bugs With Accented Characters

During the course of developing the Spelling Plus Library, and more recently while adding multilingual support to it, I discovered two serious bugs with the Regular Expression implementation in ActionScript, and how it handles accented characters.

First, RegExp in AS3 does not include accented characters in the word character class. For example, the pattern /\w+/ (match one or more word characters) matches “r” and “sume” in “résume”, when it should match the full string. UPDATE: Arthur has pointed out in the comments that this is correct according to the ECMAScript and POSIX RegEx specifications. \w is intended to match just the set [a-zA-Z0-9_] , which it does in AS3. With that being understood, it would be nice to have support for unicode property sets (which allow you to match word characters in any language, among other things), but I can understand that this may have an unacceptable impact on the size of the Flash Player.

Secondly, there is a somewhat obscure problem with how the Flash player matches \S and accented characters. Specifically, it appears that it does not count accented characters properly when matching them to \S, and this results in weird results. This is not the case with the negated whitespace character set [^\s], although these sets should exhibit identical behaviour in RegEx. This issue is pretty weird, so I’ll give a few examples:

  1. the pattern /\S+/ (one or more not-whitespace chars) will match the full string of “é aé”, when it should match “é” and “aé” separately.

  2. the same pattern /\S+/ will match “aé” and “bé” correctly for the string “aé bé”.

  3. the pattern /\S{2,}/ (two or more not-whitespace chars) will match the full string “aé bcé” when it should match “aé” and “bcé”.

  4. the same pattern /\S{2,}/ will only match “bcé” for the string “éa bcé”, when it should match “éa” and “bcé”

All of the above work properly if you substitute [^\s] for \S.

Hopefully this is helpful for other people working with RegExp, especially with languages other than English. It is quite frustrating to work around – I ended up writing a specialized character lexer instead of using RegExp in SPL.

Know of any other RegExp bugs in AS3? Share them in the comments.