3 Replies Latest reply on May 24, 2007 10:12 AM by JFaith777

    roundedcorner Videodisplay

    macromichael
      I am trying to make a VideoDisplay with rounded corners. It connects to a webcam, and the rounded corners disapear.

      <?xml version="1.0"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" >
      <mx:Script>
      <![CDATA[

      import mx.events.VideoEvent;
      import video.streamSendUI;
      import flash.media.Camera;

      private var cam

      public function initCamera():void {
      // Initialize the variable.
      cam = Camera.getCamera();
      if (cam) {
      cam.setQuality(65535,80);
      cam.setMode(320,240,15,true);
      camView.attachCamera(cam);
      } else {
      trace("No camera Found ");
      // attach no camera image to video
      }
      }
      ]]>
      </mx:Script>
      <mx:VideoDisplay creationComplete="initCamera();" id="camView" height="240" width="320" borderStyle="solid" cornerRadius="10" />
      </mx:Application>

      Any Ideas?
        • 1. Re: roundedcorner Videodisplay
          leotemp Level 1
          im petty sure the corners cant be displayed over content like that you could either wrap it in a canvas and make the canvas larger then the video or create alpha tranparent graphics like gifs or pngs that are the corners and then lay them on top of your video componnent in a way that creats the illusion of rounded corners
          • 2. Re: roundedcorner Videodisplay
            raghunathrao
            The approach that leo said above is the way to go... here's the code for the same, using a UIComponent Mask

            <?xml version="1.0"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="initMask()">
            <mx:Script>
            <![CDATA[
            import mx.core.UIComponent;
            import mx.events.VideoEvent;
            import flash.media.Camera;
            private var cam
            private var square:UIComponent;
            public function initCamera():void {
            cam = Camera.getCamera();
            if (cam) {
            cam.setQuality(65535,80);
            cam.setMode(380,280,25,true);
            myVD.attachCamera(cam);
            }
            else {
            trace("No camera Found ");
            }
            }
            private function initMask():void {
            square = new UIComponent();
            square.graphics.beginFill(0x000000);
            square.graphics.drawRoundRect(0, 0, 320, 240,25);
            square.x = 0;
            square.y = 0;
            myCanvas.addChild(square);
            myVD.mask = square;
            }
            ]]>
            </mx:Script>
            <mx:Canvas width="400" height="300" id="myCanvas">
            <mx:VideoDisplay width="380" height="280" id="myVD"/>
            </mx:Canvas>
            <mx:Button label="Start Camera" click="initCamera()" />
            </mx:Application>
            • 3. Re: roundedcorner Videodisplay
              JFaith777
              Anyone have any luck doing something similar to this using an image for the "mask" (png)?

              Thanks!