1 Reply Latest reply on Aug 13, 2009 1:46 PM by chadillac83

    Skinning vs CSS - Performance

    Jaz Chana
      I was messing around with skinning and styling today and although the skinning seems like much more what we're after I couldn't help wondering what the strain performance would be like. Considering that essentially what your doing when you add a new skin is embedding that image directly in your swf file, skinning is going to cause some serious issues. I haven't had the chance to do any extensive testing, but I'm actually very concerned now that skinning our app will not be an option due to serious performance problems.

      Can I get some feedback from the community over their experiences with regards to skinning and styling and the pros and cons of using each technique.

      Thank You
      Jaz
        • 1. Re: Skinning vs CSS - Performance
          chadillac83 Level 1

          I use both heavily.

           

          From my experiences the most powerful toolset is when you mix and match the two.  Your basic CSS stuff is key for cleaning up existing components like removing rounded edges, font colors, etc.  but when it comes down to actually making something look custom skinning via CSS is the way to go.  Rather than importing an swc file and overriding global components I created an SWF with various graphics in PNG and Vector formats.  Then using the CSS skinning commands apply the skin where nessecary as oppossed to override default skins for certain components.

           

          .PaginationButtons
          {
               color:#333333;
               font-size:11;
               font-weight:bold;
               
               text-roll-over-color:#650000;
               
               up-skin: Embed(source="/assets/images/skins.swf", symbol="ButtonBar_PaginationUp");
               over-skin: Embed(source="/assets/images/skins.swf", symbol="ButtonBar_PaginationOver");
               down-skin: Embed(source="/assets/images/skins.swf", symbol="ButtonBar_PaginationUp");
               selected-up-skin: Embed(source="/assets/images/skins.swf", symbol="ButtonBar_Pagination");
               selected-over-skin: Embed(source="/assets/images/skins.swf", symbol="ButtonBar_Pagination");
               selected-down-skin: Embed(source="/assets/images/skins.swf", symbol="ButtonBar_Pagination");
          }
          

           

          This is an actual CSS snippet from a recently completed project it should help explain the method I tried to describe above.  We haven't seen any real performance issues with it unless using Degrafa heavily in some scenarios.

           

          Hope this helps.

           

          attached is a sample of the finished app.