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.
Thanks but I can't do it.
Here is what I did:
- Dragged the text input wireframe component
- Double-clicked on it to access its 2 states : Normal and Disabled
- In the layers I selected the rectangle artwork that is part of the text input component
- Right-click on the rectangle artwork and convert it to a custom component
- 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.
- Change State 1 name to Focusout
- Duplicate Focusout state and rename is Focusin
- 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
- Now, this is where I get stuck
- I go back one level, back to TextInput1 component
- 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
Textinput.txt 23.1 K
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.
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?
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:
Select some artwork
Convert Artwork to Component > Custom/Generic Component