[CA] Create a "A la FrontRow" Button

  • Hi there,

    first of all, I'm sorry for my double mailing: I did not know which
    list was more appropriate for this question, because it's about
    CoreAnimation, so it's Cocoa related and also Quartz(Core) related.

    By the way, here is what I want to do: create a "à la FrontRow" button
    (the highlighting rectangle below the current selection).

    In order to do so I thought I'd create a CALayer subclass which would
    contain two gradients -- one for the button top, the other for the
    bottom -- to create a gloss effect and a outline light. I thought I
    could use CIFilters to create these "effects" (CILinearGradient and
    CIBloom), but it isn't that easy (well, I think I just don't use them
    correctly): the two CILinearGradient I create are applied on the layer
    as "backgroundFilters" (if they are applied as -- foreground --
    "filters" they don't appear) and the CIBloom, as a -- foreground --
    "filters" (and doesn't appear).

    I think that if my filters don't appear when they're applied as
    foreground filters it's because my layer is empty -- which is
    logical :'). So do I have to provide a "fake" contents to my layer (as
    a transparent 1 square pixel picture streched to my layer bounds)? Or
    is there a smarter way to create my "à la FrontRow" button layer?

    So how would you do?

    Thanks for any help,

    Paul
  • On Dec 5, 2007, at 5:01 PM, Paul Arthur Henrion wrote:

    > first of all, I'm sorry for my double mailing: I did not know which
    > list was more appropriate for this question, because it's about
    > CoreAnimation, so it's Cocoa related and also Quartz(Core) related.

    Don't cross-post.  Send in your e-mail to both lists separately.

    > By the way, here is what I want to do: create a "à la FrontRow"
    > button (the highlighting rectangle below the current selection).

    Check out /Examples/Quartz/Core Animation/Recipes/

    I believe it does what you describe.

    ___________________________________________________________
    Ricky A. Sharp        mailto:<rsharp...>
    Instant Interactive(tm)  http://www.instantinteractive.com
  • Le 6 déc. 07 à 00:41, Ricky Sharp a écrit :
    > On Dec 5, 2007, at 5:01 PM, Paul Arthur Henrion wrote:
    >> first of all, I'm sorry for my double mailing: I did not know which
    >> list was more appropriate for this question, because it's about
    >> CoreAnimation, so it's Cocoa related and also Quartz(Core) related.
    > Don't cross-post.  Send in your e-mail to both lists separately.
    Thanks for the advice, I won't do this again :')

    >> By the way, here is what I want to do: create a "à la FrontRow"
    >> button (the highlighting rectangle below the current selection).
    > Check out /Examples/Quartz/Core Animation/Recipes/
    > I believe it does what you describe.
    I've already check this example (and a lot of them) and this is not
    what I intend to do. This example (like actually most of available
    CoreAnimation menu examples) simply create a layer, draw its border
    and add a blooming effect on it, giving a good-looking rectangle.

    In my case I would like to have a button-like layer (with a gloss
    effect and a outline light which does not spread _inside_ the layer,
    only outside)... just as in FrontRow.

    Regards,

    Paul
  • On Dec 5, 2007, at 6:01 PM, Paul Arthur Henrion wrote:

    > Hi there,
    >
    > first of all, I'm sorry for my double mailing: I did not know which
    > list was more appropriate for this question, because it's about
    > CoreAnimation, so it's Cocoa related and also Quartz(Core) related.
    >
    > By the way, here is what I want to do: create a "à la FrontRow"
    > button (the highlighting rectangle below the current selection).
    >
    > In order to do so I thought I'd create a CALayer subclass which
    > would contain two gradients -- one for the button top, the other for
    > the bottom -- to create a gloss effect and a outline light. I
    > thought I could use CIFilters to create these
    > "effects" (CILinearGradient and CIBloom), but it isn't that easy
    > (well, I think I just don't use them correctly): the two
    > CILinearGradient I create are applied on the layer as
    > "backgroundFilters" (if they are applied as -- foreground --
    > "filters" they don't appear) and the CIBloom, as a -- foreground --
    > "filters" (and doesn't appear).
    >
    > I think that if my filters don't appear when they're applied as
    > foreground filters it's because my layer is empty -- which is
    > logical :'). So do I have to provide a "fake" contents to my layer
    > (as a transparent 1 square pixel picture streched to my layer
    > bounds)? Or is there a smarter way to create my "à la FrontRow"
    > button layer?
    >

    The walkthough at the end of the Core Animation Programming Guide
    implements a menu just like this.

    http://developer.apple.com/documentation/Cocoa/Conceptual/CoreAnimation_gui
    de/Articles/Headstart.html#/

    /apple_ref/doc/uid/TP40006131

    The text layers are in one layer and the selection indicating layer is
    on another.

    The bloom is draw on the outside of the button

    the example has no gradient though, if you want the gradient on the
    inside you would simply set the content of the selection indication
    layer to the appropriate graphic that shows the gradient.. but be sure
    that the gradient graphic has the appropriate alpha levels.

    no need for filters at all, just proper layering of the layers.

    Anyone who was at WWDC can send you the source for the Core Animation
    Menu example (which is this example) so you can play with it
    directly.  Otherwise you can get an idea of its structure and output
    from the article itself.
previous month december 2007 next month
MTWTFSS
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
Go to today