1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    5
    Vote Rating
    0
    josebunkermode is on a distinguished road

      0  

    Default masking objects

    masking objects


    is there a way to mask objects in animator?


    for example

    lets say i want to animate a shape that moves across from left to right, but i want it all to be contained with in the shape of a button.

    is there a way to do that?

  2. #2
    Sencha User arnebech's Avatar
    Join Date
    Jun 2010
    Posts
    498
    Vote Rating
    10
    arnebech will become famous soon enough

      0  

    Default


    1) If your background is uniform, you could overlay a image with the same color as the background that has the button shape transparent in the middle

    2) Using the overflow property, you can get a square mask.

    3) Since -webkit-mask aren't standard (but now it looks like it might become in the future) we don't have any direct controls for it, but you could potentially add the rules yourself to the custom css part in the properties panel. This is "real masking", however it only works on webkit browsers.

  3. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    5
    Vote Rating
    0
    josebunkermode is on a distinguished road

      0  

    Default


    Thanks!

  4. #4
    Sencha User
    Join Date
    Jan 2013
    Posts
    5
    Vote Rating
    0
    josebunkermode is on a distinguished road

      0  

    Default


    Quote Originally Posted by arnebech View Post

    2) Using the overflow property, you can get a square mask.
    where can i find the overflow property? I sqaure mask is what im looking for

  5. #5
    Sencha User arnebech's Avatar
    Join Date
    Jun 2010
    Posts
    498
    Vote Rating
    10
    arnebech will become famous soon enough

      0  

    Default


    You can find the overflow property in the Properties Panel under Transforms when an object is selected in base mode.

    overflow.png

  6. #6
    Sencha User
    Join Date
    Jan 2013
    Posts
    5
    Vote Rating
    0
    josebunkermode is on a distinguished road

      0  

    Default


    thanks

  7. #7
    Sencha User
    Join Date
    Nov 2013
    Posts
    2
    Vote Rating
    0
    cjisndenial is on a distinguished road

      0  

    Default


    Can you be more specific on this implementation? How do you use one shape to mask another with the overflow property?

  8. #8
    Sencha - Architect Dev Team
    Join Date
    Apr 2012
    Posts
    226
    Vote Rating
    21
    miro.bojic will become famous soon enough miro.bojic will become famous soon enough

      0  

    Default


    Take a look at this thread: http://www.sencha.com/forum/showthread.php?275296

    There is more explanation there and a sample project with a different masking method.

  9. #9
    Sencha User
    Join Date
    Nov 2013
    Posts
    2
    Vote Rating
    0
    cjisndenial is on a distinguished road

      0  

    Default


    Thanks!