New Flash Extensions: Art Brush, Add Vertices, Distribute Symbol Along Path

Well, the art brush is working and I think it’s in a good state to release.  There’s a good chance I’m going to do more work on it eventually but I think it’s to a point where people will be able to use it productively.  As another example of what you can do with this tool, I present the following eye candy that I knocked together real quick-like:

This tool is a JSFL command that will take the currently selected symbol from your document’s library and map it onto the currently selected path on the stage.  This means you can now create complex designs and apply them as brush strokes in your Flash files.  There are a few considerations, though, when using this too.  If you aren’t  very keen on reading, skip ahead to the video, where I cover most of these things in glorious color:

  • The symbol you use as a brush must contain only raw shape data.  Anything other than raw shapes, or anything at all that appears in a frame other than the first one on the top layer, will be ignored when applying the brush stroke.
  • At the moment there’s no way to control the direction in which the brush is applied.  Flash is weird about how it orders its edges, so you may end up having to have two brushes for each type of stroke you want – one in one direction and a second in the other.  This is pretty easy to do by just duplicating a symbol and rotating its contents 180 degrees.  Just make sure when you do that that you deselect the symbol’s contents when you’re done.  Another of Flash’s idiosyncrasies is that it doesn’t really finalize the new position of a shape after a rotation until you deselect it.  So if you forget to deselect it the art brush tool won’t even realize that the rotation took place.
  • In your brush symbol you can use any colors, transparencies, stroke styles, etc, but beware of using bitmap and gradient fills.  The fill’s transform will be reset when applied as an art brush, so it may not end up looking like you had intended.
  • When creating a new symbol to use as an art brush, remember that the brush will be applied as if the stroke is horizontal through the middle.
  • The art brush command doesn’t create any new vertices.  This means that some symbols with few vertices won’t work well when applied to complex paths.  The easy fix for this is to use my other new tool, Add Vertices, to increase the vertex count in your brush symbol.  This will make it follow the path more faithfully.
  • If your brush symbol has a large height (that is, the width of the brush stroke) and you apply it to a tight curve, there’s a good chance that it’ll overlap itself, causing some negative space.  There isn’t really anything I can reasonably do about it programmatically, so you’ll just have to be careful in how you apply your wide brushes.
  • The art that’s applied when you run the Art Brush tool is created inside a group, making it easy to select with a single click, delete, move, etc.  The path that you applied it to still exists, ungrouped, but the tool cranks its alpha down to zero, effectively making it invisible.
  • Due to how the way Flash allows creation of shapes through Javascript I had to make all empty, enclosed spaces in the brush strokes be created as filled and transparent.
  • Unfortunately the Art Brush tool only works in Flash CS4 or later.

And here’s a video explaining the tool and giving a few pointers on using it:

As a final bonus, I’m also releasing a tool that I made on the way to creating the art brush tool.  It takes the currently selected symbol and places it periodically along the selected path.  Something like this:

distribute symbols example

Without further ado, below are the tools for your downloading pleasure.  If you download the Art Brush tool I’d strongly suggest you also get the Add Vertices tool to help whip uncooperative brush symbols into shape:

Art Brush installer

Add Vertices installer

Distribute Symbol Along Path installer

If you have any questions or comments I would love to hear them.  If you have any trouble with the tools I would like to hear about that too.  There may still be bugs remaining and I want to squash them as soon as I can.

Update April 7th 2010

I’ve modified the Art Brush tool so that you no longer need to worry about whether there are enough vertices in the brush symbol.  Add Vertices is now no longer necessary (though I’m leaving it up, since people may find another use for it still).

Update October 2nd 2010

I’ve released yet another version of the art brush, New and Improved™.  Check out my new post for more info on what’s changed:

New and Improved Art Brush – Now With Backward Compatibility™

18 thoughts on “New Flash Extensions: Art Brush, Add Vertices, Distribute Symbol Along Path

  1. vince gorman says:

    Cool, I’m looking forward to trying these out

  2. Erica says:

    This looks like a great tool! Once I get Flash CS4 I’ll definitely have to try it out. I especially liked the tiger tail example. My question is, do you have to run the art brush on every frame of an animation, or does it follow the animation on a curve once you apply it? Can you apply the brush and then animate the original curve afterwards?

  3. David says:

    Unfortunately you have to run it with each change tot he path. I couldn’t figure out a way to make it automatically update. It’s possible that I’ll still figure something out, though it would probably still be something for which you’d have to click another button or run another command saying “update brush strokes now”. There’s no way I know of for Flash to “pass word” to my tool that the brush paths have changed. I don’t think we’ll get that kind of functionality until Adobe adds this feature natively.

  4. […] This post was mentioned on Twitter by Justin Putney. Justin Putney said: @animatorgeek just released a cool Flash extension to distribute at along a path: http://bit.ly/dtvzNX […]

  5. greg says:

    David, this is brilliant! Kudos, to you sir, for fulfilling a wish I had given up on. I’ve only tinkered with it a bit, but I’m impressed. I realize it only does one thing, but it seems to do it quite well. Now I have to track down a batch execute script.

    You should consider putting a PayPal donate button on this site, and then post this plug-in to the Cold Hard Flash forums. It will be much appreciated over there.

  6. william says:

    Hi,

    I’d like to know how do you write those plugins for flash. Do you have any tutorials about the subject?
    And thank you for sharing this plugin.

  7. David says:

    The scripts from this post (as well as most of my other Flash extensions) are written in Javascript. The easiest way to begin writing your own scripts is to use the history panel (Window > Other Panels > History). You can either select entries in the history panel and right-click and select “save as command” or you can copy them and paste them into your own .jsfl file. You can find a full reference for the Flash CS4 javascript interface here: http://help.adobe.com/en_US/Flash/10.0_Welcome/WS4B6763DC-55A7-4d14-ACC3-8B4075B75B81.html

    Beyond that, there are a lot of details to get into that are beyond the scope of a blog comment. You could do a Google search for JSFL (which stands for “Javascript for Flash) and see what other people have done to get some ideas. You could also find the book “Extending Flash MX 2004”, which I think is the only book that’s been written on the subject and still covers the fundamentals very well. Adobe hasn’t updated the extension interface for Flash much at all, aside from adding a few more API calls along the way.

  8. loosetoon says:

    I’m trying a Flash CS5 30 day trial and I am getting this error using the art brush –

    The following JavaScript error(s) occured:

    At line 119 of file “auto tween.include”:
    moveTo: Argument number 1 is invalid.

  9. David says:

    I’m sorry for my delay in responding — I didn’t have a chance to try out the command in CS5 until today. I figured out a solution to the problem and I’ll put up a new version of the art brush extension soon (along with another version of it with which you can actually recolor your brush stroke to whatever the current paint color is. Not only that, I think there’s a good chance that this new version will work (mostly) in older versions of Flash (all the way back to MX 2004). Anyway, hopefully I’ll be able to post the fixed brush extension tonight or tomorrow. Sorry for the bug….

  10. Fonce Falooda says:

    David- I’m getting what the Loosetoon is getting, as well. Exactly. Any idea what we’re doing wrong? And if you have this thing for CS3, I’d be thrilled!

    Either way, this is a dream come true. I remember having to export an Illustrator file and having to do this sort of thing in there, then import it all back into Flash. What a mess! You’re a pioneer. 🙂

  11. David says:

    As I’ve noted above, I uploaded a new version, and this time it works correctly in CS5 (along with a few other improvements).

  12. Caelin says:

    You are amazing. Thanks so much for this! I’ll be using this for an animation project, and it will save me so much time.

  13. Nikk says:

    Very useful tool you made here!
    For simplify the life of many flash animators, I thank you very much!
    Nikk

  14. gilles says:

    THX YOU SO MUCH !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  15. Adam Oliver says:

    Hey David, this looks great! I think I must be doing something wrong though as I’m not getting results.

    Firstly, I’m trying to re-create your ‘tail animation’ at the top of this post. Could it be that I get errors because of working in Adobe Flash Professional CC?

    If you’ve managed to make it work in this version, a short video tutorial or step by step on animating your demo would be really helpful.

    Thanks

    • It’s hard to say what the problem is. I think I tested it with CC when I was on the Beta but I haven’t used CC since then. You’ve given me a good reason to start using it, particularly if, as I think I saw in one of the emails they sent me, they gave me a free year’s subscription for beta testing. I also may release an improved version of the tool soon, which makes it work in a much more user-friendly way. As for your problem, I can’t really say one way or another how to fix it. Have you tried using the tool in CS4-6? I’m 95% sure it works in CS6, and 100% sure it works in 4 and 5.

  16. Robin Steele says:

    Hi, David –

    LOVE the Art Brush tool, and have used it in CS5 with great results. However, I’m in CS6 now, and can’t get the “bend to stroke” function to work at all. Regardless of how many vertices I add within the symbol (which is just a simple elongated rectangle), it does the mirrored “criss-cross” thing, creating a giant “X” where a nicely shaped arc should be. Any suggestions or updates I should know about?

    Thanks – and thanks for all your hard work and diligence on perfecting this awesome tool!

  17. Mike Milo says:

    Hey David, I am also having an issue with Artbrush in CS6 but it’s not the same as Robin’s issue above. Mine seems to be rendering on the wrong axis each time… I can send you a pic to show what I mean if you like.

Leave a Reply to David Cancel reply

Your email address will not be published. Required fields are marked *