How to fix this break between fills?

Wondering how to accomplish a certain animation task? Ask here.

Moderators: Víctor Paredes, Belgarath, slowtiger

Post Reply
User avatar
Touched
Posts: 504
Joined: Mon Dec 11, 2006 7:33 am
Location: Sunny California
Contact:

How to fix this break between fills?

Post by Touched »

This is a closeup of the skirt in the animation I posted yesterday. Notice how there are breaks and bad matchups anywhere I drew shadows? Is there any way to avoid this? This happens anywhere I have two different colour fills. When I imported the results into Flash, I had to go frame by frame and move the line groups to the top to cover the fills. Is there a way to force strokes to always be on top of the fills?

Image
User avatar
heyvern
Posts: 7042
Joined: Fri Sep 02, 2005 4:49 am

Post by heyvern »

This is a result of the shape order.

The shapes are "split" so the strokes get covered at the "corners". You have shadow shapes with the strokes hidden. At the corners the shapes overlap and the parts without a stroke clip the corners.

The trick is to order the shapes in such a way as to hide these gaps. Or you can add some additional points to cover them.

OR... you can put the stroke as a totally separate shape over the other fill shapes.

These are the two solutions that don't involve an extra stroke shape. I use these all the time:
(the white part under the blue is actually a shape with a white fill. I probably should have used another color to make that more clear.)

Image

Image

If this isn't enough info let me know.

-vern
User avatar
Touched
Posts: 504
Joined: Mon Dec 11, 2006 7:33 am
Location: Sunny California
Contact:

Post by Touched »

Well, I tried disabling the stroke on both sides of the shapes, and creating a new shape going over the whole thing which would have only a stroke (hiding the sides I didn't want), but the same thing happened. I had better luck with adding points as you suggested, but in some areas I just couldn't get all the gaps to disappear. And adjusting the fill order didn't get rid of them either. It just changed which colour was showing through the line break.

Am I going about creating the shapes the wrong way? What I'm doing is welding lines inside the main areas to delineate shadow areas, then filling the first side with the "normal" fill colour, and the other side with the "shadow" fill colour, and each side has its own stroke Should I be making a free-floating shadow shape that's not actually welded to the main mass?
User avatar
bupaje
Posts: 1175
Joined: Fri Nov 12, 2004 5:44 pm
Location: California
Contact:

Post by bupaje »

I am not sure if this may be relevant or not to the issue of creating shapes, but something in your post made me remeber this.

http://www.lostmarble.com/forum/viewtop ... ight=dress
[url=http://burtabreu.animationblogspot.com:2gityfdw]My AnimationBlogSpot[/url:2gityfdw]
User avatar
Touched
Posts: 504
Joined: Mon Dec 11, 2006 7:33 am
Location: Sunny California
Contact:

Post by Touched »

I don't think so. I understand the trick of using split shapes any time one needs to overlap the other, as in the elbows of arms, or in the case of the dress you mentioned. This problem I'm having occurs everywhere I draw shadows, whether it moves or not.
User avatar
heyvern
Posts: 7042
Joined: Fri Sep 02, 2005 4:49 am

Post by heyvern »

Hard to tell from your image precisely what it is for but I tried to reproduce the "concept" the way I would do it to achieve the effect you are looking for.

http://www.lowrestv.com/moho_stuff/stroke-gaps.moho

Image

Shape creation is tricky. It appears as though the shadow at the top is connected the red shape in front. If these are truly overlapping shapes it might be easier to create them that way.

However this might not be possible or it might not be what you actually want as the end result. In that case you have to figure out another way to do it.

Here is the moho file I created drawn entirely with connected points in one "piece". I have named the shapes so you can see the order.

I have used 2 separate stroke shapes that cover 2 "sets" of unstroked fills for the what appears to me to be a back and front shape.

The shapes are ordered so that the stroke and fills for the bottom shape will be covered by the upper shapes. This isn't really necessary since they are connected and will never actually move around that way but it eliminates the problems with connected strokes and the gaps that can result.

EDIT:

I am still using Moho 5.3 so I am able to create multiple shapes on the same vectors without much trouble. This may require some "tricks" to do it with AS.

-vern
User avatar
Touched
Posts: 504
Joined: Mon Dec 11, 2006 7:33 am
Location: Sunny California
Contact:

Post by Touched »

Thank you Vern; you are a gentleman and a scholar. I shall examine this file and see how I can apply it to my shape creation.

(The image, BTW, was a small section of Misty's skirt, chosen because of the number of visible examples of the problem I was having.)
User avatar
Touched
Posts: 504
Joined: Mon Dec 11, 2006 7:33 am
Location: Sunny California
Contact:

Post by Touched »

I'm sorry, I still don't understand how you got those shapes to have no breaks in them. Does the order in which you create them matter? I can tell you have the shadow and the normal areas welded together just as mine are, and I tried reproducing your example by entirely removing the stroke from the ruffle around the apron and then selecting all the points that I wanted to have a stroke, and create a new stroke-only shape on those, and yet there are still breaks at the same places, wherever the normal shapes meet the shadow shapes. They're small, but this isn't happening at all on the sample you posted, and I'd really like to get mine looking the same way as yours.

Then I tried deleting all the fills and strokes entirely and started from scratch with only the unfilled vectors. I tried filling the entire area with the normal colour, then created new shapes in the shadow areas, both without strokes. Then I selected the entire area and created a stroke on top. Still had gaps. Then I deleted both the normal and shadow shapes, leaving only the overall stroke. Even the stroke alone had those gaps, and that's where the problem lies, I think.

In my test on your sample, I even deleted the separate stroke shape and just enabled the strokes on the normal and shadow shapes, and yours still worked correctly!

Here's the file itself. You said you're using Moho 5.3, so I hope you're able to open it. AS doesn't seem to have any problems creating multiple shapes on the same vectors -- that's how I made these. But it might handle it differently. Most of this file is done the way I had it originally, and the outer ruffle of the apron is done with no strokes on the fills and a separate stroke shape.

http://drowtales.com/~whiteradish/temp/skirt.zip


EDIT:
Okay, on further experimentation I was actually able to achieve the results in your sample. There is some kind of strange problem in the welds in those particular areas. I took one particular area (the main part of the apron), removed all the fills and strokes, and used the "delete edge" tool to eliminate the shadow lines entirely, then refilled the base. Strangely, even with the shadow lines gone, the gaps persisted in those same areas. So I create points on either side of them and deleted those points. This broke the fill instead of just losing the point as should happen in a healthy curve. Welding together the points I had made on either side restored the fill, and eliminated the breaks in the lines. Then I was able to recopy the shadow vectors over it, re-weld them to the main shape, and fill them. This time it worked. I'm not sure why, or what the problem was with those welds. I will be careful with any new shapes to ensure this problem isn't happening as I work.
User avatar
heyvern
Posts: 7042
Joined: Fri Sep 02, 2005 4:49 am

Post by heyvern »

Woo boy!

After looking at the file I can see what the problem may have been.

Sometimes if you create joins at corners in an odd way, for instance noncontiguous lines, you will get gaps no matter what you do with fill shapes.

If s shape goes around the outside and has shapes with in it (your ruffles) I like to create those shapes in sort of real world logical way.

The ruffles would have a continuous or contiguous vector all the way around the outside. Then I would connect the extra lines inside to the outside line.

I notice in your file that some of the inner shadow shapes actually connect to the outside shape. So it would be difficult to make the shapes since the order would be extremely confusing. Parts of a "top" shape would be part of a "lower" shape. That kind of thing.

fewer points might help but it's not a big deal. I am guessing the file was imported from an eps format from flash. Wouldn't want to suggest you redraw from scratch since it looks pretty good the way it is.

I would suggest you break the joins at the shadows and reconnect so that the outside of the ruffle is one long continuous line.

I hope this makes sense.

-vern
User avatar
Touched
Posts: 504
Joined: Mon Dec 11, 2006 7:33 am
Location: Sunny California
Contact:

Post by Touched »

It does make sense. Yes, this was imported from Flash via .ai, which as is known creates a ton of extra points even though my Flash vectors were very clean and efficient. The file I posted here was actually after a good amount of selective reduction in points. :|

Anyway, I've been repairing the damage in my other files as I work on them, and it's all working now that I know how to avoid it. I'm glad we got this all worked out before I had invested too much time doing it the wrong way. Thanx again, Vern!
User avatar
heyvern
Posts: 7042
Joined: Fri Sep 02, 2005 4:49 am

Post by heyvern »

Touched wrote:... Thanx again, Vern!
You are very welcome. I enjoyed the challenge. I'm in here deleting spam anyway... thought I might do something more constructive.

I think I have deleted about 50 spams tonight. I've got a nice system with multiple windows that speeds it up. Hope you guys appreciate it.

If I go to bed though... there will be 50 more. Next shift can handle those I guess.

;)

-vern
Post Reply