7 Replies Latest reply on Oct 30, 2010 4:53 PM by Shongrunden

    Repeated background with LinearGradient?

    tehxike1 Level 1

      Is there any way to make a fill repeat when using a LinearGradient?  I'd like to force the following background to repeat itself:

       

      <s:Rect left="0" right="0" top="0" bottom="0">

           <s:fill>

                <s:LinearGradient rotation="90" spreadMethod="repeat" >

                     <s:GradientEntry color="#717681" />

                     <s:GradientEntry color="#aaafbb" />

                </s:LinearGradient>

           </s:fill>

           <s:stroke>

                <s:SolidColorStroke color="#565c65" weight="1" />

           </s:stroke>

      </s:Rect>

       

      spreadMethod="repeat" doesn't seem to have any effect.

        • 1. Re: Repeated background with LinearGradient?
          Jason Szeto Level 3

          By default, LinearGradient will stretch to fill the available space. You need to explicitly give the gradient a size in order to repeat.

           

          Try setting scaleX.

          1 person found this helpful
          • 2. Re: Repeated background with LinearGradient?
            tehxike1 Level 1

            Nice, that worked...  Now that I see the result of that, I realized I also want a gap between them.  Is that at all possible?  I can't just slap alpha's or filler in my gradient, as they'll have the stroke around them.

            • 3. Re: Repeated background with LinearGradient?
              Jason Szeto Level 3

              If you want your stroke to have gaps too, then I'd use a Path for the stroke and a Rect for the fill and just overlay the Path on top of the Rect.

              • 4. Re: Repeated background with LinearGradient?
                tehxike1 Level 1

                I don't follow....how would I make the stroke repeat?

                 

                Just to be clear- here's what I'm dealing with: http://dl.dropbox.com/u/8535237/fill.png

                On the left is what's happening by just making it repeat.  The effect on the right (created by just making a ton of these rects) is what I'm going for.

                 

                Thanks

                • 5. Re: Repeated background with LinearGradient?
                  Jason Szeto Level 3

                  Alright, so I'm going to assume you want to dynamically create Rectangles to fully fill a resizable space. Is this your intention?

                   

                  If so, then the most performant method is to programmatically draw them. I'd create an MXML component based on Group and override the updateDisplayList function. In that function, you'll want to draw your rectangles based on the available space.

                   

                   

                  <?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="955" minHeight="600"
                                 xmlns:local="*">
                      <fx:Declarations>
                          <!-- Place non-visual elements (e.g., services, value objects) here -->
                      </fx:Declarations>
                     
                      <local:DrawnBackground width="100%" height="100%"/>
                     
                  </s:Application>

                   

                  <!-- DrawnBackground.mxml -->

                  <?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">
                      <fx:Declarations>
                          <!-- Place non-visual elements (e.g., services, value objects) here -->
                      </fx:Declarations>
                     
                      <fx:Script>
                          <![CDATA[
                              override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                              {
                                  super.updateDisplayList(unscaledWidth, unscaledHeight);
                                 
                                  var g:Graphics = graphics;
                                 
                                  var rectCount:int = Math.floor(unscaledHeight / 50);
                                  var currentY:Number = 0;
                                 
                                  g.beginFill(0x00FF00, 1);
                                 
                                  for (var i:int = 0; i < rectCount; i++)
                                  {
                                      g.drawRect(0, currentY, 100, 40);
                                      currentY += 50
                                  }
                                 
                                  g.endFill();
                              }
                          ]]>
                      </fx:Script>
                  </s:Group>

                  • 6. Re: Repeated background with LinearGradient?
                    tehxike1 Level 1

                    Cool thanks.  I was wondering if there was some magic I could do to avoid doing it programmatically, but that's fine.

                    • 7. Re: Repeated background with LinearGradient?
                      Shongrunden Adobe Employee

                      Not sure if it helps in your situation, but when I want to do something like this I use FXG and BitmapImage with fillMode="repeat".

                       

                      Sample FXG file attached.

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

                       

                          <s:BitmapImage source="{MyGradient}" fillMode="repeat" width="100%" height="100%"/>

                       

                      </s:Application>