HomeHome  
  • HomeHome  
  • Forums  
  • MemberlistMemberlist  
  •  
  • FAQFAQ  
  • SearchSearch  
  • UsergroupsUsergroups  
  • RegisterRegister  
  • Log inLog in  

  • Reply to topic
    avatar
    Preschool Spritan Lv 2
    Preschool Spritan Lv 2

    legit alfa gradient objects

    Post by supersmashbro on 11/24/2012, 6:52 pm

    Legit Alpha Gradient Masking Without Actionscript

    So this is something that's bugged me for a while. I remember being able to have an alpha gradient as a mask in earlier versions of flash, so that I could take a solid object and make parts of it more or less transparent depending on the mask, but a few years ago when I tried to do this it wouldn't work right, and no one I talked to could tell me how to do it the proper way. Everyone said that they knew it could be done, but wasn't sure how. Well, recently I took it upon myself to do some research and rediscover this long lost technique, and it's fairly simple, so I've decided to make a small tutorial to share with you today.

    THE PROBLEM

    Now, a regular mask involves 2 layers. One layer is the shape that's getting masked, and the other layer is the mask itself that will show/hide parts of the shape beneath it depending on where the mask's shapes are. That looks like this:


    Notice the layers showing which is the mask and which is going to get masked. On the stage, we see the big red area which will be what content is shown, and we see the text that is to bed masked. When the mask is applied, it looks like this:


    See how the part of the text that was covered by the big red box in the previous image is now showing, whereas the rest is hidden? This is because the big red box is "masking" the text to only show where I want it to as defined by the box itself. To further illustrate this, say I want to make the text polka-dotted:


    Now, this is useful for certain applications, but say I want to have a soft edge to the mask, so that it looks like it's fading in. You'd think I could just make a gradient on the mask and be done with it right? Well let's try that:


    So this LOOKS like the end result will have a nice smooth transition for the text from solid black to completely transparent, right? Here's how it actually looks when the mask is applied:


    So what happened? Where's our nice fading effect on the text? Well, the way these masks work is based on the SHAPE of the mask, and not the color or transparency. The mask will be applied wherever there is a shape. For example, this image has a striped mask on it, but I made it 100% transparent so you can't see it:


    When the mask is applied, you can see it, even though it looks like there is nothing there:



    A SOLUTION

    So how do we get the desired effect? Well, a lot of people will simply make a solid gradient over top of what they want to mask if the background is a solid color. So for example, the background of my project is white, so I could make a white to transparent gradient box and position it over the text like so:


    This looks OK, and creates the desired effect simply. But it's not a mask, and it's a cheap workaround. What if I had a wacky and complicated background?


    That white gradient is no longer sufficient. So now what can we do?


    THE SOLUTION

    The solution is deceptively simple, and has to do with movieclip blending. So far in my project I have 2 layers: The Background, and The Text:


    I want to mask the text so that it fades from solid to transparent. So my first step is to draw the mask. This can be on the same layer as the text, or on a new layer above it. Doesn't matter, but keep them close for convenience during a later step.


    Turn the mask shape into a movie clip. Call it what you want, I'm going to call mine theMask.


    Select your Mask Movieclip, go to it's Properties and set it's Blending to Alpha.


    It will vanish. This is normal. Next, select both the newly created mask movieclip, and the object you want masked (in this case, the text) and put them both into their own movie clip. I'm going to call my movieclip theContainer.


    Once created, set your container movie clip's blending to Layer, and voila:


    The mask is applied, fading out regardless of what is in the background.


    This can be used to achieve a reflective effect, regardless of background:




    The effect used with animation: h t t p : / / f i lz . u s / 3 n L
    Also used as a reflective effect: h t t p : / / f i l z . u s / 3 n M
    Or simple shadows: h t t p : / / f i l z . u s / 3 n Q

    If you have any questions or need any clarification, please let me know!
    avatar
    supersmashbro
    Preschool Spritan Lv 2
    Preschool Spritan Lv 2

    Age : 18
    Number of posts : 409
    Registration date : 2012-11-21
    Location : East London

    View user profile
    avatar
    Administrator
    Administrator

    Re: legit alfa gradient objects

    Post by Rapidfir3Pho3nix on 11/24/2012, 8:36 pm

    Question. Did you actually make this tutorial yourself?
    avatar
    Rapidfir3Pho3nix
    Administrator
    Administrator

    Age : 22
    Number of posts : 4975
    Registration date : 2009-01-23
    Location : Hollow Bastion
    Custom Rank : wut

    View user profile
    avatar
    Moderator
    Moderator

    Re: legit alfa gradient objects

    Post by SXR123 on 11/25/2012, 12:30 am

    *claps*

    now. this is what we need right here.

    Thanks for the tut dude! New member and already helping us out!





    ADOPT A CHAO!!
    (figuratively speaking of course)
    avatar
    SXR123
    Moderator
    Moderator

    Age : 22
    Number of posts : 11623
    Registration date : 2010-03-07
    Location : You know, a place.

    View user profile http://www.youtube.com/user/sonicXrules123
    avatar
    Preschool Spritan Lv 1
    Preschool Spritan Lv 1

    Re: legit alfa gradient objects

    Post by BlueShenron on 11/25/2012, 1:17 am

    i saw this same tutorial on stickpage
    avatar
    BlueShenron
    Preschool Spritan Lv 1
    Preschool Spritan Lv 1

    Age : 21
    Number of posts : 198
    Registration date : 2012-04-05

    View user profile
    avatar
    Preschool Spritan Lv 2
    Preschool Spritan Lv 2

    Re: legit alfa gradient objects

    Post by supersmashbro on 11/25/2012, 6:52 am

    yes this tutorial is on SP as well, I got permission from jeff (one of the admins on SP) to post this here because this was his original tutorial. I'm sorry if this caused confusion.



    avatar
    supersmashbro
    Preschool Spritan Lv 2
    Preschool Spritan Lv 2

    Age : 18
    Number of posts : 409
    Registration date : 2012-11-21
    Location : East London

    View user profile

    Re: legit alfa gradient objects

    Post by _AfterAfter_ on 11/25/2012, 7:06 am

    I read the tutorial and it's really good but since I was a newbie at flash I didn't really understand it that well confused

    Not the tuts fault though Laughing



    avatar
    _AfterAfter_
    No Rank
    No Rank

    Age : 16
    Number of posts : 33
    Registration date : 2012-11-18
    Location : Japan

    View user profile
    avatar
    Moderator
    Moderator

    Re: legit alfa gradient objects

    Post by SXR123 on 11/25/2012, 11:50 am

    help is help, whether or not it's yours doesn't really matter I guess. as long as you got permission.





    ADOPT A CHAO!!
    (figuratively speaking of course)
    avatar
    SXR123
    Moderator
    Moderator

    Age : 22
    Number of posts : 11623
    Registration date : 2010-03-07
    Location : You know, a place.

    View user profile http://www.youtube.com/user/sonicXrules123
    avatar
    Freshman Spritan Lv 5
    Freshman Spritan Lv 5

    Re: legit alfa gradient objects

    Post by Luigiman364 on 12/16/2012, 5:33 pm




    Skype Lawls:
    Spoiler:

    Avatar by LeeTheHedgeHog and userbar done by SynsterB

    avatar
    Luigiman364
    Freshman Spritan Lv 5
    Freshman Spritan Lv 5

    Age : 22
    Number of posts : 3097
    Registration date : 2010-12-13
    Location : Massachusetts

    View user profile superluigi150942
    avatar
    Administrator
    Administrator

    Re: legit alfa gradient objects

    Post by Granadico on 12/16/2012, 10:06 pm

    Put some disclaimer that it wasn't you and the link to the original place you found it



    made by Knux184

    We can learn from the past
    But those days are gone
    We can hope for the future
    But there may not be one
    -Mike Portnoy "A Change of Seasons"
    avatar
    Granadico
    Administrator
    Administrator

    Age : 21
    Number of posts : 12933
    Registration date : 2008-11-18
    Location : On the computer

    View user profile http://www.youtube.com/user/Granadico Granadico https://www.twitch.tv/granadico/profile
    avatar
    Administrator
    Administrator

    Re: legit alfa gradient objects

    Post by v2 on 12/16/2012, 10:48 pm

    You're not the boss of him



    avatar
    v2
    Administrator
    Administrator

    Age : 20
    Number of posts : 5600
    Registration date : 2012-05-17
    Location : your girls DMs

    View user profile
    avatar
    Moderator
    Moderator

    Re: legit alfa gradient objects

    Post by SXR123 on 12/16/2012, 11:11 pm

    Yeah granny, don't tell him what to do.





    ADOPT A CHAO!!
    (figuratively speaking of course)
    avatar
    SXR123
    Moderator
    Moderator

    Age : 22
    Number of posts : 11623
    Registration date : 2010-03-07
    Location : You know, a place.

    View user profile http://www.youtube.com/user/sonicXrules123
    avatar
    Administrator
    Administrator

    Re: legit alfa gradient objects

    Post by Granadico on 12/16/2012, 11:30 pm

    Sieghart wrote:You're not the boss of him
    @SXR123 wrote:Yeah granny, don't tell him what to do.
    notsureifsrs. I'm not bossing him but he's taking credit for something that's not his, whats the difference between this and someone posting NASF on their account? You all thought this was his tut and it was amazing just like people might assume that NASF was made by whoever posted that.



    made by Knux184

    We can learn from the past
    But those days are gone
    We can hope for the future
    But there may not be one
    -Mike Portnoy "A Change of Seasons"
    avatar
    Granadico
    Administrator
    Administrator

    Age : 21
    Number of posts : 12933
    Registration date : 2008-11-18
    Location : On the computer

    View user profile http://www.youtube.com/user/Granadico Granadico https://www.twitch.tv/granadico/profile
    avatar
    Administrator
    Administrator

    Re: legit alfa gradient objects

    Post by v2 on 12/17/2012, 6:19 pm

    @Granadico wrote:he's taking credit for something that's not his,
    No he's not
    @Granadico wrote:whats the difference between this and someone posting NASF on their account?
    He stated himself that he didn't make it and that some guy from stickpage did
    @Granadico wrote:You all thought this was his tut
    No I didn't because I'm not illiterate and I'm more than capable of reading the full topic.



    avatar
    v2
    Administrator
    Administrator

    Age : 20
    Number of posts : 5600
    Registration date : 2012-05-17
    Location : your girls DMs

    View user profile
    avatar
    Freshman Spritan Lv 5
    Freshman Spritan Lv 5

    Re: legit alfa gradient objects

    Post by Luigiman364 on 12/17/2012, 9:35 pm

    Sieghart wrote:
    @Granadico wrote:he's taking credit for something that's not his,
    No he's not
    @Granadico wrote:whats the difference between this and someone posting NASF on their account?
    He stated himself that he didn't make it and that some guy from stickpage did
    @Granadico wrote:You all thought this was his tut
    No I didn't because I'm not illiterate and I'm more than capable of reading the full topic.


    SXR Im going to need you to checkoff one of these boxes

    [_] Told


    [_] Fucking Told


    [_] Damn, Sure did get Told in here


    [_] Someone ordered a nice Told Ice cream cone


    [_] NO WAY DUDE , you just rented Knights of the Told Republic



    Skype Lawls:
    Spoiler:

    Avatar by LeeTheHedgeHog and userbar done by SynsterB

    avatar
    Luigiman364
    Freshman Spritan Lv 5
    Freshman Spritan Lv 5

    Age : 22
    Number of posts : 3097
    Registration date : 2010-12-13
    Location : Massachusetts

    View user profile superluigi150942
    avatar
    Administrator
    Administrator

    Re: legit alfa gradient objects

    Post by Granadico on 12/18/2012, 1:13 am

    Sieghart wrote:
    @Granadico wrote:he's taking credit for something that's not his,
    No he's not
    @Granadico wrote:whats the difference between this and someone posting NASF on their account?
    He stated himself that he didn't make it and that some guy from stickpage did
    @Granadico wrote:You all thought this was his tut
    No I didn't because I'm not illiterate and I'm more than capable of reading the full topic.
    @supersmashbro wrote:I've decided to make a small tutorial to share with you today.
    @Rapidfir3Pho3nix wrote:Question. Did you actually make this tutorial yourself?
    @supersmashbro wrote:yes this tutorial is on SP as well, I got permission from jeff (one of the admins on SP) to post this here because this was his original tutorial. I'm sorry if this caused confusion.
    Yes he states it after but in the original place he says he made it himself, he should've just said it in the first place instead of saying he made it himself.



    made by Knux184

    We can learn from the past
    But those days are gone
    We can hope for the future
    But there may not be one
    -Mike Portnoy "A Change of Seasons"
    avatar
    Granadico
    Administrator
    Administrator

    Age : 21
    Number of posts : 12933
    Registration date : 2008-11-18
    Location : On the computer

    View user profile http://www.youtube.com/user/Granadico Granadico https://www.twitch.tv/granadico/profile
    avatar
    Administrator
    Administrator

    Re: legit alfa gradient objects

    Post by v2 on 12/18/2012, 6:29 pm

    Granny it's okay to admit you're so mad that you have to photoshop quotes



    avatar
    v2
    Administrator
    Administrator

    Age : 20
    Number of posts : 5600
    Registration date : 2012-05-17
    Location : your girls DMs

    View user profile
    avatar
    Administrator
    Administrator

    Re: legit alfa gradient objects

    Post by Rapidfir3Pho3nix on 12/18/2012, 7:25 pm

    @Luigiman364 wrote:
    Sieghart wrote:
    @Granadico wrote:he's taking credit for something that's not his,
    No he's not
    @Granadico wrote:whats the difference between this and someone posting NASF on their account?
    He stated himself that he didn't make it and that some guy from stickpage did
    @Granadico wrote:You all thought this was his tut
    No I didn't because I'm not illiterate and I'm more than capable of reading the full topic.


    SXR Im going to need you to checkoff one of these boxes

    [_] Told


    [_] Fucking Told


    [_] Damn, Sure did get Told in here


    [_] Someone ordered a nice Told Ice cream cone


    [_] NO WAY DUDE , you just rented Knights of the Told Republic

    ROFLMAO XD OMG DUDE THAT'S HILARIOUS! XD IM CRYING OVER HERE!! XD
    avatar
    Rapidfir3Pho3nix
    Administrator
    Administrator

    Age : 22
    Number of posts : 4975
    Registration date : 2009-01-23
    Location : Hollow Bastion
    Custom Rank : wut

    View user profile
    avatar
    Administrator
    Administrator

    Re: legit alfa gradient objects

    Post by Granadico on 12/18/2012, 8:00 pm

    Too bad joey's wrong



    made by Knux184

    We can learn from the past
    But those days are gone
    We can hope for the future
    But there may not be one
    -Mike Portnoy "A Change of Seasons"
    avatar
    Granadico
    Administrator
    Administrator

    Age : 21
    Number of posts : 12933
    Registration date : 2008-11-18
    Location : On the computer

    View user profile http://www.youtube.com/user/Granadico Granadico https://www.twitch.tv/granadico/profile
    avatar
    Administrator
    Administrator

    Re: legit alfa gradient objects

    Post by v2 on 12/18/2012, 8:49 pm

    Said the quote photoshopper



    avatar
    v2
    Administrator
    Administrator

    Age : 20
    Number of posts : 5600
    Registration date : 2012-05-17
    Location : your girls DMs

    View user profile
    avatar
    Moderator
    Moderator

    Re: legit alfa gradient objects

    Post by SXR123 on 12/18/2012, 10:14 pm

    Sieghart wrote:Said the quote photoshopper

    He's got a point granny.





    ADOPT A CHAO!!
    (figuratively speaking of course)
    avatar
    SXR123
    Moderator
    Moderator

    Age : 22
    Number of posts : 11623
    Registration date : 2010-03-07
    Location : You know, a place.

    View user profile http://www.youtube.com/user/sonicXrules123
    avatar
    Administrator
    Administrator

    Re: legit alfa gradient objects

    Post by Granadico on 12/19/2012, 12:04 am

    @SXR123 wrote:
    Sieghart wrote:Said the quote photoshopper

    He's got a wrong point granny.
    Fixed.



    made by Knux184

    We can learn from the past
    But those days are gone
    We can hope for the future
    But there may not be one
    -Mike Portnoy "A Change of Seasons"
    avatar
    Granadico
    Administrator
    Administrator

    Age : 21
    Number of posts : 12933
    Registration date : 2008-11-18
    Location : On the computer

    View user profile http://www.youtube.com/user/Granadico Granadico https://www.twitch.tv/granadico/profile
    avatar
    Administrator
    Administrator

    Re: legit alfa gradient objects

    Post by v2 on 12/19/2012, 1:59 am

    @Granadico wrote:
    @SXR123 wrote:
    Sieghart wrote:Granny's mad
    Granny's mad
    I'm mad.
    Fixed



    avatar
    v2
    Administrator
    Administrator

    Age : 20
    Number of posts : 5600
    Registration date : 2012-05-17
    Location : your girls DMs

    View user profile
    avatar
    Moderator
    Moderator

    Re: legit alfa gradient objects

    Post by SXR123 on 12/19/2012, 2:45 am

    I can't help but concur with you joey.

    seriously though, we're kinda offtopic. so we should like, stop or something.





    ADOPT A CHAO!!
    (figuratively speaking of course)
    avatar
    SXR123
    Moderator
    Moderator

    Age : 22
    Number of posts : 11623
    Registration date : 2010-03-07
    Location : You know, a place.

    View user profile http://www.youtube.com/user/sonicXrules123
    Sponsored content

    Re: legit alfa gradient objects

    Post by Sponsored content


    Sponsored content


    Reply to topic
    - Similar topics

     
    Permissions in this forum:
    You cannot reply to topics in this forum
    Log In

    Remember me: I forgot my password

    Who is online?
    None

    In total there are 14 users online :: 0 Registered, 0 Hidden and 14 Guests :: 2 Bots

    [ View the whole list ]

    Staff Online
    The Spritas Discord Channel