16 Replies Latest reply on Oct 29, 2007 5:03 PM by Boxing Boom

    movieClip Buttons

    Boxing Boom Level 1
      Hi All,

      Need a little help from my friends here; made a really nice button using filters in actionScript, to apply filters - you have to have movieClip. Right, so I have my button designed. Now when I add some onRelease function, the movieClip button loses the color effect I applied to it. How do you make this type of button function?

      I tried placing in within another mc i.e. loader_mc but eventhough the onRelease is applied to the loader_mc, the underlying play_mc stops working as in the effect I applied via ActionScript.

      loader_mc.onRelease = function () {
      trace("onRelease called");
      }

      The above works, but the movieClip button loses its effect, basically the onRollOver and onRollOut effect will not work.

      I need my movieClip button to keep the filter transitions that I applied, but function as a normal button, get me?
      One can create great onRollOver and OnRollOut effects with movieClip buttons. But when it comes to using them to launch funcitons and getURL ect... the effect seems to be lost, any know why?

      In need of solution, real quick. Sorry to sound candid, but I am in between a rock and a hard place ;)
      Kind Regards,

      Boxing Boom
        • 1. Re: movieClip Buttons
          Level 7
          Boxing Boom,

          > made a really nice button using filters in actionScript,
          > to apply filters - you have to have movieClip.

          Filters may be applied to any object whose class definition features a
          "filters" property. Notice, in the ActionScript 2.0 Language Reference, the
          MovieClip, Button, and TextField classes all have "filters" in their
          Property summaries. That means any movie clip, button, or text field may
          have filters applied, either by way of the Property inspector of by
          ActionScript.

          > Now when I add some onRelease function, the movieClip
          > button loses the color effect I applied to it.

          Not sure what you mean by color effect. Are you talking about the
          filters, or does this refer to, say, an over state? (What would have been
          an Over frame in a button symbol.)

          > loader_mc.onRelease = function () {
          > trace("onRelease called");
          > }
          >
          > The above works, but the movieClip button loses its effect,
          > basically the onRollOver and onRollOut effect will not work.

          I can't tell if you mean the MovieClip.onRollOver and
          MovieClip.onRollOut events aren't being handled, or if they don't respond
          visually.

          > But when it comes to using them to launch funcitons and
          > getURL ect... the effect seems to be lost, any know why?

          Sorry, I really don't understand! But here's what I can suggest. You
          *might* be talking about visual updates for button states, here's a quick
          writeup on that:

          http://www.quip.net/blog/2006/flash/easy-button-states-for-mc-buttons

          If it's that your filters are somehow getting lost, I'll need more
          information, but you can always apply the filters programmatically. Maybe
          that's what you're after?

          The following, for example, give me a button that gains a drop shadow
          when moused over (and loses that shadow when the mouse moves away). The
          onRelease handler still works:

          import flash.filters.DropShadowFilter;

          var ds:DropShadowFilter = new DropShadowFilter;

          loader_mc.onRollOver = function():Void {
          this.filters = [ds];
          };
          loader_mc.onRollOut = function():Void {
          this.filters = [];
          };
          loader_mc.onRelease = function():Void {
          trace("onRelease called");
          };


          David Stiller
          Co-author, Foundation Flash CS3 for Designers
          http://tinyurl.com/2k29mj
          "Luck is the residue of good design."


          • 2. movieClip Buttons
            Boxing Boom Level 1
            Hi David,

            First, let me express my joy, in having <b>David Stiller</b> respond to my problem ;)

            Right, the filters are programmed within my play_mc button, the following seems to be similiar to my situation;

            **********************************************************************************
            David Stiller Says:

            April 1st, 2007 at 11:20 am
            Josh,

            You’re running into a limitation of mouse-related events in ActionScript 2.0. If your movie clip already has an onRollOver event in place, then you can imagine a kind of “force field” on that movie clip. Since that button is inside the movie clip — under that force field, so to speak — mouse-related events for the button never make it to the surface.

            There are a number of ways to work around this limitation, but the easiest I can think of is to get rid of that onRollOver event on the parent movie clip. Instead, put a new movie clip or button inside that parent in frame 1 of its timeline. Handle the onRollOver even on that inner movie clip/button. That way the parent movie clip won’t overshadow the events handled on that later button.

            ****************************************************************************************** **************

            However, I cannot see the answer ;) I have placed the play_mc within the loader_mc on the main timeline, but the play_mc still do not behave how it was programmed i.e. filter effects onRollOver and onRollOut. Basically, when I assign functions to the loader_mc such as a onRelease function etc... my play_mc seems to freeze i.e. the programmed filters do not appear.


            Kind Regards,

            Boxing Boom
            • 3. Re: movieClip Buttons
              Level 7
              Boxing Boom,

              I'm happy to help you as best I can, but I'll need a clearer understand
              of how your movie clip button is built. :)

              > Right, the filters are programmed within my play_mc button,

              Is this how it was before, or is this how it is now? In order for me to
              understand your circumstance, I need the following sort of outline:

              * In the main timeline, I have a movie clip with the instance
              name play_mc
              * This movie clip has filters apply to it via the Property
              inspector
              * I have the following event handlers associated with this
              movie clip ...

              Truly, a play-by-play account -- otherwise I'm not able to visualize
              what you've built. Make sense?

              > the following seems to be similiar to my situation;
              > April 1st, 2007 at 11:20 am
              > Josh,
              > ...

              The issue in that particular reply may or may not apply to your
              situation. I'm not convinced, yet, either way. ;) Describe what you've
              built in detail, including examples of your ActionScript, and we should be
              able to figure it out pretty quickly.


              David Stiller
              Contributor, How to Cheat in Flash CS3
              http://tinyurl.com/2cp6na
              "Luck is the residue of good design."


              • 4. movieClip Buttons
                Boxing Boom Level 1
                Hi David,

                Sorry for not being clear, I will try again;

                1. I have made a movieClip button, with actionscript applied that makes this button change color etc... onRollOver and onRollOut using programmed filters.

                2. I have placed this button (play_mc) on the main time line, now when I add the following for example;

                play_mc.onPress = function(){
                this.onEnterFrame = function(){
                trace("this works");{
                delete this.onEnterFrame;
                }
                }
                }


                or even

                play_mc.onRelease = function() {
                trace("This works");
                }

                3. The play_mc seems to freeze i.e. the onRollOver and onRollOut filter effects do not work.

                The code used for the play_mc filters etc... is attached. Within the play_mc there are 4 layers;

                actions
                reflection
                playSign
                Orb


                Kind Regards,

                Boxing Boom
                • 5. Re: movieClip Buttons
                  Boxing Boom Level 1
                  Hi,

                  Anyone out there?

                  Kind Regards,

                  Boxing Boom
                  • 6. Re: movieClip Buttons
                    Level 7
                    Boxing Boom,

                    > Anyone out there?

                    Lunch meeting. ;)

                    So play_mc has orb_mc inside it. Then yes, your onPress event handler
                    for play_mc is obscuring the mouse-related event handlers of orb_mc. This
                    is indeed the issue I wrote to the other person about in the notes you
                    quoted earlier.

                    What you'll need to do is perform the color changes based on the
                    onRollOver and onRollOut events of play_mc.

                    play_mc.onRollOver = function():Void {
                    this.orb_mc.onEnterFrame = function():Void {
                    gf.blurX += (100-gf.blurX)/5;
                    gf.blurY = gf.blurX;
                    this.filters = [gf,ds2];
                    colorTrans.rgb = 0xab1d37; // Reddish
                    trans.colorTransform = colorTrans;
                    this._parent.reflection_mc._alpha = 60;
                    }
                    }
                    // etc.

                    Look carefully at the object references, and you'll see that the
                    onRollOver event handler occurs for play_mc, but controls the onEnterFrame
                    event handler for orb_mc. In turn, orb_mc updates its own filters property
                    by way of the "this" reference, which is how the function for onEnterFrame
                    is scoped in AS2.

                    Note: I haven't tested the above suggestion in a practical way, so
                    you'll have to carefully review the object references. Best to reduce the
                    complexity of this experiment by rebuilding it in a new FLA and isolating
                    each small step of the way. (Start with a new play_mc that contains orb_mc
                    and choose a single filter, rather than two filters and a color transform
                    ... just until everything sinks in.

                    Does that make sense?


                    David Stiller
                    Co-author, Foundation Flash CS3 for Designers
                    http://tinyurl.com/2k29mj
                    "Luck is the residue of good design."


                    • 7. Re: movieClip Buttons
                      Boxing Boom Level 1
                      Hi David,

                      Many thanks for getting back to me, I do appreciate your time and consideration. Yes, I will recreate a new fla based on what you have requested me to do. Within the play_mc there are orb_mc, playSign_mc, and reflection_mc. I will need to carefully reference each. I will post again, probally tomorrow. Not a lazy git, just my little boy wants me downstairs for an hour to show me his new game he found on shockwave.com ;)

                      I intend on buying your book ;)

                      Kind Regards,

                      Boxing Boom
                      • 8. Re: movieClip Buttons
                        Level 7
                        Boxing Boom,

                        > Many thanks for getting back to me, I do appreciate your
                        > time and consideration.

                        Sure thing. It's always rewarding to share in the moment when it all
                        thunders into place. :)

                        > Yes, I will recreate a new fla based on what you have
                        > requested me to do.

                        I think that's your best bed. What you're after is certainly possible
                        ... you just have to understand how to connect the various part.

                        > Not a lazy git, just my little boy wants me downstairs for an
                        > hour to show me his new game he found on shockwave.com ;)

                        Haha! Terrific. Time with family is the more important endeavor
                        anyway.

                        > I intend on buying your book ;)

                        That would be great! Just keep in mind, the examples in "Foundation
                        Flash CS3 for Designers" (friends of ED) are ActionScript 3.0 only.
                        Although I'm comfortable with AS3, most of my clients are still paying for
                        AS2 solutions, so it's good to get a firm handle on both versions of the
                        language.

                        I'm happy to keep following up with you on this particular issue, but as
                        a general heads-up, I'll be out of town from Monday through Nov 6 and may
                        not have reliable Internet access.


                        David Stiller
                        Co-author, Foundation Flash CS3 for Designers
                        http://tinyurl.com/2k29mj
                        "Luck is the residue of good design."


                        • 9. movieClip Buttons
                          Boxing Boom Level 1
                          Hi David,

                          Sorry about the delay; Saturday is a busy time for me as my eldest son comes to visit us from Uni, I spend some time with him until he goes out skating with his mates. Next, shopping and then my three little girls want to go out, today its swimming. On top of this my 3 yr. old Harry feels left out, so I need to spend time with him, park or football usually; today he stayed with the laptop. Then collect the girls from swimming, pick up the fish and chips and eat.

                          Having six kids is great, just gets a little busy at times. I will provide my code etc... tomorrow (Sunday, ahh more relaxing day of the week) ;)

                          Kind Regards,

                          Boxing Booom
                          • 10. Re: movieClip Buttons
                            Boxing Boom Level 1
                            Hi David,

                            Eventually I got my head around it. Like most things in life, once you've grabbed the concept ;)

                            Thanks for your time and consideration, hope to chat in the future, oh trust me, I always find something.

                            The working code is attached. Done quite well?

                            Kind Regards,

                            Boxing Boom
                            • 11. movieClip Buttons
                              Boxing Boom Level 1
                              oops!
                              • 12. Re: movieClip Buttons
                                Level 7
                                Boxing Boom,

                                > Eventually I got my head around it. Like most things in life,
                                > once you've grabbed the concept ;)

                                There you go! Keep that chin up. :)

                                > The working code is attached. Done quite well?

                                Yes, looks pretty good. The principle point was to assign the event
                                handlers to the outer movie clip, which you've done. Event handling --
                                particularly, scope -- is significantly different between AS2 and AS3, so as
                                soon as you get your head around both (like you said), you'll be in good
                                shape. I do see a slight adjustment I'd make:

                                play_mc.onRollOut = function():Void {
                                this.orb_mc.onEnterFrame = function():Void {

                                In these two lines, for example, the following is at play: first, a
                                function is assigned to the MovieClip.onRollOut event of a particular
                                MovieClip instance, play_mc. Second, the instructions of this function are
                                declared. The first thing this function does is to assign another function
                                to the orb_mc MovieClip instance. This instance resides inside play_mc.
                                Here's the important part: because these instructions are written inside a
                                function associated with play_mc, the "this" property, *in this context*,
                                refers to play_mc. That's why the reference play_mc.orb_mc can be indicated
                                by the expression this.orb_mc.

                                The MovieClip.onEnterFrame event handler is scoped differently. Inside
                                this second function, the "this" property refers to orb_mc, because its
                                function is associated with orb_mc. So ... when it finally comes to this
                                line:

                                delete this.orb_mc.onEnterFrame;

                                ... I would reference that like this:

                                delete this.onEnterFrame;

                                ... because, again, the term "this" -- in this context -- actually refers to
                                mc_orb. Make sense? This scoping is different in AS3, but for the time
                                being, keep in mind that the reference of "this" changes from function to
                                function.

                                I would also make sure to provide a way for the onEnterFrame event
                                handler to be stopped in every case, just like it does in the above example.
                                There's really no reason to let onEnterFrame functions continue unchecked.
                                At the default framerate (12fps), you're executing that function twelve
                                times a second, even after the function has performed its duties! That asks
                                the processor to perform unnecessary calculations, and enough of that sort
                                of thing can slow down Flash content. In the onRollOut event handler, the
                                onEnterFrame function stops after it has completed its goal (once gf.blurX
                                is less than 4), so provide a similar "out" for the other event handlers.

                                Bear in mind, too, that each of these play_mc event handlers re-assigns
                                the function of orb_mc's onEnterFrame handler. It's possible that rapid
                                movements of the mouse might eventually put the blurring (or other effects)
                                a bit out of sync.


                                David Stiller
                                Co-author, Foundation Flash CS3 for Designers
                                http://tinyurl.com/2k29mj
                                "Luck is the residue of good design."


                                • 13. movieClip Buttons
                                  Boxing Boom Level 1
                                  Hi David,

                                  First, many thanks for helping me out here; but most of all I must compliment the clarity within your instructions. I know how hard "Simple" can be, I am an I.T. Trainer who has recently turned Instructional Designer. Your future for sure, is Authoring - you never know when our paths may cross again. ;)

                                  Good luck, and take care.

                                  P.S. For God Sake man, get yourself a better bike. Folk use two wheels these days. ;)

                                  Kind Regards,

                                  Boxing Boom
                                  • 14. Re: movieClip Buttons
                                    Level 7
                                    Boxing Boom,

                                    > First, many thanks for helping me out here;

                                    Glad to do it. :)

                                    > but most of all I must compliment the clarity within your
                                    > instructions.

                                    Thanks, BB! I look at it a bit like I do programming: communication is
                                    the goal, whether the recipient is a human being or a computer. My interest
                                    in effective communication leads me to admire great orators, actors, poets,
                                    musicians, programmers ... the list goes on. Thanks for the encouraging
                                    words. :)

                                    > P.S. For God Sake man, get yourself a better bike. Folk
                                    > use two wheels these days. ;)

                                    Haha! I started unicycling partly because my increasingly flat feet
                                    made running painful and partly because I wanted a new physical challenge.
                                    I have to admit, though, the amused reactions are also pretty fun.


                                    David Stiller
                                    Contributor, How to Cheat in Flash CS3
                                    http://tinyurl.com/2cp6na
                                    "Luck is the residue of good design."


                                    • 15. Re: movieClip Buttons
                                      Boxing Boom Level 1
                                      Hi,

                                      Got problem; the filters seem to leak, if button is placed on another mc i.e. plastic_mc (on their own layers), the plastic_mc takes on the filter properties of the button ;(. Why does this act like that, and how can I get round it?

                                      Kind Regards,

                                      Boxing Boom
                                      • 16. Re: movieClip Buttons
                                        Boxing Boom Level 1
                                        Hi.

                                        ;)

                                        Regards,

                                        Boxing Boom