Adobe Community: Scroll Panel in Beta 2

Currently Being Moderated

1. Laurence Schuberth,

Oct 6, 2009 3:13 AM in reply to Yefolio

Report

Good question, I was wondering that!

laz

|

Mark as:

Currently Being Moderated

2. Yefolio,

Oct 6, 2009 7:24 AM in reply to Yefolio

Report

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.

|

Mark as:

Currently Being Moderated

3. Tvoliter,

Oct 6, 2009 8:26 AM in reply to Yefolio

Report

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:

scrolling panel example.fxp.zip (481.0 K)

|

Mark as:

Currently Being Moderated

4. steve_London,

Oct 6, 2009 2:10 PM in reply to Tvoliter

Report

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

5. Laurence Schuberth,

Oct 6, 2009 7:39 PM in reply to steve_London

Report

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

6. Yefolio,

Oct 7, 2009 10:57 AM in reply to Yefolio

Report

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?

|

Mark as:

Currently Being Moderated

7. Tara Jane Feener,

Oct 7, 2009 11:02 AM in reply to Yefolio

Report

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

8. Yefolio,

Oct 7, 2009 2:34 PM in reply to Tara Jane Feener

Report

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

|

Mark as:

Currently Being Moderated

9. steve_London,

Oct 7, 2009 2:58 PM in reply to Yefolio

Report

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

10. njadobe2,

Oct 8, 2009 2:58 PM in reply to steve_London

Report

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

|

Mark as:

Currently Being Moderated

11. steve_London,

Oct 8, 2009 4:05 PM in reply to njadobe2

Report

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

12. Luke Pearce,

Dec 5, 2009 12:24 PM in reply to Tvoliter

Report

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

13. acath,

Dec 9, 2009 10:49 AM in reply to Luke Pearce

Report

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:

Flash Catalyst

Scroll Panel in Beta 2

Oct 5, 2009 9:37 PM

More Like This

Bookmarked By (0)

Answers + Points = Status