You’ve created a component skin in Flash Catalyst CS5 that you want to use in a Flex 4 application. Your skin design involves a spark.primitives.Path object whose width you want to scale dynamically based on display state changes.
Here’s what happens when you try to scale the path with the generated path data:
Notice how the highlight area doesn’t scale properly when the slider is maxed out. This is due to the static path data. This data was generated by Catalyst to closely match the original design dimensions. If you’re unfamiliar with what that generated data looks like, here’s an example:
M 277.636 0 L 8.032 0 C 3.596 0 0 4.442 0 9.921 L 0 47 L 285.667 47 L 285.667 9.921 C 285.667 4.442 282.07 0 277.636 0 Z
This string defines the path that represents the highlight portion of the skin. I won’t go into too much detail about what this string says but basically, the letters are commands and the numbers are coordinates. For the complete rundown, check out the FXG spec.
So, this path data is tied directly to the design time dimensions of the highlight element and it’s this data that needs to be updated whenever the skin’s dimensions change at runtime. Sounds straight forward but how do we do that?
Solution: Override the skin’s updateDisplayList() method to calculate a dynamic value for the data property of the Path object. We only need to modify the points that deal with the rounded corners to ensure smooth/proper scaling in response to changes in width.
To see the difference, click the Swap Skins button to see the results of scaling the same skin modified to override its updateDisplayList() method (View source is enabled).
Now, even though this only deals with horizontal scaling, you shouldn’t have any problems making slight adjustments to accommodate vertical-only scaling or both. The most important thing is determining what the rules are that you want to apply and then tailor the updateDisplayList() override to fit your needs.
NOTE: This sample requires Flash Player 10 and was built using the 4.0.14159 build of the Flex SDK.
Hi, thanks for the advice.
Btw the link to source seems broken
Thanks for spotting that. The source view link has been updated. Cheers…
Hi Hasan,
I have some skins I’m working on currently. My workflow is Flash CS5 to .FXG to Flash Catalyst 5.5 to .FXPL to Flash Builder 4. My skins use optimized-graphics (aka s:Graphic elements). I was under the impression that I could add scaleGrid data (scaleGridTop, scaleGridLeft, …) to the s:Graphic files, then set constraints (left=0, top=0, …) on the s:group’s and that would solve the scaling issue. However this doesn’t seem to be working. Have you tried the scaleGrid approach? It’s a bummer that either FXG, or Catalyst, or both, do not support scaleGrid/scale-9/9-slice. I’m curious if you’ve also tried my approach and found it didn’t work? Your updateDisplayList trick seems to work but seems to be a lot of work for messy graphics and many skins.
Interesting solution. Sounds a lot like work!
Any thoughts?
Thanks for the post!
–
d
Hmmm, I thought the recommended approach was to set the scaleGrid data on the s:Group node and to avoid modifying its s:GraphicElement children in ways that would negate that scaleGrid (eg, rotation, scaling, transforms, etc). If you haven’t tried that already, I’d suggest giving that a twirl.
FYI, this particular example was pre-Catalyst 5.5…