Post with 1 note
Steps
1) Draw a rectangle on the artboard.
2) Click the rectangle, and in the floating HUD click the “Convert Artwork to Component…” button.
3) Select DataList.
4) Notice the little warning sign. We need to define the repeated item.
5) Click the ‘Edit Parts’ button.
6) Click the rectangle, and click ‘Convert Artwork to Part..”, and select ‘Repeated Item’. You should now see the rectangle you selected repeated downwards multiple times. We have successfully created a vertical datalist component.
7) To change the arrangement of rectangles to be horizontal, let’s change the layout in the properties panel.
8) In the ‘Properties’ panel in the bottom right hand corner, click the ‘Layout’ section to expand it.
9) Notice the Vertical layout button is currently pressed. Click Horizontal to get a horizontal layout.
10) Note that the bounds don’t change to be horizontal… we need to adjust this. Drag the right most selection handle to the right. When you release, you’ll notice more rectangles appear, but are laid out horizontally. Don’t drag the right handle too far, we want it to scroll.
11) From the ‘Wireframe Components’ section, drag a ‘Horizontal Scrollbar’ component under the rectangles.
12) Run your project. You should be able to scroll through the rectangles horizontally.
I removed the buttons from the scrollbar, added some mouse over and selected effects to the rectangle, and added some text to the right and left of the scrollbar.
Does this work for you? Any Questions?
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?
