0 Replies Latest reply on Feb 9, 2010 4:28 AM by novamatt

    Skinning components from designer's artwork the right way ?

    novamatt

      Hi all !

       

      Firstly, I must confess that I've had to dive right into Flex 4 with hardly any Flex 3 experience for my company needs, so sorry if my questions sound dumb to you. Sorry as well for the bad English I'm using btw, I'll try to explain myself as good as possible.

       

      I've got some piece of designer's artwork drawn with Adobe Illustrator CS4 on the one hand. I've got FlexBuilder and the need to develop a RIA using this design on the other hand. My problem is fairly simple to understand : How can I make the two match together with respect to the new Flex 4 skinning approach ? And without having to edit the designer job by myself as much as possible.

       

      According to the numerous blogs and online docs I've read so far, the right way to do this is to export the design as FXG, and use it as a FXG component in my flex skin. It is explained here: http://help.adobe.com/en_US/Flex/4.0/html/WSB7116AE5-4283-4aef-BADB-26BDE0253D1A.html#WS98 32D47C-1EDF-47d6-855A-7190270DD796

      Do you agree with me so far ?

       

      So, here is what I tried with a pretty simple piece of my designer's design : a rounded rectangle filled with linear gradient and alpha that I want to serve as a background for many panels of various sizes in my application :

      In AI CS4, I saved the layer as fxg, then copy the fxg file into my flex application, made a ref to this fxg in my skin mxml file, and then apply this skin class to my panel.

       

      What I got is a picture of my rounded rectangle of the exact same dimension as in the .ai file, whatever the dimensions of my panel.

       

      Looking at the exported fxg file, I can see that all the drawing dimensions are absolute, which explains why my picture is static but doesn't help much. So here is another question for you (assuming I am still moving into the right direction with this FXG stuff) : How to export a fxg fragment with dynamic dimensions ?

       

      Finally, I tried to copy-paste the FXG fragment directly into my mxml skin with FXG syntax inline, remove any reference to static coordinates, set up a <Rect> tag instead of the <Path> I got through Illustrator, adjust some other little tweaks in my skin and actually got the extensible rectangle I was desperately expecting. But I reckon that makes a lot of work around the initial design, so I'm pretty sure there must be a much more straightforward way to get my design up and running. Maybe some of you raised this issue already and is able to give me some hints ?

       

      Thanks

      Matt