https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
HomeHome  
  • HomeHome  
  • PublicationsPublications  
  • Forums  
  • MemberlistMemberlist  
  •  
  • FAQFAQ  
  • SearchSearch  
  • UsergroupsUsergroups  
  • RegisterRegister  
  • Log inLog in  

  • Reply to topic
    avatar
    Preschool Spritan Lv 2

    legit alfa gradient objects

    Post by supersmashbro on 11/24/2012, 4: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
      Reputation : 0
      Location : East London

      View user profile
      avatar
      Administrator

      Re: legit alfa gradient objects

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

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

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

        View user profile
        avatar
        Moderator

        Re: legit alfa gradient objects

        Post by SXR123 on 11/24/2012, 10:30 pm

          *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 : 11625
          Registration date : 2010-03-07
          Reputation : 7
          Location : You know, a place.

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

          Re: legit alfa gradient objects

          Post by BlueShenron on 11/24/2012, 11:17 pm

            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
            Reputation : 0

            View user profile
            avatar
            Preschool Spritan Lv 2

            Re: legit alfa gradient objects

            Post by supersmashbro on 11/25/2012, 4: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
              Reputation : 0
              Location : East London

              View user profile

              Re: legit alfa gradient objects

              Post by _AfterAfter_ on 11/25/2012, 5: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 : 17
                Number of posts : 33
                Registration date : 2012-11-18
                Reputation : 0
                Location : Japan

                View user profile
                avatar
                Moderator

                Re: legit alfa gradient objects

                Post by SXR123 on 11/25/2012, 9: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 : 11625
                  Registration date : 2010-03-07
                  Reputation : 7
                  Location : You know, a place.

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

                  Re: legit alfa gradient objects

                  Post by Luigiman364 on 12/16/2012, 3: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
                    Reputation : 1
                    Location : Massachusetts

                    View user profile
                    avatar
                    Administrator

                    Re: legit alfa gradient objects

                    Post by Granadico on 12/16/2012, 8: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 : 12942
                      Registration date : 2008-11-18
                      Reputation : 9
                      Location : On the computer

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

                      Re: legit alfa gradient objects

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

                        You're not the boss of him



                        avatar
                        v2
                        Administrator
                        Administrator

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

                        View user profile
                        avatar
                        Moderator

                        Re: legit alfa gradient objects

                        Post by SXR123 on 12/16/2012, 9: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 : 11625
                          Registration date : 2010-03-07
                          Reputation : 7
                          Location : You know, a place.

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

                          Re: legit alfa gradient objects

                          Post by Granadico on 12/16/2012, 9: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 : 12942
                            Registration date : 2008-11-18
                            Reputation : 9
                            Location : On the computer

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

                            Re: legit alfa gradient objects

                            Post by v2 on 12/17/2012, 4: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
                              Reputation : 0
                              Location : your girls DMs

                              View user profile
                              avatar
                              Freshman Spritan Lv 5

                              Re: legit alfa gradient objects

                              Post by Luigiman364 on 12/17/2012, 7: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
                                Reputation : 1
                                Location : Massachusetts

                                View user profile
                                avatar
                                Administrator

                                Re: legit alfa gradient objects

                                Post by Granadico on 12/17/2012, 11:13 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.
                                  @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 : 12942
                                  Registration date : 2008-11-18
                                  Reputation : 9
                                  Location : On the computer

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

                                  Re: legit alfa gradient objects

                                  Post by v2 on 12/18/2012, 4: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
                                    Reputation : 0
                                    Location : your girls DMs

                                    View user profile
                                    avatar
                                    Administrator

                                    Re: legit alfa gradient objects

                                    Post by Rapidfir3Pho3nix on 12/18/2012, 5: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 : 4756
                                      Registration date : 2009-01-23
                                      Reputation : 83
                                      Location : Hollow Bastion
                                      Custom Rank : wut

                                      View user profile
                                      avatar
                                      Administrator

                                      Re: legit alfa gradient objects

                                      Post by Granadico on 12/18/2012, 6: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 : 12942
                                        Registration date : 2008-11-18
                                        Reputation : 9
                                        Location : On the computer

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

                                        Re: legit alfa gradient objects

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

                                          Said the quote photoshopper



                                          avatar
                                          v2
                                          Administrator
                                          Administrator

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

                                          View user profile
                                          avatar
                                          Moderator

                                          Re: legit alfa gradient objects

                                          Post by SXR123 on 12/18/2012, 8: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 : 11625
                                            Registration date : 2010-03-07
                                            Reputation : 7
                                            Location : You know, a place.

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

                                            Re: legit alfa gradient objects

                                            Post by Granadico on 12/18/2012, 10:04 pm

                                              @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 : 12942
                                              Registration date : 2008-11-18
                                              Reputation : 9
                                              Location : On the computer

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

                                              Re: legit alfa gradient objects

                                              Post by v2 on 12/18/2012, 11:59 pm

                                                @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
                                                Reputation : 0
                                                Location : your girls DMs

                                                View user profile
                                                avatar
                                                Moderator

                                                Re: legit alfa gradient objects

                                                Post by SXR123 on 12/19/2012, 12: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 : 11625
                                                  Registration date : 2010-03-07
                                                  Reputation : 7
                                                  Location : You know, a place.

                                                  View user profile http://www.youtube.com/user/sonicXrules123
                                                  Reply to topic
                                                  - Similar topics

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

                                                  Your last visit was on

                                                  Current date/time is 5/27/2017, 4:17 pm

                                                  Log In

                                                  Remember me: I forgot my password

                                                  Who is online?

                                                  In total there are 12 users online :: 1 Registered, 0 Hidden and 11 Guests :: 1 Bot

                                                  [ View the whole list ]

                                                  Staff Online
                                                  Latest topics
                                                  That one Alien
                                                  by 5h0ck 5/25/2017, 3:26 pm

                                                  Drawing Hands
                                                  by Rapidfir3Pho3nix 5/25/2017, 1:19 pm

                                                  The Spritas Discord Channel
                                                  Donate

                                                  Want to help out the site? Donating helps ensure the site is running as smoothly as possible! You may donate through PayPal using the button below.