7 Replies Latest reply on Jul 15, 2009 1:27 PM by acath

    Text Input style based on events




      I don't seem to be able to change the style of text inputs based on events like Focusin, focusout.  When I use the wireframe text input I only get 2 states : normal and Disabled and cannot create other states.


      When I use artwork that I convert into the text input component, I also get only 2 states for the text input and cannot create other states.  I could use the focusin event to change page but that is not what I want to do.


      If it is not possible to do it in Catalyst, that would be a feature I would need.



        • 1. Re: Text Input style based on events
          Matt Cannizzaro

          One way to do this is to create a custom component that has two states and contains a text input component. You can give the text input different properties in each state, and then use interactions to toggle between the two states based on whatever events you like.


          For example, suppose you wanted to show an outline around a text input when it has focus. You would create a text input and convert it to a custom component. Then duplicate the component's state once, calling one state "focused" and the other "notFocused". In the focused state, draw an outline around the text input. The in the notFocused state, make the outline invisible. Finally, to actually make it work, select the text input and write these interactions:

          On Focus In, Play Transition to focused

          On Focus Out, Play Transition to notFocused


          Once you have this working, you can fine tune the transition between the two states in the timeline panel, and you can reuse your custom component anywhere in your project by dragging it out from the library panel.


          Hope that helps.

          • 2. Re: Text Input style based on events
            Chuben Level 1

            Thanks but I can't do it.


            Here is what I did:


            1. Dragged the text input wireframe component
            2. Double-clicked on it to access its 2 states : Normal and Disabled
            3. In the layers I selected the rectangle artwork that is part of the text input component
            4. Right-click on the rectangle artwork and convert it to a custom component
            5. Right-click on the custom component 1 in the layers (was previously the artwork rectangle) choose Edit component to see it only has State 1.  BTW this is an interesting concept to be able to nest components whether they are customed or pre-defined.  Adobe should talk about that feature in details because I feel there is tremendous flexibility there.
            6. Change State 1 name to Focusout
            7. Duplicate Focusout state and rename is Focusin
            8. In the focusin state, I select the Rectangle that is part of CustomComponent1 and choose a fill color so that when the focus is in, the rectangle changes color
            9. Now, this is where I get stuck
            10. I go back one level, back to TextInput1 component
            11. I go to add a custom interaction BUT I only see 3 events : Onclick, OnRollout, OnRollOver.  this is where I would expect to see the Focusin, Focusout events.  I think that for a custom component, all the possible events should always be available because Catalyst cannot know what kind of event someone would like to use.


            Am I doing something wrong?


            I attached my FXP file and changed its extension to .txt





            • 3. Re: Text Input style based on events
              Matt Cannizzaro Level 2

              Sorry, my post was unclear. Here are the steps:

              1. Drag out a wireframe text input.

              2. Right click on it and convert it to a custom component.

              3. Double click it to edit the custom component in place.

              4. Make your two states, and add something to the focused state so that you can tell the difference between them.

              5. Select the text input itself and add the two interactions.

              6. Run your project and try it out.


              The reason that you aren't seeing the focus events is because you're working with individual pieces of the text input's skin when you edit it in place, not the actual text input component itself. The skin doesn't know how to dispatch focus events, but the component does. Note that in my instructions when you add the interactions you aren't editing the text input - you're editing a custom component that contains a text input.

              • 4. Re: Text Input style based on events
                Chuben Level 1

                I did what you said and it works although the default focusin behavior (which displays a blue stroke) still appears.  I thought I could have had access to the actual default behavior of the textinput and change it.  It would be great if the wireframe components could be build like library items so we could change any of their default behavior.


                How do I disable the default text input behavior?


                Many thanks

                • 5. Re: Text Input style based on events
                  Matt Cannizzaro Level 2

                  I agree that would certainly be desirable. Unfortunately it's not possible to disable the blue stroke in the current build of Catalyst. You can disable it in Flash Builder by adding the following property to the TextInput component:


                  • 7. Re: Text Input style based on events
                    acath Level 4

                    Select some artwork

                    Right click

                    Convert Artwork to Component > Custom/Generic Component