changing outline color of a movie clip

[Laura MS]

I have a movie clip representing the state of Missouri. I'm changing its fill color based on data from an xml file. I'd like its outline color to be black. I've tried applying a glow filter, but it doesn't seem to work. Can anyone tell me what I'm doing wrong?

[Colin Holgate]

It looks like the tint of a movieclip gets added after everything else. You could get what you want by not having a tint, but also applying an Adjust Color filter.

[kglad]

there's nothing wrong with your code.

[Colin Holgate]

Well, there's nothing wrong with the code part, but the overall effect doesn't work, because I think that the movieclip is tinted.

[kglad]

adding color shouldn't make a difference unless that's done after the filter is added.

[Laura MS]

But I need there to be a tint. How can I change both the stroke (outline) color and fill color of a button or movie clip? It seems if I change the fill, I can't change the outline, and vice versa. I know I can do it in Flash, but I really need to change the fill color based on comparing two data items in an xml file, so I have to change the fill color in AS3.

[Colin Holgate]

Like I mentioned, have a GlowFilter and an Adjust Color filter. Or put your tinted movieclip inside another one, then just apply the GlowFilter to the outer movieclip, and tint the inner movieclip.

[Laura MS]

I don't see an adjust color filter in AS3. I've tried implementing colorTransform and glow filter together. Each one works independently, but not together. If I use the colorTransform and glow filter with a knockout, then i can get an outline of my US states, but the outline will be with the color specified in the colorTransform, not the color I specify for the glow. Otherwise, the colorTransform spills completely over my buttons' outlines and I get no lines between my US states at all.

It would seem as if being able to color a vector art button's outline and fill color would be elementary to a programming language, but I've trawled the web, three manuals, and various experts' brains to no avail.

Again, I have a map of the US. I want to color each state a color depending on data from an xml file. And, I want to keep outlines of each state. Anyone have a solution?

[Colin Holgate]

In this map:

http://www.abcnews.go.com/politics/vote2008

I solved the problem by having an outline layer that covered all of the states. Not sure if that would work for you. The solid color states are all sitting underneath that layer.

The adjust color filter is known as ColorMatrixFilter when you're using it from Actionscript. It doesn't look simple to use!

For the idea of having a movieclip that is the stroke, and another that is the fill color, try this test routine in frame 1 of a new FLA:

var outer:Sprite = new Sprite();
var inner:Sprite = new Sprite();
var holder:Sprite = new Sprite();

outer.graphics.lineStyle(3,0,1);
outer.graphics.moveTo(0,0);
outer.graphics.lineTo(100,0);
outer.graphics.lineTo(100,100);
outer.graphics.lineTo(0,100);
outer.graphics.lineTo(0,0);

inner.graphics.beginFill(0xff,1);
inner.graphics.drawRect(0,0,100,100);
inner.graphics.endFill();

holder.x = 20;
holder.y = 20;
holder.addChild(inner);
holder.addChild(outer);

addChild(holder);

var changetimer:Timer = new Timer(100,0);
changetimer.addEventListener(TimerEvent.TIMER,randomcolor);
changetimer.start();

function randomcolor(e:TimerEvent) {
inner.graphics.beginFill(Math.random()*0xffffff,1);
inner.graphics.drawRect(0,0,100,100);
inner.graphics.endFill();
}

Now, that's obviously filling a solid rectangle. You can tint an irregular shape using setTint. In yet another new FLA, try this script, with an irregular shaped blob movieclip, named "mc", on the stage already:

import fl.motion.Color;
import flash.geom.ColorTransform;
var ct:Color = new Color();
ct.setTint(0xFF0000, 0.5);
mc.transform.colorTransform = ct;

[Laura MS]

How did you create those layers? I had a vector map from Adobe Illustrator that came in on one Flash layer. Did you have two maps and import them on separate layers?

[kglad]

it's a lot easier to add Missouri to a new sprite and apply your glow filter to the parent sprite.

[Colin Holgate]

I worked from an existing swf, that already had shapes for the states and an outline layer.

When you import the Illustrator file you should see options for importing to separate Flash layers. If the hard work has been done in Illustrator, you ought to be able to bring the different parts in as different layers, and then take all of the outline layers and create one movieclip from them.

[Laura MS]

Thanks. I had no idea this would be such a difficult problem. Apparently, I'll have to either create my own button class that separates the stroke and fill, or figure out a way to layer movie clips on each US state (no easy feat with Rhode Island and Delaware) or have the colors of the US states exist on a separate layer from the outlines (perhaps more doable).

In the end, I decided to try a different way. I "colored" each state using a glow filter knockout set at 80% opacity that had x and y values big enough that the glow became the fill. Because of its opacity, the outlines showed through, although I can't control their color. For now, that will have to do.