6 Replies Latest reply on Aug 8, 2008 6:27 PM by Shandy Elliott

    This should be simple, but....


      I've written some actionscript code that basically displays a series of images across a background in movie strip fashion. You can scroll through the images left to right or right to left and the images wrap when you get to the end. Each image is also clickable to a given url, and has a caption under it. I load in all the images with the actionscript, and the image locations, links, and captions are read in from an xml file. This all works great and an example can be seen here: http://www.summitwebpages.com/flash/test_image.html.

      Here's my problem: I would like to be able to have the images begin to disappear about 20-30 pixels from the left and right ends of the background, so I can put the scroll buttons in the middle of the left and right ends of the background, rather than below the background as they are now. This would be easy if I was just places the objects on the stage myself and doing a motion tween of the images. I just put a mask at the end of the stage, and have the images scroll behind the mask. But, I have tried for days to get something to work with the actionscript that loads everything from the xml file, with no luck. I have tried adding a 30px wide mask on the ends of the background - both by placing it on the stage, and by loading it in, but either it does not appear, or it appears but the background goes invisible. I know I'm missing something. Any suggestions would be greatly appreciated. Thanks!
        • 1. Re: This should be simple, but....
          robdillon Most Valuable Participant
          You don't need to use a mask. Just create the artwork that you want to use and place it in a layer above the image strip. You can create a simple shape and then fill it with a gradient that goes from 100% alpha to 0% alpha, then remove the outline, for instance.
          • 2. Re: This should be simple, but....
            Shandy Elliott Level 1
            I took a screen shot of your image, placed it into Photoshop, created a "mask" gradient area like you wanted, and exported those 2 files into Flash. I think this is what you were asking for. Also, I think you should increase the hit area for your arrows. I noticed I could have my mouse actually on the arrow, and it wasn't "hot" until my mouse was almost dead center in the little arrow.

            Photoshop File
            Flash File
            • 3. Re: This should be simple, but....
              BobMelnyk Level 1

              Thanks for your replies. I think you are both saying pretty much the same thing, and I think that is basically what I have tried, but can not get it to work. The problems seems to be that even if I place an image at the end like you suggest, when the actionscript loads in everything, it gets loaded on top of the image, so it's as if it was not there.
              I'm probably not explaining myself well enough. Here is the actionscript that sets everything up:

              var picnums;
              var my_format:TextFormat = new TextFormat();
              my_format.font = "Arial";
              var backurl;
              backg=this.createClassObject(mx.controls.Loader, myBack, 0);
              backg.scaleContent = false;
              var images:Array = new Array();
              var captions:Array = new Array();
              var links:Array = new Array();
              var urlXML:XML = new XML();
              urlXML.ignoreWhite = true;
              urlXML.onLoad = function(success) {
              if (success) {
              var urlfile;
              function parseXML(url_XML) {
              var urlNode:XMLNode = url_XML.firstChild.childNodes;
              var urls:Array = new Array();
              var caps:Array = new Array();

              picnums = url_XML.firstChild.childNodes.length;
              for (var j = 1; j<url_XML.firstChild.childNodes.length+1; j++) {
              images[j]=this.createClassObject(mx.controls.Loader, "myLoader"+j, j);
              images[j].scaleContent = false;
              captions[j]=this.createTextField("headline_txt"+j,this.getNextHighestDepth(),100,100,100, 20);
              var picEntry:Array = new Array();
              for (var i=0; i<url_XML.firstChild.childNodes.length; i++) {
              var itemStr:String = url_XML.firstChild.childNodes .childNodes.toString();
              picEntry = itemStr.split(",");
              = picEntry[0];
              links = picEntry[1];
              = picEntry[2];

              for (var i=0; i<urls.length; i++) {
              images[i+1].contentPath = urls ;
              images[i+1]._x = i*200;
              images[i+1]._y = 60;
              images[i+1]._alpha = 100-(i*20);
              if (images[i+1]._alpha < 0) images[i+1]._alpha = 0;
              captions[i+1].text = caps
              captions[i+1]._x = i*200+20;
              captions[i+1]._y = 210;
              captions[i+1].textColor = 0xffffff;

              images[i+1].iVar = i;
              images[i+1].onRelease = function() {


              There is also code on the buttons that control the scrolling, but I don't think that has anything to do with the problem.

              So, there is nothing on the stage beforehand. If I add the image to act as the mask, when the actionscript loads the background image and the scrolling images/captions, they load on top of anything I had on the stage to start with. I also tried loading in the mask images with actionscript, playing with depth settings, but I can not get it to work. Either the image does not appear, or I get the image to appear, but the background image does not appear. I'm probably not explaining this very well, and I apologize for that. Thanks again.

              • 4. Re: This should be simple, but....
                Shandy Elliott Level 1
                It sounds as if you are having trouble with depth order. Just place the gradient mask I made you on the stage (make sure you are placing the movie clip and not the bitmap). Since you are using action script to load everything, I'm sure it's loading at the highest depth. Somewhere in your script (after the last thing has been loaded through action script, add something like

                gradMaskInstanceName.swapDepths(this.getNextHighestDepth(); or you may have to use "_root" instead of "this". Other than that, I would have to see the flash file to get a better understanding.
                • 5. Re: This should be simple, but....
                  BobMelnyk Level 1

                  Thanks again for your help. Yes, this is definitely a problem with depth order. Based on your last response, I have made some progress, but still have a problem. I did not use your gradient, but did basically the same thing. I created a 50x300px object the same color as the background, with an arrow in the middle, and place it on the stage on the right end of the background. I made it a movie clip and gave it an instance name, then at the end of my actionscript code I added this:


                  That did the trick of giving me the effect I want, but the problem is the button that I had on the stage with code to control the scrolling does not work. I tried giving the button an instance name and adding this to the actionscript:


                  but that had no effect.

                  So, the problem now is getting the button to work. If you have an idea that would be great. Thanks again.

                  • 6. Re: This should be simple, but....
                    Shandy Elliott Level 1
                    I wouldn't know unless I could actually see the flash file. Can you upload it or email it to me?