14 Replies Latest reply: Apr 21, 2012 7:19 PM by sinious RSS

    Rollover scrolling menu - no buttons

    prashant.savalia1

      So below is my code for a project I'm working on. I'm having some trouble though. I got the code for the scrolling menus online from another forum, but I can't figure out where that was. In any case, the current version of the code allows for the scrolling to happen when I open the page displays (enter Frame). But I can't figure out how to get the scrolling to happen only when I hover over the menu. Can anyone help? I only want each one to scroll when I hover over the menu, not when I get on the page. I tried to replace the "enterFrame" part of the code, but it didn't work right. I need this done ASAP. Thanks in advanced!

       

      import fl.transitions.Tween;

      import fl.transitions.easing.*;

       

       

      var mymovie = this;

      var mymovieW = this.width;

       

      var horizontalMode = 0;//1--horizontalMode; 0--verticalMode

      var spaceImg = 7;//space beteen images

      var fade = 0.5;

      var containerPosition_x = 2;//put the container with images to the buttom of the stage

      var containerPosition_y = 1;//put the container with images to the right of the stage

      var yoffset = 10;//offset to adjust the position of big image on y axis

      var xoffset = 10;

       

      var numItems;

      var objects;

       

      var container:MovieClip = new MovieClip();

      this.addChild(container);

      var scrolling:Boolean = true;

      var useFixedImageSize = 1;

       

      var thumbnails:Array = new Array();

       

       

      //load xml file

       

      var xmlData = "Photoimages.xml";//set xml data file

       

      var xmlObj:XMLDocument;

       

      init();//init call -> load config XML and create objects

       

      function init()

      {

          xmlObj = new XMLDocument();

          xmlObj.ignoreWhite = true;

       

          var loader:URLLoader = new URLLoader();

          var request:URLRequest = new URLRequest(xmlData);

          loader.load(request);

       

          loader.addEventListener("complete", onComplete);

          loader.addEventListener("ioError", onIOError);

      }

       

      function onIOError(event:Event):void

      {

          trace("IOERROR (maybe XML file does not exit or have an incorrect name)");

      }

       

      function onComplete(event:Event):void

      {

          var loader:URLLoader = event.target as URLLoader;

          if (loader != null)

          {

              xmlObj.parseXML(loader.data);

              xmlHandler();

          }

          else

          {

              trace("Loader is not a URLLoader!");

          }

      }

       

      function xmlHandler()

      {

          addObjects();

          startEngine();

      }

       

      function startEngine()

      {

          container.addEventListener("enterFrame",startMovie);

      }

       

      function addObjects()

      {//add objects in the scene

       

          objects = xmlObj.firstChild.childNodes;

          numItems = objects.length;

       

          for (var i=0; i<numItems; i++)

          {

              var attr = objects[i].attributes;

              //Set the images

              thumbnails[i] = attr.thumb;

              init_thb(i);

          }

      }

       

      function init_thb(i)

      {

          if (useFixedImageSize == 1)

          {

              var source1 = "AudioimgMc";//image mc linkage id from the library

          }

          else

          {

              source1 = "imgMc_01";

          }

          var sourceType1 = "library";

          var regName1 = "p" + i;//the registration name used in Flash

       

          var classDef = getDefinitionByName(source1);

          var menuItemMc = new classDef  ;

          menuItemMc.name = regName1;

          container.addChild(menuItemMc);

          var myThumbMc = container.getChildByName(regName1);

       

          myThumbMc.buttonMode = true;

          myThumbMc.useHandCursor = true;

          myThumbMc.mouseChildren = false;

       

          myThumbMc["info"] = objects[i];

       

          myThumbMc.y = (myThumbMc.height+spaceImg)*(i);

          myThumbMc.x = (bkg.width-myThumbMc.width)/containerPosition_y;

          myThumbMc.alpha = fade;

          myThumbMc.addEventListener("mouseOver",mouseRollOver);

          myThumbMc.addEventListener("mouseOut",mouseRollOut);

          myThumbMc.addEventListener("mouseDown",mousePress);

      }

       

      function mouseRollOver(e:MouseEvent)

      {

          e.target.alpha = 1;

       

      }

       

      function mouseRollOut(e:MouseEvent)

      {

          e.target.alpha = fade;

       

      }

       

      function mousePress(e:MouseEvent)

      {

          navigateToURL( new URLRequest( e.target["info"].attributes.url ), "_blank" );

       

      }

       

      function startMovie(e:Event)

      {

          this.container.y += Math.cos((-stage.mouseY/stage.stageHeight)*Math.PI)*15;

              if (this.container.y > 0)

              {

                  this.container.y = 0;

              }

              if (-this.container.y>(this.container.height-stage.stageHeight))

              {

                  this.container.y = -(this.container.height-stage.stageHeight);

              }

      }

        • 1. Re: Rollover scrolling menu - no buttons
          sinious MVP

          Looks like it's starting to scroll on page launch and you say you only want that to happen if the user rolls over the item?

           

          What's starting the scrolling is this:

           

          function xmlHandler()

          {

              addObjects();

              startEngine();

          }

           

          It adds the objects, then starts the engine which adds the enterframe listener. You might want to adjust that to:

           

          function xmlHandler()

          {

              addObjects();

              container.addEventListener(MouseEvent.MOUSE_OVER,startEngine,false,0,true);

          }

           

          Then in the startEngine() function:

           

          function startEngine(e:MouseEvent)

          {

              container.removeEventListener(MouseEvent.MOUSE_OVER,startEngine); // cleanup

              container.addEventListener("enterFrame",startMovie);

          }

          • 2. Re: Rollover scrolling menu - no buttons
            prashant.savalia1

            I tried your solution but I got the following error.

            ArgumentError: Error #1063: Argument count mismatch on Index_fla::AudiomovieClip_30/startEngine(). Expected 0, got 1.

             

            Not sure why. Here is the updated code with your solution implemented. Thank you for helping me with this.

             

            import fl.transitions.Tween;

            import fl.transitions.easing.*;

             

             

            var mymovie = this;

            var mymovieW = this.width;

             

            var spaceImg = 7;//space beteen images

            var fade = 0.5;

            var containerPosition_x = 2;//put the container with images to the buttom of the stage

            var containerPosition_y = 1;//put the container with images to the right of the stage

            var yoffset = 10;//offset to adjust the position of big image on y axis

            var xoffset = 10;

             

            var numItems;

            var objects;

             

            var container:MovieClip = new MovieClip();

            this.addChild(container);

            var scrolling:Boolean = true;

            var useFixedImageSize = 1;

             

            var thumbnails:Array = new Array();

             

             

            //load xml file

             

            var xmlData = "Audioimages.xml";//set xml data file

             

            var xmlObj:XMLDocument;

             

            init();//init call -> load config XML and create objects

             

            function init()

            {

                xmlObj = new XMLDocument();

                xmlObj.ignoreWhite = true;

             

                var loader:URLLoader = new URLLoader();

                var request:URLRequest = new URLRequest(xmlData);

                loader.load(request);

             

                loader.addEventListener("complete", onComplete);

                loader.addEventListener("ioError", onIOError);

            }

             

            function onIOError(event:Event):void

            {

                trace("IOERROR (maybe XML file does not exit or have an incorrect name)");

            }

             

            function onComplete(event:Event):void

            {

                var loader:URLLoader = event.target as URLLoader;

                if (loader != null)

                {

                    xmlObj.parseXML(loader.data);

                    xmlHandler();

                }

                else

                {

                    trace("Loader is not a URLLoader!");

                }

            }

             

            function xmlHandler()

            {

                addObjects();

                container.addEventListener(MouseEvent.MOUSE_OVER,startEngine,false,0, true);

            }

             

            function startEngine()

            {

                container.removeEventListener(MouseEvent.MOUSE_OVER,startEngine);// cleanup;

                container.addEventListener("enterFrame",startMovie);

            }

             

            function addObjects()

            {//add objects in the scene

             

                objects = xmlObj.firstChild.childNodes;

                numItems = objects.length;

             

                for (var i=0; i<numItems; i++)

                {

                    var attr = objects[i].attributes;

                    //Set the images

                    thumbnails[i] = attr.thumb;

                    init_thb(i);

                }

            }

             

            function init_thb(i)

            {

                if (useFixedImageSize == 1)

                {

                    var source1 = "PhotoimgMc";//image mc linkage id from the library

                }

                else

                {

                    source1 = "imgMc_01";

                }

                var sourceType1 = "library";

                var regName1 = "p" + i;//the registration name used in Flash

             

                var classDef = getDefinitionByName(source1);

                var menuItemMc = new classDef  ;

                menuItemMc.name = regName1;

                container.addChild(menuItemMc);

                var myThumbMc = container.getChildByName(regName1);

             

                myThumbMc.buttonMode = true;

                myThumbMc.useHandCursor = true;

                myThumbMc.mouseChildren = false;

                myThumbMc["info"] = objects[i];

             

                myThumbMc.y = (myThumbMc.height+spaceImg)*(i);

                myThumbMc.x = (bkg.width-myThumbMc.width)/containerPosition_y;

                myThumbMc.alpha = fade;

                myThumbMc.addEventListener("mouseOver",mouseRollOver);

                myThumbMc.addEventListener("mouseOut",mouseRollOut);

                myThumbMc.addEventListener("mouseDown",mousePress);

            }

             

            function mouseRollOver(e:MouseEvent)

            {

                e.target.alpha = 1;

            }

             

            function mouseRollOut(e:MouseEvent)

            {

                e.target.alpha = fade;

            }

             

            function mousePress(e:MouseEvent)

            {

                //enter video code here

            }

             

            function startMovie(e:Event)

            {

                this.container.y += Math.cos((-stage.mouseY/stage.stageHeight)*Math.PI)*15;

                if (this.container.y > 0)

                {

                    this.container.y = 0;

                }

                if (-this.container.y>(this.container.height-stage.stageHeight))

                {

                    this.container.y = -(this.container.height-stage.stageHeight);

                }

            }

            • 3. Re: Rollover scrolling menu - no buttons
              prashant.savalia1

              Nevermind. I figured it out. When I customized it to my code, it was asking for an event when it hit the startMovie code. I didn't realize the container.addEventListener was sending one but the function definition didn't call for one. It works now. I just added a generic evt:Event to the definition and now it works great. Thanks everyone. You guys helped a lot in figuring this out.

              • 5. Re: Rollover scrolling menu - no buttons
                prashant.savalia1

                ok, so new problem, same code. I am using this code to create multiple scrolling menus, but have hit a snag. I have three menus, Photo, Animation, and Audio. When I hover over the Animations menu, it works great, except it cuts off the last image when it scrolls. The second issue is that when I hover from Animations to Audio, Animations continues to move. Is there a way to make it stop when I go between menues? I've changed the part that reads:

                 

                  if (useFixedImageSize == 1)

                    {

                        var source1 = "PhotoimgMc";//image mc linkage id from the library

                    }

                 

                to read

                 

                  if (useFixedImageSize == 1)

                    {

                        var source1 = "AnimationimgMc";//image mc linkage id from the library

                    }

                 

                and

                 

                  if (useFixedImageSize == 1)

                    {

                        var source1 = "AudioimgMc";//image mc linkage id from the library

                    }

                 

                for the parts that they relate to. So the code for the Audio menu would read AudionimgMC and there is an object in the library with that class name. I'm sure I'm missing something but I'm not 100% what that is. I've been over the code as best as I can understand it but it's still throwing me off. The first menu I hover on still moves when I'm not on it. Is there an exit frame or something I can use to make it stop when I am not on the menu anymore? I think it has to do with enterframe code from my previous post, but I'm not sure about that. Any ideas?

                • 6. Re: Rollover scrolling menu - no buttons
                  sinious MVP

                  Sorry my time is short but beifly scanning, you cannot create a new "var source1" like you are trying. The linkage ID becomes a full "class".

                   

                  Thus your instantiation should look like:

                  var source1:MovieClip = new PhotoimgMc();

                   

                  or

                   

                  var source1:MovieClip = new AnimationimgMc();

                   

                  or

                   

                  var source1:MovieClip = new AudioimgMc();

                   

                  If the "type" of the symbol differs (like to Sprite, etc) then change MovieClip to be whatever type it is.

                  • 7. Re: Rollover scrolling menu - no buttons
                    prashant.savalia1

                    Sinious,

                     

                    Thank you for the quick reply. I tried your suggestion but it gave me the following error:

                     

                    Symbol 'AnimationmovieClip', Layer 'Layer 1', Frame 1, Line 1211067: Implicit coercion of a value of type String to an unrelated type flash.display:MovieClip.
                    Symbol 'AnimationmovieClip', Layer 'Layer 1', Frame 1, Line 126

                    1067: Implicit coercion of a value of type flash.display:MovieClip to an unrelated type String.

                     

                     

                    I don't know what it means. I have objects in the library with a linkage named AnimationimgMc. It works if I leave it like it is. It just doesn't stop menus from moving when I go to another menu on the same page. Any ideas?

                    • 8. Re: Rollover scrolling menu - no buttons
                      sinious MVP

                      Can you paste the relevant code on the frames that are erroring?

                       

                      And if you don't want MovieClips (which play by default) to play, then add an actionscript layer to them and add the stop() command in a frame script so they don't auto-play. You'll need to play() them once you're ready though.

                      • 9. Re: Rollover scrolling menu - no buttons
                        prashant.savalia1

                        I've uploaded the file to my FTP site. Please download it and let me know if you can help me out. I couldn't think of explaining it any easier to be honest. I'm new to AS3 and my explanations are horrible. Please let me know if you can help me out. Thank you.

                         

                        http://www.anim8rs-ink.com/Index.fla.zip

                         

                        Please let me know if this helps any. It's frame 3 on the main timeline.

                        • 10. Re: Rollover scrolling menu - no buttons
                          sinious MVP

                          There's a missing XML on that page that apparently has image names in them. All I'm getting is your IOError from your XML error handler.

                          • 11. Re: Rollover scrolling menu - no buttons
                            prashant.savalia1

                            My apologies. I forgot to include the XML and thumbnail files with it. I just uploaded them again. Same link. Please try again. Again, really sorry. I was in a little bit of a rush. Thank you again for the help sinious.

                            • 12. Re: Rollover scrolling menu - no buttons
                              sinious MVP

                              At a quick glance it seems you're setting listeners over and over and over. Oddly in the 2 sliding image areas on left and right in services you remove an event listener so you know you can do that. But on the main frames you keep assigning the buttons (like Home, etc) over and over. This will result in adding a ton of listeners stacked up.

                               

                              I added the listeners once on the second frame and removed the assignment from then on. I also moved some of the redundant import statements to frame 1. As long as you import anything on frame1 in a timeline, the rest of the timeline can use it.

                               

                              The only errors I could see was due to you adding an onEnterFrame listener to those vertical sliding images but you never removed it. Once you go off the frame they kept firing off causing a spray of errors. I just adjusted it so on MOUSE_OUT it would remove the onEnterFrame and I don't get the errors anymore. I added a stopEngine() function that you can look at. I duplicated that for both of the sliders code.

                               

                              This is just the index saved down to CS4, I don't know what version you use:

                              http://www.filehorde.com/o/Index_Fix_CS4.zip

                               

                              Consider centralizing the code to external AS files and then importing those. It's a huge PITA to go into someones project who has code sprinkled all over frames hidden in clips. Some of your code is 100% identical in separate clips so if you change anything (like I did) I had to change the frame scripts in both areas.. You're making it hard on yourself.

                              • 13. Re: Rollover scrolling menu - no buttons
                                prashant.savalia1

                                Sinious,

                                 

                                You are awesome. I'm actually still picking up AS3 as I go. I don't have any formal training with it. Also the code you saw I got from the internet to begin with. I was able to decipher a good amount of it, but there are things in there that I am not familar with. I really appreciate your help in this. I noticed that the scrolling isn't as smooth though. I can only assume that is from the MOUSE_OUT adjustment you spoke of. I am using CS5 by the way. I was wondering if there was a way for me to keep the smooth scrolling and use your implementation. I like the fix. It does make sense. One final question, if you don't mind. The "mousePress" function. I didn't write it. It was already in the code. The XML files have a URL attribute and I wanted to make that work for each press. Is there a way to get the URL attribute from the XML within flash? For example, as you have seen, when you are on the first image or either slider, and you click on it, can it play the video that is coded in the URL attribute of the XML file? Please let me know if that make sense. I tried a few ideas but they all result in either errors or nothing showing up. Thanks again.

                                • 14. Re: Rollover scrolling menu - no buttons
                                  sinious MVP

                                  All that you dream of and more can be accomplished. Just not off agency time. Play with it and any methods used that you're unfamiliar with please read up on. Cya Monday