5 Replies Latest reply on Apr 12, 2011 11:51 AM by Flex harUI

    How do i create a mask for an application?

    jexer

      Hello.

       

      I pulled out an flex app out of Flash catalyst, and it has several "fx:designLayer"s containing images that slide off the stage.

       

      I'd like to hide the images going outside the stage borders with a mask.

       

      I tried:   

       

      <s:mask>
          <s:Group id="mask">
              <s:Rect width = "100" height="100">
                  <s:fill>
                      <s:SolidColor color="#FF0000"/>
                  </s:fill>
              </s:Rect>
          </s:Group>
      </s:mask>

       

      but all I see is blank.

       

      I tried to set mask = "{mask}" inside the <s:Application > tag and removing the <mask> tags, which works, but it gives me a warning that bindings to mask cannot be detected.

       

      How do I get the mask for the app with no warnings?

       

      And just for the sake of understanding Flex, how could I fix either one of those approaches?

        • 1. Re: How do i create a mask for an application?
          Flex harUI Adobe Employee

          Does your app fit in a 100x100 area at the top left?  That's where the mask

          is positioned.

          • 2. Re: How do i create a mask for an application?
            jexer Level 1

            No =)

             

            The 100 x 100 was just something I was using to test the mask, I resized later to 800 x 600.

             

            <mask> tags still give me blank, and mask = "{mask}" still gives me binding warning though

            • 3. Re: How do i create a mask for an application?
              Flex harUI Adobe Employee

              Try taking the id="mask" off the Group.  Then post a 20-line test case if it

              doesn't work.

              1 person found this helpful
              • 4. Re: How do i create a mask for an application?
                jexer Level 1

                Hey.

                 

                Changing the id from "mask" took the warning away, thanks. It works properly now.

                 

                Using the mask tags still gives blank, though.

                 

                I'm not sure if it's even supposed to be done this way, but here's a test case:

                 

                <?xml version="1.0" encoding="utf-8"?>
                <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                               xmlns:s="library://ns.adobe.com/flex/spark"
                               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="800" minHeight="600"
                               backgroundColor="#66DDFF"  >
                    <fx:Declarations>
                    </fx:Declarations>
                    <s:mask>
                        <s:Group id="appMask">
                            <s:Rect x = "300" y = "10" width="600" height="200">
                                <s:fill>
                                    <s:SolidColor color="#FF0000"/>
                                </s:fill>
                            </s:Rect>
                        </s:Group>
                    </s:mask>
                    <s:Rect height="341" id="myRandomThing" width="800" x="79.5" y="86.5" >
                        <s:fill>
                            <s:LinearGradient rotation="270" scaleX="341" x="115.5" y="341">
                                <s:GradientEntry color="#222222" ratio="0"/>
                                <s:GradientEntry color="#FFFFFF" ratio="1"/>
                            </s:LinearGradient>
                        </s:fill>
                        <s:stroke>
                            <s:SolidColorStroke  color="#333333"  weight="10"/>
                        </s:stroke>
                    </s:Rect>
                </s:Application>

                • 5. Re: How do i create a mask for an application?
                  Flex harUI Adobe Employee

                  Defining a Group as the mask doesn't seem to work because the Group is never

                  put on the display list so it doesn't draw its content.  Other examples I

                  saw were using FXG will compiles down into Sprites that draw automatically.

                  I don't normally do masking like this, I just draw a filled Sprite and

                  assign it as the mask.

                   

                  One way I found that worked was this:

                   

                  <?xml version="1.0" encoding="utf-8"?>

                  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                 xmlns:s="library://ns.adobe.com/flex/spark"

                                 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="800"

                  minHeight="600"

                                 backgroundColor="#66DDFF"

                                  >

                      <fx:Declarations>

                      </fx:Declarations>

                      <s:Group id="mask" includeInLayout="false" visible="false" >

                          <s:Rect x="300" y="10" width="600" height="200">

                              <s:fill>

                                  <s:SolidColor color="#FF0000"/>

                              </s:fill>

                          </s:Rect>

                      </s:Group>

                      <s:Rect height="341" id="myRandomThing" width="800" x="79.5" y="86.5" >

                          <s:fill>

                              <s:LinearGradient rotation="270" scaleX="341" x="115.5" y="341">

                                  <s:GradientEntry color="#222222" ratio="0"/>

                                  <s:GradientEntry color="#FFFFFF" ratio="1"/>

                              </s:LinearGradient>

                          </s:fill>

                          <s:stroke>

                              <s:SolidColorStroke  color="#333333"  weight="10"/>

                          </s:stroke>

                      </s:Rect>

                  </s:Application