Steps:
1) Use the rectangle tool in Catalyst, located in the top right hand tools panel to draw a rectangle similar to the one shown above.
2) Next, select the text tool.
3) Click somewhere near the top left hand corner of your rectangle and start typing your text. I copied a paragraph of lorem ipsum text from a generator.
4) Copy and paste or add text until your text extends longer than the rectangle you drew.
5) Select the black cursor (select tool) from the tools panel, and click and drag to select both the text you added, and the rectangle you drew on the artboard.
6) In the floating heads up display(HUD), select Convert Artwork to Component, and choose ‘Scroll Panel’
7) Notice the yellow ‘Component Issues’ warning in the right hand corner of the floating HUD.
8) Click the ‘edit parts’ button. We need to identify which area we want to scroll.
9) We are now in ‘Edit in place’ mode.
10) Select only the text, and note how the HUD has changed to display ‘Convert to ScrollPanel Part’
11) Click ‘Scrolling Content’, to identify that the text should be scrolled.
12) Notice now that the text has a slightly different outline than before. We can now adjust the size of the text such that it fits within our rectangle.
13) Click and drag the bottommost handle of the text outline, and drag upwards such that the text fits within the bounds of the rectangle.
14) Now, lets add a vertical scrollbar so that we can actually scroll the text.
15) Drag a VScrollBar component from the ‘Wireframe Components’ section and place it where ever you’d like.
16) Now we have all the pieces for a scrollable text panel wried up correctly. Press CMD+Enter to run your project.
17) You should be able to user the scrollbar to see all of the text you initially entered.
Once you get the hang of it, feel free to customize your scrollbar/panel/text like I did. Enjoy!
Does this work for you?
