Author Topic: Cover Flow Style Scrolling Panel  (Read 14009 times)

Turnip

  • Guest
Cover Flow Style Scrolling Panel
« on: January 09, 2013, 08:26:45 AM »
I am trying to setup a scroll view that looks like the cover flow on itunes, but I am not sure where to start. I have looked at the Scroll view scenes but I am still stuck.

Is there a better example, or tutorial that will point me in the right direction.

Thanks



Turnip

  • Guest
Re: Cover Flow Style Scrolling Panel
« Reply #1 on: January 10, 2013, 03:30:48 AM »
Has anyone got any ideas? Seems like it should be possible to do but I am not sure how to start.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Cover Flow Style Scrolling Panel
« Reply #2 on: January 10, 2013, 01:25:40 PM »
Each of chose squares would be a different panel, and you would be moving panels in such a way that makes the tilt. I can't really suggest much else as this is highly app-specific, and not really related to NGUI at all. I think the closest example to this in NGUI would be the menu example with how the windows move there.

FWCorey

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 13
    • View Profile
Re: Cover Flow Style Scrolling Panel
« Reply #3 on: January 14, 2013, 11:25:33 PM »
If this is for a commercial project there may be trademark issues as well if it's being released in the U.S. market. Apple is a fairly litigious company and they have at least 2 trademarks on "Cover Flow" as a user interface design that I'm aware of.

Turnip

  • Guest
Re: Cover Flow Style Scrolling Panel
« Reply #4 on: January 19, 2013, 04:32:11 PM »
Thanks for the replies. If there could be issues with the cover flow with Apple then I best just change my approach I think and just go for something simpler.

Thanks

marasto

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 23
    • View Profile
Re: Cover Flow Style Scrolling Panel
« Reply #5 on: January 20, 2013, 09:10:11 AM »
If u really need something like this there are 2/3 example. Check this for example (NGUI used for the slider)
http://game.ceeger.com/forum/read.php?tid=1411

But give some idea

UIGuy

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 2
    • View Profile
Re: Cover Flow Style Scrolling Panel
« Reply #6 on: July 16, 2014, 06:05:38 PM »
Each of chose squares would be a different panel, and you would be moving panels in such a way that makes the tilt. I can't really suggest much else as this is highly app-specific, and not really related to NGUI at all. I think the closest example to this in NGUI would be the menu example with how the windows move there.

Hi, new here and I'm a UI Artist, not a programmer. Often these little things stop an artist dead in his tracks and require help from a programmer. But I would like to suggest that this kind of perspective/scale/position change would be super handy for scrollviews in a 3D UI. You have provided Window Auto-Yaw, which is along these lines, but not configurable for an artist, and it's relative to the sides of the screen. I would prefer a solution that transforms the child relative to its position within the scrollview, i.e. distance from center of scrollview.

In my dreams, there is a script called "GridForScrollviews" that handles this. (This script could be automatically added when the UI Scrollview script is added.) It might look like the attached mockup. This also facilitates a lot of possibilities that don't look like Apple's solution.




Nicki

  • Global Moderator
  • Hero Member
  • *****
  • Thank You
  • -Given: 33
  • -Receive: 141
  • Posts: 1,768
    • View Profile
Re: Cover Flow Style Scrolling Panel
« Reply #7 on: July 16, 2014, 06:13:04 PM »
@UIGuy, that sounds like a fairly simple thing to actually make. What you really only need is the position of the individual element and the position of the scroll view, then you can calculate how far from the visual center you are, to do "your thing".

I think from NGUI's perspective, the best thing would be to make those values available in an easily digestible manner, so custom implementations could be based on those values, instead of the specific solution you suggest in your picture.

I'll mull on how this can be done in a nice manner, but no promises (I'm on summer holiday, I'm just bored right now.. ;) ).

UIGuy

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 2
    • View Profile
Re: Cover Flow Style Scrolling Panel
« Reply #8 on: July 17, 2014, 04:34:29 PM »
@Nicki – Thanks for a fast response. Today I thought of an even simpler way this might work:

Tweens Section on GridForScrollViews – Specify Tweens that are played forwards/backwards as child moves closer to/further from center. This would work well with existing NGUI tween scripts.