13 Replies Latest reply: Dec 9, 2009 10:49 AM by acath RSS

    Scroll Panel in Beta 2

    Yefolio Community Member

      FC beta 2 added scroll panel to the component lists, but how do you create a scroll panel? Anyone can help? Thanks!

        • 1. Re: Scroll Panel in Beta 2
          Laurence Schuberth

          Good question, I was wondering that!



          • 2. Re: Scroll Panel in Beta 2
            Yefolio Community Member

            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.

            • 3. Re: Scroll Panel in Beta 2
              Tvoliter Adobe Employee

              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


              Happy Scrolling!


              - Ty

              • 4. Re: Scroll Panel in Beta 2
                steve_London Community Member

                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.


                • 5. Re: Scroll Panel in Beta 2
                  Laurence Schuberth Community Member

                  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





                  • 6. Re: Scroll Panel in Beta 2
                    Yefolio Community Member

                    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?

                    • 7. Re: Scroll Panel in Beta 2
                      Tara Jane Feener Community Member

                      Hey Yefalio,

                      You bet!

                      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?



                      • 8. Re: Scroll Panel in Beta 2
                        Yefolio Community Member

                        Thanks, Tara,


                        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

                        • 9. Re: Scroll Panel in Beta 2
                          steve_London Community Member


                          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.



                          • 10. Re: Scroll Panel in Beta 2
                            njadobe2 Adobe Employee

                            Hi Steve--unfortunately we don't currently have distribute commands in FC, only alignment. Sorry about that!

                            • 11. Re: Scroll Panel in Beta 2
                              steve_London Community Member

                              Thanks for the reply, Narciso.

                              It's not a huge problem as, like I said, I can do this in Illustrator.


                              • 12. Re: Scroll Panel in Beta 2
                                Luke Pearce

                                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.





                                • 13. Re: Scroll Panel in Beta 2
                                  acath Community Member

                                  Hi Luke,


                                  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.