8 Replies Latest reply: Feb 12, 2013 11:08 AM by Amy Blankenship RSS

    How to create global CSS for all TextFields

    Amy Blankenship Community Member

      In most environments that support CSS, there's a way to say "You know all these things of type X? Use this stylesheet on it." (For example, HTML, FlexSDK).

       

      In Flash Pro, I'm looking for a way to set a stylesheet for all TextFields. I'm sure it's really simple, but all the examples I have been able to find require a direct handle to the TextField. I thought about using the StyleManager, but it seems to only be geared to setting styles on Flash components.  I'd rather not watch the stage for ADDED_TO_STAGE, since that's a relatively expensive solution to a problem I am sure has a cheaper solution. I find it impossible to believe that the Flash team would have gone to the trouble of adding CSS support but then wouldn't have provided a way to apply that CSS without directly referencing each and every text field.

       

      Can someone point me in the right direction?

        • 1. Re: How to create global CSS for all TextFields
          kglad MVP

          you can find (and apply a stylesheet) to all textfields existing at any time(s) you want to check but you can't reference textfields that don't exist (yet) and there's no simple way to detect when a textfield is created or added to the display list (unless you explicitly code for that).

          • 2. Re: How to create global CSS for all TextFields
            Amy Blankenship Community Member

            So there's no way to do something like (yes, I know the syntax isn't exactly what you'd use, just getting the concept across).

             

            TextField {

               a:active: #0000FF;

               a:link: #0000FF;

               a:hover: #FF0000; 

            }

             

            and have Flash just apply the CSS to all TextFields, like Flex would apply a CSS style to all TextFields? If so, I guess what I found impossible to believe above is true. The Flash team constantly surprises me, both in the incredible things they do that I would never have imagined, and in things like this...

            • 3. Re: How to create global CSS for all TextFields
              kglad MVP

              you could create a class that extends the textfield, apply your css to your class and use those class instances instead of the flash textfield.

              • 4. Re: How to create global CSS for all TextFields
                Amy Blankenship Community Member

                I use the timeline/stage (if I were adding everything through code, obviously I'd already have a handle to every TextField), and I've never found a way to apply a Base Class to a TextField instance. Have you?

                 

                Also, I need to be able to change the CSS on a per-project basis, so this would be even a more expensive suggestion. Somehow I'd have to inject what TextField subclass (that knows about the style) all throughout the project. Since I don't use statics and their ilk except for enumeration values, that would be a huge pain.

                • 5. Re: How to create global CSS for all TextFields
                  kglad MVP

                  you don't need the textfield handles to find them all. the function below would apply the stylesheet ss to all textfields that are on a timeline at the time the function executes.

                   

                  applyTextFieldStyleF(MovieClip(root),ss);

                   

                  function applyTextFieldStyleF(mc:MovieClip,ss:StyleSheet):void {

                  for (var i:int=0; i<mc.numChildren; i++) {

                  if (mc.getChildAt(i) is TextField) {

                  TextField(mc.getChildAt(i)).styleSheet=ss;

                  } else if (mc.getChildAt(i) is MovieClip) {

                  applyTextFieldStyleF(MovieClip(mc.getChildAt(i)),ss);

                  }

                  }

                  }

                  • 6. Re: How to create global CSS for all TextFields
                    Amy Blankenship Community Member

                    So, what I found is that there are a lot of things that you (or someone) can do to a TextField that blow up when there's a style sheet attached. Adobe helpfully throws errors on these instead of handling them gracefully. And that would be fine, if I were using all my own code, but I'm not, and Adobe doesn't gracefully handle these errors in the Component code, either.

                     

                    So what I decided to do is just "indicate" that I want a style attached by having a word in the instance name that acts almost like the "id" on a #cssSelector. Right now, I'm keeping it simple, going for "Link," since the whole point of the exercise is global styling for links. With any luck, Adobe hasn't used that anywhere in the Components. If it turns out, I'll just change it in code I do control.

                     

                    I decided to go ahead and just listen for ADDED_TO_STAGE, expensive as it might be. Your idea is good, but I think that would be even more expensive to run periodically, and I'd probably need to listen to ADDED_TO_STAGE anyway to figure out when to run it.

                     

                    The method looks like this:

                    protected function setCSS(e:Event) {

                       var tf:TextField = e.target as TextField;

                       //TextField instances that need this should have "Link" as part of the instance name

                       if (tf && tf.name.indexOf('Link') > -1) {

                          tf.styleSheet = styleSheet;

                       }

                    }

                    Maybe that will help someone else who wants to do the same thing.

                    • 7. Re: How to create global CSS for all TextFields
                      moccamaximum Community Member

                      Your method won`t work for TextFields that are already on stage. I was under the impression you would have a bunch of textfields that were distributed across the timeline.

                      I use the timeline/stage (if I were adding everything through code, obviously I'd already have a handle to every TextField

                      Now you are forced to add everything through code. Also you have problems with TextFields that are nested inside MovieClips. If you add the MovieClip, the textField won`t throw an added_to_stage event and won`t get styled even if it has the approbriate nomenclature. Also you can`t change the font during runtime without removing and adding the TextField.

                       

                      Or Am I missing something here?

                      • 8. Re: How to create global CSS for all TextFields
                        Amy Blankenship Community Member

                        It's possible that objects in Frame 1 of the main timeline don't trigger ADDED_TO_STAGE. However, I'm pretty sure they do (it's just the Flash Player that adds them, not me). I seem to recall that as I was building this and I'd forgotten to put in the useCapture parameter that the event handler did trigger (and with the way my project is structured the only object that could trigger the handler with the useCapture Flag off is the main document Class). Therefore, even the main document Class does get added to the stage (and so all objects present in it on Frame 1 or any frame would also trigger the event).

                         

                        In my case, it doesn't matter, since the only thing I have on Frame 1 is a spinner graphic and the word "Loading...", which contains no hyperlinks.