5 Replies Latest reply on Oct 9, 2009 3:25 PM by tork314

    Dynamic Paths or Skinning The Panel

    tork314

      Hello.

      Here is the question that affects wheter Catalys will live or not.

       

      Let say I have a baloon of unregular shape and I would like to skin some SikinableContainer.

      I managed to get (it was not easy) vector paths inside the catalyst (not rasterized BitmapImage) from PSD.

      However, ballon grows, depending on the size of the content. So I need to alter paths.

      Paths were given in abbreviated form:

      <s:Path data="M 7.95 1.95 L 163 1.95 C 165.75 1.95 168 4.2 168 7 L 168 273 C 168 275.75 165.75 278 163 278 C 163 278 121.7 278 94.45 278 L 87 288 C 86.95 288 79.5 278 79.5 278 C 52.25 278 7.95 278 7.95 278 C 5.2 278 2.95 275.75 2.95 273 L 2.95 7 C 2.95 4.2 5.2 1.95 7.95 1.95" winding="evenOdd" y.disabled="0" x.disabled="0" height.normal="354.505" width.normal="155.081">
                          <s:fill>
                              <s:SolidColor color="0xff0000"/>
                          </s:fill>
                      </s:Path>

       

      So to insert that dynamic {height} I will need to convert everything into form <s:segments><s:MoveSegment x=7.95 y=1.95>.... manually?

      All of it?

        • 1. Re: Dynamic Paths or Skinning The Panel
          Tvoliter Adobe Employee

          The path object has both a height and width properties, so you can set those properties to scale the object without having to change the path's point data. Notice in Catalyst,  that that  if you scale this path to different sizes in each state, that the path data doesn't change, but the width and height properties do.

           

          If you take this into flex builder you can use databinding on the path's height property ( height="{slider.value}" for example) to scale the path dynamically.

           

          Ty

          • 2. Re: Dynamic Paths or Skinning The Panel
            tork314 Level 1

            the scaling of the baloon is not an option. The bottom part and the top part have to stay the same size because of the specific curvature, however the height of the midde part changes.

            • 3. Re: Dynamic Paths or Skinning The Panel
              njadobe2 Adobe Employee

              Hi Tork,

               

              You can't do this directly in Catalyst currently, but if you bring the path into Flex Builder you can apply scaleGrid properties to it to make it so only the middle part scales.

               

              First, if the path is not already inside a Group, wrap a Group tag around the path. Then, on the Group tag, set scaleGridLeft/scaleGridRight to the X coordinates of the boundaries of the part you want to be stretchable, and do the same for scaleGridTop/scaleGridBottom and the Y coordinates.

               

              Once you've done that, you should be able to dynamically set the width/height on the group to resize the path inside it. (You might also have to set resizeMode="scale" on the Group, although I believe that's no longer required when you set the scale grid.)

               

              Let us know if this works for you.

              1 person found this helpful
              • 4. Re: Dynamic Paths or Skinning The Panel
                tork314 Level 1

                Thank you, Narciso, I didn't think of using 9 grid.

                And it looks like a solution for the complex shapes.

                The issue is pretty common for the skinning workflow and I see how catalyst will become obsolete if this won't get resolved in graphics.

                • 5. Re: Dynamic Paths or Skinning The Panel
                  tork314 Level 1

                  Thank you, Narciso, I didn't think of using 9 grid.

                  And it looks like a solution for the complex shapes.

                  The issue is pretty common for the skinning workflow and I see how catalyst will become obsolete if this won't get resolved in graphics.