hi guys im working on a random slideshow gallery that uses xml to populate the mc, and it works great, but now i want to add a fade-in effect for each 1 of the pics, or maybe a cross-fade,this is the script i have so far, any help will be appreciated.
Code:
pauseTime = 2000;
xmlImages = new XML();
xmlImages.ignoreWhite = true;
xmlImages.onLoad = loadImages;
xmlImages.load("images.xml");
function loadImages(loaded) {
if (loaded) {
xmlFirstChild = this.firstChild;
imageFileName = [];
totalImages = xmlFirstChild.childNodes[0].childNodes.length;
for (i=0; i<totalImages; i++) {
imageFileName[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.title;
}
randomImage();
}
}
function randomImage() {
if (loaded == filesize) {
var ran = Math.round(Math.random() * (totalImages - 1));
picture_mc.loadMovie(imageFileName[ran], 1);
pause();
}
}
function pause() {
myInterval = setInterval(pause_slideshow, pauseTime);
function pause_slideshow() {
clearInterval(myInterval);
randomImage();
}
}
thanks for the link, i know i can make the movie clip holder _alpha = 0
from start and the have something like this:
Code:
function fade(picture_mc,alpha){
this.onEnterFrame=function(){
i++;
picture_mc._alpha = 100-i;
if (picture_mc._alpha <=alpha){
delete this.onEnterFrame;
}
}
}
but i just dont know how to implement this to be part of the random rotation, i tried to make it part of the random function, but it did happen, i guess because i didnt figure out how to tell the script to increment the alpha to make it visible. anyhow im lost :P
any ideas why?
I will show you how to merge these two tutorials into one script that does what you are wanting. Typically merging two tutorials like this isn't too difficult if you can understand the code, so take the time to actually understand what the code is doing and this sort of thing becomes like cake.
Code:
import mx.transitions.Tween;
import mx.transitions.easing.*;
pauseTime = 2000;
xmlImages = new XML();
xmlImages.ignoreWhite = true;
xmlImages.onLoad = loadImages;
xmlImages.load("images.xml");
function loadImages(loaded) {
if (loaded) {
xmlFirstChild = this.firstChild;
imageFileName = [];
totalImages = xmlFirstChild.childNodes[0].childNodes.length;
for (i=0; i<totalImages; i++) {
imageFileName[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.title;
}
randomImage();
}
}
function randomImage() {
if (loaded == filesize) {
var ran = Math.round(Math.random() * (totalImages - 1));
picture_mc._alpha = 0; // Start image clip as invisible
picture_mc.loadMovie(imageFileName[ran], 1); //Load random image from xml
var pictureTweenIn:Tween = new Tween (picture_mc,"_alpha",Normal.easeIn,0,100,1,true); // Use the Tween class to ease in the alpha from 0 to 100 over 1 seconds
pictureTweenIn.onMotionFinished = function () { // When done fading
_root.pause(); // Start pause() function
}
}
}
function pause() {
myInterval = setInterval(pause_slideshow, pauseTime);
function pause_slideshow() {
clearInterval(myInterval);
var pictureTweenOut:Tween = new Tween (picture_mc,"_alpha",Normal.easeOut,100,0,1,true); // After pause, start fade out
pictureTweenOut.onMotionFinished = function () { // Once faded out
_root.randomImage(); // Call next randomImage()
}
}
}
The code is commented, which this is a fairly simple way of merging the code in the two examples.
__________________
jeremy - gnomeontherun Educated questions often get educated answers, and simple questions often get simple answers.
Last edited by gnomeontherun; 12-21-2007 at 03:32 AM..
Reason: clarifications
The Following 2 Users Say Thank You to gnomeontherun For This Useful Post:
I started a project needing to do the exact same thing today - thank you so much for your response, jeremy.
It works just fine for me until I add the script for the Tweening. I went back to the original site and went through their tutorial and still didn't get it to work. This is the error message I get:
**Error** Scene=Scene 1, layer=Actions, frame=1:Line 28: There is no property with the name 'onMotionFinished'.
pictureTweenIn.onMotionFinished = function () { // When done fading
**Error** Scene=Scene 1, layer=Actions, frame=1:Line 38: There is no property with the name 'onMotionFinished'.
pictureTweenOut.onMotionFinished = function () { // Once faded out
I'm using Flash MX 2004, which may be the problem, but I was wondering if you had any insight on this?
There is some information about this at the bottom, which shows that the .onMotionFinished property fails because its not supported before Flash 8.
Try to change this in the code:
Code:
var pictureTweenIn:Object = new Tween (picture_mc,"_alpha",Normal.easeIn,0,100,1,true); // Use the Tween class to ease in the alpha from 0 to 100 over 1 seconds
Code:
var pictureTweenOut:Object = new Tween (picture_mc,"_alpha",Normal.easeOut,100,0,1,true); // After pause, start fade out
pictureTweenOut.onMotionFinished = function () { // Once faded out
I think that may fix it, but anything before mx 2004 can't handle this code I believe.
__________________
jeremy - gnomeontherun Educated questions often get educated answers, and simple questions often get simple answers.
i found a disc with flash 8 that my roommate had, so i'm able to use that original code, but now (of course) there's a new challenge...
my intention is to have this "slideshow" running 4 times. i have 4 movieclips (all named differently) and have repeated the block of code 4 times, making changes to the variables as needed. however, when i play the movie, the result is each movie clip loads its random image, but only the first movie clip continues to go through to more images. the rest of the movieclips remain static on the first image they generated.
i've tried renaming everything i could, to no avail. also, i removed the if (loaded == filesize) lines from the randomImage function in case it was causing it to stop, but that didn't work either.
here is the code i used for the second movie clip:
Code:
pauseTime2 = 2000;
xmlImages2 = new XML();
xmlImages2.ignoreWhite = true;
xmlImages2.onLoad = loadImages2;
xmlImages2.load("images2.xml");
function loadImages2(loaded) {
if (loaded) {
xmlFirstChild2 = this.firstChild;
imageFileName2 = [];
totalImages2 = xmlFirstChild2.childNodes[0].childNodes.length;
for (i2=0; i2<totalImages2; i2++) {
imageFileName2[i2] = xmlFirstChild2.childNodes[0].childNodes[i2].attributes.title;
}
randomImage2();
}
}
function randomImage2() {
if (loaded == filesize) {
var ran2 = Math.round(Math.random() * (totalImages2 - 1));
picture_mc2._alpha = 0; // Start image clip as invisible
picture_mc2.loadMovie(imageFileName2[ran2], 1); //Load random image from xml
var pictureTweenIn:Tween = new Tween (picture_mc2,"_alpha",Normal.easeIn,0,100,1,true); // Use the Tween class to ease in the alpha from 0 to 100 over 1 seconds
pictureTweenIn.onMotionFinished = function () { // When done fading
_root.pause2(); // Start pause() function
}
}
}
function pause2() {
myInterval2 = setInterval2(pause_slideshow2, pauseTime2);
function pause_slideshow2() {
clearInterval2(myInterval2);
var pictureTweenOut:Tween = new Tween (picture_mc2,"_alpha",Normal.easeOut,100,0,1,true); // After pause, start fade out
pictureTweenOut.onMotionFinished = function () { // Once faded out
_root.randomImage2(); // Call next randomImage()
}
}
}
do you know of anything else i could change to get the slideshow effect to work on more than one movie clip? thanks so much for your help.
Well first there are some issues with duplicating code like this. First is the problem that it is likely to cause the error you are describing. Second is that the code becomes too bulky to manage because its duplicated in so many locations. So the other option is to write the functions in a way that allows you to pass all of the variables to the functions and then return the proper values. When you copy the same code and only change a couple variable names there tend to be issues, so reducing the code so it is reusable works best. The code provided might not even be the best code for this, but it was what the original poster used.
I'm not able to rewrite all of this, because I think thats a little too much help. But another suggestion is to look for another tutorial which uses multiple slideshows and learn from this post about how to incorporate the tweens.
If you start to rewrite anything or find another tutorial which allows multiple instances, post it here if you have questions or just figure it out for others to see!
__________________
jeremy - gnomeontherun Educated questions often get educated answers, and simple questions often get simple answers.
Last edited by gnomeontherun; 12-28-2007 at 02:06 AM..
Just read through this string of posts and was wondering whether you had found sample code that enabled multiple instances of the mc to be populated by external images + xml?
I will show you how to merge these two tutorials into one script that does what you are wanting. Typically merging two tutorials like this isn't too difficult if you can understand the code, so take the time to actually understand what the code is doing and this sort of thing becomes like cake.
Code:
import mx.transitions.Tween;
import mx.transitions.easing.*;
pauseTime = 2000;
xmlImages = new XML();
xmlImages.ignoreWhite = true;
xmlImages.onLoad = loadImages;
xmlImages.load("images.xml");
function loadImages(loaded) {
if (loaded) {
xmlFirstChild = this.firstChild;
imageFileName = [];
totalImages = xmlFirstChild.childNodes[0].childNodes.length;
for (i=0; i<totalImages; i++) {
imageFileName[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.title;
}
randomImage();
}
}
function randomImage() {
if (loaded == filesize) {
var ran = Math.round(Math.random() * (totalImages - 1));
picture_mc._alpha = 0; // Start image clip as invisible
picture_mc.loadMovie(imageFileName[ran], 1); //Load random image from xml
var pictureTweenIn:Tween = new Tween (picture_mc,"_alpha",Normal.easeIn,0,100,1,true); // Use the Tween class to ease in the alpha from 0 to 100 over 1 seconds
pictureTweenIn.onMotionFinished = function () { // When done fading
_root.pause(); // Start pause() function
}
}
}
function pause() {
myInterval = setInterval(pause_slideshow, pauseTime);
function pause_slideshow() {
clearInterval(myInterval);
var pictureTweenOut:Tween = new Tween (picture_mc,"_alpha",Normal.easeOut,100,0,1,true); // After pause, start fade out
pictureTweenOut.onMotionFinished = function () { // Once faded out
_root.randomImage(); // Call next randomImage()
}
}
}
The code is commented, which this is a fairly simple way of merging the code in the two examples.
Thanks a lot Jeremy for this clean code
But.. I don't want it to pick a random image, but I want it to play the images from the beginning to the end, like: a, b, c, etc. Then when the last image is reached it plays again from the beginning. I don't know how to do that, please help me out
Well you don't have to do much to change things. The only changes are removing the random selection, and then having the current indicator increase until it reaches the end where it resets. Best of luck.
Code:
import mx.transitions.Tween;
import mx.transitions.easing.*;
pauseTime = 2000;
var current = 0; // This will be our current photo indicator
xmlImages = new XML();
xmlImages.ignoreWhite = true;
xmlImages.onLoad = loadImages;
xmlImages.load("xmlimages/icons.xml");
function loadImages(loaded) {
if (loaded) {
xmlFirstChild = this.firstChild;
imageFileName = [];
totalImages = xmlFirstChild.childNodes[0].childNodes.length;
for (i=0; i<totalImages; i++) {
imageFileName[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.title;
}
nextImage();
}
}
function nextImage() {
if (loaded == filesize) {
picture_mc._alpha = 0; // Start image clip as invisible
picture_mc.loadMovie(imageFileName[current], 1); //Load random image from xml
var pictureTweenIn:Tween = new Tween (picture_mc,"_alpha",Normal.easeIn,0,100,1,true); // Use the Tween class to ease in the alpha from 0 to 100 over 1 seconds
pictureTweenIn.onMotionFinished = function () { // When done fading
_root.pause(); // Start pause() function
}
}
}
function pause() {
myInterval = setInterval(pause_slideshow, pauseTime);
function pause_slideshow() {
clearInterval(myInterval);
var pictureTweenOut:Tween = new Tween (picture_mc,"_alpha",Normal.easeOut,100,0,1,true); // After pause, start fade out
pictureTweenOut.onMotionFinished = function () { // Once faded out
current++; // Move current indicator up to next image
if (current >= totalImages) { // Check that indicator is below list length, otherwise reset
current = 0;
}
_root.nextImage(); // Call nextImage()
}
}
}
__________________
jeremy - gnomeontherun Educated questions often get educated answers, and simple questions often get simple answers.
I have my slideshow up and running - and it all looks very pretty!
There's only one small adjustment I'd like to make. I'm bringing my images in from the side, and moving them out the other side. However, while the image is moving out, it's leaving a large white space behind it until the next image starts moving in.
Is there a way to start the new image coming in, while the old one is moving out? Making it seamless....
I've had a play but I keep breaking it!!
Here's my code:
Code:
import mx.transitions.Tween;
import mx.transitions.easing.*;
pauseTime = 3000;
var current = 0; // This will be our current photo indicator
xmlImages = new XML();
xmlImages.ignoreWhite = true;
xmlImages.onLoad = loadImages;
xmlImages.load("xml.xml");
function loadImages(loaded) {
if (loaded) {
xmlFirstChild = this.firstChild;
imageFileName = [];
totalImages = xmlFirstChild.childNodes[0].childNodes.length;
for (i=0; i<totalImages; i++) {
imageFileName[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.title;
}
nextImage();
}
}
function nextImage() {
if (loaded == filesize) {
picture_mc._alpha = 60; // Start image clip as invisible
picture_mc.loadMovie(imageFileName[current], 1); //Load random image from xml
var pictureTweenIn:Tween = new Tween (picture_mc,"_x",Regular.easeIn,-650,0,5,true); // Use the Tween class to ease in the alpha from 0 to 100 over 1 seconds
pictureTweenIn.onMotionFinished = function () { // When done fading
var picture2TweenIn:Tween = new Tween (picture_mc,"_alpha",Regular.easeIn,60,100,1,true); // Use the Tween class to ease in the alpha from 0 to 100 over 1 seconds
picture2TweenIn.onMotionFinished = function () {
_root.pause(); // Start pause() function
}
}
}
}
function pause() {
myInterval = setInterval(pause_slideshow, pauseTime);
function pause_slideshow() {
clearInterval(myInterval);
var picture2TweenOut:Tween = new Tween (picture_mc,"_alpha",Regular.easeOut,100,60,2,true); // After pause, start fade out
var pictureTweenOut:Tween = new Tween (picture_mc,"_x",Regular.easeOut,0,650,5,true); // After pause, start fade out
pictureTweenOut.onMotionFinished = function () { // Once faded out
current++; // Move current indicator up to next image
if (current >= totalImages) { // Check that indicator is below list length, otherwise reset
current = 0;
}
_root.nextImage(); // Call nextImage()
}
}
}
Since you are setting it up this way, you have two options. The code you are using won't work because you are trying to make picture_mc move around the stage in two cases at the same time. Essentially you are trying to have the picture_mc at two places at once, this is impossible.
So without rewriting the code I will explain it for you to try. You can load all of the images into picture_mc so they are side by side (like one large image) and then have the picture_mc slide along. The other option is to have a picture_mc and a picture_mc2 that are sliding in/out simultaneously. I think option #2 does what you are asking, and option #1 is probably easier.
__________________
jeremy - gnomeontherun Educated questions often get educated answers, and simple questions often get simple answers.
Users who have thanked gnomeontherun for this post:
Before you post, read our: 
adding Fade-in to XML random slideshow flash
)
