3 Replies Latest reply on Aug 27, 2010 7:59 AM by cosmits

    Flex 4 skinning workflow

    cosmits Level 1

      Hi all

      I'm a flex developer looking for the shortest workflow to use skins in flex

      let's take a Button Component for example - in flex 3 i worked with upSkin DownSkin ect' pointing to Movieclips in a flash library swf

      it was very convenient, despite the fact i wasn't able to version control it....


      now came Flex 4, and by Adobe's Guidlines I'm encouraged to use sparkSkin skins to skin my components - the button....

      so i learned the many benefits of version-controling it, the otion to load skins at runtime ect... and it is very slik

      but remember - i'm after the shortest workflow....


      within the sparkskin file i'm suppose to have the code which describes the graphics of the component

      now, i'm sure it was no one's intent that this bit will be done by hand right?


      so what options do i have to generate sparkSkin files from my designer's vector graphics either in Illustrator or Flash?

      i can export FXG files - but then i'll need again to adjust them by hand to fit in the sparkSkin architechture right?

      not short.... not short at all....


      so here comes Flash Catalyst as the solution option, which can take files from illustrator and turn them into skins

      and it claims to have this seemless workflow i'm after...


      so I give it a few tries and come up with the following:

      as a skin generator per-se - it's quite nice, though the workflow is still too long because i have to import my AI files, switch to code view

      then copy paste the skins it's generating to my Flex project, and if i make adjustments to it in flex, i can't go back to catalyst, i've broken the flow...


      so I know many of you think by now - this is not the way you're suppose to use catalyst, you're suppose to create your project in catalyst then take the whole project to flash builder and continue from there....


      well this is not really an option for me, since i can't have catalyst automated process make decisions at the project level, for instance, i can't change the folder structure in catalyst. it has components and skins folders and that's it!

      i use a different folder structure in my projects, and i can't really change it in flash builder if i open a catalyst project since it has created many dependences in the code that rely on the folder structure that it created


      apart from that, it supports a very small subset of flex components, so if i need to skin a combobox, i can't use catalyst to do that because it doesn't support it.

      and along with all of that, it supports absolute basic layout

      i can't align properly the components without horizontal and vertical components that flex is supporting, but catalyst isn't...


      so i can't really use it as the project creator, and i have to use sparkSkins, but catalyst is the only sparkSkin generator i know of, and it doesn't support properly all the components and all what i already mentioned


      so where is the golden workflow i got the impression is around???


      should i default to flex 3?

      should i edit a skin code by hand?

      i don't think it really cuts it...


      would love to hear your thoughts and experiences on the matter


        • 1. Re: Flex 4 skinning workflow
          cosmits Level 1

          Am I the only one here who is looking for a productive workflow?

          Am I the only one who skins his Apps?


          let's solve this one for once

          going through so many marketing tutorials about the product, skinning, the designer-developer workflow and what not...

          it seems someone had forgotten to actually respond to the obvious needs of production...

          I was trying to be specific and clear as I can in order to get some response and maybe hear of something i missed or new plans for the future


          your response would be very much appreciated


          • 2. Re: Flex 4 skinning workflow
            Bear Travis Adobe Employee

            Hi cosmits,


            The Catalyst-Builder workflow is currently, as you pointed out, limited. Even with these limitations, people have come up with some interesting workflows that you may find helpful for your specific needs. Just try a quick web search for "Catalyst Builder workflow" and you may find what you are looking for.


            Both the Catalyst and Builder teams are aware of the shortcomings of the current workflows, especially as they plan for future versions of the products. If you have specific recommendations, I would point you towards the Adobe Ideas website, where community members can share where they'd like to see Adobe products go in the future.



            • 3. Re: Flex 4 skinning workflow
              cosmits Level 1

              Dear Bear

              while i appreciate your response and intent

              the challenge still remain open

              we've waited a long time for flex 4 & flash catalyst to be released, while working on the betas in trying to get this workflow possible

              I must say I honestly do not understand how catalyst was released in such a premature state being it the only solution to the whole flex framework in regards to skinning your apps. it is after all rather trivial you would want to design those.... and releasing a product which doesn't support horizontal or vertical layout containers and less then half the framework's components is simply leading to a stuck situation which makes it impossible to use the product, unless you conform to its structure, which again - is not an option.

              if you are a developer that uses pureMVC or has it's own way to structure his projects - not possible


              regarding ideas, i will post them on the link you suggested, but i think these flaws are not to be illustrated as a margin for innovation and customer feedback. these are basic routines overlooked at the expense of precious development time of adobes loving customers.

              I would suggest the obvious:

              - support horizontal and vertical containers

              - while at it - a decent Align Panel would be very much appreciated (see Flash's Align panel...)

              - support ALL of Flex UI Components

              - enable the user to change folder structure

              - Two way seamless workflow - it would've been much easier if you could open Flash Builder FXP files in catalyst like you can export FXP files from catalyst and continue the work in Flash Builder.


              I'm sure i'm not the first one to come up with these...

              or at least I would like to hope so...


              I appologize if I sound harsh, it's because we put a lot of good time and faith in Adobe and Flex

              and I Can't understand why release schedules are preceding quality assurance at our expense.


              thank you for your time