5 Replies Latest reply on Aug 31, 2011 11:28 AM by Sam Souhrada

    Mask not working on ProgressBar

    Sam Souhrada Level 1

      I was experimenting using the mask property for the ProgressBar. However when I coded a simple example I wasn’t able to get anything to display. Any ideas?

       

      <mx:ProgressBar  x="19" y="95" labelPlacement="center" indeterminate="true" label="1234"

                  width="210" height="20" id="prog" mask="{maskCanvas}"  />

                 

      <mx:Canvas  width="210" height="20" x="19" y="67" borderStyle="solid"

                  borderColor="#000000" cornerRadius="5" id="maskCanvas" backgroundColor="#FF0000"/>

       

       

       

      Thanks

        • 1. Re: Mask not working on ProgressBar
          rtalton Level 4

          Set the x/y vales of the Canvas to match that of the ProgressBar. The mask must be positioned at the same coordinates as the object it masks. Also, it doesn't matter what the z-order of the mask is; it does not have to be on top of the display object it masks.

          1 person found this helpful
          • 2. Re: Mask not working on ProgressBar
            Sam Souhrada Level 1

            Thanks for the response - I tried matching the x,y values but had no luck. Here is the new code:

             

             

            <mx:ProgressBar
                    id="progBar" 
                    x="19" y="95"
                    width="210" height="20"
                    labelPlacement="center" indeterminate="true" label="1234"
                    mask="{maskCanvas}"  />
               
                <mx:Canvas
                    id="maskCanvas"
                    x="19" y="95"
                    width="210" height="20"
                    borderStyle="solid" borderColor="#000000" cornerRadius="5"/>

             

             

            I also tried reversing the Z-Order:

             

             

            <mx:Canvas
                    id="maskCanvas"
                    x="19" y="95"
                    width="210" height="20"
                    borderStyle="solid" borderColor="#000000" cornerRadius="5"/>
               
                <mx:ProgressBar
                    id="progBar" 
                    x="19" y="95"
                    width="210" height="20"
                    labelPlacement="center" indeterminate="true" label="1234"
                    mask="{maskCanvas}"  />

             

             

             

            Also no luck - Any idea if the progress bar is not able to be masked?

            • 3. Re: Mask not working on ProgressBar
              rtalton Level 4

              Try this code, which I took from yours.

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                  layout="absolute">

               

                  <mx:ProgressBar
                      id="prog"
                      label="1234"
                      width="210"
                      height="20"
                      y="95"
                      x="19"
                      indeterminate="true"
                      labelPlacement="center"
                      mask="{maskCanvas}"/>

               

                  <mx:Canvas
                      id="maskCanvas"
                      y="87"
                      x="46"
                      width="48"
                      height="38"
                      backgroundColor="#000000"
                      borderColor="#000000"
                      borderStyle="solid"
                      cornerRadius="20"/>
              </mx:Application>

              • 4. Re: Mask not working on ProgressBar
                Sam Souhrada Level 1

                Thanks - your example worked for me. Not sure why I couldn't get it to work before. I think it was because the mask and the item were the same exact size as well. I created another example and posted below which is what I was going for.

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                    layout="absolute">

                 

                 

                 

                    <mx:Canvas width="300" height="30" horizontalCenter="0" verticalCenter="0">
                        <mx:ProgressBar
                            id="prog"
                            label="1234"
                            width="300"
                            height="30"
                            indeterminate="true"
                            labelPlacement="center"
                            mask="{maskCanvas}"/>
                       
                        <mx:Canvas
                            id="maskCanvas"
                            width="295"
                            height="20"
                            backgroundColor="#000000"
                            borderColor="#000000"
                            borderStyle="solid"
                            cornerRadius="10" horizontalCenter="0" verticalCenter="0"/>
                           
                    </mx:Canvas>
                       
                       
                </mx:Application>

                 

                roundedProgressBar.JPG

                • 5. Re: Mask not working on ProgressBar
                  Sam Souhrada Level 1

                  Does anyone have an example using Flashbuilder 4.5?