18 Replies Latest reply on Feb 13, 2007 7:20 PM by Sketchsta

    Movie clip buttons

    magic_dude
      How can I make a movie clip button please help me
        • 1. Re: Movie clip buttons
          Level 7
          magic dude,

          > How can I make a movie clip button please help me

          Check out the "Button class" and "MovieClip class" entries of the
          ActionScript 2.0 Language Reference. You'll see that both classes define a
          number of similar mouse-related events. All you really have to do is assign
          functions to the events you want to handle. It's the same between buttons
          and movie clips.

          Buttons have built-in states -- Up, Over, and Down -- which can be
          mimicked by movie clips if you give the clip frame lables in its own
          timeline that read _up, _over, and _down. The Hit frame of button symbols
          can be mimicked by the MovieClip.hitArea property.

          That's a general overview. If you have specific questions, fire away.


          David Stiller
          Adobe Community Expert
          Dev blog, http://www.quip.net/blog/
          "Luck is the residue of good design."


          • 2. Re: Movie clip buttons
            magic_dude Level 1
            Where in actionscript is that
            • 3. Re: Movie clip buttons
              Level 7
              magic dude,

              > Where in actionscript is that

              Is what?


              David Stiller
              Adobe Community Expert
              Dev blog, http://www.quip.net/blog/
              "Luck is the residue of good design."


              • 4. Re: Movie clip buttons
                FordFiestaST150
                Hi David

                Mind if I bug in here?

                I have a similar requirement. You can find flash buttons with various effects when you do a search on the web.

                The question I have is ... where can I find the coding for this? Even just to create a simple button. I have tried this in flash, even after using the help function to get it done but it aint working
                • 5. Re: Movie clip buttons
                  Level 7
                  FordFiestaST150,

                  > Mind if I bug in here?

                  Hop on!

                  > I have a similar requirement. You can find flash buttons with
                  > various effects when you do a search on the web.

                  Sure.

                  > The question I have is ... where can I find the coding for this?

                  The coding for what, specifically? :) That's what I'm trying to
                  determine. I don't know what "various effects" means. In the beginning of
                  this thread, magic dude wanted to know how to make movie clip symbols usable
                  as buttons. I gave the *beginnings* of an answer because he or she wasn't
                  specific at all.

                  > Even just to create a simple button.

                  By this, I presume you mean a thing to click on, that does something
                  when you click it. If that's it, you've got basically two approaches. You
                  can use the "old fashioned" on() or onClipEvent() functions, as detailed
                  here ...

                  http://www.quip.net/blog/2006/flash/museum-pieces-on-and-onclipevent

                  ... or you can use event handlers, as described in the same brief article.

                  > I have tried this in flash, even after using the help function to
                  > get it done but it aint working

                  Chin up! See if that article gets you started. If you have specific
                  questions, fire back.


                  David Stiller
                  Adobe Community Expert
                  Dev blog, http://www.quip.net/blog/
                  "Luck is the residue of good design."


                  • 6. Re: Movie clip buttons
                    Sketchsta
                    MovieClip buttons RULE!!!

                    Once you guys get into MovieClip buttons, you will NEVER go back to using Button symbols for buttons... I GUARANTEE!!!

                    you guys are in good hands here with David NewsGroup Stiller, he's got a nack for helping people help themselves...which is the best way to learn something, and NOT forget it..

                    Learn Hard!!! =P
                    • 7. Re: Movie clip buttons
                      Level 7
                      > MovieClip buttons RULE!!!

                      They can be very useful, mainly because they have all the power of the
                      MovieClip class, which provides more functionality than the Button class.
                      :)

                      > Once you guys get into MovieClip buttons, you will
                      > NEVER go back to using Button symbols for
                      > buttons... I GUARANTEE!!!

                      Heh ... well, I do use button symbols often enough. They certainly
                      require the least amount of effort (e.g., no underscore frame labels for
                      states), especially if you're doing something special with the Hit frame.
                      So it depends on use.

                      > you guys are in good hands here with David NewsGroup
                      > Stiller, he's got a nack for helping people help themselves...

                      Ha, thanks Sketchsta!


                      David Stiller
                      Adobe Community Expert
                      Dev blog, http://www.quip.net/blog/
                      "Luck is the residue of good design."


                      • 8. Re: Movie clip buttons
                        Sketchsta Level 1
                        yeah i guess you have a point there..button symbols DO require less effort... but for that little bit extra effort you can get nicely animated transitions. :)

                        no underscore in frame labels??

                        hmm, i never noticed that...tho, i hardly ever use underscore anymore, I've gotten into the habbit ofTypingLikeThis. =P

                        and about the special things to do with the hit frame... I have no idea what that could be...probably cuz im such a noobie. =)
                        • 9. Re: Movie clip buttons
                          Level 7
                          Sketchsta,

                          > no underscore in frame labels??
                          >
                          > hmm, i never noticed that...tho, i hardly ever use underscore
                          > anymore, I've gotten into the habbit ofTypingLikeThis. =P

                          Not in your code, but in the frame labels themselves. If you create a
                          movie clip symbol and add these frame labels: _up, _over, _down (note the
                          underscores; that's the trick), Flash will automatically handle your up,
                          over, and down states, as if that symbol was a button symbol. The
                          difference with movie clips is that you can put those frame labels where you
                          like. :)

                          > and about the special things to do with the hit frame... I have
                          > no idea what that could be...probably cuz im such a noobie. =)

                          Artwork in the Hit frame isn't seen, but acts as the surface area that
                          defines where the button is "hittable"; that is, where the mouse becomes
                          active over the button. You can make the hit area bigger than the actual
                          button, for example, to make very small buttons easier to click. You can
                          position the Hit artwork waaaaay off to the side, in order to put the
                          trigger area somewhere else. You can do the same with any of the frames, of
                          course ... so, for example, Over and Down artwork could be done like tool
                          tips, with an empty Up frame and the Hit frame surrounding some text. This
                          is all possible with MovieClip buttons as well (check out the
                          MovieClip.hitArea property), but it takes ActionScript, which many aren't
                          comfortable with.


                          David Stiller
                          Adobe Community Expert
                          Dev blog, http://www.quip.net/blog/
                          "Luck is the residue of good design."


                          • 10. Re: Movie clip buttons
                            Sketchsta Level 1
                            can you give me an example of how YOU make a MovieClip button... because i think im doing it differently to what you must be doing...

                            i have mine like so:
                            layer 1 = actions
                            layer 2 = hit stage for button. shape to cover the button with alpha to 0%
                            layer 3 = button artwork + animation

                            timeline eg = frame 0 - 10 = up animation
                            frame 12-22 = over animation
                            frame 24-34 = out animation
                            hit button would only come in on frame 10.
                            frame 10 and 34 are the same.
                            frame 10 stop();
                            frame 12 label over
                            frame 24 label out
                            frame 34 stop();

                            thats how i do them... exactly how a button symbol is..

                            theres one issue with this method that i havent figured a way to solve it yet.. but it's not verry noticable.. =P

                            see if you can notice it... but you can probably see just by looking at my description.. =)
                            • 11. Re: Movie clip buttons
                              Level 7
                              Sketchsta,

                              > can you give me an example of how YOU make a
                              > MovieClip button... because i think im doing it differently
                              > to what you must be doing...

                              Aha. Yes, we're doing a different thing -- which is perfectly fine.
                              What I was describing was only the most basic possible approach; namely, to
                              take a single-frame movie clip symbol and assign a function to one of its
                              mouse-related events.

                              myMovieClip.onRelease = function():Void {
                              // do something
                              }

                              Technically, that's all it takes to make a movie clip behave like a
                              button. You click (press, roll over, release, etc.) and the object does
                              something in response.

                              To make a movie clip *look* a bit more like a button, you can introduce
                              a few more frames. If you add another two frames, you'll have a total of
                              three, which allows you to mimic a button's Up, Over, and Down states with
                              specially named keyframe labels (_up, _over, and _down).

                              Naturally, you can make it as elaborate as you want, because, hey,
                              you're dealing with a MovieClip instance -- which means you can manipulate
                              its timeline (not possible with instances of the Button class).

                              And so on.

                              > theres one issue with this method that i havent figured a
                              > way to solve it yet.. but it's not verry noticable.. =P
                              > see if you can notice it... but you can probably see just
                              > by looking at my description.. =)

                              Ehh, I didn't see it, but I didn't look especially hard. Tell me what
                              you'd like to solve, and I'll see if I can help you with it.


                              David Stiller
                              Adobe Community Expert
                              Dev blog, http://www.quip.net/blog/
                              "Luck is the residue of good design."


                              • 12. Re: Movie clip buttons
                                Sketchsta Level 1
                                hey David.

                                well the little issue is on the rollOver and rollOut animations..
                                see, the way i have it set up is all on one timeline.. the animation i mean.

                                so to use my example from before, i have the onRollOver animation from 12 - 22, and the rollOut animation is 24-34 ( which is basically copies of 22 - 12 ) to make it look like it's going in reverse.

                                but if i rollOut BEFORE the play head reaches frame 22, the playhead jumps straight to 24 and plays the rollOut..
                                ummm... try this again..

                                rollOver = white text to dark blue text.
                                rollOut = dark blue text to white text.

                                lets say the animation is now 30 frames for each rollOver rollOut.

                                if i rollOver, it plays to frame 15 ( light blue ) then rollOut, the playhead jumps straight to frame 30 ( dark blue )

                                same in reverse, if i rollOut then rollOver before the Out finishes, it will goto white then change to dark blue.

                                phhewW!!!
                                that was a mission to explain... I need more coffee!!!

                                anyway, like i said, it's a reasonably small thing... but it bugs me sometimes because I notice it in the sites i do.. =)
                                but others dont seem to notice...( I dont think )..
                                • 13. Re: Movie clip buttons
                                  Level 7
                                  Sketchsta,

                                  > well the little issue is on the rollOver and rollOut
                                  > animations.. see, the way i have it set up is all on
                                  > one timeline.. the animation i mean.

                                  Aha. Okay, I know exactly what you mean. Yeah, that's a common use if
                                  you're telling the playhead to jump around based on event handlers. What I
                                  suggest, if you want truly smooth animation, is to set a variable based on
                                  the event handlers. Let the animation continue, and when it gets to its
                                  end, let it read the variable to find out where it needs to go next. If
                                  you've rolled over, then out, then back over -- the variable will read
                                  "over" and you won't jump. If you've rolled over, out, over, out, over,
                                  then out again ... the variable will read "out" by the time the playhead
                                  hits that keyframe, and it'll gentle tip-toe toward the "out" animation.

                                  Make sense? If not, lemme know. That's probably worth a blog entry.


                                  David Stiller
                                  Adobe Community Expert
                                  Dev blog, http://www.quip.net/blog/
                                  "Luck is the residue of good design."


                                  • 14. Re: Movie clip buttons
                                    Sketchsta Level 1
                                    It kind of makes sense... but i dont see how thats gonna stop it jumping.
                                    UNLES, i only have 1 animation..from white to blue... then tell the playhead to move foreward onRollOver, and move backward onRollOut.

                                    ( that might be something for me to look into )

                                    my setup, relys on ( jumping ) the play head... which i guess is the problem..

                                    >Make sense? If not, lemme know. That's probably worth a blog entry.

                                    Your blogs are my bible, i read those things everytime i have some freetime on my hands.. =P
                                    • 15. Re: Movie clip buttons
                                      Level 7
                                      Sketchsta,

                                      > It kind of makes sense... but i dont see how thats gonna
                                      > stop it jumping. UNLES, i only have 1 animation..from
                                      > white to blue... then tell the playhead to move foreward
                                      > onRollOver, and move backward onRollOut.

                                      In this case, you're not going to tell the playhead *where* to goto and
                                      play, only to play. The decision on where it goes (what frame label) will
                                      be determined by the variable stored in that timeline. I'll do a blog entry
                                      about this soon -- just not sure how soon. :)

                                      > Your blogs are my bible, i read those things everytime i
                                      > have some freetime on my hands.. =P

                                      Thanks, Sketchsta. Glad to know they're helpful. :)


                                      David Stiller
                                      Adobe Community Expert
                                      Dev blog, http://www.quip.net/blog/
                                      "Luck is the residue of good design."


                                      • 16. Re: Movie clip buttons
                                        Sketchsta Level 1
                                        Thanx David, I'll keep an eye out for that blog entry.
                                        In the mean time, i'll have a look into that Idea of playing the timeline in reverse, i remember kglad gave me some help with playing timeline in reverse. lets see if i can work this out. =)

                                        By the way, i've read that tutorial you had about displacement maps, that was good, i learnt how they actually work, so now im trying to animate them.. I've had abit of luck so far, but the setInterval is causing me afew woes.. all in due time i suppose =)

                                        anyway, keep up the good work.
                                        • 17. Re: Movie clip buttons
                                          Level 7
                                          Sketchsta,

                                          > By the way, i've read that tutorial you had about
                                          > displacement maps, that was good, i learnt how
                                          > they actually work

                                          That's my favorite thing to hear! :) Glad you liked the first one.
                                          I'll have Part 3 done by this weekend, and that's where it starts to get
                                          really fun. Part 3 introduces curvature, which will turn the magnification
                                          effect from Part 2 into a fisheye lens.


                                          David Stiller
                                          Adobe Community Expert
                                          Dev blog, http://www.quip.net/blog/
                                          "Luck is the residue of good design."


                                          • 18. Re: Movie clip buttons
                                            Sketchsta Level 1
                                            Yeah i noticed you had a second part to it too, but i didnt get that far. I wanna see how far i can get with what i learnt in the first one.

                                            im working with gradients now. I LOVE IT!!! =P