1 Reply Latest reply on Mar 16, 2010 12:29 PM by Handycam

    Mask appears correct in design view but not runtime

    Handycam Level 1

      I have a component that the designer did as an elaborate thermometer in photoshop, I am trying to replicate it in flex so that I can set the size of the thermometer with code. I have it set up as a custom component (code below), in design view looks like (enlarged):

       

      http://grab.by/36dA

      But when I run the app where I am using the component, the green bar is missing:

       

      http://grab.by/36dE

       

      Here's the code. Why would this be?

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
                 xmlns:s="library://ns.adobe.com/flex/spark" 
                 xmlns:mx="library://ns.adobe.com/flex/mx" width="180" height="20">
           
           
           <s:Group top="0" left="0" right="0" bottom="0" >
                
                <s:Rect top="0" left="0" right="0" bottom="0" radiusX="8">
                     <s:fill>
                          <s:SolidColor color="#fbe5a1"/>
                     </s:fill>
                     <s:stroke>
                          <s:SolidColorStroke id="bdr" weight="2" color="#ffffff"/>
                     </s:stroke>
                     
                </s:Rect>
                
                <s:Group top="0" left="0" bottom="0" right="0">
                     <s:Rect id="thermo" top="0" left="0" bottom="0" width="80">
                          <s:fill>
                               <s:SolidColor color="#bfe994" />
                          </s:fill>
                     </s:Rect>
                     <s:mask>
                          <s:Group>
                               <s:Rect top="2" bottom="2" left="2" width="178" radiusX="8" radiusY="8">
                                    <s:fill>
                                         <s:SolidColor color="#000000"/>
                                    </s:fill>
                               </s:Rect>
                          </s:Group>
                     </s:mask>
                </s:Group>
                
           </s:Group>
           
           
           <s:Rect top="2" left="2" right="2" bottom="2" radiusX="8" radiusY="8">
                <s:filters>
                     <s:DropShadowFilter alpha=".3" blurX="12" blurY="12" distance="2" inner="true" knockout="true" />
                </s:filters>
                <s:fill>
                     <s:SolidColor color="#fbe5a1"/>
                </s:fill>
           </s:Rect>
           
           
      </s:Group>
      
       
      

        • 1. Re: Mask appears correct in design view but not runtime
          Handycam Level 1

          FWIW, setting it like this seems to work:

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
                     xmlns:s="library://ns.adobe.com/flex/spark" 
                     xmlns:mx="library://ns.adobe.com/flex/mx" width="180" height="20" creationComplete="group1_creationCompleteHandler(event)">
               
               <fx:Script>
                    <![CDATA[
                         import mx.events.FlexEvent;
                         import spark.components.BorderContainer;
          
                         protected function group1_creationCompleteHandler(event:FlexEvent):void
                         {
                              var bc:BorderContainer = new BorderContainer();
                              bc.width = ds.width;
                              bc.height = ds.height;
                              bc.setStyle("cornerRadius", 8);
                              bc.y = 2;
                              bc.x = 2;
                              bar.mask = bc;
                         }
          
                    ]]>
               </fx:Script>
               
               
               <s:Group top="0" left="0" right="0" bottom="0" >
                    
                    <s:Rect top="0" left="0" right="0" bottom="0" radiusX="8">
                         <s:fill>
                              <s:SolidColor color="#fbe5a1"/>
                         </s:fill>
                         <s:stroke>
                              <s:SolidColorStroke id="bdr" weight="2" color="#ffffff"/>
                         </s:stroke>
                         
                    </s:Rect>
                    
                    <s:Rect id="bar" top="0" left="0" bottom="0" width="80">
                         <s:fill>
                              <s:SolidColor color="#bfe994" />
                         </s:fill>
                    </s:Rect>
                    
                    
               </s:Group>
               
               
               <s:Rect id="ds" top="2" left="2" right="2" bottom="2" radiusX="8" radiusY="8">
                    <s:filters>
                         <s:DropShadowFilter alpha=".3" blurX="12" blurY="12" distance="2" inner="true" knockout="true" />
                    </s:filters>
                    <s:fill>
                         <s:SolidColor color="#fbe5a1"/>
                    </s:fill>
               </s:Rect>
               
               
          </s:Group>