I can't blend the layers together

[thaob]

I want to make my object works like this car example: http://www.adobe.com/devnet/actionscript/samples/drawing_4.html

I have a building and I just want to change the color of the doors, gutters... when the user clicks a title. Very simple.  Just like in the above example.  I follow the example above.

My button click works.  Changing color code works, but my shade is display on top and does not show my color.  I called in for support, but they told me to post my question in the forum.

in the code below doorColorMC is a movieClip for my door.

The order layers is: script, shade, doorColor, background.

Please help.  Thanks

-------------------------------------------------------------------------------------------- !

import fl.data.DataProvider;

import flash.events.MouseEvent;

import flash.geom.ColorTransform;

import flash.geom.Transform;

import flash.display.MovieClip;

var aDoorColors:Array = new Array(0x000000, 0xFF0000, 0x0000CC, 0x00CC00, 0xFFFF00);

var aDoorColorNames:Array = new Array("Cedar Red", "Garnet", "Continental Brown", "Bright White", "Iced White");

var dpDoorColorNames:DataProvider = new DataProvider();

var boxArray:Array = new Array();

loadDoorColors();

stop();

function loadDoorColors():void

{

    for(var i:int=0; i < aDoorColors.length; i++)

    {

        boxArray = new Shape();

        // Draw box w next color in array

        drawBox(boxArray, aDoorColors);

        // Add label and box to boxesDp

        dpDoorColorNames.addItem( {label:aDoorColorNames, source:boxArray} );

    }

    // Assign box DataProvider to the TileList

    doorTile.dataProvider = dpDoorColorNames; 

    doorTile.columnWidth = 110;

    doorTile.rowHeight = 110;

    //tileDoor.rowCount = 2;

    doorTile.setSize(1120,115);

    //tileDoor.move(10, 10);

    doorTile.setStyle("contentPadding", 5);

}

function drawBox(box:Shape,color:uint):void

{

    box.graphics.beginFill(color, 1.0);

    box.graphics.drawRect(0, 0, 80, 80);

    box.graphics.endFill();

}

// Add handler for Button clicks

doorTile.addEventListener(MouseEvent.CLICK, tileDoorClickHandler);

function tileDoorClickHandler(event:MouseEvent):void

{

  var clickedLabel = event.target.label;

  var clickedIndex:int = aDoorColorNames.indexOf(clickedLabel,0);

  if (clickedIndex > -1)

  {

  var colorTrans:ColorTransform = new ColorTransform();

  colorTrans.color = aDoorColors[clickedIndex];

  doorColorMC.transform.colorTransform = colorTrans;

  //doorColorMC.transform.colorTransform = new ColorTransform(0,0,0,1,0,0,200);

  }

  //trace(clickedLabel);

  //trace(clickedIndex);

}

[Elliot Mebane]

What do you mean by this?: Changing color code works, but my shade is display on top and does not show my color.

What are the results when you use your commented-out line?:   //doorColorMC.transform.colorTransform = new ColorTransform(0,0,0,1,0,0,200);

[thaob]

I have the same result as display the selected color.  I only see the top layer.  I don't see my color layer.  I would like to send you my fla file, but I don't know how to do it here.

Thanks

[thaob]

The picture is the result I have.  I don't see the color change.

[robdillon]

You need to actually apply the color transformation. Change this line:

  //doorColorMC.transform.colorTransform = new ColorTransform(0,0,0,1,0,0,200);

to this:

  doorColorMC.transform.colorTransform = new ColorTransform;

and you should see the color that you've chosen.

[thaob]

I tried both way. It does work. It looks I need a transparent top layer, but I’m not sure how to do that.

[robdillon]

Without seeing your whole file I can only guess that the problem that you see is that when you color a section you only see a block of color and not the building part. What you want to do is to set the alpha value for each of the building sections that you are coloring to a value less than 100%. Then, when the color is added it will not be opaque and block the building in the lower layer.

[Elliot Mebane]

Are you attempting to layer a partially-transparent color layer over a content layer (door image)? You may have more success changing the ColorTransform of the door itself and avoiding the use of a separate color layer.

[thaob]

this is my original code:

    var colorTrans:ColorTransform = new ColorTransform();

    colorTrans.alphaMultiplier = 0;

    colorTrans.alphaOffset = 50;

   colorTrans.color = aDoorColors[clickedIndex];

    door1_CM.transform.colorTransform = colorTrans;

    door2_CM.transform.colorTransform = colorTrans;

but the color looks unrealistic and the pattern on the doors are not as clear as original picture.  I would like to achieve the same behavior they have in the car example.  How do I do that?  Basically, I need to let the user pick a color for doors, gutter, trim, wall, and roof.  The building will stay the same, but I have to display the new color they pick for doors, trim...ect.

in the picture below, I clicked on yellow, but the color is greenish and the pattern on the door is not as good and the original. (with alphaMultiplier=0 and alphaOffset =50 as in the code).

And how can I post fla files?  I can even email fla file.

Please, please, very please help. Thanks

[robdillon]

I worked with someone last December on a project almost exactly like this. I can't find the original thread but the process was nearly identical. The "realism" of the colorization of the selected doors will require some work on your part. There are several things that you can do. The first is to adjust your building artwork so that it will display well with the various color overlays. The second is to choose colors that will work as you expect. The door colors in your illustration above don't seem to have anything to do with the colors that are displayed. For instance "bright white" is actually very green. You can set the sample colors any way that you like. You can then use different color values for coloring the actual building parts so that they look like they match the sample colors. In other words you may want the building tint for green to be a lighter tint than the sample green so that when it is overlaid the green will look like it matches.