How to use any RGB sliders for any layer, even hair

SyntaxTerror

Staff member
Content Creator
Joined
Jul 24, 2014
Hello

This tutorial shows artists/modders how to use any RGB slider to change the colour of any part (layer) of a SWF costume mod, or even of an SWF hair mod.

It can be useful if you want to have more RGB sliders than available for a specific piece of clothing (eg. 3 sliders for a Top), several parts of a costume to be modified with the same RGB slider (eg. modify Top and Bottoms colours altogether), or even to make a static or dynamic hair RGB adjustable (eg. use the Headwear sliders to change hair colours).

It is even possible to make a Vanilla mod using sliders usually not available for Vanilla, such as Legwear or Cuffs ones.

The code as been written by ModGuy ModGuy and is very versatile, though a bit complex if you're not experienced in ActionScript (but don't worry, adapting it to your needs is quite simple).
It has been improved by sby sby to add preset colours, which is a nice feature for hair mods. This code is shown in the second post.
Another code from Iago Iago is a bit simpler, but doesn't allow to use sliders usually not available in Vanilla if you are making a Vanilla mod, or creating an RGB adjustable hair. This code is shown in the third post.



Method

  • Create your rgbFill symbols as usual.
  • Go in the Action window (F9), then open the Settings: Frame 1 actions (the place where templates are registered) and add one of the codes shown in examples below, adapted to you needs.
1st example

This example shows how to use the Collar RGB sliders to modify the colours of a piece of costume located in the Back layer of the Top template.

import SDTMods.*;
import flash.system.ApplicationDomain;
import flash.geom.ColorTransform;

registerMod(top);
charData = "";
modName = "";
modCreator = "";

var SDT = ApplicationDomain.currentDomain;

try
{
var g = SDT.getDefinition("g"); //Vanilla
copyRGB(g);
}

catch(ex)
{
//We're in loader, wait.
}

function initl(l) : void
{
copyRGB(l.g); //Loader
}

function copyRGB(g_ref) : void
{
var cc = g.characterControl;
top.addEventListener(Event.ENTER_FRAME, tick);
}

function tick(e)
{
var fills = g.characterControl.
collarControl.getDataString().split(",");
if(fills.length < 5) return; //Check for rgbFill1
var rgbFill = new ColorTransform(1, 1, 1, fills[4], fills[1], fills[2], fills[3]);

top.back.rgbFill.transform.colorTransform = rgbFill;

if(fills.length < 9) return; //Check for rgbFill2
var rgbFill2 = new ColorTransform(1, 1, 1, fills[8], fills[5], fills[6], fills[7]);


top.back.rgbFill2.transform.colorTransform = rgbFill2;

}
  • The name in orange needs to be the instance name of the symbol containing the rgbFill to be affected.
  • To change the costume RGB slider, modify the name in pink (you can use "collar", "gag", "cuffs", "ankleCuffs", "eyewear", "panties", "armwear", "legwear", "legwearB", "bottoms", "footwear", "top", "bra", "tonguePiercing", "nipplePiercing", "bellyPiercing", "earring", "headwear").
    Keep in mind that in Vanilla and the basic Loader, only "headwear", "bottoms", "legwear", "legwearB", "footwear", "collar", "cuffs" and "ankleCuffs" have two RGB sliders.
  • To add other layers, duplicate the parts in green/blue and modify the layer instances names in green (e.g. "top.chest").
2nd example

This example shows how to use the Headwear RGB sliders to modify the colours of hair located in the Hair Under, Dynamic Hair Under and Dynamic Hair Over templates, as well as the Tongue Piercing slider to modify the colour of a knot located in both of these Dynamic Hair templates.
This code was used for the RGB Dynamic Braids (01) version 1.1 (without preset colours, available here).

import SDTMods.*;
import flash.system.ApplicationDomain;
import flash.geom.ColorTransform;

registerMod(under); //registers the HAIR_UNDER
registerMod(dunder); //registers the DYNAMIC_HAIR_UNDER (back braid)
registerMod(dover); //registers the DYNAMIC_HAIR_OVER (front braid)

charData = "";
modName = "RGB Braids 01";
modCreator = "SyntaxTerror"; //using Dante's Small Braids.

var SDT = ApplicationDomain.currentDomain;

try
{
//Vanilla
var g = SDT.getDefinition("g");
copyRGB(g);
}
catch(ex)
{
//We're in loader, wait.
}

function initl(l) : void
{
//Loader
copyRGB(l.g);
}

function copyRGB(g_ref) : void
{
var cc = g.characterControl;
under.addEventListener(Event.ENTER_FRAME, tick);
under.addEventListener(Event.ENTER_FRAME, tick2);
}

function tick(e)
{
var fills = g.characterControl.headwearControl.getDataString().split(",");
if(fills.length < 5) return; //Check for rgbFill1
var rgbFill = new ColorTransform(1, 1, 1, fills[4], fills[1], fills[2], fills[3]);

under.rgbFill.transform.colorTransform = rgbFill;
dover.segment0.rgbFill.transform.colorTransform = rgbFill;
dover.segment1.rgbFill.transform.colorTransform = rgbFill;
dover.segment2.rgbFill.transform.colorTransform = rgbFill;
dunder.segment0.rgbFill.transform.colorTransform = rgbFill;
dunder.segment1.rgbFill.transform.colorTransform = rgbFill;
dunder.segment2.rgbFill.transform.colorTransform = rgbFill;

if(fills.length < 9) return; //Check for rgbFill2
var rgbFill2 = new ColorTransform(1, 1, 1, fills[8], fills[5], fills[6], fills[7]);

under.rgbFill2.transform.colorTransform = rgbFill2;
dover.segment0.rgbFill2.transform.colorTransform = rgbFill2;
dover.segment1.rgbFill2.transform.colorTransform = rgbFill2;
dover.segment2.rgbFill2.transform.colorTransform = rgbFill2;
dunder.segment0.rgbFill2.transform.colorTransform = rgbFill2;
dunder.segment1.rgbFill2.transform.colorTransform = rgbFill2;
dunder.segment2.rgbFill2.transform.colorTransform = rgbFill2;
}

function tick2(e)
{
var fills = g.characterControl.tonguePiercingControl.getDataString().split(",");
if(fills.length < 5) return; //Check for rgbFill1
var rgbFill = new ColorTransform(1, 1, 1, fills[4], fills[1], fills[2], fills[3]);

dover.segment2.knot.rgbFill3.transform.colorTransform = rgbFill;
dunder.segment2.knot.rgbFill3.transform.colorTransform = rgbFill;
}

  • This example uses the function tick for the hair colours and tick2 for the knots one. A line needs to be added in the function copyRGB.
  • As the knots only have one colour to be adjustable, the check for rgbFill2 is useless.
  • The method to change the RGB sliders and to add other layers is explained in the 1st example.
Troubleshooting

  • If several sliders are to be used, they need to each have a specific instance name, eg. rgbFill, rgbFill2, rgbFill3, etc. (these names don't need to be the same as actual RGB fills of templates, ie. rgbFill and rgbFill2, as they are only used to identify the different symbols in your mod and will be replaced by the RGB fill names used by SDT).
  • Case is important in the symbols instance names: "rgbFill" is different from "RGBfill", "top" is different from "Top", etc.
  • If code is added for inexistant symbols, an issue will occur and the next symbols in the settings will not be modified and stay black.
 
Last edited:

SyntaxTerror

Staff member
Content Creator
Joined
Jul 24, 2014
3rd example

This example is similar to the 2nd one, but adds preset colours when the V key is pressed.
Nine basic coulours are available: blonde, red hair, light brown, dark brown, black, grey, pink, blue and green.

This code was used for the RGB Dynamic Braids (01) version 2.0.

import SDTMods.*;
import flash.system.ApplicationDomain;
import flash.geom.ColorTransform;
import flash.events.KeyboardEvent;

registerMod(under);
registerMod(dunder);
registerMod(dover);

charData = "";
modName = "RGB Braids 01";
modCreator = "SyntaxTerror"; //using Dante's Small Braids.

var keystrokecount:int = 0;
var loadermode:Boolean = false;
var g;
var SDT = ApplicationDomain.currentDomain;

try
{
//Vanilla
g = SDT.getDefinition("g");
copyRGB(g);
g.stageRef.parent.addEventListener(KeyboardEvent.KEY_DOWN, hairColour);
}
catch(ex)
{
//We're in loader, wait.
}

function initl(l) : void
{
//Loader
g = l.g;
copyRGB(g);
stage.addEventListener(KeyboardEvent.KEY_DOWN, hairColour);
loadermode = true;
}

function copyRGB(g_ref) : void
{
under.addEventListener(Event.ENTER_FRAME, tick);
under.addEventListener(Event.ENTER_FRAME, tick2);
}

function tick(e)
{
if(!
under.visible || under.parent == null) return;

var fills = g.characterControl.
headwearControl.getDataString().split(",");
if(fills.length < 5) return; //Check for rgbFill1
var rgbFill = new ColorTransform(1, 1, 1, fills[4], fills[1], fills[2], fills[3]);

under.rgbFill.transform.colorTransform = rgbFill;
dover.segment0.rgbFill.transform.colorTransform = rgbFill;
dover.segment1.rgbFill.transform.colorTransform = rgbFill;
dover.segment2.rgbFill.transform.colorTransform = rgbFill;
dunder.segment0.rgbFill.transform.colorTransform = rgbFill;
dunder.segment1.rgbFill.transform.colorTransform = rgbFill;
dunder.segment2.rgbFill.transform.colorTransform = rgbFill;

if(fills.length < 9) return; //Check for rgbFill2
var rgbFill2 = new ColorTransform(1, 1, 1, fills[8], fills[5], fills[6], fills[7]);

under.rgbFill2.transform.colorTransform = rgbFill2;
dover.segment0.rgbFill2.transform.colorTransform = rgbFill2;
dover.segment1.rgbFill2.transform.colorTransform = rgbFill2;
dover.segment2.rgbFill2.transform.colorTransform = rgbFill2;
dunder.segment0.rgbFill2.transform.colorTransform = rgbFill2;
dunder.segment1.rgbFill2.transform.colorTransform = rgbFill2;
dunder.segment2.rgbFill2.transform.colorTransform = rgbFill2;
}

function tick2(e)
{
var fills = g.characterControl.
tonguePiercingControl.getDataString().split(",");
if(fills.length < 5) return; //Check for rgbFill1
var rgbFill = new ColorTransform(1, 1, 1, fills[4], fills[1], fills[2], fills[3]);

dover.segment2.knot.rgbFill3.transform.colorTransform = rgbFill;
dunder.segment2.knot.rgbFill3.transform.colorTransform = rgbFill;
}

//preset colours:

function hairColour(event: KeyboardEvent): void {

if(!
under.visible || under.parent == null) return;

if(event.keyCode == 86) // 86 = "V" key
{
if(loadermode)
{
switch (keystrokecount)
{
case 0 : //blonde
g.characterControl.
headwearControl.readRGB([255,237,156,1], "rgbFill");
g.characterControl.
headwearControl.readRGB([211,158,90,1], "rgbFill2");
break;
case 1 : //red
g.characterControl.
headwearControl.readRGB([233,119,50,1], "rgbFill");
g.characterControl.
headwearControl.readRGB([161,66,30,1], "rgbFill2");
break;
case 2 : //light brown
g.characterControl.
headwearControl.readRGB([161,104,56,1], "rgbFill");
g.characterControl.
headwearControl.readRGB([71,47,32,1], "rgbFill2");
break;
case 3 : //dark brown
g.characterControl.
headwearControl.readRGB([88,51,29,1], "rgbFill");
g.characterControl.
headwearControl.readRGB([56,31,15,1], "rgbFill2");
break;
case 4 : //black
g.characterControl.
headwearControl.readRGB([46,47,78,1], "rgbFill");
g.characterControl.
headwearControl.readRGB([33,33,51,1], "rgbFill2");
break;
case 5 : //grey
g.characterControl.
headwearControl.readRGB([128,128,128,1], "rgbFill");
g.characterControl.
headwearControl.readRGB([50,50,50,1], "rgbFill2");
break;
case 6 : //pink
g.characterControl.
headwearControl.readRGB([255,167,188,1], "rgbFill");
g.characterControl.
headwearControl.readRGB([197,64,109,1], "rgbFill2");
break;
case 7 : //blue
g.characterControl.
headwearControl.readRGB([130,190,230,1], "rgbFill");
g.characterControl.
headwearControl.readRGB([40,110,170,1], "rgbFill2");
break;
case 8 : //green
g.characterControl.
headwearControl.readRGB([150,255,150,1], "rgbFill");
g.characterControl.
headwearControl.readRGB([70,150,70,1], "rgbFill2");
break;
default : break;
}
}
else //vanilla mode, readRGB not available, use loaddatastring instead
{
var myele:String = g.characterControl.
headwearControl.getDataString()
myele = myele.split(",")[0];

switch (keystrokecount )
{
case 0 : //blonde
g.characterControl.
headwearControl.loadDataString(myele+",255,237,156,1,211,158,90,1");
break;
case 1 : //red
g.characterControl.
headwearControl.loadDataString(myele+",233,119,50,1,161,66,30,1");
break;
case 2 : //light brown
g.characterControl.
headwearControl.loadDataString(myele+",161,104,56,1,71,47,32,1");
break;
case 3 : //dark brown
g.characterControl.
headwearControl.loadDataString(myele+",88,51,29,1,56,31,15,1");
break;
case 4 : //black
g.characterControl.
headwearControl.loadDataString(myele+",46,47,78,1,33,33,51,1");
break;
case 5 : //grey
g.characterControl.
headwearControl.loadDataString(myele+",128,128,128,1,50,50,50,1");
break;
case 6 : //pink
g.characterControl.
headwearControl.loadDataString(myele+",255,167,188,1,197,64,109,1");
break;
case 7 : //blue
g.characterControl.
headwearControl.loadDataString(myele+",130,190,230,1,40,110,170,1");
break;
case 8 : //green
g.characterControl.
headwearControl.loadDataString(myele+",150,255,150,1,70,150,70,1");
break;
default : break;
}
}
keystrokecount = keystrokecount >= 8 ? 0 : keystrokecount + 1;
}
}


  • The name in orange needs to be the instance name of the symbol containing the rgbFill to be affected .
  • To change the costume RGB sliders used to change the hair colours, modify the name in pink (you can use "collar", "gag", "cuffs", "ankleCuffs", "eyewear", "panties", "armwear", "legwear", "legwearB", "bottoms", "footwear", "top", "bra", "tonguePiercing", "nipplePiercing", "bellyPiercing", "earring", "headwear").
    Keep in mind that in Vanilla and the basic Loader, only "headwear", "bottoms", "legwear", "legwearB", "footwear", "collar", "cuffs" and "ankleCuffs" have two RGB sliders.
    I usually use "collar" and "headwear" to make two versions of the hair mod.
  • To change the costume RGB slider used to change the knot colour, modify the name in purple.
    I usually use the "tonguePiercing" for my hair mods.
  • To add other layers, duplicate the parts in green/blue and modify the layer instances names in green (e.g. "top.chest").
 
Last edited:

SyntaxTerror

Staff member
Content Creator
Joined
Jul 24, 2014
The following examples use another method, whose code is simpler, but that allows a limited number of sliders for Vanilla mods and that is not usable for hair.

4th example

This example shows how to use the Collar RGB slider to modify the colour of a piece of costume located in the Top layer:
  1. Open the Collar template and draw a shape out of view (e.g. a square far below the collar, so it won't be seen ingame). This template instance name will be "collar".
  2. Select this shape and transform it into a symbol (F8), and name its instance "rgbFill".
  3. Draw your other rgbFill symbols on the Top layer (here there will be 4: back, chest, right and left breasts) and name their instances rgbFill as usual. This template instance name will be "top".
  4. Go in the Action window (F9), then open the Settings: Frame 1 actions (the place where templates are registered) and add this to the code:
addEventListener(Event.ENTER_FRAME, followColorSlider);
function followColorSlider(e:Event)
{
top.back.rgbFill.transform.colorTransform = collar.rgbFill.transform.colorTransform;
top.chest.rgbFill.transform.colorTransform = collar.rgbFill.transform.colorTransform;
top.rightBreast.rgbFill.transform.colorTransform = collar.rgbFill.transform.colorTransform;
top.leftBreast.rgbFill.transform.colorTransform = collar.rgbFill.transform.colorTransform;
}


To explain briefly the first line of the function, the colour of the "back" rgbFill of the "top" will be the same as the rgbFill of the "collar".

5th example

This example shows how to use only the Top RGB slider to modify the colour of both Top and Bottoms layers.
  1. Draw all the rgbFill symbols (here there will be 4 in the Top layer: back, chest, right and left breasts; and 2 in the Bottoms layer: left and right thigh) and name their instances rgbFill as usual. These templates instances names will be "top" and "bottoms".
  2. Go in the Action window (F9), then open the Settings: Frame 1 actions (the place where templates are registered) and add this to the code:
addEventListener(Event.ENTER_FRAME, followColorSlider);
function followColorSlider(e:Event)
{
bottoms.leftThigh.rgbFill.transform.colorTransform = top.back.rgbFill.transform.colorTransform;
bottoms.rightThigh.rgbFill.transform.colorTransform = top.back.rgbFill.transform.colorTransform;
}
 
Last edited:

SyntaxTerror

Staff member
Content Creator
Joined
Jul 24, 2014
Edited according to new info given by ModGuy ModGuy .

His code has to be prefered as it allows to make RGB adjustable hair mods and Vanilla mods using sliders usually not available, such as Legwear or Cuffs ones.
 

DigitalSmutExports

Content Creator
Joined
Sep 12, 2018
Hi,

Thanks for writing these. I just used method 1 to have a top comprised of both top- and collar templates be coloured by the top slider only. Now I wonder if any of these can be used to colour body mods?

I tried the code in example 1 but I've been unsuccesful.

I have an instance of the nipple template named "nippleslider" and I've replaced "top" (written in orange in your example) with "nippleslider" and "top.back" (written in green in your example) with "nippleslider.rightNipple" (the nipple template is comprised of one symbol named rightNipple and one named leftNipple). I get no compilation errors but the mod just stays black and is unaffected by the collar slider.

Am I screwing up?
 
Last edited:

SyntaxTerror

Staff member
Content Creator
Joined
Jul 24, 2014
I have an instance of the nipple template named "nippleslider" and I've replaced "top" (written in orange in your example) with "nippleslider" and "top.back" (written in green in your example) with "nippleslider.rightNipple" (the nipple template is comprised of one symbol named rightNipple and one named leftNipple). I get no compilation errors but the mod just stays black and is unaffected by the collar slider.
Upload your FLA somewhere (eg. FileDropper.com), I may have an idea.
 

DigitalSmutExports

Content Creator
Joined
Sep 12, 2018
Hi,
Thanks for the offer! I figured it out though. I haven't finished the mod yet because I've run into another problem unrelated to RGB adjustability.
 

SyntaxTerror

Staff member
Content Creator
Joined
Jul 24, 2014
Added an example showing how to add preset colours that change with the pressing of a key in post #2.
 
Top Bottom