9 Replies Latest reply on Oct 7, 2007 8:51 PM by PhenixDesigns

    XML & AS - Aligning Thumbnails In Grid

    PhenixDesigns
      I'm currently using Flash 8.

      So I've got a flyout menu working, and it's showing up exactly how I want it to. Mouse over the button at the bottom of the screen, and whammy - the menu slides into place all smooth-like.

      But then comes the problem. I, of course, want the flyout menu to be visible and active while the mouse is on top of it. However, when I move the mouse off of the menu, I'd like it to slide back out of view.

      I haven't been able to figure out how to accomplish that just yet.

      Here's my code thus far - maybe someone can help flesh out the rest of it.
      Thanks!


      import mx.transitions.Tween;
      import mx.transitions.easing.*;

      var startY:Number = gallery._y;
      gallery_btn.useHandCursor = false;

      gallery_btn.onRollOver = function () {
      if(gallery._alpha==0){
      new Tween(gallery,"_alpha",Regular.easeOut,0,100,12,false);
      new Tween(gallery,"_y",Regular.easeOut,startY,startY-200,12,false);
      }
      }
        • 1. Re: Hiding Flyout Menu
          clbeech Level 3
          you'll need to either use a hitTest method or a onRollOut handler for this, but either will need to associated with 'gallery' and not 'gallery_btn'.

          In the onRollOver for 'gallery_btn' kill the button so that it doesn't interfere with the operation of the 'gallery' menu by using:

          this.enabled = false;

          then set up normal event handler for the buttons on the bar, but begin a loop to check for 'leaving' the 'gallery', then when the event gets fired, re-enable the 'gallery_btn', something like this:
          • 2. Re: Hiding Flyout Menu
            PhenixDesigns Level 1
            clbeech:

            Thanks for the reply! I tried with the code you had supplied, but it didn't work out. I started playing around with it on my own, and I feel like I'm almost there.

            I get the menu to pop up as normal, and I'm able to mouse around the menu as normal. When I move the mouse off of it, it disappears. It doesn't fade and slide out the same way that it slides in, though. Also, I can't bring the menu back up at all. If I mouse over the gallery_btn element to bring the gallery element back in again, nothing happens.

            Here's the code I've got:
            • 3. Hiding Flyout Menu
              clbeech Level 3
              well you're trying to use the alpha condition as a control, and I don't really think you need to do so, once the onRollOver event fires the btn is disabled, then it will only be re-enabled again after transitioning out, so it will always be at alpha 0 by the time you re-enable the btn. Similarly it is the same with the onRollOut event, the alpha property will always be greater than 0 by the time the tween is viewable so this is not necessary.

              The reason why you can't get the btn to function twice is because it's not getting re-enabled anywhere, and this should occure AFTER the out transition completes and then only, which is the reason that I had used onMotionFinished event handlers to trigger the changes, but in order to do so you must assign a variable name to the Tween so you can point to them from the handler.

              Also you are missing a parameter in the second Tween in the onRollOut event, which is why it's just disappearing.

              If you want to use the onRollOut instead of hitTest that's fine, but I think you may run into problems with the rest of your button events on the menubar, usually the parent clip's on handler(s) will override any child clips event, and cause them not to function, so if this is a menu, you may have problems there. However, for now, to get this operating I think you should restructure the code as follows:
              • 4. Re: Hiding Flyout Menu
                PhenixDesigns Level 1
                Thanks so much!

                I had just figured it out to make the "gallery" element fade out on a RollOut. The "gallery_btn" element would work again, and it would bring the menu back up whenever I moused over it.

                I hadn't been able to get it to move back to its original position, but your code did the trick.

                Thanks again!
                • 5. Re: Hiding Flyout Menu
                  clbeech Level 3
                  you're welcome, glad you got it working :)

                  Do you know yet though if your other buttons on the bar are functioning?
                  • 6. Re: Hiding Flyout Menu
                    PhenixDesigns Level 1
                    Well, of course it won't be that easy!

                    I've got the flyout menu working.
                    I put together a nice little scroll panel of thumbnails.

                    I used this tutorial to help me along with the panel:
                    http://www.gotoandlearn.com/

                    I've got ten buttons placed together in a movie clip - the movie clip is what you scroll through in the panel.

                    I've got the full-sized images in the library.

                    However, I can't figure out how to get the buttons to bring up the image it's linked to. They're active as buttons - when you hover over them, you get the little hand and everything... test out the different states for the button to make sure that it was recognized as a button. They are, but I can't get them to do what I want.

                    If I place the same button on the stage without being a part of the movie clip of scrolling thumbnails, then it works properly. If I apply the same actionscript to the button in the movie clip, it does nothing.

                    Also, there's another issue that I'm having. I don't want to have to import all of the images and thumbnails into my library. I really want to build this with XML. I've found a couple of tutorials that touch on creating an XML gallery in Flash, but I'm having trouble getting that to work as well. Most of the tutorials I've found just throw everything at you with a pre-configured .FLA file and whatnot. I'm very big on learning it myself and building my own gallery.

                    I don't know... gah, I'm all over the place right now.
                    One step at a time, I guess, then I'll rain down more questions if I have them, heh

                    Thanks for the great help so far. It's very much appreciated!
                    • 7. Re: Hiding Flyout Menu
                      clbeech Level 3
                      Hey no sweat, you're welcome :)

                      OK this isn't too tough, there are a variety of way you could do this, and XML is only one of them. Really, to make it simple, all you need is to put the images in a directory on your server, and call the address to load the image. Unless you want to go dynamic, that is, have a folder where you just throw images in it and they come up as thumbs and load when called, (hee hee hee) a little harder but doable with a little php server-side directory reading, and dynamic MC construction.

                      I would say that for simplicity's sake, you should just make a folder with the images you want (and have thumb buttons made for), and mount it to your server. Then you should use the MovieClipLoader class to load the new images when called. You will store the file names in an array, then call the same function and MCL for each load, from the button that belongs to it by passing a variable to the function of the files index in the array. And you can put in a little preloader progress bar easily enough using the onLoadProgress MCL method and a simple Listener, and fire other events when the load in complete or instantiated on the timeline.

                      This is far easier than trying to construct an dynaimc (or non) XML doc and then load and pharse the data, which is like an extra step, unless you plan on changing the images often, or they are being changed by multiple users or administrators.

                      Just wondering what type of method you were using to bring the image to the stage, attachMovie? It not working may have something to do with the things we've discussed here, or it's likely that it's a path issue.
                      • 8. Re: Hiding Flyout Menu
                        PhenixDesigns Level 1
                        Alright, here we go again. I just tinkered with it a bit more before coming back here to post, and you've got a big 'ole message waiting for me again... haha!

                        Anyway, I figured something out. I figured a few things out, actually. I figured out how to place the images in my XML file wherever I want on the stage. Easier than it should have been, heh

                        Also, I found out that my buttons don't like to work properly when they're in that flyout menu.

                        These are just sloppy makeups right now, because I haven't gone to the trouble of prettying things up... but here's the skinny.

                        Working Gallery
                        That's a link to the working gallery. Click on the thumbnail, the larger version pops up.

                        Non-Working Gallery
                        That's a link to the non-working gallery. Only sort of non-working. If you mouse over the rectangle at the bottom, the flyout menu comes up. However, when you click on the thumbnail on the menu, nothing happens.

                        I'm going to attach the code, again, for what I have in there. This is the complete code, which is found in the non-working version. The working version only has from "myphoto = new XML" onward.

                        I'm going to go get away from my computer for a while, and maybe scrounge up something to eat. I'll look forward to another well-informed response whenever you get the chance. :-)

                        Thanks again!
                        • 9. Re: Hiding Flyout Menu
                          PhenixDesigns Level 1
                          I got it to work! I'll attach the new code, fresh off the presses.

                          Now the only issue is trying to figure out how to layout my thumbnails in a grid-pattern. They're each 64px wide, and I want only 9 to display on each line. I've been searching high and low for a tutorial, for forum posts (here and elsewhere), and at XML resource sites... I haven't been able to find anything that actually tells me how to do this - only things that are part of a downloaded tutorial package with so much extra stuff going on in the code that I don't even know where to begin.

                          Thanks so much for the help thus far - it's definitely been a process, but I like doing it this way and learning exactly what I need to do rather than downloading a tutorial or buying a gallery to use.

                          It's so much more rewarding! .... even if I do feel like a big nerd for just pumping my fists in the air and happily shouting once I got the menu working properly.