14 Replies Latest reply on Dec 13, 2010 12:54 AM by Christian3D

    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
            cosmits Level 1

            somehow I was under the impression flex developers like to put some design in their apps

            is there any other way to do so in Flex 4 and getting away without doing it by hand ?




            • 3. Re: Flex 4 skinning workflow

              Hi Cosmits


              I'm grappling with the same issues. We have a large Flex application running with spark + mx components. We have the same setup with a .swf skin base used for our mx components originally created of a component .fla template & tweaked. Moving forward with integrating Spark components, I'm looking to set up a design-developer workflow that will be maintainable.


              I have done loads of reading & have come to the following conclusions:


              A. Options for skinning a flex app:

              1. Create custom skin classes to be referenced by the spark component

              2. Override the spark componets to support embedded skin-types through style classes


              B. Creating skins:

              1. Skin them by hand in Flex (MXML graphics)

              2. Use Catalyst to render / export your spark components + skins

              3. Use a graphics tool (Photoshop, Illustrator) to export your skins as .fxg and *[assign them to custom spark components that support the skins via styling]

              4. Embed skin assets (eg .swf, .png) and *[assign them to custom spark components that support the skins via styling]


              C. Create / manage / maintain your base skin assets:

              1. Flex (skinned by hand as MXML graphics)

              2. Catalyst (imported assets from other adobe programs or assets created via Catalyst)

              3. Adobe graphic programs (Photoshop / Illustrator / Fireworks)

              4. Flash CS 4


              D. Comparison of skin assets, pro's & cons relevant to my requirements:

              1. The advantage of Flex graphic skins (MXML graphics) is that you don't need a special graphic program to create/edit them. Disadvantages are that they are larger than FXG graphics. [1]

              2. The advantage of FXG graphics are that they scale as vectors and have better performance over MXML graphics [2].

              3. I'm infering that embedded assets (swf, png ...) at the expense of not supporting vector scaling will have better performance. I have not found any material to verify this and whether a swfbytes-compiled fxg is more performant over a .swf skin /.swf skin with scale-9 [3]


              Conclusion: since we have Flash CS4 (i.e. a graphical editor to edit skins) we have no real need for FXG other than for vectorised assets, which we could work around by using scale-9. Catalyst offers no real benefit to us, while adding an extra step of complexity in the workflow. Photshop .fxg graphics could benefit us in cases where vectorised graphics would be useful.


              So we would leave our current design-developer workflow as-is, with maintaining assets in an .fla, however revise the style-names for optiomal support of spark component themes (if this is at all possible) and sub-class the spark skins to support skinning through embedded assets.


              My assumptions might be buggy but hopefully the links will be enlightening. Here are 2 more very insightful ones [4]. And people that share our plight [5]


              Anyone at Adobe listening, I hope you can give some valuable feedback and advice on these issues!





              [1] Scroll to the bottom to see the comments:




              http://butterfliesandbugs.wordpress.com/2009/10/02/optimized-fxg-vs-runtime-fxg-aka-mxml-g raphics/


              http://help.adobe.com/en_US/flex/using/WSda78ed3a750d6b8f26c150d412357de3591-8000.html#WSD AD87261-09E9-4091-8169-F2758607F125












              1 person found this helpful
              • 4. Re: Flex 4 skinning workflow
                cosmits Level 1

                Dear Tracy

                Thank you so much for elaborating and sharing your experience

                from going over your response and links i have one question to ask you

                is it possible to skin spark components with embedded graphical assets in a library swf?

                somehow i got the impression from your answer that you can twik the skin files - extend / override to somehow accept embedded graphical assets

                so does that mean that we can have the same ease of use as flex 3 skins if we use the Button component as an example and be able to set the embedded swf graphics as upSkin overSkin selectedSkin ect...?

                or did you mean to embed the swf graphics within the skin classes?

                can you share a simple example just to illustrate this small bit?


                thank you again for your time and effort

                you really did an extensive research there...



                Yariv Gilad

                • 5. Re: Flex 4 skinning workflow
                  maziak Level 1

                  Hi Yariv


                  Read my reply to a different post (scroll to the bottom)



                  I'm going to try this out & let u know how it goes. Basically I'm going to take the arcade skin template, copy the relevant skin-classes for my set of custom skins and then change the hardcoded references to use dynamic ones: getStyle()


                  So take the ButtonSkin for example, it references a bunch of skin elements for graphics:

                  <mx:Image left="0" top="0" right="0" bottom="0" maintainAspectRatio="false"
                          source.up= "@Embed(source='/assets/flex_skins.swf', symbol='Button_upSkin')"   
                          source.over= "@Embed(source='/assets/flex_skins.swf', symbol='Button_overSkin')"
                          source.down= "@Embed(source='/assets/flex_skins.swf', symbol='Button_downSkin')"
                          source.disabled= "@Embed(source='/assets/flex_skins.swf', symbol='Button_disabledSkin')"
                          source.upAndSelected= "@Embed(source='/assets/flex_skins.swf', symbol='Button_downSkin')"
                          source.overAndSelected= "@Embed(source='/assets/flex_skins.swf', symbol='Button_downSkin')"
                          source.downAndSelected= "@Embed(source='/assets/flex_skins.swf', symbol='Button_downSkin')"
                          source.disabledAndSelected="@Embed(source='/assets/flex_skins.swf', symbol='Button_disabledSkin')"


                  I'm going to change these to:

                  <mx:Image left="0" top="0" right="0" bottom="0" maintainAspectRatio="false"
                          source.up= "{hostComponent.getStyle('upSkin')}"   
                          source.over= "{hostComponent.getStyle('overSkin')}"
                  ... etc
                          source.upAndSelected= "{hostComponent.getStyle('selectedUpSkin')}
                  ... etc


                  The style names to use are arbitrary, but to make it closer aligned with flex 3 skinning I'm going to use the same naming conventions - upSkin, overSkin. That way my spark & mx components can reference the same skin-assets.


                  The problems / questions I can think of with this methodology is the following:

                  1. I'm not 100% sure that embedded .swf assets are more optimal over .fxg assets (i.e. smaller in size & faster to draw on the screen ... and any other comparitive pro's & cons). See my question posed to Adobe here [1]

                  2. The dynamic binding of skin assets to a component via the binding tags ({getStyle}) adds addtional processing overhead. Binding adds a bunch of event listeners & bloats your code. [2]

                  3. Using getStyle affects performance [3]

                  4. Getting locked into the old way of thinking about skinning (but seriously I cannot think of a better designer-developer workflow, Catalyst just doesn't cut it)


                  I'm very interested to hear your and anyone else's thoughts on this









                  http://tv.adobe.com/watch/360flex-conference/diving-in-the-data-binding-waters-by-michael- labriola/




                  http://digitaldumptruck.jotabout.com/?p=39 -> point 2.

                  1 person found this helpful
                  • 6. Re: Flex 4 skinning workflow
                    Ansury Level 3

                    I love how much Spark "simplified" the process of skinning a Flex app.......

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

                      Dear Tracy


                      After going through your code and references

                      i did some tests and here is the workflow that works for me.

                      please let me know if you find it usefull to your needs and if you want me to elaborate more then is described here:


                      I created a flex Library Project

                      in the library project  i created a class that embeds the graphical resources once and can be referenced anywhere in the Application through public static constants like so:



                      [Embed(source="Library_General.swf", symbol="TripsIcon")] 

                      static public const TripsIcon:Class;


                      [Embed(source="Library_General.swf", symbol="TripsIcon_over")] 

                      static public const TripsIcon_over:Class;



                      if you'd rather use fxg instead of swf symbols, it could still be referenced the same way, in one central place

                      makes it easier to manage...


                      for my spark button, after checking all alternatives, instead of sub-classing the button class,

                      it was  easier for me to create a skin class automatically from flash builder (based on the Button skin)

                      deleting all the default graphics and creating an image / s:BitmapImage  behind the label skin part;

                      to this image i set a different source to each state

                      assets are derived as mentioned from the Library project

                      here is the full skin class:



                      <?xml version="1.0" encoding="utf-8"?>


                      <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"



                      minWidth="21" minHeight="21" alpha.disabled="0.5"



                          <!-- host component -->

                          <fx:Metadata> <![CDATA[  [HostComponent("spark.components.Button")] ]]> </fx:Metadata>


                          <!-- states -->


                              <s:State name="up" />

                              <s:State name="over" />

                              <s:State name="down" />

                              <s:State name="disabled" />



                          <!--<mx:Image source.up="{Lib_assets.TripsIcon}" source.over="{Lib_assets.TripsIcon_over}" source.down="{Lib_assets.TripsIcon}"/>-->


                          <s:BitmapImage source.up="{Lib_assets.TripsIcon}" source.over="{Lib_assets.TripsIcon_over}" source.down="{Lib_assets.TripsIcon}"/>


                          <s:Label id="labelDisplay"




                                   horizontalCenter="0" verticalCenter="1"

                                   left="10" right="10" top="2" bottom="2">







                      will be very glad to here your thoughts on the matter

                      Yariv Gilad

                      • 8. Re: Flex 4 skinning workflow
                        maziak Level 1

                        Hi Yariv


                        That's pretty similar to what I did, the difference being that I referenced the bitmap source via a stylesheet, like so:

                        <s:BitmapImage left="0" top="0" right="0" bottom="0"
                                source.up= "{hostComponent.getStyle('upSkin')}"   
                                source.over= "{hostComponent.getStyle('overSkin')}"
                                source.down= "{hostComponent.getStyle('downSkin')}"
                                source.disabled= "{hostComponent.getStyle('disabledSkin')}"
                                source.upAndSelected= "{hostComponent.getStyle('selectedUpSkin')}"
                                source.overAndSelected= "{hostComponent.getStyle('selectedOverSkin')}"
                                source.downAndSelected= "{hostComponent.getStyle('selectedDownSkin')}"


                        Your method might be more performant & clean as it does not hold a reference to the hostComponent (I've seen that some coders don't like this)

                        This method can be used in conjunction with mx-component styling, where I can use the same stylesheet for spark & mx Buttons.



                        I'm still trying to find out more about people's thoughts on asset management / developer-designer workflow before I follow this strategy 100%. Our project is in a state of flux at the moment, where we still embed our assets via an .fla. I'd love for Adobe to give us some more insight on the pro's / cons / oversights of this method. Using Catalyst or drawing .fxg by hand does not seem maintainable.




                        • 9. Re: Flex 4 skinning workflow

                          Since the original post was about workflows, I thought I would comment a bit about what I've come to as my current workflow. If this in some way helps you or someone else running across this then great.


                          In the Adobe Developer Connection there is an article titled "Exploring Flash Catalyst and Flash Builder workflows." I contend, that for my use, both as a single developer and a primary with a small group of others, by far the most reasonable workflow presented there is number five. (5)


                          With the current state of Catalyst the other workflows presented in that document are pipe-dreams.

                          This is my design process as it stands with FB4 and Spark:



                          1. Application pre-development (all that work we all have our own way of doing. Diagrams, needs assessment, all of that academic BS etc...)



                          2. Wire frame ( I sketch this stuff out, on paper or my iPad )



                          3. Create the Flash Builder application and begin mocking up the wireframe thinking about Groups, SkinnableContainers, etc... Create the custom components you are going to want and maybe even start the control layer work.



                          4. UI design: Photoshop and Illustrator. I'm a designer who lives in a MVC world by choice. I love programing, but it only works when the code and the pixels are equally beautiful. (Hard to do with the crap language that ActionScript is, but that is a discussion for elsewhere.)

                          Step 4 is very important. When working in PS or IL it is very important to work clean. Vectors and paths, gradients and layer styles whenever you can. And be meticulous about your layer naming and group layout. Think about your wireframe, group and layer UI elements as if you were writing code or MXML. This does not take long if you get in the habit of doing it right from the start.

                          (I bounce back and fourth between steps 3 and 4 constantly)



                          5. Flash Catalyst - This is a one way trip for the most part. I think of it as a waypoint from PS/IL to Flash Builder. Import your graphics, or start cut and pasting from PS and IL into Catalyst. If you built your design files properly, then you can very quickly select layer groups and start defining custom components. I never use just PS or IL.



                          6. Export a FXPL from Flash Catalyst. This is the best thing you can do. Take the library project and import it into FB. Add the library project to the build paths of your main project. Now start applying the skins just to try them on for size. Think of this step and trying on a new suit in the store. Don't take it home just yet. This is where you tweak UI and interactions and get a feel for how it is all going to fit. At this point you can easily go back to step 5 and re-arange things, simplify, or combine. Then come back to step 6.



                          7. Copy the skin MXML files that you need to modify into your main project. This is where the fun comes in. Once you copy these into your project think of Catalyst as not even existing anymore. Now you can begin wiring up your skins to their host components and making sure you set and fulfill any skin contracts between the component and it's skin.



                          This may seem like a lot, but this is actually a very way to rapidly get from UI design to FB with custom components and maintain some ability to round trip during various steps of the process. 4-5-6 allow for rapid round tripping if you remember that you can Copy & Paste from PS/IL into Catalyst. I think a lot of people don't realize that. Then by using a library project for the initial UI testing you can quickly roundtrip back out again. The problem is as soon you modify those skins you will have some work to do. There is a post I ran across that involved round tripping at a later stage using code comparison. I have not tried this yet, but as I get deeper into a current project I can already feel I may need to.

                          • 10. Re: Flex 4 skinning workflow
                            Christian3D Level 1

                            I am soooooooo frustrated with Adobe. This attitude that they create the technology but it is not their responsibility to educate users to me is absolute bullsh*t. As a designer (not a developer, not a designer/developer hybrid) I often feel like Adobe left me in the desert with an empty cup and they are asking me to find a way to fill my cup with water using sand. Yes there are are tons of ways to fill up my cup, but none of them lead me to actually having water.


                            I realize that is a weird and exagerated analogy but that is what it feels like.


                            Q: Why is it so freaken difficult to add an image in design view in Flash builder? . Adobe please look at how easy it is in Dreamweaver to drag an image onto the screen, then look at the code it created. Why is that so difficult? Probably because Adobe can't figure agree on what is best practice

                            Q: Why can't we get a straight answer of what is the most efficient files to use. Is it embeding a .swf, .png, .fxg?

                            Q: Can you even embed a .fxg? I have been told several times that .fxg are assumed to be the lightest weight, and it has been suggested to treat them like a regular graphic and embed, yet when I use the same exact embed code that I use to embed my other graphic files, the .fxg doesn't show up. So far the only way that I have been able to use .fxg is to use the asset method.

                            Q: if FXG is so efficient why does Catalyst spit out MXML when skinning a component?

                            Q: How are we supposed to skin mx components, using either .fxg or .mxml?


                            I live in the SF bay area and I have a lot of chances to talk with Adobe employees about this, every time I do I get a very arrogent but similar response, Quote "it is Adobe's job to build the tools not tell you how to use them", or "There is no way for Adobe to give best practices because every applications is different". Frankly I think this is CRAP, and an excuse for not doing their dam job. Being an interaction designer for enterprise software, if I made applications that were this difficult to figure out I would be fired. When I design software my first and foremost goal is to provide a tool to let the user get their jobs done. Shouldn't this be Adobe job as well?


                            Don't get me wrong I love Adobe's design tools (especially Fireworks) and I will promote them all day long, but this contract between designer and developer that they claimed is a flawed contract. And what about the contract/obligation that Adobe has with its customers. I spent a lot of time and effort convincing the company that I work for to use Flex. They had many choices to choose from, and with the threat of HTML5 and all its possibilities it was not an easy sell. I know my comments will piss off many Adobe employees and I may even loose my Adobe community expert status over this, but I don't care anymore because I am mad as hell. Adobe needs to get off their *** and provide us (designers and developers) are real workflow that is COMPLETE, EFFICIENT, and COMPREHENDIBLE. If they don't than Steve Jobs might just have been on to something when he called Flash a dying technology.


                            ~ Christian

                            • 11. Re: Flex 4 skinning workflow
                              Christian3D Level 1

                              BTW -

                              Currently we:

                              • -create all icons as .swfs,
                              • We do some skinning in catalyst (mainly to visually break apart a component
                              • We do all designs in Fireworks and export FXG to convert to mxml skins (mainly because we don't understand the workflow for keeping them as fxg
                              • We spend a lot of time in Flash builder tweeking the skin files to do what we need them to do


                              We have no idea how efficient our methods are.

                              • 12. Re: Flex 4 skinning workflow
                                Ansury Level 3

                                Christian3D wrote:


                                We have no idea how efficient our methods are.


                                Sadly, probably not very.  But even more sadly, I'm just as frustrated at how much more difficult (or just seemingly time consuming) all this is.  It appears Adobe has created this powerful and highly customizable framework (Spark) which gives us more flexibility, but in the process made things more complicated and less efficient.  Creating a Flex 4 skin shouldn't be so work intensive and difficult.  But the worst part is that they're trying to force people to skin their apps differently, by making Spark so "plain" by default, because too many Flex apps "looked the same".  (Perhaps that's because lots of us don't really care about custom skins?)


                                The "proof" that it is work intensive can seemingly be found in the lack of "free" Flex 4 Spark skins out there.  I can't find a single one, so either I'm looking in the wrong places completely, or it's too much work for people to give away for nothing.  If it were truly easy to do, there would be lots of free stuff out there by now.


                                I'm trying to "give in", abandoning old (less intensive) appearance customizations via simple css (it's just so hard to work with now).  But even though I'm willing to take the time to work on creating a few custom skins, maybe even buy more software if needed, I'm still unable to find any good web resources on how this is really done.


                                And more:


                                (The "default" Flex halo skin USED to be a talking point for Flex vs Silverlight apps, )


                                Now that's going in reverse:



                                There's blend for Silverlight customization, and Flex has..... black and white Spark, a buggy/slow FB design view, and Catalyst.. which to me has been a huge disappointment because I thought it was going to make Flex skinning simple.


                                Powerful/flexible customization is good but it came at a high cost in productivity.  And productivity (getting DONE) is much more important.

                                • 13. Re: Flex 4 skinning workflow
                                  Ansury Level 3

                                  chrisisme wrote:


                                  This may seem like a lot, but this is actually a very way to rapidly get from UI design to FB with custom components and maintain some ability to round trip during various steps of the process.


                                  Ugh, I just read this.  It seems like a lot because it is a lot.


                                  I'm thinking Adobe should un-deprecate all the Halo components they've badmouthed in the asdocs and just market the two component sets side by side as equal component sets (including equal time with testers and Flash Builder Design View support).  Some small teams (like mine) don't even have (or need) real designers.  The developers do the "skinning", and Spark just made our jobs much harder (when there *is* no "designer-developer workflow") with no noticeable benefit.  I hope 4.5 or 5.0 SDK resolves this problem!

                                  • 14. Re: Flex 4 skinning workflow
                                    Christian3D Level 1

                                    Ansury wrote:


                                    The developers do the "skinning", and Spark just made our jobs much harder (when there *is* no "designer-developer workflow") with no noticeable benefit.  I hope 4.5 or 5.0 SDK resolves this problem!

                                    Though I have my fair share of complaint regarding how Adobe has handed this stuff to us, I wouldn't necessarly agree that there is no noticeable benefit. Spark offers way more control over skinning than anything we could have done with the Halo components. Also by decoupling the logic from the styles many of the Spark components are very light weight in comparrison.  My argument is how much lighter are they, and what is the best method for creating them?


                                    Prior to Spark I was fortunate enough to have been able to work with some really smart developers that was able to hack the Halo components to be able to  extend the styling functionality. These hacks were very large and still not has flexable as the new spark skins. Again, I have more of a problem with understanding what is the best practice for creating and compiling these skins than their usefulness. I wont go into detail of what you can do with Spark, lets just say when it comes to designing modern looking interfaces it is necessary to have the control over multicolor, pixel accurate gradients, custom borders, and different styles for each of the states, etc.


                                    Is is fxg, is it Graphic MXML, is it CSS, or is it a combination of each of these? and if I am creating things like icons, should I be using transparent pngs (that are inherently larger than a swf, or should I use FXG's? simply comparing file size, fxg's are the smallest, then swf, then pngs, but how does Flex handle each of these formats? I have heard that for compiling swf's are the worst but no one can explain why? I have spent years putting up with the *** backwards drawing tools of Flash to build up a library of swf icons, then I am told that it is better to use (much easier to create) pngs, but again no one can tell me why or what they base those opinions on. Then of course there is the new(er) fxg. Some icons turn out perfect, some are not even close to the drawing in FW's, but even still using fxg in place of a swf or a png is very confusing.