Question

I am searching for a way to have my spritevisualelement have round corners so that it is displayed in a circular shape.

The SpriteVisualElement contains a Video Stream from FMS to display but I do not want it to be rectangular.

Somebody got a hint for me?

<s:BorderContainer
          borderColor="0x000000"
          borderAlpha="50"
          cornerRadius="150"
          borderWeight="3"
          x="161"
          y="10"
          >
<s:SpriteVisualElement id="vid" width="480" height="320"/>
          </s:BorderContainer>
<s:SpriteVisualElement id="vid_self_preview" x="710" y="373" width="90" height="60"/>

But the Container keeps being in the background and the whole remote Video which is displayed in the “vid” (=id) is in the foreground.
How can I set the Container to be in Foreground? then just setting whole application background would do the job.

Answer 1

Sounds like a perfect use case for an Alpha Mask.

Try this:

import spark.core.MaskType;

private function addMask():void {
  var vidMask:SpriteVisualElement = new SpriteVisualElement();

  // first mask the entire thing transparent
  vidMask.graphics.beginFill(0x000000, 0);
  vidMask.graphics.drawRect(0,0,480,320);
  vidMask.graphics.endFill();

  // then draw the rounded rectangle (or whatever) that you want to show
  vidMask.graphics.beginFill(0x000000, 1); //color doesn't matter
  vidMask.graphics.drawRoundRect(0,0,480, 320, 200, 200); // choose 
  vidMask.graphics.endFill();

  addElement(vidMask); //the mask has to be on the Display List
  vid.mask = vidMask; // attach the mask to the sve
  vid.maskType = MaskType.ALPHA; // choose alpha masking
}

And in your MXML:

<s:SpriteVisualElement id="vid" width="480" height="320" addedToStage="addMask()">

UPDATE

Actually, now that I thought about it some more, my initial answer is misleading. You really only need to have a Clipping Mask (not an Alpha one), since there is no gradation in the opacity. You can update the addMask function as follows:

private function addMask():void {
      var vidMask:SpriteVisualElement = new SpriteVisualElement();

      // draw the rounded rectangle (or whatever) that you want to show
      vidMask.graphics.beginFill(0x000000, 1); //color doesn't matter
      vidMask.graphics.drawRoundRect(0,0,480, 320, 200, 200); // the last two effect the roundness
      vidMask.graphics.endFill();

      addElement(vidMask); //the mask has to be on the Display List
      vid.mask = vidMask; // attach the mask to the sve
      vid.maskType = MaskType.CLIP; // choose clip masking
    }

Unless you do end up using a graded opacity in your mask, this method would be preferable, since it should simplify the compositing the player has to carry out.