Category Archives: Flash

Dynamic Mask Symbol

If you’ve done any significant amount of animation in Flash then you’ve probably run into this problem. You want to give a symbol partial alpha, but that ends up giving you a big mess where each individual sub-symbol is alpha’d down, rather than just the symbol you’re actually working with. Blech!

image

No Es Bueno

I ran into this problem once again yesterday while working on my demo reel and I decided I’d had enough.  I pulled out a trick I learned from Mike Bambino while I was working at Trilogy Studios.  It turns out that if you do it dynamically (using Actionscript) then you can make a mask that supports semi-transparency.  It lets you do awesome neato stuff like smooth gradient masks:

 

image

Awesome and Neato

What I wanted to do this time is to fade single characters in and out without affecting the other characters around them.  Normally I’d do something with solid overlays to give the impression of a clean dissolve, but it wasn’t working this time.  The characters were overlapping a bit, so the overlay would end up affecting both of them in an undesirable way.

To solve the problem I simply made a solid rectangular symbol with the relevant Actionscript in it.  At run-time it gloms itself onto whatever movie clip is directly below it on the display list and says “hey you!  I’m gonna be your mask now!”  Then I simply fade the mask symbol on the timeline however I please in order to fade its maskee in and out.

Easy, huh?

Here’s the source code in case you’d like to apply it to your own stuff.  Just put this on the first frame of your mask movie clip, then put the mask symbol directly above the thing you want to mask:


stop();
var maskee:DisplayObject;

// Call the enter_frame function for the first frame
enter_frame(null);

function enter_frame(evt:Event)
{
	//trace("enter frame");

	var my_index:int = parent.getChildIndex(this);
	
	// Find the symbols just below this one
	maskee = parent.getChildAt(my_index - 1);
	
	// If there's something there, mask it.
	if(maskee)
	{
		// Cache as Bitmap must be turned on for both the mask and the maskee
		cacheAsBitmap = true;
		maskee.cacheAsBitmap = true;
		//trace("masking " + maskee.name);
		maskee.mask = this;
	}
}

// Remove the reference to the mask if it gets removed from the stage
function removed_from_stage(evt:Event)
{
	maskee.mask = null;
	removeEventListener(Event.ENTER_FRAME, enter_frame)
	//trace("removed mask");
}

addEventListener(Event.REMOVED_FROM_STAGE, removed_from_stage);
addEventListener(Event.ENTER_FRAME, enter_frame)

And here’s a Flash file with it all set up and working, just to make it totally easy to see how it works:

Dynamic mask.fla (57KB)

New and Improved Art Brush – Now With Backward Compatibility™

I’ve been meaning to do this for a long time.  I finally got around to finishing off some changes to the art brush tool and now I’m ready to put them up.

In the main tool things are mostly the same.  I fixed compatibility with CS5, so now die-hard Art Brush users can upgrade, and die-hard CS5 users can finally use the tool.  I also improved rendering of corners.  Seriously, it does corners way better now.  It might still need a little improvement, but at this point changes would be a judgement call of whether they’re better or now.  Basically, now what the tool does with corners is to try and make the diagonal of the corner be the same width as the brush would be at that point anyway.

Another thing I’ve changed is that it’s now responsive to the thickness of the pencil path that it’s following.  For instance, if the line has a thickness of 2 then the resultant brush stroke will be twice as thick as in the brush symbol.  This is particularly useful with the other new thing I’m introducing…

… a version that recolors the brush stroke!  Now all the shapes in the brush symbol will be drawn out using the current fill color.  This makes it possible to use the art brush tool as a more generic paintbrush, where the brush symbol only defines the shape of the resulting stroke.  I use it a lot for creating linework on characters.  Below is an example of the output.

image

One of the advantages of the new “recoloring” art brush is that it’s more backward compatible.  In fact, it may be compatible as far back as Flash MX 2004!  I can’t say for sure, since I don’t have a copy of that program.  I would definitely be interested to hear results from anyone who tries it on a version of Flash prior to CS4.  Leave comments here or email me.

As a reminder, these tools are free for non-commercial use but there’s a small fee if you’d like to use them in a commercial setting.  Contact me for more information.

Art Brush installer (45kb download)

Hooray for Re-Use!

I just burned through about five character-seconds of animation in about five days.  That feels really good.  It’s significantly faster than my general rate that I’ve been keeping up ever since I resumed keeping track in April.  When I finish a scene I get to mark it off in the spreadsheet I created for the task, which always feels great.  It’s all set up with color-changing fields that give me pleasant feedback when I finish a scene.  They say, “Hey David, you’re doing a great job!  Look how much you’ve done in the last five days!”

Part of what let me get through these two scenes so quickly was that I was able to re-use some stuff.  For the first scene the framing was very similar to an earlier one, so setup was fast (pretty much just copy the previous scene’s file and the new scene is set up).  For the second it was even better.  I was able to use a side-view walk cycle that I created a long time ago for another scene, with only slight modifications.

One of the great advantages of Flash animation is the ability to adapt old animation for new scenes.  That’s a major reason why it’s a good medium for television animation.  When I worked on Foster’s we tried our hardest to find reuse for as many scenes as we could.  We had libraries of walk cycles, character poses, hands, arms, legs, and endless gobs of uncategorized old scenes that the animation director was able to help us find if we needed them.  The thing that’s great about it is that it’s not carved in stone.  It’s pretty easy to make little tweaks to old animation in Flash.  Need that old walk cycle but with the head looking to the side?  No problem.  Different lip sync?  Easy.

Unfortunately reuse hasn’t been as helpful on Don’t Fear the Sitter, since it’s just this one episode.  If I could stretch it out into a series that would be great, since I wouldn’t have to build the character models again, and I would have a bunch of reusable animation from the first one.  I may some day try and figure out a way to adapt it into a series, particularly if the short ends up doing well on the festival circuit.  If it comes to that, I’ll definitely be glad I made this thing in Flash.

New Flash Tool: The Self-Rendering V-Cam

Today I’m going to introduce you to a tool I developed a while ago that I finally got ready for public release.  It’s a modification of the concept of the V-Cam, a tool that’s been around for a while in the Flash world.

“V-Cam” stands for “virtual camera.”  It’s a tool that lets you define the viewport of your Flash movie with a rectangular “viewfinder”, rather than just with the location of your subject on the stage.  This means that you can leave your drawing in one location on the stage, then animate the V-Cam all over the place, including rotation, skewing, etc, and that view will be the one you see in the final product.  It’s a very useful tool, making framing much more intuitive. Continue reading

Apple is wandering in the direction of Lawful Evil

Some of you may have heard about the kerfuffle in the last few days between Apple and Adobe. Briefly, Apple made a change to their developer agreement that makes it against the rules to use any language other than C, C++, Objective C, or Javascript when making applications for the iPhone/iPod/iPad. Furthermore, they’ve disallowed abstraction or compatibility libraries. The practical upshot of this is that Adobe’s most-touted feature in its new version of Flash, the ability to compile directly to an iPhone, is now pretty much worthless. Have no doubt, this was a change directed firmly at Adobe, and it encroaches into the region of Evil and perhaps Monopolistic. This post at the Flash Blog pretty much sums up my feelings.

A Better Art Brush

One of the main things I was thinking of doing to improve the Art Brush tool was to give it the ability to add vertices to the brushstroke.  That would mean it could more easily follow the paths the user defined without requiring the manual addition of vertices to the brush symbol.  Well, it turned out to be pretty easy, and I implemented it yesterday and today.  So as of now, the Add Vertices tool is no longer necessary.  I’d encourage anyone who downloaded the Art Brush tool before Wednesday April 7th to re-download it.  It’ll be a significantly friendlier tool to use, and no more will you have to think about whether your brush symbol has enough vertices to follow your complex path.

For convenience, here’s the download link again:

Art Brush installer

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:

Continue reading

Flash Art Brush Tool: It Works!

As I mentioned in a previous post, for years I’ve wished for the ability to use art brushes in Flash.  I’ve found, though, through years of wishing and hoping followed by disappointment, that the Flash development team is very unlikely to add in new features that are likely to help me as an animator.  They’re too focused on supporting Flash as an application development platform, not as an animation medium.  I think on their list of priority customers, animators who target non-interactive media are near the bottom.

That’s a big reason why I started creating Flash extensions — to fill in the gaps that the Flash development teem is either unaware of or is unwilling to address.  Well, a short time ago I realized that I could probably create a tool to perform one of my all-time wished-for features: art brushes.  Illustrator’s had them for a long time.  They’re very useful in there, and they would be similarly useful in Flash.

After about a week and a half of work, I’ve attained success!  My art brush experiment has blossomed into an actual usable tool!  It turned out significantly better than I had hoped, with fairly quick runtime (even before I’ve done any optimization) and very good visual results.  It’s not quite ready to post for the general public but I’m interested in getting people to test it a bit and give me feedback — Tell me what new features it needs and let me know if you run into any bugs.  If you’re interested, please let me know either in the comments or via email.

To give you a tantalizing taste of the possibilities, here are some actual examples of what my new Flash art brush tool can do:

Art Brushes Are Within My Grasp

Oh my goodness, I’m so close. You don’t even understand. For the last week or so I’ve been using all the spare time I could find to work on a new Flash command. It’s so complex that the source file is now more than 1000 lines. To put this in perspective, I’ve never seen any jsfl command that comes even close to this length, apart from my own autotweener. To put this further in perspective, this tool will do something that Flash has never been able to do, and for which I and many of my Flash animator friends have been clamoring as long as any of us has been using Flash.

Curious yet?  The tool that I’m working on will map arbitrary art onto an arbitrary path.  That means you can create “art brush” symbols and then apply them to any path and have the brush bend itself to follow the path.  For instance, if you’re animating a tiger with a wagging tail, you’d just animate a line, then apply your tiger tail art to your lines.  Boom, you’ve got a wagging, serpentine tiger tail.

I haven’t got the tool finished yet but I thought I’d put up an image to illustrate what I’m talking about.  The image below is from the Art Inspires blog (see the original post here).  It’s a screen capture from Adobe Illustrator, which has had this feature for a long time.  I’m kind of skeptical that I can make my art brushes look as good as Illustrator’s, and it will certainly be slower (since it’s written in Javascript), but either way it’s going to be awesome.  Seriously, this is sharks with frickin’ lasers territory.

Virtual animation disc

I mentioned in my last post that I was working on a new Flash command that several people had requested, and that I’d like to have myself.  It feels good to be able to help people out with stuff like this, particularly when it also helps me 🙂  Anyway, I thought I’d talk about it a little.

Several graphics programs, particularly ones that deal with animation, have a feature where you can rotate the canvas to an arbitrary angle, in the same manner as an animation disc.  It’s very useful when you can’t get quite the right curve to a line unless your drawing is positioned at a good angle.  Unfortunately, Flash won’t do that.

Continue reading