4 Replies Latest reply on Nov 20, 2009 2:43 PM by liquid8x

    Using skins

    liquid8x Level 1

      Hi all,

       

      Could someone please tell me a step by step instuctions how to import skins (for example "Brownie" from here http://www.scalenine.com/gallery/) into flex project?

      I'm using Adobe Flash Builder 4.

       

      I just don't get it at them moment

        • 1. Re: Using skins
          Woodifer01

          Lee Brimelow explains this pretty well in his flex tutorials.  Check this out http://www.gotoandlearn.com/play?id=101

          • 2. Re: Using skins
            liquid8x Level 1

            Thanks from the tip.

            I tried to do the same as in the video but the styles.css (which I created) seem to have no effect to the layout.

            In my application I have this:

             

            <fx:Style source="styles.css"/>

             

            And in the styles.css:

             

            Application
            {
                backgroundGradientAlphas: 1.0, 1.0;
                backgroundGradientColors: #333333, #333333;
            }

             

             

            Is there something different in the Flash Builder 4 that I need to do? Does "fx" instead of "mx" cause something that makes this definition not to work? I also tried to use the button definitions and some other with no success.

            When I create a new css-file, I get these rows there as a default:

             

            @namespace s "library://ns.adobe.com/flex/spark";
            @namespace mx "library://ns.adobe.com/flex/halo";

             

            It doesn't matter if I keep them there or not; anyway the style-file seem not to work at all.

            Ideas..anyone?

            • 3. Re: Using skins
              Woodifer01 Level 1

              Im still pretty new to Flex, but i'm pretty sure you need to use "mx".  That is the namespace that tell Flash where to look for the code it needs to execute.  For example, mx:Style looks for the Style object related to "mx"..   If you had fx:Style, Flash would be looking for the Style object related to "fx", which is totally different.

               

              As far as this not working for Flash Builder, im not sure..  I couldn't find any problems when I searched.  I am currently using Flex Builder 3.

               

              Make sure in your styles.css file you change all the swf to your new skin swf name.  For example, I am using the skin kingnarestyle.  Here is what part of my styles.css file looks like:

               

              Button
              {
                  color: #AAAAAA;
                  textRollOverColor: #FFFFFF;
                  textSelectedColor:#FFFFFF;
                  disabledColor:#5A5A5A;
                  fontWeight:normal;
                 
                  upSkin: Embed(source="kingnarestyle.swf", symbol="Button_upSkin");
                  overSkin: Embed(source="kingnarestyle.swf", symbol="Button_overSkin");
                  downSkin: Embed(source="kingnarestyle.swf", symbol="Button_downSkin");
                  disabledSkin: Embed(source="kingnarestyle.swf", symbol="Button_disabledSkin");
                 
                  selectedUpSkin: Embed(source='kingnarestyle.swf', symbol='Button_selectedUpSkin');
                  selectedOverSkin: Embed(source='kingnarestyle.swf', symbol='Button_selectedOverSkin');
                  selectedDownSkin: Embed(source='kingnarestyle.swf', symbol='Button_selectedDownSkin');
                  selectedDisabledSkin: Embed(source='kingnarestyle.swf', symbol='Button_selectedDisabledSkin');
              }

              • 4. Re: Using skins
                liquid8x Level 1

                Those things seem to be in order, the kingnarestyle.swf is located in the src-folder as are the style-

                and mxml-files also.


                It seems that flash builder 4 does not even recognize the definition <mx:Style>, that gives an error and the code completion suggests the <fx:Style> -tag.

                 

                My mxml starts like this:

                 

                <?xml version="1.0" encoding="utf-8"?>
                <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" creationComplete="InitApp();">
                <fx:Style source="styles.css"/>

                 

                Any ideas? I'll be happy to try them if you have any hints because I've been puzzling with this for some time now.