Good question, I was wondering that!
Spent sometime playing around, still couldn't figure out how the scroll panel works. Do we need to create some buttons to associate with the scroll panel? How do we interact with the scroll panel? Click? Mouse Over? Anyone? Big thanks.
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
Interesting: this may be an answer to my squashed thumbs in data list' post below.
I'll try this with musical inspiration from the Six Organs of Admittance's 'Shelter from the ash' CD playing in the background.
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
Thank you all so much, another question, is there a way to make the mouse change to a pointer when it hovers links or clickable objects, without editing the code?
In the PropertiesPanel, in the Appearance section, you'll see a checkbox labeled "hand cursor:"
You can toggle this on to see the hand cursor appear when you mouse over the selected component during runtime.
Is this what you're looking for?
Yes, that's what I was asking, hmm, i didn't actually look into the panels, but as I remember, the only way to add a hand cursor in beta1 is to edit the code. I guess they added this to the new beta version.
But anyway, thanks for pointing it out..thanks
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.
Hi Steve--unfortunately we don't currently have distribute commands in FC, only alignment. Sorry about that!
Thanks for the reply, Narciso.
It's not a huge problem as, like I said, I can do this in Illustrator.
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.
Unfortunately, there's no way to do this in Catalyst yet, because you can only target components directly inside the current component with interactions. However, it's easy to do in code: just add "click = scrollPanel.contentGroup.currentState = 'stateX'" to your Button.