4 Replies Latest reply on Jun 22, 2006 2:02 AM by LogicalGeekBoy

    Tinting an image

    LogicalGeekBoy
      Hi all, I'm new to flex (2 beta 3) and have a question that I can't work out from the docs.

      I have an Image object defined in my application mxml file (loading it's content with SWFLoader in actionscript). Now, I'm trying to tint the image in actionscript. By this I mean, changing the image colors so that it looks like a semi-transparent canvas with a blue background has been placed on top.

      I hope that makes sense. Can someone point me in the right direction?

      Cheers
      Andy
        • 1. Re: Tinting an image
          inlineblue Level 1
          quote:

          By this I mean, changing the image colors so that it looks like a semi-transparent canvas with a blue background has been placed on top.

          So then how about placing a semi-transparent canvas with a blue background on top of the image? ;-)

          Literally, that's what you can do. Create a Canvas, give a a blue background colour, make it semi-transparent, and then position over the image. Something like:

          var blue: Canvas = new Canvas();
          blue.setStyle("backgroundColor", 0x0000ff); //Make it blue
          blue.alpha = 0.5; //Make it 50% transparent
          myapp.addChild(blue); //Add it to the same container holding your image
          //Position and size the canvas as needed

          You can also get low-level and play with the colour data of the image, but it's not really worth the hassle.
          • 2. Re: Tinting an image
            LogicalGeekBoy Level 1
            Yeah, I tried that and got it to work but I want to be able to click on the image and so when the canvas is on top, it stops the events firing for the image. Any sample code for modifing an image?
            • 3. Re: Tinting an image
              inlineblue Level 1
              You can still use the Canvas solution if you set Canvas.mouseEnabled = false. This allows all mouse events to pass through the Canvas.

              Otherwise, take a look at the "filters" property. All DisplayObjects support it, including the loader. I haven't used it myself, but the ColorMatrixFilter should be useful. Check the help.
              • 4. Re: Tinting an image
                LogicalGeekBoy Level 1
                Nice one, that works perfectly thanks. I missed the mouseEnabled property.