4 Replies Latest reply on Dec 13, 2010 10:55 AM by Karl Decker

    How can I create a horizontal scrollbar with a centered thumb that scrolls content from both sides?

    Karl Decker

      I am having trouble figuring out how to create a horizontal scrollbar component either by itself or nested inside a data list component that will have it's thumb centered in the track when running and reveal content from either the right or left side when the thumb is moved. The furthest I have managed to get is to create a data list component with a scrollbar component inside that has a centered thumb that reveals content from the right side of the list (0 through 10 of the items) but only reveals blank area when tracking the other way. Is there a way to create say… negative items in the data list… 0 through -10? Or am I approaching this the wrong way. Please help. Thanks.

        • 1. Re: How can I create a horizontal scrollbar with a centered thumb that scrolls content from both sides?
          Karl Decker Level 1

          Wow… I thought for sure that I would receive some kind of help or response from the FC forum. I guess not.

          • 2. Re: How can I create a horizontal scrollbar with a centered thumb that scrolls content from both sides?
            Mykola D.

            Hi Karl,


            I am not sure if it is possible to do only in FC. It seems like a case for a custom skinnable component. I.e. the scroller is created in ActionScript in Flash Builder, imported to FC, skinned, exported to FB and wired to scroll the list.


            In case you simply want to display a list scrolled to the middle once the page is displayed, you might add a creation complete event, add a list id and use selectedIndex and ensureIndexIsVisible calls to scroll the list to the middle. Here is an example for a list with 6 items displayd at a time:


                        protected function application1_creationCompleteHandler(event:FlexEvent):void
                            var visibleItems:int = 6; // number of items visible in the list component
                            var middleItem:int = list1.dataProvider.length / 2;
                            list1.selectedIndex = middleItem;
                            list1.ensureIndexIsVisible(int(middleItem + (visibleItems - 1)/ 2));


            Does it answer your question?




            - Mykola
            FC QE

            • 3. Re: How can I create a horizontal scrollbar with a centered thumb that scrolls content from both sides?
              Karl Decker Level 1



              Thanks. I guess I was hoping for an answer that addressed my question from a designer's point of view rather than a developers'. As a designer with over ten years experience using Adobe products for print work it is difficult to understand why "centered" is such a complicated concept when designing art for use on the web. It is so frustrating to realize that most containers for images and text can only be resized by pushing and pulling handles located on the right and bottom; Catalyst seems like a great start but if Adobe really wanted to impress the "design" community it might consider putting all that supercharged code underneath the hood of some more familiar "design" tools. Maybe a "catalytic converter" would allow the introduction of a "centered" tool for every element.


              After all, why is it literally twenty-five times more difficult, requiring the use of three additional programs to create a component that functions exactly like a typical data list and scroll bar with the exception that the thumb is "centered" on the track and reveals images from both the right and left. For that matter why not also have as an option a thumb that snaps to the bottom of the track and reveals images from the top… and one that snaps to the right and reveals images from the left when you run the project? It just seems so logical to expand the scroll bar component to include these options.


              I am very glad to have Catalyst and will redesign my project to fit within the constraints of the tools available in the program but it seems that if Adobe is really serious about Catalyst being a window into the world of web design for designers/AD's that perhaps it might benefit by focusing on what might improve the program from the designer's point of view. I hate to say it but the Catalyst forum is already rife with answers to questions that are riddled with code… Literally. And to be honest most designers don't have the time to decipher that code. As a designer I work regularly and have a deep understanding of Photoshop, InDesign, Illustrator, Acrobat Pro, Final Cut Pro, Final Draft and modo. I do hi-res assembly, retouching, design and layout, identity, production, 3D modeling and rendering, video editing… and before I switch to using Catalyst for web mock-ups I am going to need a more "designer" friendly set of tools and definitely a "centered" control.


              I really think Adobe is fantastic. But I also think it could take a lesson from a great little company called Luxology. I tried learning 3D modeling and rendering for years with programs like Lightwave, Maya and others, always with mixed results. Then Luxology came along and actually delivered on their promise to create a 3D program for artists. What was the factor that made all the difference? Well, besides the Apple award winning interface and sets of tools it was the training available on their sight. The program itself ships with thirty-six hours of quicktime movies. And hundreds more hours available for download. I have never yet not been able to quickly and easily find an answer to a question I had about how to accomplish something in modo. You know how long I have already spent on Adobe TV searching through videos and on the Catalyst forum searching through topics trying to get an answer to what I thought was a very simple question? Way too many. If I have a question about a Luxology product that I can't find the answer to do you know what I do? I call Brad Peebler, the President of Luxology. I'm not special nor do I work for some special development house with special privileges that is simply their policy. And that policy has paid big dividends. Both ILM and Pixar has licensed their technology.


              Well… I apologize for this long response but I really think that if Catalyst is going to attract the market it wants that it will have to consider putting some designers on the development team. After all… Isn't that what the promo videos tout… Finally a web design program for designers. Well, I guess we'll see.



              • 4. Re: How can I create a horizontal scrollbar with a centered thumb that scrolls content from both sides?
                Karl Decker Level 1

                Just a note to let anyone that has read my lengthy diatribe on Flash Catlayst (from a designers point of view) to please read my latest post entitled Flash Catalyst (especially Paninni) Rules. Boy have I changed my mind.