Here is how you do it:
Create the Scroll Panel
1. Select the objects that you want to builder the Scroll Panel with (this may include the objects that scroll, the scrollbar, and objects that don't scroll like a scroll pane border)
2. Choose Convert Artwork to Component > Scroll Panel
- Notice that the HUD now tells us we need to assign parts to the Scroll Panel to make it work. Let's do that.
3. Double-click the Scroll Panel to edit it
Assign the Scrolling Content Area
4. Select the objects that you want to scroll
5. Choose Convert Artwork to Scroll Panel Part > Scrolling Content (required)
- After you do this you will see a square with a soft gray inner glow that indicates the Scrolling Content Area.
- In order to see content scroll, the Scrolling Content area needs to be smaller than the content in the Scrolling Content area. Try resizing the Scrolling n Area. Note, that it can only be resized from the bottom right, so you may need to move it as well to position the top left corner.
6. If you want to edit the the contents of the Scrolling Content Area, double-click it, then edit the contents. Notice that when you exit editing the content, that it will be clipped by the Scrolling Content Area
Adding a Scrollbar
6. If you already had a scrollbar from step #1, you may need to adjust its placement. If you don't have scrollbar, drag out a new one from the Components panel and place it inside the Scroll Panel. Make sure you add it inside the Scroll Panel and not the Scrolling Content
I've attached a sample fxp file that scrolls some stars. Notice the the red border and red rect do not scroll. That is because they are in the Scroll Panel, but not inside the Scrolling Content
scrolling panel example.fxp.zip 481.0 K
I agree with Steve ( i'm looking on iTunes, right now)
Thanks Ty, I was watching a tute on adobeTV that kinda shows this as well so it all clicked
Reading Ty's tutorial above and playing with his example, I'm getting there.
But [there's always a but!] is there a way to align the contents so that the spacing between each item is equal like the 'horizontal distribute space' button in Illustrator's Align panel [the content will be scrollable horizontally].
I'm guessing that if I can't do this in Catalyst, I'll need to go back to Illustrator and fix it there and re-import back to Catalyst.
Ive got another problem with a scroll panel ive just created. Ive created my scrollable content area and a scroll bar and both are working just fine. However to make my life a bit harder I needed to create 4 states of the scrollable content. Now what im struggling with is changing the state of the scrollable content area with a button. Under the click command of a button the only option is to change a state of a custom component. There doesnt seem to be the option to change the state of a scroll panel.
Any ideas on how I could do this? Ive tried adding buttons into the scroll panel and the scrollable content area itself but neither work.
I think I'd be able to do this by editing the code but thought I would check to see if there was a way to do it using Catalyst.