[FONT=Arial]
[/FONT][FONT=Arial]I am trying to create an XML driven interactive image slider very similar to the one on [/FONT][COLOR=#0000ff][FONT=Arial]www.slide.com[/FONT][/COLOR][FONT=Arial]. I’ve seen a lot of tutorials and FLAs that rely on the images to be the same size, but none that will proportionally resize the images so they are uniformly displayed on the stage. For a horizontal slider the images would need to resized proportionally to the height of the stage.[/FONT]
[FONT=Arial]It would basically work like this:[/FONT]
[FONT=Arial]1) Preload images and speed from XML file.[/FONT]
[FONT=Arial]2) Load them onto the stage one next to another, proportionally resizing them, so their height matches the stage height.[/FONT]
[FONT=Arial]3) Automatically start sliding images from right to left, stopping when the user mouse’s over an image. The slider would continuously loop (e.g. once the last image was reached image one would show again).[/FONT]
[FONT=Arial]4) Some additional options to would be the ability to control the speed and link each image.[/FONT]
[FONT=Arial]Has anyone seen any tutorials or FLAs that would do this? [/FONT]
[FONT=Arial]Any help would be greatly appreciated.[/FONT]
Below is the current code I’ve been trying to adapt. The problem is it was meant for statically sized images and thus doesn’t scroll right.
// set the scale mode of this movie
Stage.scaleMode = "noScale";
Stage.align = "TL";
// load the xml and goto startSlideShow() after
var images_xml:XML = new XML();
images_xml.onLoad = startSlideShow;
images_xml.load("slideshow_images.xml");
images_xml.ignoreWhite = true;
// some global settings
var settings:Object;
var images:Array;
var images_count:Number;
var images_needed:Number;
var images_active:Array = new Array();
var images_prev:Number;
var images_firstNr:Number = 0;
var max_r:Number;
var min_l:Number;
// the speed according to the mouse-x-position
var pos_speed:Number = -0.1;
// the depth of the objects
var d = 1;
// this is the invisible square inside witch the images are placed
// (default value 140, can be set in the xml)
var a = 140;
// der Interval
var bewegeInterval;
var c = 0;
function startSlideShow(success){
if (success == true) {
var p:XMLNode = images_xml.firstChild;
settings = p.firstChild.attributes;
images = p.lastChild.childNodes;
images_count = images.length;
a = Number(settings.a);
var x = 0;
var i = 0;
// we need at least one image
var sw = Math.max(a,Stage.width);
while(x < sw){
//left off
var picObj = images[imageNumber].attributes;
var c = Math.round((Number(picObj.width)/Number(picObj.height)) * Stage.height);
// draw the image
var imageNumber = i % images_count;
// load the image and register
images_active.push(createImage(imageNumber,i*a));
// finally cache the current image number
images_prev = imageNumber;
i++;
x += a;
max_r = x;
min_l = 0;
}
// store the number of images
images_needed = i;
}
// interval
bewegeInterval = setInterval(slide, Number(settings.delay), Number(settings.step));
}
function slide(stp:Number){
// moves all images
stp = Math.round(stp * pos_speed);
min_l += stp;
max_r += stp;
/*
trace("x-bounds: " + min_l + " - " + max_r);
trace("nr-bounds 0: " + images_firstNr + " - " + images_prev);
*/
var len = images_active.length;
var new_images_active = new Array();
for(var k = 0; k < len; k++){
var b:MovieClip = images_active[k];
b._x += stp;
trace(b + ": x=" + b._x + ", max_r=" + max_r);
if(b._x <= -a){
// trace("unload left");
b.unloadMovie();
min_l += a;
images_firstNr = (images_firstNr + 1) % images_count
}
else if(b._x > Stage.width){
// trace("unload right");
b.unloadMovie();
max_r -= a;
images_prev = (((images_prev - 1) % images_count) + images_count) % images_count;
}
else {
// behalten
new_images_active.push(b);
}
if(max_r < Stage.width){
// trace("create right");
imageNumber = (images_prev + 1) % images_count;
new_images_active.push(createImage(imageNumber,max_r));
images_prev = imageNumber;
max_r += a;
}
if(min_l > 0){
// trace("create left");
imageNumber = (((images_firstNr - 1) % images_count) + images_count) % images_count;
new_images_active.unshift(createImage(imageNumber,min_l - a));
images_firstNr = imageNumber;
min_l -= a;
}
}
// trace("nr-bounds 1: " + images_firstNr + " - " + images_prev);
images_active = new_images_active;
// update...
updateAfterEvent();
}
function createImage(imageNumber:Number, x:Number):MovieClip{
var picObj = images[imageNumber].attributes;
var picWidth = Number(picObj.width);
var picHeight = Number(picObj.height);
/*if (picWidth > picHeight){
a = Math.round(picWidth/picHeight) * Stage.height;
} else {
a = (Math.round(picWidth/picHeight) * Stage.height) * 2;
}*/
var picX = 0;
var picY = 0;
var container = _root.createEmptyMovieClip("pic" + d,d);
container._x = x;
// depth for the next movieclip
d++;
// we put two images inside that container: one for the border and the image itself
var frame:MovieClip = container.attachMovie("box","frame",1);
var c = new Color(frame);
c.setRGB(settings.bordercolor);
frame._width = picWidth + 2;
frame._height = picHeight + 2;
frame._x = picX - 1;
frame._y = picY - 1;
// the event handler is set to the border
if(picObj.big_src != undefined) frame.onRelease = function(){fscommand("openWindow","src="+picObj.big_src+"&width="+picObj.big_width+"&height="+picObj.big_height);}
var pic = container.createEmptyMovieClip("pic",2);
loadMovie(picObj.src, pic);
pic._x = picX;
pic._y = picY;
container._width = Math.round((Number(picObj.width)/Number(picObj.height)) * Stage.height);
container._height = 140;
return container;
}
this.onMouseMove = function(){
pos_speed = -Math.round(10 * ((2*_xmouse)-Stage.width)/Stage.width) / 10;
}
