1 Reply Latest reply on May 28, 2010 8:37 AM by SolitonMan

    ***LONG*** - Scrollpane question - dynamically adding content

    SolitonMan Level 1

      Hello, I'm trying to create a dynamic dictionary with Flash AS2 and I've been pretty successful with most of what I'm trying to do.  I've created a movie that will read in an XML list of terms, definitions and optional images and/or audio.  The XML is being read successfully, the desired loading of information is occurring successfully, but the ability to see an unlimited amount of content is being hampered by the fact that I'm not able to get the scrollpane I'm using to provide "scrollability" when the number of terms exceeds the visible area.

       

      I'll attach the code I'm using in the hopes that it will be clear what's going on, but a few definitions first:

       

      "my_SP" is the scrollpane on the stage, created in the authoring environment.

       

      "Container" is the name of an empty movie clip symbol in the library that has it's properties set so it will be exported for ActionScript and can serve as the contentPath for the scrollpane.

       

      Once the contentPath has been set for the scrollpane, I begin adding movie clips to the content using the my_Container.createEmptyMovieClip() method.  The movie clips I create contain a visible text field for displaying the term, and three hidden text fields to hold the values for the definition, image file, and audio file.

       

      Everything load and displays exactly as I was hoping, but for whatever reason, the scrollpane will not give the user the ability to actually scroll when the content exceeds the area.  I added the beginFill and line drawing commands to try to force the content clip to have an actual size (turns out that the size doesn't change when you use createEmptyMovieClip and fill the thing with stuff) and while I can get the scrolling to appear if I use beginFill immediately after declaring the variable "my_Container", when I try it in the position as listed below, I see all the terms but the scrollbars don't appear.

       

       

      my_SP.contentPath = "Container";
      
      var my_Container = my_SP.content;
      
      var tf:TextFormat = new TextFormat();
      tf.font = "Verdana, Arial, sans serif";
      tf.size = 12;
      tf.bold = true;
      tf.color = 0x000000;
      
      var posHeight = 0;
      
      // set path attributes
      var strPath:String = _url;
      var intCutOff:Number = strPath.lastIndexOf("/");
      strPath = strPath.substring(0,intCutOff+1);
      
      var my_sound:Sound = new Sound();
      
      my_sound.onLoad = function(success:Boolean) {
           if (success) {
                my_sound.start();
           }
      };
      
      // Create a new XML object.
      var itemList:XML = new XML();
      
      // Set the ignoreWhite property to true (default value is false).
      itemList.ignoreWhite = true;
      
      // After loading is complete fill in the list of terms
      itemList.onLoad = function(success) {
           // load items into list
           
           if (itemList.hasChildNodes()) {
                for (var aNode:XMLNode = itemList.firstChild.firstChild; aNode != null; aNode=aNode.nextSibling) {
                     if (aNode.nodeType == 1) {
                          var curNode:XMLNode = aNode.firstChild;
                          var strList;
                          var strDefinition;
                          var strImage;
                          var strAudio;
                          var strData;
                          
                          if (curNode.nodeType == 1) {
                               strList = curNode.firstChild.nodeValue;
                               strDefinition = curNode.nextSibling.firstChild.nodeValue;
                               if (curNode.nextSibling.nextSibling.hasChildNodes()) {
                                    strImage = curNode.nextSibling.nextSibling.firstChild.nodeValue;
                               } else {
                                    strImage = "none";
                               }
                               if (curNode.nextSibling.nextSibling.nextSibling.hasChildNodes()) {
                                    strAudio = curNode.nextSibling.nextSibling.nextSibling.firstChild.nodeValue;
                               } else {
                                    strAudio = "none";
                               }
                               
                               var container:MovieClip = my_Container.createEmptyMovieClip("container_"+i, my_Container.getNextHighestDepth());
           
                               container.createTextField("label", 1, 0, 0, my_SP.width-20, 0);
                               container.label.autoSize = true;
                               container.label.wordWrap = true;
                               container.label.multiline = false;
                               container.label.border = true;
                               container.label.borderColor = 0xC0C0C0;
                               container.label.text = strList;
                               container.label.setTextFormat(tf);
                               
                               container.createTextField("definition", 2, 0, 0, 0, 0);
                               container.definition.text = strDefinition;
                               container.createTextField("image", 3, 0, 0, 0, 0);
                               container.image.text = strImage;
                               container.createTextField("audio", 4, 0, 0, 0, 0);
                               container.audio.text = strAudio;
                               
                               container.onRelease = function() {
                                    trace(this.label.text);
                                    my_sound.stop();
                                    txt_definition.move(200,55);
                                    my_ldr.move(600,40);
                                    
                                    // load definition text
                                    txt_definition.text = this.definition.text;
                                    
                                    // load image
                                    if (this.image.text != "none") {
                                         my_ldr.move(200,40);
                                         txt_definition.move(200,305);
                                         
                                         my_ldr.autoLoad = false;
                                         my_ldr.scaleContent = true;
                                         my_ldr.contentPath = strPath + this.image.text;
                                         
                                         my_ldr.load();
                                    }
                                    
                                    // load audio
                                    if (this.audio.text != "none") {
                                         my_sound.stop();
                                         my_sound.loadSound(strPath + this.audio.text);
                                    }
                               }
                               
                               container._y = posHeight;
                               xH = container._height;
                               posHeight += container._height;
                               
                          }                    
                     }
                }
                
                my_Container.beginFill(0xFFFFFF,0);
                my_Container.moveTo(150,0);
                my_Container.lineTo(150,500);
                my_Container.endFill();
                trace(my_Container._width + "," + my_Container._height);
           }
           
           
      };
      
      // Load the XML
      itemList.load(strPath + "dictionary.xml");
      
      

       

      The final trace statement in the onLoad event handler for the XML object does show that the content movieClip has a height of 590, about 200 pixels larger than the height of the scrollpane, but for whatever reason, the scrollpane will not scroll. If anyone can provide any insight into what's the problem here I'd really appreciate it.  Thanks in advance for any help you can offer.

        • 1. Re: ***LONG*** - Scrollpane question - dynamically adding content
          SolitonMan Level 1

          OK, I know a lot of people probably aren't interested in this, but since I found a solution I thought I'd mention it here.  Basically, the problem with making the scrollbar appear when needed was solved by running the loop to read the XML and create the movie clips & text fields twice.  The first time I created a dummy movie clip that I populated as shown in the previous entry's code, then used the value of the posHeight to set the draw conditions for the content of the scrollpane.  I ran my clip, then set my scrollpane's contentPath to the empty movie clip in my library.  Then I used beginFill and appropriate draw values to set the dimensions of the content clip.  This resulted in an appropriately sized scrolling area, with scrollbars.  THEN I ran the loop again, this time populating the content clip with the desired values.  The result was the functionality I desired, though the implementation was, in my opinion, brutal and inelegant.  But it works.

           

          If anyone is interested, add a note and I'll see about adding the entire code here.