Skip to main content
thaob
Participant
November 19, 2015
Question

I can't blend the layers together

  • November 19, 2015
  • 3 replies
  • 916 views

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);

}

This topic has been closed for replies.

3 replies

robdillon
Participating Frequently
November 20, 2015

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.

Participating Frequently
November 20, 2015

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
thaobAuthor
Participant
November 20, 2015

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

Participating Frequently
November 19, 2015

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
thaobAuthor
Participant
November 20, 2015

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