StickPage Spring Animation Competition - For Glory: eSports - $5,000 in prizes, 15 placements, $1,500 first prize!
BEGINNER'S StickPage Spring Animation Competition - Unconventional Weapons - $1,000 in prizes!
Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: Legit Alpha Gradient Masking Without Actionscript [Flash][Effects]

  1. #1
    StickPage Cave Goblin Jeff's Avatar
    Join Date
    Dec 2007
    Posts
    4,356

    Legit Alpha Gradient Masking Without Actionscript [Flash][Effects]



    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.

    1. 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:



    2. 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?


    3. 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:



    4. Examples

    The effect used with animation: http://filz.us/3nL

    Also used as a reflective effect: http://filz.us/3nM

    Or simple shadows: http://filz.us/3nQ

    If you have any questions or need any clarification, please let me know!
    Last edited by Jeff; 10-23-2012 at 03:33 PM.

  2. #2
    IT... IT WORKS OMG O_O PRAISE JEFF OMG. -praises-

  3. #3
    Tracker of Death Xero's Avatar
    Join Date
    Feb 2012
    Location
    Hamel
    Posts
    7,563
    I actually managed to stumble across this technique when experimenting with filters but thought nothing of it at the time.
    Later I needed it but couldn't retrace my steps far enough to remember how it was done.
    Thanks jeff.
    Edit: nevermind, what I did was different but similar. I wish I remembered what it was.
    Last edited by Xero; 10-23-2012 at 12:22 AM.

  4. #4
    Senior Member S.A.'s Avatar
    Join Date
    Feb 2012
    Location
    India
    Posts
    942
    Oh really nice reflection effect. So that's what you used in your signature?
    ⇑ By, Zero.
    🔥The Lighter of TOXIGEN🔥
    'tis the one and only
    Agmus Flames

  5. #5
    yes Scarecrow's Avatar
    Join Date
    Oct 2005
    Location
    AUS
    Posts
    9,168
    huh, neat. good find

  6. #6
    WHAT THE FUCK IS THIS SORCERY.
    .*mx*
    // deviantart //

  7. #7
    quack Salt's Avatar
    Join Date
    Jun 2012
    Location
    Paperhouse
    Posts
    5,453
    or a simpler way, make the gradient the object and make the text the mask, simple, right? but the gradient has to be in the color of the text you're looking for.
    Last edited by Salt; 10-23-2012 at 06:14 AM.

  8. #8
    Snedly Sneder Sneding Pepper's Avatar
    Join Date
    Feb 2012
    Posts
    74
    Quote Originally Posted by Ahmad9383 View Post
    or a simpler way, make the gradient the object and make the text the mask, simple, right? but the gradient has to be in the color of the text you're looking for.
    Jeff's method is simple, and I can't understand what you're suggesting. if you have a changing background, this is really the key way to do it.

  9. #9
    Motherfuck yourself. Shensurei's Avatar
    Join Date
    Feb 2012
    Location
    America of States United
    Posts
    3,395
    Does this still work alright if the movie clip is animated?
    <Shadowkirby> k
    <Kizunami> k
    <Patt> k
    <Shensurei> i get the feeling that this will not end well for me

  10. #10
    Junior Memeber Smile's Avatar
    Join Date
    Jan 2012
    Location
    The Ocean
    Posts
    5,315
    Quote Originally Posted by Ahmad9383 View Post
    or a simpler way, make the gradient the object and make the text the mask, simple, right? but the gradient has to be in the color of the text you're looking for.
    that won't work with a complex, colored background. I did what I BELIEVED you said, and it failed.

    Quote Originally Posted by Shensurei View Post
    Does this still work alright if the movie clip is animated?
    I tried to use it on an animation and it worked. Inside "theContainer", I made an animation in a different layer from "theMask". The layer where "theMask" is placed will be on top of the layer for the animation. The frame will go the length of the entire animation.

    example result: http://www.fileize.com/view/b5fc5d82-a6d/


    Not sure if this answers your question tho since idfk what movie clip you're referring to.
    Last edited by Smile; 10-23-2012 at 10:14 AM.

Page 1 of 2 12 LastLast

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •