How to draw line & fill for SDT mods in Animate CC (1 Viewer)

[SyntaxTerror]

Hello

I have a technical/artistic question for artists/modders that use Animate CC (ex-Flash CC/CS):
How should I draw the lines and fills to get the best result for SDT mods without too much hassle?

In his tutorials from his FLA templates, @Konashion prescribes to draw the lines in full black/50% alpha.
What he doesn't say is that these lines have to cover the fill at its borders, while basic Animate CC shapes are drawn with the line covering one half of the border of the fill.
In my first mods, I used to draw shapes as Animate CC does, using black/100% alpha or dark grey/100% alpha for lines.

Example:

(on the right, the line layer has 50% alpha)

For sure, kona's method is the best, because the lines have always a similar but darker colour as the fill (this is particularly true for RGB shiftable fills).
But it takes longer to draw like this and as far as I know, Animate CC isn't made to draw quickly like this.

So, have you got some tips to draw quickly like kona, and what method do you think is the best, and which one do you use in fact?

 

[Huitznahua]

Here's an exemple one shape on two layer (line and fill) :


I select the line, reduce the width to minimum (0,10) and make a copy.
I re select the line, set the width to the original size (5) and I convert this line into a fill (Modifications -> Shape -> Convert lines to fills). I'm not sure of the names on the menu because my Animate isn't in English :


So now my border is a fill and I paste in place the line copied in the first place :


The line "intersect with the fill" so now I can select and delete the outter part of the border :


Work fine for simple shape. You will need more fine tuning for more complex shape.

 

[Faceless]

What you could also do is have your shapes and lines on a single layer. Then, duplicate the layer, and on the new duplicate, delete the shapes, leaving behind just the lines. On the original layer, change the lines to be the same color and alpha as the shapes. On the duplicate, change the lines to 50% black.

 

[SyntaxTerror]

I'm not sure of the names on the menu because my Animate isn't in English :

En fait, mon Animate CC est aussi en français... (in fact, my Animate CC is also in French)

Huitznahua & Faceless : Thank you for your help.
Actually, I am using Huit's method, without reducing the width of the line to 0.1 (I prefer to have lines and fill on separate layers when I draw, even if I combine the layers at the end).
I am getting used to this method, even if it seems longer than using tha basic Animate CC shapes.

By the way, it brings me to another problem I have with lines and the breast slider:
I want to have pretty complex drawings for the breasts, with a RGB shiftable ribbon (or maybe "braid", "galon" in French) covering the hem around the cleverage, and nipples pointing.

My problem is when I use shape tweens for these lines, it gets really messy when I convert lines to fills, even if I use many shape hints.
It seems to work fine without converting the lines to fills. The lines keep a good width and are rather simple to tween.
But the RGB shiftable ribbon is problematic, because what I do is using a plain line for the "fill" and use it in the rgbFill symbol, and I put another bigger line for the outline in a layer under, then again another bigger line for the fill in another layer under, but if I try to name this instance "rgbFill" (same as the smaller line on top), it is not recognised and stays black in SDT.

I hope that you understand what I mean, because I barely do...
Here is my FLA if it can help: Outfit - Strappy Mini Sleated Dress.fla
[EDIT] the RGB sliders of the Top have been moved on the Bottoms.

The only solution I see is to convert the tweenings to frame-by-frame animation, but this would mean editing 151 images (converting lines to fills, merging the layers, getting back the outline to put it in a different layer, etc.) and would probably reduce significantly the FPS rate.

Any idea?

 

[Huitznahua]

It seems to work fine without converting the lines to fills. The lines keep a good width and are rather simple to tween.
But the RGB shiftable ribbon is problematic, because what I do is using a plain line for the "fill" and use it in the rgbFill symbol, and I put another bigger line for the outline in a layer under, then again another bigger line for the fill in another layer under, but if I try to name this instance "rgbFill" (same as the smaller line on top), it is not recognised and stays black in SDT.

I'm not sure to understand. Can you send me your .fla file ? Maybe it will help me.
Edit : Nevermind, I just saw you already add the file to your post.

The only solution I see is to convert the tweenings to frame-by-frame animation, but this would mean editing 151 images (converting lines to fills, merging the layers, getting back the outline to put it in a different layer, etc.) and would probably reduce significantly the FPS rate.

Maybe not 151 frames but you're right : if the tweening with the shapes hints can't help, you can obtain better results by adding new key frames. Exemple : if your tweening between the frame 101 and 151 is messed up, you can add a keyframe at 126 and add two tweening instead of one (101 to 126 AND 126 to 151).

Or, if it is possible for the design you have in mind, :

• convert your shape into a symbol ;
• change the current tweening method to a movement tween ;
• increase the size of the symbol along the timeline. (not sure if I made myself clear here).

With a symbol and a movement tween you don't have to worry anymore about the messy shape.

 

[Huitznahua]

But the RGB shiftable ribbon is problematic, because what I do is using a plain line for the "fill" and use it in the rgbFill symbol, and I put another bigger line for the outline in a layer under, then again another bigger line for the fill in another layer under, but if I try to name this instance "rgbFill" (same as the smaller line on top), it is not recognised and stays black in SDT.

You script link the rgbfill of the top with the rgbfill of the bottom. So you change the color of your mod with the rgbFill and rgbFill2 of the bottom. BUT, one of your layer on the breast (probably "big line fill under"), isn't properly link by your script (you can change its color with the rgbFill2 of the top).

 

[SyntaxTerror]

you can obtain better results by adding new key frames.

I already dit this for the breast RGB fill by adding a keyframe on the image 125.
I have to see what I can do with the lines, but I already have something working (with 100% alpha lines) and I spent already many hour on it...

Or, if it is possible for the design you have in mind, :

• convert your shape into a symbol ;
• change the current tweening method to a movement tween ;
• increase the size of the symbol along the timeline. (not sure if I made myself clear here).

Do you mean something like this?

The problem here is the width of the line cannot be controled and grows with the entire shape.

 

[SyntaxTerror]

You script link the rgbfill of the top with the rgbfill of the bottom. So you change the color of your mod with the rgbFill and rgbFill2 of the bottom. BUT, one of your layer on the breast (probably "big line fill under"), isn't properly link by your script (you can change its color with the rgbFill2 of the top).

If I name two symbols "rgbFill2", only the first one is affected by the RGB colour.
I tried to name the second symbol rgbFill2bis and add this line to the actions:
top.rightBreast.rgbFill2bis.transform.colorTransform = bottoms.rightThigh.rgbFill2.transform.colorTransform;
But it doesn't seem to work...
Also, there is no rgbFill2 on the Top, and the aim of that is to regroup the RGB sliders on one costume part...

 

[Huitznahua]

My explanation was imprecise, my bad.

Here's an exemple with one of my mod :
The nipple pastie symbol on frame 71 is at size 100% :

Spoiler

On frame 101, the pastie is slighty moved to the right and it is at size 117,6% :

Spoiler

In movement, the pastie follow the nipple and grow along the timeline :

Spoiler

If I name two symbols "rgbFill2", only the first one is affected by the RGB colour.
I tried to name the second symbol rgbFill2bis and add this line to the actions:
top.rightBreast.rgbFill2bis.transform.colorTransform = bottoms.rightThigh.rgbFill2.transform.colorTransform;
But it doesn't seem to work...
Also, there is no rgbFill2 on the Top, and the aim of that is to regroup the RGB sliders on one costume part...

Sorry, bad explanation once again. What I wanted to say here is : you can change IN GAME the color of this layer with the second rgb slidder of the top.

Spoiler

 

[SyntaxTerror]

In movement, the pastie follow the nipple and grow along the timeline :

But the width of the lines of the pastie increases also?

I would like to increase the lenght of the line without changing its width.

Sorry, bad explanation once again. What I wanted to say here is : you can change IN GAME the color of this layer with the second rgb slidder of the top.

There is only one RGB slider for the Top in Vanilla...
I know I should learn to use the Loader, but I do not want to have to addapt to every new version (and I am lazy for some things like this).
Also, the beauty of the thing is to modify all the rgbFill2 symbols with only one slider.

I am currently trying to use shape tweening on lines converted to fills. I need only two shape hints for the rgbFill, but for the line around it, it gets really strange and I am getting mad with those shape hints that sometimes make the images disapear between the key images...

Spoiler: Fill example

Spoiler: Outline example

Here there is no shape hints for the outline, and strangely, it behaves nealy like I want it to after the 70th image.
If I had shape hints to the first shapes, I get only worse things than without...

 

[Huitznahua]

But the width of the lines of the pastie increases also?

I would like to increase the lenght of the line without changing its width.

You're right, the whole symbol increase.

There is only one RGB slider for the Top in Vanilla...
I know I should learn to use the Loader, but I do not want to have to addapt to every new version (and I am lazy for some things like this).
Also, the beauty of the thing is to modify all the rgbFill2 symbols with only one slider.

Sorry I forgot you don't use the loader. Hovewer my previous .gif clearly show that this rgbFill can be controlled with this slider so ....

but for the line around it, it gets really strange and I am getting mad with those shape hints that sometimes make the images disapear between the key images...

Tweening the outline is messy because the form is too comlex. Maybe you can divide in two parts the troubling shape and tweening them independently on separate layers.

 

[SyntaxTerror]

Hovewer my previous .gif clearly show that this rgbFill can be controlled with this slider so ....

Here is what I have with Vanilla:

Tweening the outline is messy because the form is too comlex. Maybe you can divide in two parts the troubling shape and tweening them independently on separate layers.

The problem seems to be that Animate CC uses too many nodes for its curves (8 for a circle while Inkscape needs only 4 for example). When I delete some nodes and redo the curves, I can fix some of the problems, but when I delete all the surplus nodes, I just get other strange shapes.

By the way, in the meantime, I found a quick solution with a mask hidding the central part of the outline:

Now I have to tinker with the bottom outline.
I think I will spend a lot of time on it again...

In fact, in this case, having 100% alpha dark grey lines would be much more simpler, for a similar result.
I bet no "customer" would notice the difference!

 

[Huitznahua]

Here is what I have with Vanilla:

Well I know that. What I'm trying to say here is there's probably something fucky in your script because I shouldn't be able to change the color with this slider.

Quick question : in flash I can see a large part of the shape on the breast go over the shoulder strap but in game it doesn't appear like that. The breast shape stop behind the strap, which is nice. How do you do that ? Are you only relying on the built in breast's mask ?

 

[SyntaxTerror]

there's probably something fucky in your script

I cannot tell: I just copied this code on @Iago that copied it elswhere...

Quick question : in flash I can see a large part of the shape on the breast go over the shoulder strap but in game it doesn't appear like that. The breast shape stop behind the strap, which is nice. How do you do that ? Are you only relying on the built in breast's mask ?

I think so, I had to make many tries before getting something nice.
In fact, I wanted to put the link between the shoulder strap and the cleverage ribbon more on the right (like on my reference, but the SDT built-in masks made it impossible). Here, the shoulder strap is just at the limit of the Back layer mask, so it stays still while the cleverage ribbon moves.

Spoiler: My reference

(the colours look strange because I mixed two references)

 

[Huitznahua]

I think so, I had to make many tries before getting something nice.

Ok thanks, I discovered this mask recently and I didn't thought to use it like that.

 

[SyntaxTerror]

I just finished my costume mod.

Spoiler: Teaser

I had to split the shape tweening of the "bottom outline" in a frame-by-frame animation because I couldn't superpose this outline and the breast fill correctly. It didn't took too long as I could make a macro to merge the fill and line layers (i.e. a loop of "select all, copy, paste in place, move to next image"), as it doesn't seem possible to do it in one time with Animate CC.
Now I have a good breast slider.
It wasn't wasting time, because I plan to use this strappy top for several dresses, tanks, swimsuits, etc. a bit like Iago did with his everyday clothes.
I plan to do them all before putting them on the Resource Manager, so the "customers" will have to pe patient!

 

[Huitznahua]

Look nice. I was thinking to make something similar (thin tank top) with using the @stuntcock's dynamic librairy but I've a lot of other things in mind and ... I'm lazy as fuck .

Maybe you can add some shading details in order to achieve a volume effect, at least for the breasts.

An did you manage to fix the "rogue" rgbFill2 ?

 

[SyntaxTerror]

Maybe you can add some shading details in order to achieve a volume effect, at least for the breasts.

I was also thinking this, but I am not very good with shading...
I will try to copy what kona did and addapt it to a duplicate of the fill layer of the breasts.

And did you manage to fix the "rogue" rgbFill2 ?

This problem was caused by the two rgbFill2 symbols, but i could manage to have only one, so now every rgbFill & rgbFill2 are controled via the Bottoms' rgbFill and rgbFill2.