|
|
|
Question : Fade in/out, side-to-side movement and scaling of images in rotating photo gallery using Actionscript
|
|
Hello,
I am trying to develop a relatively simple (to those that know actionscript!) rotating photo gallery in Flash, whereby images are read in dynamically via an XML file. I have a movieclip created called "image" and an action layer at frame 1, that contains all of the programming for photo transitions, etc. I have the XML part figured out; I just can't seem to get the images to do what I need them to do. There are 6 images (image1, image2, etc.) and they need to fade in and out, as well as move from side to side and/or scale out. As it stands now, I have each image fading in, then that image disappears abruptly and the next image fades in, etc. You can see what it looks like at:
http://65.110.95.2/thetroutfly/photos3.html
What I need it to look like is something like how the picture rotation is done on the home page of:
http://taylorcreek.com (except that I need the rotation to be an endless loop, rather than stopping after the last image was loaded)
or the home page of:
http://performanceanglers.com
I basically just need to know how to move an image from left to right or up and down as it fades in, scale it out, while fading it out, as the next image fades in (so they overlap during the fade in/fade out process), with movement, or some variation, therein. I believe that the left/right movement involves _x and _y coding, and the scaling would use _height and _width, but I just can't figure out how to indicate this in the actionscript, as well as getting fading in/out to occur. Nothing I try seems to work properly.
My complete actionscript currently is:
delay = 5000;
// -----------------------
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
p = 0;
this.onEnterFrame = function() {
if (picture._alpha<100) {
picture._alpha += 2;
}
}
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
slideshow();
}
}
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
slideshow();
}
}
function slideshow() {
myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
}
}
}
If someone could help with how to incorporate the movement, scaling and fading in/out process, that would be really great. Thanks so much!
|
Answer : Fade in/out, side-to-side movement and scaling of images in rotating photo gallery using Actionscript
|
|
I'm not sure why you like to fade out the image in the background...with one fading in over the top it wont be a big difference in how it looks.
Anyway I added the code to do that and also made it so you can set positions and scale in the XML:
import mx.utils.Delegate;
var delay:Number = 5000;
var speed = 1;
var currImg:Number = 0;
var image:Array = new Array();
// -----------------------
function loadXML(loaded) {
if (loaded) {
xmlNode = xmlData.firstChild;
total = xmlNode.childNodes.length;
var o:Object;
for (i=0; i o = new Object();
o.img = xmlNode.childNodes[i].firstChild.nodeValue;
o.xpos = Number(xmlNode.childNodes[i].attributes.xpos);
o.ypos = Number(xmlNode.childNodes[i].attributes.ypos);
o.sc = Number(xmlNode.childNodes[i].attributes.sc);
image.push(o);
}
loadImage(0);
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = Delegate.create(this, loadXML);
xmlData.load("images.xml");
var holder1:MovieClip = picture.createEmptyMovieClip("holder1", 1);
var holder2:MovieClip = picture.createEmptyMovieClip("holder2", 2);
var currHolder:MovieClip = holder2;
function loadImage(num:Number) {
currImg++;
currImg = currImg == image.length ? 0 : currImg;
var lastHolder:MovieClip = currHolder;
var mcl:MovieClipLoader = new MovieClipLoader();
var mcl_listener:Object = new Object();
mcl_listener.onLoadComplete = Delegate.create(this, function () {
setTimeout(loadImage, delay, currImg);
currHolder.swapDepths(picture.getNextHighestDepth());
var tween = new mx.transitions.Tween(lastHolder, "_alpha", mx.transitions.easing.Strong.easeIn, 100, 0, speed, true);
tween = new mx.transitions.Tween(currHolder, "_alpha", mx.transitions.easing.Strong.easeOut, 0, 100, speed, true);
tween = new mx.transitions.Tween(currHolder, "_y", mx.transitions.easing.Strong.easeOut, image[num].ypos, 0, speed, true);
tween = new mx.transitions.Tween(currHolder, "_x", mx.transitions.easing.Strong.easeOut, image[num].xpos, 0, speed, true);
tween = new mx.transitions.Tween(currHolder, "_xscale", mx.transitions.easing.Strong.easeOut, image[num].sc, 100, speed, true);
tween = new mx.transitions.Tween(currHolder, "_yscale", mx.transitions.easing.Strong.easeOut, image[num].sc, 100, speed, true);
});
mcl.addListener(mcl_listener);
currHolder = currHolder == holder1 ? holder2 : holder1;
mcl.loadClip(image[num].img, currHolder);
}
I changed the XML to hold attributes for the positions and simplified the structure a bit:
images/image1.jpg
images/image2.jpg
images/image3.jpg
images/image4.jpg
images/image5.jpg
images/image6.jpg
|
|
|
|
|
|
|
