Skip navigation
Currently Being Moderated

Scroll Panel in Beta 2

Oct 5, 2009 9:37 PM

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

 
Replies
  • Currently Being Moderated
    Oct 6, 2009 3:13 AM   in reply to Yefolio

    Good question, I was wondering that!

     

    laz

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 6, 2009 8:26 AM   in reply to Yefolio

    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

    Attachments:
     
    |
    Mark as:
  • Currently Being Moderated
    Oct 6, 2009 2:10 PM   in reply to Tvoliter

    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.

    steve

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 6, 2009 7:39 PM   in reply to steve_London

    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

     

    http://tv.adobe.com/watch/discover-flash-catalyst/wire-framing-in-flas h-catalyst/

     

    laz

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 7, 2009 11:02 AM   in reply to Yefolio

    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?

    Thanks,

    Tara

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 7, 2009 2:58 PM   in reply to Yefolio

    Hi,

    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.

    Thanks

    steve

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 8, 2009 2:58 PM   in reply to steve_London

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

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 8, 2009 4:05 PM   in reply to njadobe2

    Thanks for the reply, Narciso.

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

    steve

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 5, 2009 12:24 PM   in reply to Tvoliter

    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.

     

    thanks,

     

    Luke.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 9, 2009 10:49 AM   in reply to Luke Pearce

    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.

     

    -Adam

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points