Skip to main content
A
Anonymous
August 8, 2008
Question

This should be simple, but....

  • August 8, 2008
  • 1 reply
  • 594 views
Hi,

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!
This topic has been closed for replies.

1 reply

robdillon
robdillon
Participating Frequently
August 8, 2008
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.
A
Anonymous
August 8, 2008
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
A
Anonymous
August 8, 2008
Rob/Shan,

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;
backg.contentPath=backurl;
backg._x=0;
backg._y=0;
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) {
parseXML(urlXML);
}
};
var urlfile;
urlXML.load(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=this.createClassObject(mx.controls.Loader, "myLoader"+j, j);
images.scaleContent = false;
captions=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(",");
urls = picEntry[0];
links = picEntry[1];
caps = 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;
captions[i+1].setTextFormat(my_format);

images[i+1].iVar = i;
images[i+1].onRelease = function() {
getUrl(links[this.iVar],"_blank");}
}

}

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.

Bob
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices