16 Replies Latest reply on Aug 15, 2007 10:26 PM by lichtjiang

    non-rectangular click area?

    lichtjiang Level 1
      I have a map that contains several areas, which have irregular shapes, i.e., they all have non-rectangular contours. Each such area is a movie clip, made from a transparent gif. Any part outside of this area (non-rectangular contour) is transparent.

      I have onRollOver and onRollOut event handler to process when a mouse moves in or out of an area. But it seems that a "in" only happens when mouse actually moves into the rectangle that enclose an area and "out" only happens when mouse actually moves out that rectangle.

      So, how to make these events handle this non-rectangular shapes? Thanks!
        • 1. Re: non-rectangular click area?
          Juankpro Level 2
          You cannot do this via GIF files. Only vector images can recognize this transparent areas, but GIF, PNG or JPG files are always recognized as a rectangular full object.
          • 2. Re: non-rectangular click area?
            SymTsb Level 2
            Have you tried loading your gif, jpg or whatever into a bitmap data object?
            • 3. Re: non-rectangular click area?
              Juankpro Level 2
              It will have the same result. The BitmapData is also considered rectangular area. The only way to do this is by using hitTest of the BitmapData class to detect collition. But obiouslly if what you want is to use simple button behavior, it will not work.
              • 4. non-rectangular click area?
                lichtjiang Level 1
                Thanks to both!

                So, how to make rollover and rollout respond to non-rectangular area? To achieve that, I guess I cannot make these movie clips from gif. then what should I do, make these areas buttons?

                what I want is to tell which area a mouse is pointing at. so, a rectangular area is not acceptable.
                • 5. Re: non-rectangular click area?
                  Level 7
                  lichtjiang,

                  > So, how to make rollover and rollout respond to non-rectangular
                  > area? To achieve that, I guess I cannot make these movie clips
                  > from gif. then what should I do, make these areas buttons?

                  If they're button symbols, put a vector shape into the Hit frame of each
                  that corresponds to the clickable area to which you'd like the button to
                  respond. If they're movie clip symbols, use the MovieClip.hitArea property
                  to refer to a separate movie clip with vector art shaped like the clickable
                  area to which you'd like the movie clip to respond.


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


                  • 6. Re: non-rectangular click area?
                    Juankpro Level 2
                    Another thng you can do is draw the shape you want as a vector in the Hit frame of the button. If you are using a movie clip, you can convert the area to a movie clip and use the hitArea to change the sensible area.
                    • 7. non-rectangular click area?
                      lichtjiang Level 1
                      quote:

                      Originally posted by: juankpro
                      Another thng you can do is draw the shape you want as a vector in the Hit frame of the button.


                      This means I have to make theses areas as Buttons instead of movieclips. Right? I guess this will work coz I previously used a irregularly shaped button (which is made from a transparent GIF) to show dynamically according to mouse event.

                      quote:

                      If you are using a movie clip, you can convert the area to a movie clip and use the hitArea to change the sensible area.

                      Could you please let me know how to do this? I don't follow this. Now, all theses areas are movie clips (made from GIF) that are put on stage at design time.

                      So, can I say that a movie clip can only have a rectangular hit area or simply it can only have a rectangular shape.

                      Thanks!

                      • 8. Re: non-rectangular click area?
                        Juankpro Level 2
                        This is an example of detecting hit using the alpha information of a picture. For this example to work, import your GIF image to your flash movie, give this image a linkage identifier of alphaBitmap and place the following ActionScript 2.0 code on the first frame:

                        • 9. Re: non-rectangular click area?
                          Juankpro Level 2
                          The previous example supposed all bitmaps are imported into the library. But suppose you are loading them dinamically on a MovieClip calles button. After loading completes you can use this code:

                          • 10. Re: non-rectangular click area?
                            Juankpro Level 2
                            If you already have this objects on the stage you don't need to load them, just rename one of them button and copy the previous code.
                            • 11. Re: non-rectangular click area?
                              lichtjiang Level 1
                              quote:

                              Originally posted by: Newsgroup User
                              If they're button symbols, put a vector shape into the Hit frame of each that corresponds to the clickable area to which you'd like the button to respond.


                              That's what I did a while ago with a button symbols that is shaped as an area in a map. It is clear in UP, OVER, DOWN and has a movie clip that has the same shape as the area. It responses to RollOver and RollOut nicely for just that non-rectangular area. But downside is when you hit over it, that movie clip will be shown, which is annoying.

                              quote:

                              If they're movie clip symbols, use the MovieClip.hitArea property to refer to a separate movie clip with vector art shaped like the clickable area to which you'd like the movie clip to respond.

                              Isn't "MovieClip.hitArea" a property of a Button movie cilp? Can it be used for a non-button movie clip as well?

                              Thanks. I will do some test on this later ...

                              • 12. Re: non-rectangular click area?
                                lichtjiang Level 1
                                quote:

                                Originally posted by: juankpro
                                If you already have this objects on the stage you don't need to load them, just rename one of them button and copy the previous code.


                                Thanks a lot for so much help! I will try this later ...

                                • 13. Re: non-rectangular click area?
                                  Level 7
                                  lichtjiang,

                                  > It is clear in UP, OVER, DOWN and has a movie clip
                                  > that has the same shape as the area. It responses to
                                  > RollOver and RollOut nicely for just that non-rectangular
                                  > area.

                                  I'm afraid I don't really see clearly what you're describing.

                                  > But downside is when you hit over it, that movie clip
                                  > will be shown, which is annoying.

                                  If you're making an what's usually called an "invisible button," then
                                  all you need is artwork in the Hit frame only. If you only have shapes (or
                                  whatever) in the Hit frame, then the button symbol will be invisible at
                                  runtime, and will show as a teal preview in the authoring environment.

                                  > Isn't "MovieClip.hitArea" a property of a Button movie cilp?
                                  > Can it be used for a non-button movie clip as well?

                                  The MovieCip.hitArea property is a property of the MovieClip class,
                                  which defines the functionality for all movie clips. The Button class does
                                  not feature such a property, so if you want to use it, you'll have to use
                                  movie clip symbols.


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


                                  • 14. non-rectangular click area?
                                    lichtjiang Level 1
                                    quote:

                                    Originally posted by: Newsgroup User
                                    If you're making an what's usually called an "invisible button," then all you need is artwork in the Hit frame only. If you only have shapes (or whatever) in the Hit frame, then the button symbol will be invisible at runtime, and will show as a teal preview in the authoring environment.

                                    The MovieCip.hitArea property is a property of the MovieClip class, which defines the functionality for all movie clips. The Button class does not feature such a property, so if you want to use it, you'll have to use
                                    movie clip symbols.

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



                                    Thanks! Words convey knowledge.

                                    After reading your reply twice, in fact, from thinking too hard to make the whole thing work based on those GIF-derived movie clips, I just realized that I should've created the clips directly from vector images.

                                    Now, for each area's gif bitmap, I converted it into vector first and then converted it into a movie clip symbol. In this way, no special codes need to be used and it is more straightforward.

                                    So, I guess one big wrong assumption I've made until now is that converting a GIF directly into a movie clip should automatically include a step to make the bitmap vector image.

                                    Thanks all for your help!
                                    • 15. Re: non-rectangular click area?
                                      Level 7
                                      lichtjiang,

                                      > After reading your reply twice, in fact, from thinking too hard
                                      > to make the whole thing work based on those GIF-derived
                                      > movie clips, I just realized that I should've created the clips
                                      > directly from vector images.

                                      GIF could work to, as long as your hit area was defined by vector only
                                      (no bitmaps) in the Hit frame for a button symbol or associated with the
                                      hitArea property of a movie clip symbol.

                                      > Now, for each area's gif bitmap, I converted it into vector
                                      > first and then converted it into a movie clip symbol. In this way,
                                      > no special codes need to be used and it is more straightforward.

                                      Perseverance pays off! :) Glad you figured it out lichtjiang.


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


                                      • 16. Re: non-rectangular click area?
                                        lichtjiang Level 1
                                        quote:

                                        Originally posted by: Newsgroup User
                                        GIF could work to, as long as your hit area was defined by vector only (no bitmaps) in the Hit frame for a button symbol or associated with the hitArea property of a movie clip symbol.


                                        Yeah, I remembered I did make a irregular button 2 months ago (it only has a non-rectangular movie clip *** hit frame). But I forgot that was made from a vector graphic :(

                                        quote:

                                        Perseverance pays off! :) Glad you figured it out lichtjiang.


                                        I should've bought a flash bible. This try and test really cost much headache, like walk in a maze.

                                        Thanks to all!