35 Replies Latest reply on Apr 27, 2006 11:38 AM by Newsgroup_User

    Draggable buttons

    iConvict
      Hello,

      currently I'm working on a draggable movieclip and in it I have a button that is supposed to open a new window. The movieclip is tweended and follows a path (circles). The button moves along with the movieclip because it is contained in a graphic.

      The button is part of the graphic that is in the movieclip so basicly this is the way it is build up:

      movieclip (draggable) / graphic / button (should be clickable but it doesn't work)

      So far I got this script (which works on the movieclip) but as you can understand I want the last part to work only on the button.

      quote:

      on(press) {
      startDrag(this);
      }

      on(release) {
      stopDrag();
      }

      on (release) {
      getURL ("javascript: openNewWindow('pop.html','myWin','width=500,height=300,toolbar=no')");
      }



      I'm using Flash MX 2004.

      Thanks for your help.
        • 1. Re: Draggable buttons
          TiJayOldroyd Level 1
          At looks like they are all targetting the same thing. Try this code:
          • 2. Re: Draggable buttons
            Level 7
            iConvict,

            > movieclip (draggable) / graphic / button (should be clickable
            > but it doesn't work)

            Draggable buttons are something of a problem. You have a button inside
            a movie clip, and the movie clip has dragging capabilities. That means the
            movie clip is already "listening" for mouse events, and since the movie clip
            is your outermost object, it obscures objects inside it that also listen for
            mouse events. Make sense?

            > So far I got this script (which works on the movieclip) but as
            > you can understand I want the last part to work only on the
            > button.
            >
            > on(press) {
            > startDrag(this);
            > }

            Okay, so this part (above) is on your movie clip.

            > on (release) {
            > getURL ("javascript:
            > openNewWindow('pop.html','myWin','width=500,height=300,toolbar=no')");
            > }

            And this part (above) is also on your movie clip. Which means you
            you're not handling the button's events at all. Just about everything in
            ActionScript is an object, and objects are defined by their namesake
            classes. You can look up the Button class, for example, and find out all
            the properties, methods, and events of a button symbol. Same for the
            MovieClip class, TextField class, and so on. Properties are characteristics
            the object has, methods are things the object can do, and events are things
            the object can react to.

            But even if you properly wrote instructions for the button's events
            (versus the movie clip's events), the movie clip's existing mouse event
            handlers would "obscure" those of the button.

            So one approach -- there are, perhaps, others -- is to use the
            MovieClip.hitTest() method to determine if the button is "hitting" a
            particular point, then handling that -- all from the movie clip's point of
            view. In order to use MovieClip.hitTest(), that button will have to be a
            movie clip, since the Button class does not feature a hitTest() method.

            NOTE: I'm using a different approach from the on() event handler. on()
            and onClipEvent() still work, of course, but they represent the way things
            were done back in Flash 5. Since Flash MX (aka Flash 6), it's been possible
            to assign event handlers using dot syntax. I prefer that way because it
            means I can put all my ActionScript in one place (a frame of the main
            timeline) rather than dispursed among various symbols.

            So ... that said, here's what you need in order to test my suggestion.
            Start a new FLA -- this just keeps things clean -- and draw a rectangle.
            Convert that to a movie clip. Inside that movie clip, draw a circle and
            convert that to a movie clip, too. This inner circle movie clip is going to
            be your "button". Select it and look at the Property inspector. You'll see
            where you can give this "button" an instance name. Instance names are
            different from the names you give something in the Library. These are
            unique identifiers to a given instance of your object on the Stage. For
            now, name this thing mcButton. Step out of the timeline you're in (the
            outer movie clip's timeline) in order to be able to give the outer movie
            clip an instance name, too. For now, name the outer clip mcClip.

            Now, the code.

            mcClip.onPress = function() {
            if (!this.mcButton.hitTest(_root._xmouse, _root._ymouse, true)) {
            this.startDrag();
            }
            };
            mcClip.onRelease = function() {
            this.stopDrag();
            if (this.mcButton.hitTest(_root._xmouse, _root._ymouse, true)) {
            trace("button click");
            }
            };

            So, what's going on, here? According to the MovieClip class, all movie
            clips feature a MovieClip.onPress event. We're assigning a function to this
            event and instructing the outer clip to start dragging (the
            MovieClip.startDrag() method) if the mouse position is NOT colliding with
            the inner "button" clip.

            MovieClip.hitTest() can be used two ways: a) am I colliding with
            another clip? OR b) am I colliding with a certain point? We're using the
            second way here. The exclamation point at the beginning makes this a
            negation ... a NOT question. Hold that thought. Next, the global "this"
            property refers back to whatever timeline or object we're in. Since we're
            scoped to a function that is assigned to the onPress event of mcClip, the
            word "this" refers to mcClip in this context. Therefore, this.mcButton
            refers to the mcButton instance inside of mcClip. Our path, then
            (this.mcButton), leads us to the "button" clip, which is a MovieClip
            instance. Since it is, it has the MovieClip.hitTest() method available to
            it. In the "second way" to use hitTest(), we supply three parameters: a)
            the mouse's horizontal position from the point of view of the main
            timeline -- this is the MovieClip._xmouse property -- b) the mouse's
            vertical position from the same POV, and c) a "true" value that indicates
            yes, we want to recognize the button's round shape, rather than the
            rectangle described by its bounding box.

            When the mouse -- from the POV of the main timeline -- is indeed inside
            the boundaries of the mcButton clip, hitTest() will return true. Since
            we're negating that with out exclamation point, we're actually looking for
            cases where the mouse is NOT within the boundaries of the mcButton clip.
            That's what our if() statement checks for. When the mouse is NOT within
            mcButton, start dragging. This means that clicking inside the outer
            rectangle clip will allow dragging, but only when the clicking is done
            outside the button itself.

            Next, when the user stops clicking -- the MovieClip.onRelease event --
            the clip should stop dragging, in all cases. Then, using the same logic as
            above, another if() statement checks of the mouse happens to be inside the
            boundaries of the inner clip. If it is -- because we're not negating,
            here -- then do something.

            The above code should go in a keyframe of the main timeline, where, from
            that point of view, the mcClip object (identified by its instance name) is
            "visible."

            This *can* be done using on(), so think through the principles involved
            and do it that way, if you prefer. If you use on(), you don't need an
            instance name for the outer clip, because your code is directly attached
            *to* that clip, so the indended recipient of your instructions is clear.
            But you will need an instance name for the inner clip in order to reference
            it from the outer one.


            David
            stiller (at) quip (dot) net
            Dev essays: http://www.quip.net/blog/
            "Luck is the residue of good design."


            • 3. Re: Draggable buttons
              Level 7
              TiJayOldroyd,

              > Try this code:
              >
              > this.mymc.onRelease {
              > stopDrag();
              > }
              >
              > this.my_btn.onRelease {
              > getURL ("javascript:
              > openNewWindow('pop.html','myWin','width=500,height=300,toolbar=no')");
              > }

              The thing is, the button is *inside* the movie clip, so the full path
              would have to be ...

              this.mymc.my_btn

              ... in which case the movie clip's existing mouse event handlers would
              obscure those of the inner button's.


              David
              stiller (at) quip (dot) net
              Dev essays: http://www.quip.net/blog/
              "Luck is the residue of good design."


              • 4. Draggable buttons
                iConvict Level 1
                Hi, thanks for the great suggestions. They were really helpfull into solving the problem and I had exactly the same structure in mind. Unfortunately I ran into some errors. I tried it with a new file but it didn't work. I get the following Actionscript error.

                Now I put it in an onClipEvent as suggested, no errors but it still doesn't work.
                Nor does the getURL script want to work anymore.

                I'm using Flash MX 2004 (that's Flash 7.2).
                • 5. Re: Draggable buttons
                  iConvict Level 1
                  Ok I solved it myself. I just put the script in a frame on a new layer outside of the clip, removed the onClipEvent (cuz it's not in a movieclip) and put the getURL script on the button.

                  Thanks!

                  Guess I have to repeat this for multiple objects that need to be moved?
                  • 6. Re: Draggable buttons
                    Level 7
                    iConvict,

                    > I tried it with a new file but it didn't work. I get the
                    > following Actionscript error.

                    It does work, but you have to do it right.

                    > Now I put it in an onClipEvent as suggested, no errors but it
                    > still doesn't work.

                    Let's clear this up.

                    The following error ...

                    > **Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 1:
                    > Statement must appear within on/onClipEvent handler

                    ... occurs when you try to attach code directly to a movie clip without
                    putting it inside an onClipEvent handler. There are two ways to assign
                    event handlers in Flash: there's the old way (Flash 5), which is to use
                    on() or onClipEvent(), and there's the new way (since Flash MX [aka Flash
                    6]), which is the way TiJayOldroyd suggested.

                    In the newer way, you must supply an instance name to your movie clip.
                    In your example, this instance name would be "mcClip" (without the quotes).
                    The instance name gives this particular clip a unique identifier. You
                    might, after all, pull several instances from your Library and use them on
                    the Stage ... if you do, you'll need to provide each one its own name, so
                    that ActionScript can tell each what to do.

                    In this scenario, the ActionScript goes in a *frame*, not the clip. Put
                    your code into a frame of the timeline that contains the clip. From the
                    frame's point of view, it will look out and "see" the clip named mcClip (or
                    whatever you call it) and tell it what to do.

                    mcClip.onRelease = function() {
                    getURL( // etc. );
                    }

                    That's the correct syntax. You're assigning a function to the
                    MovieClip.onRelease handler of the instance named mcClip.

                    If you're in an onClipEvent() handler, you don't need an instance name,
                    because it's obvious which clip you mean.


                    David
                    stiller (at) quip (dot) net
                    Dev essays: http://www.quip.net/blog/
                    "Luck is the residue of good design."


                    • 7. Draggable buttons
                      iConvict Level 1
                      Thanks for the quick reply and the great tips but as you might've read I already figured out that part of the script had to be in the frames. I'm learning a lot today, I really appreciate your patience.

                      So I guess I just have to put the getURL script (with a 'link' to the movieclip inside the movieclip) in the actionscript layer that I have made for all the scripts? Thing is, I already tried to put the script in a 'button' (that is movieclip) or as a layer inside these movieclips. Eventually I also put it in the same layer as the basic code. It simply refuses to work on every occasion.

                      What I figured out was by using onMouseDown the link does work *BUT* you can place your mousepoint everywhere in the screen, push the mousebutton and move the parent movieclip around, which looks silly because I want people to actually need to click on the object and hold it.

                      You can only use one onPress or onRelease event on each movieclip, right? If the parent movieclip has a onPress or onRelease event the children (inside the parent) that have an onPress or onRelease will automatically stop working.


                      • 8. Re: Draggable buttons
                        Level 7
                        iConvict,

                        > The only problem left is that my getURL script does not
                        > work on the button that is inside the movieclip, not even
                        > in your version.

                        My version doesn't apply event handlers to the button.

                        > I want to have an onPress or onRelease / on (release) event
                        > activating this 'button'. I think the problem is that onPress is
                        > already set for the dragging option.

                        Yes, that's right. So that would keep sub-MCs ("buttons") from "showing
                        through," as it were. That's why my suggestion uses the MovieClip.hitTest()
                        method.

                        > This is the script I used to open the new window. Is there
                        > another way to get it done without using another onPress
                        > or onRelease event?

                        MovieClip.onPress and MovieClip.onRelease are being used both for the
                        container MC's dragging and the inner MC's "clicking". I say "clicking" in
                        quotes like that because no event handling actually occurs for the inner MC
                        button. When the outer MC is pressed or released, we use
                        MovieClip.hitTest() to determine where, in the outer MC, the mouse is. If
                        it's within the bounds of the inner MC, we know we're "clicking" the button,
                        so we handle that from the outer MC's code.

                        > Or do I perhaps need to put the getURL script in the
                        > special script frame as well?
                        >
                        > on (release) {
                        > getURL ("javascript:
                        > openNewWindow('pop.html','myWin','width=500,height=300,toolbar=no')");
                        > }

                        I hope this won't frustrate you, but I really just don't use on() or
                        onClipEvent() -- not unless I have to code for Flash 5. It's simply not my
                        workflow, because it's more tedious (to me ... my opinion, of course).
                        Because of that, I don't know what you've done, actually, to follow my
                        suggestion. If you're using on(), I can't be sure how you
                        translated/interpreted what I wrote.


                        David
                        stiller (at) quip (dot) net
                        Dev essays: http://www.quip.net/blog/
                        "Luck is the residue of good design."


                        • 9. Draggable buttons
                          iConvict Level 1
                          Ok well did it this way, the names of the instances are correct:

                          This script is in the root in it's own layer called actionscripts:
                          quote:


                          mc_bio.onPress = function() {
                          if (!this.biobutton.hitTest(_root._xmouse, _root._ymouse, true)) {
                          this.startDrag();
                          }
                          };
                          mc_bio.onRelease = function() {
                          this.stopDrag();
                          if (this.biobutton.hitTest(_root._xmouse, _root._ymouse, true)) {
                          trace("button click");
                          }
                          };



                          mc_Bio being the containing movieclip and biobutton being the button.

                          Now I put the button script in another layer inside mc_bio, this layer is also called Actionscripts:
                          quote:


                          bio_butt.onRelease = function() {
                          getURL ("javascript: openNewWindow('pop.html','myWin','width=500,height=300,toolbar=no')");
                          }


                          Now I also tried putting it in the root but it didn't work as I hoped.

                          In the index.html file that is included I put the following javascript between the <head></head> tags:
                          quote:


                          <script language=JavaScript>
                          function openNewWindow(URLtoOpen, windowName, windowFeatures) {

                          newWindow=window.open(URLtoOpen, windowName, windowFeatures);

                          }
                          </script>


                          Thanks for your patience
                          • 10. Re: Draggable buttons
                            Level 7
                            iConvict,

                            > Ok well did it this way, the names of the instances are correct:
                            >
                            > This script is in the root on it's own layer called actionscripts:
                            >
                            > mc_bio.onPress = function() {
                            > if (!this.biobutton.hitTest(_root._xmouse, _root._ymouse, true)) {
                            > this.startDrag();
                            > }
                            > };

                            Does mc_bio, in fact, drag? It should, but I don't want to assume
                            anything.

                            > mc_bio.onRelease = function() {
                            > this.stopDrag();
                            > if (this.biobutton.hitTest(_root._xmouse, _root._ymouse, true)) {
                            > trace("button click");
                            > }
                            > };

                            When you release after dragging mc_bio, does it stop dragging? When you
                            release and your mouse happens to be over biobutton, do you see the phrase
                            "button click" in your Output panel?

                            > Now I put the button script in another layer inside mc_bio, this
                            > layer is also called Actionscripts:
                            >
                            > bio_butt.onRelease = function() {
                            > getURL ("javascript:
                            > openNewWindow('pop.html','myWin','width=500,height=300,toolbar=no')");
                            > }

                            The above will only work if you: A) have a button with the instance
                            name bio_butt, and B) if bio_butt is "visible" from the timeline that
                            contains the script. If this ActionScript were in the same layer as your
                            other example -- that is, in the main timeline's actionscripts layer -- then
                            you could path to bio_butt like this ...

                            mc_bio.bio_butt

                            ... if bio_butt exists inside mc_bio. This is very much like files and
                            folders on your hard drive: these objects have a hierarchical arrangement.
                            If your script is in a frame of mc_bio's timeline, then the point of view
                            has changed. That that point, you would only need to reference bio_butt,
                            since no path is necessary from mc_bio's timeline. Make sense?

                            In any case, we've already discussed that mc_bio's mouse event handlers
                            will obscure any mouse events that occur in objects *inside* mc_bio. It is
                            for this reason that our MacGuyver-rigged handling of the buttons events
                            must occur in the mc_bio's code.

                            If you see the phrase "button click" when you "click" the button as
                            described above, then you're good. That means you would replace the trace()
                            statement with what you *actually* want to happen; namely, your getURL()
                            function.

                            > Now I also tried putting it in the root but it didn't work as I hoped.

                            That's right. From the root's point of view, there would have to be an
                            object with the instance name bio_butt, otherwise what object is the
                            intended recipient?

                            > In the index.html file that is included I put the following
                            > javascript between the <head></head> tags:

                            Before we get to the HTML, lets make sure we have the ActionScript
                            working.


                            David
                            stiller (at) quip (dot) net
                            Dev essays: http://www.quip.net/blog/
                            "Luck is the residue of good design."


                            • 11. Draggable buttons
                              iConvict Level 1
                              quote:



                              Does mc_bio, in fact, drag? It should, but I don't want to assume
                              anything.




                              Yes it does

                              quote:


                              When you release after dragging mc_bio, does it stop dragging? When you
                              release and your mouse happens to be over biobutton, do you see the phrase
                              "button click" in your Output panel?



                              Yes it stops dragging, no you don't see the text 'button click' in the output window.

                              quote:


                              The above will only work if you: A) have a button with the instance
                              name bio_butt, and B) if bio_butt is "visible" from the timeline that
                              contains the script. ...



                              Yes the names are correct. This script is located in an empty frame in the root.

                              quote:


                              mc_bio.onPress = function() {
                              if (!this.bio_butt.hitTest(_root._xmouse, _root._ymouse, true)) {
                              this.startDrag();
                              }
                              };
                              mc_bio.onRelease = function() {
                              this.stopDrag();
                              if (this.bio_butt.hitTest(_root._xmouse, _root._ymouse, true)) {
                              trace("button click");
                              }
                              };

                              mc_bio.bio_butt.onRelease = function() {
                              getURL ("javascript: openNewWindow('pop.html','myWin','width=500,height=300,toolbar=no')");
                              }



                              • 12. Re: Draggable buttons
                                Level 7
                                iConvict,

                                >> Does mc_bio, in fact, drag? It should, but I don't want
                                >> to assume anything.

                                > Yes it does

                                Okay, that means the MovieClip.onPress event handler works.

                                >> When you release after dragging mc_bio, does it stop
                                >> dragging?

                                No answer to that one.

                                >> When you release and your mouse happens to be over
                                >> biobutton, do you see the phrase "button click" in your
                                >> Output panel?

                                No answer to that one, either. Without those answers, I can't tell
                                certain things I need in order to help you.

                                >> The above will only work if you: A) have a button with
                                >> the instance name bio_butt, and B) if bio_butt is "visible"
                                >> from the timeline that contains the script. ...

                                > Yes the names are correct. This script is located in an
                                > empty frame in the root.

                                From what I'm hearing, then, you must have two buttons. One with the
                                instance name bio_butt and one with the instance name biobutton. Will you
                                clarify this please?


                                David
                                stiller (at) quip (dot) net
                                Dev essays: http://www.quip.net/blog/
                                "Luck is the residue of good design."


                                • 13. Re: Draggable buttons
                                  iConvict Level 1
                                  Actually I did gave an answer to those questions but here goes again:

                                  Yes it stops dragging, no I don't see a click.

                                  This is the hierarchy atm:
                                  movieclip 1 (draggable) -> graphic (necessary for tween) -> movieclip 2 (acts as a button)

                                  Could it be that I have to change the graphic into a movieclip so it is clearer to Flash that the button is located in a graphic then edit the script slightly so the script in the root knows where it needs to look for the button?

                                  I would also like the tween to stop (no more animation) if the draggable movieclip is held.

                                  You can see a working example of the document I'm working on here.
                                  Hope this gives you a better idea.
                                  • 14. Re: Draggable buttons
                                    Level 7
                                    iConvict,

                                    > Actually I did gave an answer to those questions but here
                                    > goes again:

                                    It's possible that you're using the web version of these forums. If so,
                                    you might be editing your answers after you post them -- or, for some other
                                    reason, the web version isn't translating to the newsfeed version. In any
                                    case, I honestly don't see some parts of your replies, because I'm using a
                                    newsfeed client. What I specifically saw was an answer "yes" to my question
                                    "does the dragging start," but no answers to my other questions. Until now,
                                    of course. Bear with me, then, okay?

                                    > Yes it stops dragging, no I don't see a click.

                                    ... Good. This is helpful. So the dragging starts and stops. The fact
                                    that you don't see a click message indicates that this part of the code is
                                    currently failing (this part falls within your onRelease handler) ...

                                    if (this.biobutton.hitTest(_root._xmouse, _root._ymouse, true)) {
                                    trace("button click");
                                    }

                                    This tells me that your button doesn't have the instance name
                                    "biobutton" -- or that your button is nested inside some other object that,
                                    in turn, is nested inside mc_bio -- or that your button is still a button
                                    symbol, rather than a movie clip symbol.

                                    > This is the hierarchy atm:
                                    > movieclip 1 (draggable) -> graphic (necessary for tween) ->
                                    > movieclip 2 (acts as a button)

                                    Aha. Well, bingo. Graphic symbols don't carry with them a "sense of
                                    self" to ActionScript. There's no way to "speak to" a graphic symbol in
                                    ActionScript because graphic symbols don't have instance names. The path
                                    we're talking about in my code expects mc2 to be immediately inside mc1. So
                                    you'll either have to do without the tween or convert that graphic symbol to
                                    a movie clip, so that you can give it an instance name. I should think you
                                    can accomplish your tween inside a movie clip symbol, right?

                                    > Could it be that I have to change the graphic into a movieclip
                                    > so it is clearer to Flash that the button is located in a graphic
                                    > then edit the script slightly so the script in the root knows where
                                    > it needs to look for the button?

                                    Hey, now we're getting somewhere! This is great! You've nailed it.
                                    Here's the thing: ActionScript only knows objects that are defined by
                                    namesake classes in the ActionScript Language Reference. There is no
                                    Graphic class, but there is a MovieClip class, which means you can make an
                                    instance of MovieClip, and each of these instances (identified by their
                                    instance names) have all the functionality spelled out in the MovieClip
                                    class entry of the AS Language Reference.

                                    > I would also like the tween to stop (no more animation) if
                                    > the draggable movieclip is held.

                                    In that case, yes, make it a movie clip -- and give it an instance name.
                                    By doing so, you'll be able to invoke the MovieClip.play() and
                                    MovieClip.stop() methods on it, to control that tween.


                                    David
                                    stiller (at) quip (dot) net
                                    Dev essays: http://www.quip.net/blog/
                                    "Luck is the residue of good design."


                                    • 15. Draggable buttons
                                      iConvict Level 1
                                      Ok. This is driving me nuts. I bet I'm doing something really silly wrong but I can't figure out what it is.
                                      Care to take a look at my .fla file?

                                      Thanks
                                      • 16. Re: Draggable buttons
                                        Level 7
                                        iConvict,

                                        > Ok. This is driving me nuts. I bet I'm doing something really silly
                                        > wrong but I can't figure out what it is.

                                        You're very close, iConvict. You're missing one important thing. I
                                        don't know how to state it differently, but I'll try again.

                                        Your mc_reper mouse event handlers obscure the mouse event handlers of
                                        any nested object. That means the mc_reper.reper_tweener.btn_rep.onRelease
                                        event is never getting "heard" -- because the mc_reper.onRelease event
                                        "speaker louder" and overshadows the same event (or any mouse event) of
                                        objects inside mc_reper.

                                        If you had no mc_reper.onPress event and no mc_reper.onRelease event,
                                        your getURL() function would occur. But you *do* have mc_reper mouse
                                        events. So the fix is our hitTest() work around.

                                        Since the trace() *does* show, now (thanks to your corrections), you can
                                        side-step the above dilemma altogether. Replace the trace() function with
                                        your getURL() call. Get it? You have to handle the button click from the
                                        point of view of mc_reper, the outermost clip.

                                        In addition, you need to replace a few self-referential mc_reper
                                        references to "this".

                                        Here's your code, followed by my revision.

                                        // * YOUR CODE * (almost there!)
                                        mc_reper.onPress = function() {
                                        if (!mc_reper.reper_tweener.btn_rep.hitTest(_root._xmouse, _root._ymouse,
                                        true)) {
                                        mc_reper.startDrag();
                                        mc_reper.reper_tweener.stop();
                                        }
                                        };
                                        mc_reper.onRelease = function() {
                                        mc_reper.stopDrag();
                                        mc_reper.reper_tweener.play();
                                        if (mc_reper.reper_tweener.btn_rep.hitTest(_root._xmouse, _root._ymouse,
                                        true)) {
                                        trace("button click");
                                        }
                                        };
                                        mc_reper.reper_tweener.btn_rep.onRelease = function() {
                                        getURL("javascript:
                                        openNewWindow('pop.html','myWin','width=500,height=300,toolbar=no')");
                                        };

                                        // * CORRECTED CODE *
                                        mc_reper.onPress = function() {
                                        if (!this.reper_tweener.btn_rep.hitTest(_root._xmouse, _root._ymouse,
                                        true)) {
                                        this.startDrag();
                                        this.stop();
                                        }
                                        };
                                        mc_reper.onRelease = function() {
                                        this.stopDrag();
                                        this.play();
                                        if (this.reper_tweener.btn_rep.hitTest(_root._xmouse, _root._ymouse, true))
                                        {
                                        // trace("button click");
                                        getURL("javascript:
                                        openNewWindow('pop.html','myWin','width=500,height=300,toolbar=no')");
                                        }
                                        };


                                        David
                                        stiller (at) quip (dot) net
                                        Dev essays: http://www.quip.net/blog/
                                        "Luck is the residue of good design."


                                        • 17. Draggable buttons
                                          iConvict Level 1
                                          Yay, it finally works. It's always a smal thing that causes the problem. Thanks loads... I'll be back though
                                          Can't say I didn't learn anything in the last few days.
                                          • 18. Re: Draggable buttons
                                            Level 7
                                            iConvict,

                                            > Yay, it finally works. It's always the smallest things that
                                            > cause the biggest problems.

                                            I hear Bill Clinton had that problem.

                                            > Thanks loads... I'll be back though

                                            I'm glad to help. I hope the corrected version makes sense to you.
                                            Pathing to objects can be a difficult concept until it gels. If you have
                                            additional questions, bring 'em on.


                                            David
                                            stiller (at) quip (dot) net
                                            Dev essays: http://www.quip.net/blog/
                                            "Luck is the residue of good design."


                                            • 19. Draggable buttons
                                              iConvict Level 1
                                              Well.. here we go again. I have another question!

                                              I would like to have a rollover on btn_rep so that the text changes colour.
                                              How do I do this and can I combine it in the script that is already here? I know that using the onPress function is probably getting blocked so I need to get around it again but I'm worried about being able to use hitTest agan. Am I able to do so and how? With my basic actionscript knowledge I don't get very far unfortunately.

                                              I've got this so far to make clear what I want:

                                              mc_test.mc_tween.mc_button.onPress = function(){
                                              }

                                              This is located in the main timeline as an actionscript (all these names are just examples).
                                              Inside the mc_button there are 3 keyframes and 2 layers. One layer contains actionscript stop(); and the other layer contains different versions of the button.

                                              Thanks!
                                              • 20. Re: Draggable buttons
                                                Level 7
                                                iConvict,

                                                > Well.. here we go again. I've got another question!



                                                > I would like to have a rollover on btn_rep so that the text
                                                > changes colour. How do I do this and can I combine it in
                                                > the script that is already here?

                                                I would break down this goal into small pieces first. Open a new FLA
                                                file and experiment with color changes in an isolated environment. When
                                                things are confusing already, it only makes them worse when too much is
                                                going on at one time!

                                                Since your button is basically comprised of text (if I remember
                                                correctly), you may be able to use the TextField class or the TextFormat
                                                class to change the text's color. You'll have to make your text field
                                                dynamic so that you can give it an instance name. Once it has an instance
                                                name, it is a targetable object in ActionScript. Since all dynamic text
                                                fields are instances of the TextField class, they all feature the
                                                properties, methods, and events of the TextField class. This means you'll
                                                be able to target this text field's TextField.textColor property, for
                                                example.

                                                > I know that using the onPress function is probably getting
                                                > blocked

                                                That's right.

                                                > so I need to get around it again but I'm worried about being
                                                > able to use hitTest agan.

                                                What worries you? You already have a working example. Depending on
                                                your needs, you may simply be able to use the same MovieClip.hitTest()
                                                method in your existing if() statement. Just add another line or two of
                                                instruction. inside the if() statement.

                                                > Am I able to do so and how? With my basic actionscript
                                                > knowledge I don't get very far unfortunately.
                                                >
                                                > I've got this so far to make clear what I want:
                                                >
                                                > mc_test.mc_tween.mc_button.onPress = function(){
                                                > }

                                                It looks like you still haven't grasped the idea that your
                                                MovieClip.onPress event is getting blocked. Since mc_test already has mouse
                                                event handlers, those event handlers "block" or "obscure" the mouse event
                                                handlers of any objects inside mc_test. mc_button is inside mc_test,
                                                because it is inside mc_tween, which in turn is inside mc_test.

                                                The good news is, we already have a solution for this "obscuring"
                                                phenomenon. You already have a MovieClip.testTest() mechanism that lets you
                                                *mimic* onPress and onRelease events on your movie clip "button." You can
                                                put as many ActionScript instructions inside the if() statement that
                                                references hitTest() as you want.

                                                First, play with the TextField class and a dynamic text field in a new
                                                FLA. Build up some programming confidence with that scenarion first.
                                                In case it helps, you may want to read this article on what objects are in
                                                ActionScript and how they relate to classes.

                                                http://www.quip.net/blog/2006/flash/actionscript-20/ojects-building-blocks


                                                David
                                                stiller (at) quip (dot) net
                                                Dev essays: http://www.quip.net/blog/
                                                "Luck is the residue of good design."


                                                • 21. Draggable buttons
                                                  iConvict Level 1
                                                  Hi David,

                                                  I already have a working example (that little script I showed you) which gets the behaviour I want but I would like to implement it. I do understand that onPress can only be used once on each object because a parent object that has an onPress (or any mouse event attached to it) will kill off the, for example, onPress script that are in its children who are located underneath the parent if you imagine it being divided in 'layers', which is easy for me because I'm used to Photoshop and such applications that work with layers.

                                                  My little script was just meant as an 'example' to show what kind of behaviour I would like to have. I know that I can't use it though. Anyway basicly my question is answered, I was wondering if it would give problems if I just add another hitTest(). Just wanted to be sure so I would not waste too much energy/time on it again.

                                                  I don't think my problem is grasping how everything is layered in Flash but the problem is my disability to actually do some more 'advanced' Actionscripting. As I said earlier, my knowledge is pretty basic, I'm much more into XHTML and CSS. Although I have some books here to work with with from the O'Reilly series I don't have that much time to really dive into it (yet) unfortunately.

                                                  Thanks.
                                                  • 22. Re: Draggable buttons
                                                    Level 7
                                                    iConvict,

                                                    > My little script was just meant as an 'example' to show what
                                                    > kind of behaviour I would like to have.

                                                    Aha, okay.

                                                    > I know that I can't use it though. Anyway basicly my question is
                                                    > answered, I was wondering if it would give problem if I would
                                                    > just add another hitTest() but it doesn't.

                                                    I think you can use the useage of hitTest() you already have, but if you
                                                    can use the same mechanism in any mouse event hander you like to mimick
                                                    mouse event handlers for the inner button.

                                                    > I don't think my problem is grasping how everything is layered in
                                                    > Flash but the problem is my disability to actually do some more
                                                    > 'advanced' Actionscripting.

                                                    I can understand that.

                                                    > As I said earlier, my knowledge is pretty basic, I'm much more
                                                    > into XHTML and CSS.

                                                    Yes, that's quite a difference, since neither of those involve
                                                    programming.

                                                    > Although I have some books here to work with with from the
                                                    > O'Reilly series I don't have that much time to really dive into it
                                                    > (yet) unfortunately.

                                                    Well, keep at it. You'll succeed. In my experience, I made
                                                    significant progress when I finally understood the nature of objects, the
                                                    idea that classes define objects, and that instances of a particular class
                                                    act just like the class says they should. (The Array class defines array
                                                    objects, the MovieClip class defines movie clips, the TextField class
                                                    defines dynamic text fields, and so on.)

                                                    Not only did that help me realize how conveniently organized the
                                                    ActionScript Language Reference is, but it helped me "think" in terms of
                                                    objects and use these tools *as* tools.

                                                    The artwork in your FLA was very cool, I thought. Keep up the good
                                                    work, and don't get discouraged about ActionScript.


                                                    David
                                                    stiller (at) quip (dot) net
                                                    Dev essays: http://www.quip.net/blog/
                                                    "Luck is the residue of good design."


                                                    • 23. Re: Draggable buttons
                                                      weanderson
                                                      I like the site design -- very nice menu idea - keep up the good work
                                                      • 24. Re: Draggable buttons
                                                        iConvict Level 1
                                                        Allright, this is what I got now. It doesn't work exactly yet but I have a feeling I'm getting close because sometimes it does work, sometimes it doesn't. Only problem is that I would like to know what goes wrong or if I'm doing it wrong completely of course.

                                                        Thanks!

                                                        mc_contact.onRollOver = function() {
                                                        if (this.contact_tweener.btn_cont.hitTest(_root._xmouse, _root._ymouse,true)) {
                                                        this.contact_tweener.btn_cont.nextFrame();
                                                        }
                                                        };

                                                        mc_contact.onRollOut = function() {
                                                        if (this.contact_tweener.btn_cont.hitTest(_root._xmouse, _root._ymouse,true)) {
                                                        this.contact_tweener.btn_cont.prevFrame();
                                                        }
                                                        };

                                                        mc_contact.onPress = function() {
                                                        if (!this.contact_tweener.btn_cont.hitTest(_root._xmouse, _root._ymouse,true)) {
                                                        this.startDrag();
                                                        this.stop();
                                                        }
                                                        };
                                                        mc_contact.onRelease = function() {
                                                        this.stopDrag();
                                                        this.play();
                                                        if (this.contact_tweener.btn_cont.hitTest(_root._xmouse, _root._ymouse, true))
                                                        {
                                                        // trace("button click");
                                                        getURL("javascript penNewWindow('main.php?page=contact','window','width=515,height=507,toolbar=no,scrollbars= no')");
                                                        }
                                                        };

                                                        //next button
                                                        • 25. Re: Draggable buttons
                                                          Marghoob Suleman Level 1
                                                          you can have a common for all you buttons. this is AS 1.0 code
                                                          you can modify your code according to your requiremnts.

                                                          MovieClip.prototype.moveMe = function() {
                                                          this.onPress = function() {
                                                          this.startDrag();
                                                          }
                                                          this.onRelease = function() {
                                                          this.stopDrag()
                                                          }
                                                          }

                                                          my_mc.moveMe() // my_mc movieclip is created on stage
                                                          my_mc2.moveMe() // my_mc2 movieclip is created on stage
                                                          • 26. Re: Draggable buttons
                                                            Level 7
                                                            Marghoob,

                                                            > you can have a common for all you buttons. this is AS 1.0 code
                                                            > you can modify your code according to your requiremnts.
                                                            >
                                                            > MovieClip.prototype.moveMe = function() {
                                                            > this.onPress = function() {
                                                            > this.startDrag();
                                                            > }
                                                            > this.onRelease = function() {
                                                            > this.stopDrag()
                                                            > }
                                                            > }

                                                            While useful as a prototype in general, this isn't relevant to
                                                            iConvict's issue, which hinges on mimicking mouse events for a nested movie
                                                            clip whose parent already has mouse events being handled.


                                                            David
                                                            stiller (at) quip (dot) net
                                                            Dev essays: http://www.quip.net/blog/
                                                            "Luck is the residue of good design."


                                                            • 27. Re: Draggable buttons
                                                              Level 7
                                                              iConvict,

                                                              > sometimes it does work, sometimes it doesn't. Only problem
                                                              > is that I would like to know what goes wrong or if I'm doing
                                                              > it wrong completely of course.

                                                              > mc_contact.onRollOver = function() {
                                                              > if (this.contact_tweener.btn_cont.hitTest(_root._xmouse,
                                                              > _root._ymouse,true)) {
                                                              > this.contact_tweener.btn_cont.nextFrame();
                                                              > }
                                                              > };

                                                              So far, this looks all right. When someone rolls over mc_contact with
                                                              the mouse, the following occurs. If the mouse -- from the _root's point of
                                                              view -- is inside the confines of btn_cont, then tell btn_cont to go to its
                                                              next frame.

                                                              Now, here's something to know: MovieClip.hitTest() can be used in to
                                                              different ways. The way you're using is the correct way for this scenario.
                                                              This way accepts three parameters, which are: a) the horizontal axis of a
                                                              point, b) the vertical axis of a point, and c) a boolean value that
                                                              determines whether or not to consider the object's actual shape or its
                                                              bounding box. If your movie clip has nothing in it but text, then that
                                                              value of true means (I think) that this the hitTest() collision only occurs
                                                              when the mouse happens to be over the solid part of a letter -- but not, for
                                                              example, if the mouse happens to be inside the hollow area of the letter O.

                                                              Change that true to false and see if you get better results.


                                                              David
                                                              stiller (at) quip (dot) net
                                                              Dev essays: http://www.quip.net/blog/
                                                              "Luck is the residue of good design."


                                                              • 28. Draggable buttons
                                                                iConvict Level 1
                                                                I tried your suggestion but it doesn't give me the exact behaviour I want, sometimes it works sometimes it doesn't. I have a feeling it has to do with the moving objects.

                                                                Check http://stud.cmd.hro.nl/0553393/testing/ and move your mouse over the contact text.

                                                                I've imported all the shapes with the text from Illustrator as an .swf so I didn't use text inside Flash. I know of the problem with text that it is treated as a vector shape and not a solid from prior experiences with flash. What I did to solve this was to put a solid shape behind the text and make a movieclip combining the text and the block as one.
                                                                • 29. Re: Draggable buttons
                                                                  Level 7
                                                                  iConvict,

                                                                  > I tried your suggestion but it doesn't give me the exact
                                                                  > behaviour I want, sometimes it works sometimes it doesn't.

                                                                  I don't know if you're responding to Marghoob or to me.

                                                                  > I have a feeling it has to do with the moving objects.

                                                                  Maybe, but the tweening mc wasn't an issue.

                                                                  > Check http://stud.cmd.hro.nl/0553393/testing/ and scroll
                                                                  > over the contact text.

                                                                  I've done that, and that one responds the way the rest of them do.

                                                                  > What I did to solve this was to put a solid shape behind
                                                                  > the text and make a movieclip combining the text and the
                                                                  > block as one.

                                                                  Good idea.

                                                                  So ... is your issue solved, then, or ... or not? I can't tell.


                                                                  David
                                                                  stiller (at) quip (dot) net
                                                                  Dev essays: http://www.quip.net/blog/
                                                                  "Luck is the residue of good design."


                                                                  • 30. Re: Draggable buttons
                                                                    iConvict Level 1
                                                                    Yes and no:

                                                                    1. it sometimes works if you move your mouse over the object the colour will change but sometimes it just stays white.
                                                                    2. I doublechecked the instance names of the movieclips every keyframe, they are correct.
                                                                    3. The script is correct afaik.
                                                                    • 31. Re: Draggable buttons
                                                                      Level 7
                                                                      Send me the FLA again, if you want. I'm pretty busy today, but I'll
                                                                      try to take a look at it.


                                                                      David
                                                                      stiller (at) quip (dot) net
                                                                      Dev essays: http://www.quip.net/blog/
                                                                      "Luck is the residue of good design."


                                                                      "iConvict" <webforumsuser@macromedia.com> wrote in message
                                                                      news:e2qhe0$r2$1@forums.macromedia.com...
                                                                      > Yes and no:
                                                                      >
                                                                      > 1. it sometimes works if you move your mouse over the object the colour
                                                                      > will
                                                                      > change but sometimes it just stays white.
                                                                      > 2. I doublechecked the instance names of the movieclips every keyframe,
                                                                      > they
                                                                      > are correct.
                                                                      > 3. The script is correct afaik.
                                                                      >


                                                                      • 32. Re: Draggable buttons
                                                                        iConvict Level 1
                                                                        Ok I figured it has to do with the size of the movieclips.
                                                                        Is a movieclip only the shape of the element inside or is it actually the whole selectionblock that you see when you select it in Flash?
                                                                        • 33. Re: Draggable buttons
                                                                          Level 7
                                                                          iConvict,

                                                                          > Ok I figured it has to do with the size of the movieclips.

                                                                          What has to do with the size of movie clips?

                                                                          > Is a movieclip only the shape of the element inside or is
                                                                          > it actually the whole selectionblock that you see when
                                                                          > you select it in Flash?

                                                                          It can be either. The MovieClip.hitTest() method will look at either
                                                                          the actual shape or the bounding box. That's what that third parameter
                                                                          determines (the shapeFlag parameter, as it's called in the documentation).


                                                                          David
                                                                          stiller (at) quip (dot) net
                                                                          Dev essays: http://www.quip.net/blog/
                                                                          "Luck is the residue of good design."


                                                                          • 34. Draggable buttons
                                                                            iConvict Level 1
                                                                            With size I mean that the movieclips somehow overlap eachother even though it doesn't seem like it. If I take one movieclip, drag it away from the others in a blank spot it works fine but as soon as I put it back between all the other movieclips it doesn't.
                                                                            Even if the movieclip is on top of the other movieclip it gives problems.

                                                                            Thanks for your time and effort!

                                                                            I've send you an e-mail where you can find the .fla file.
                                                                            • 35. Re: Draggable buttons
                                                                              Level 7
                                                                              iConvict,

                                                                              >> sometimes it does work, sometimes it doesn't. Only problem
                                                                              >> is that I would like to know what goes wrong or if I'm doing
                                                                              >> it wrong completely of course.

                                                                              I figured it out. Check this out ...

                                                                              mc_contact.onRollOver = function() {
                                                                              if (this.contact_tweener.btn_cont.hitTest(_root._xmouse, _root._ymouse,
                                                                              true)) {
                                                                              this.contact_tweener.btn_cont.nextFrame();
                                                                              }
                                                                              };

                                                                              ... now, think this through ...

                                                                              Someone mouses over the big "left" shape. The MovieClip.onRollOver
                                                                              event fires for this movie clip. It only fires once, and won't fire again
                                                                              until someone mouses out, then mouses back in. That makes sense. Now, what
                                                                              are the chances that someone mouses in *and* at the same time happens to be
                                                                              positioned in a location that is also over the small text button? Very
                                                                              slim.

                                                                              Let's use the MovieClip.onMouseMove event for this.

                                                                              mc_contact.onMouseMove = function() {
                                                                              if (this.contact_tweener.btn_cont.hitTest(_root._xmouse, _root._ymouse,
                                                                              false)) {
                                                                              this.contact_tweener.btn_cont.nextFrame();
                                                                              } else {
                                                                              this.contact_tweener.btn_cont.prevFrame();
                                                                              }
                                                                              };

                                                                              This event is raised every time the mouse moves while in context of the
                                                                              movie clip in question -- not just when the mouse happens to "trip over" the
                                                                              edge of the clip, which is what happens when the onRollOver event occurs.


                                                                              David
                                                                              stiller (at) quip (dot) net
                                                                              Dev essays: http://www.quip.net/blog/
                                                                              "Luck is the residue of good design."