...

View Full Version : adding Fade-in to XML random slideshow flash



mochden
12-19-2007, 08:29 PM
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.


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();
}
}

gnomeontherun
12-20-2007, 12:40 AM
You will need to utilize the tween class of flash. Here is a tutorial, if it stinks there are more out there!

http://www.oman3d.com/tutorials/flash/tweenclasseasing/

mochden
12-20-2007, 01:32 AM
thanks for the link, i know i can make the movie clip holder _alpha = 0
from start and the have something like this:


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?

gnomeontherun
12-21-2007, 04:30 AM
XML Slide Show Tutorial http://www.webzo.org/tutorials/flash/xml-random-image-slideshow.php
Tween Class Tutorial http://www.oman3d.com/tutorials/flash/tweenclasseasing/

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.


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.

christyjoy
12-22-2007, 01:36 AM
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?

gnomeontherun
12-24-2007, 12:50 AM
http://www.kirupa.com/developer/actionscript/tween.htm

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:


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


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.

christyjoy
12-24-2007, 06:48 AM
thanks for that, jeremy -

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:


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.

gnomeontherun
12-26-2007, 07:48 PM
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!

mochden
01-03-2008, 04:03 AM
Sorry for the late respond, i went out of town for the holidays, thanks a lot jeremy for the help, It worked well for me. happy new year :P

p1x3lman
04-27-2008, 09:35 AM
Hi Christjoy..

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?

Any help appreciated.
cheers!

gnomeontherun
04-28-2008, 12:09 AM
You want to have a SWF with lets say 3 of these scrollers in it?

Reko
08-17-2008, 02:22 PM
XML Slide Show Tutorial http://www.webzo.org/tutorials/flash/xml-random-image-slideshow.php
Tween Class Tutorial http://www.oman3d.com/tutorials/flash/tweenclasseasing/

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.


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 :thumbsup:

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 :rolleyes:

(sorry for the bad English :o)

gnomeontherun
08-17-2008, 10:19 PM
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.


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()
}
}
}

nickyfraggle
09-05-2008, 11:30 AM
Hello,

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:


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()
}
}
}

Thanks!!

Nicky

gnomeontherun
09-06-2008, 10:54 PM
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.

nickyfraggle
09-09-2008, 11:12 AM
Hey - Thanks. That was helpful. Flash can be a bit of a mind bender when you don't know what you're doing!
I think I'm going to have to go for the 2 mc's, as I can't think how to do the button. Each image links to a separate page. If I had to mc's I could load the url and button over the t op of each instance of mc.
What do you think?

Thanks again.

nickyfraggle
09-11-2008, 10:35 PM
Ok I can't get this to work at all. Nothing but errors.

gnomeontherun
09-12-2008, 10:28 PM
I can imagine that it would require a large overhaul of the code, meaning lots of problems. How are you going about it?

leftfield
11-27-2008, 02:17 AM
Hi,
Thanks very much. This code is exactly what i was after. It works almost perfectly.
The one problem i have though is....
When i open the code up the first time it works perfectly, but when i view a different page and then reopen the swf file containing the slideshow, it all goes pear shaped.
Please view here. http://www.semantics53.com

Any ideas why?

gnomeontherun
11-27-2008, 08:42 AM
Not sure, did you make individual swfs for each of your pages? Or are they one swf on different frames?

Perhaps you have some variables that are being reset?

leftfield
11-28-2008, 12:53 AM
The links at the bottom all load individual swfs.

gnomeontherun
11-28-2008, 11:47 AM
Are you reloading the content each time? Do you have code for the FLA to show?

leftfield
12-09-2008, 06:30 AM
Sorry about the late reply. The code is really basic. On load i have the following to load the slideshow._root.load_movie.loadMovie("images_mainR.swf");
Then when you load a different MC from the menu

on (release) {
unloadMovie("images_mainR.swf");
unloadMovie("riders.swf");
unloadMovie("contact.swf");
_root.load_movie.loadMovie("items.swf");
}

Then finally to reload the slideshow:

on (release) {
unloadMovie("items.swf");
unloadMovie("riders.swf");
unloadMovie("contact.swf");
_root.load_movie.loadMovie("images_mainR.swf");
}


Thanks for helping

gnomeontherun
12-10-2008, 12:06 AM
I don't see a pearshaped problem, only that the slideshow is twice as fast when I go back to it...but I can't seem to think of a good reason for that one at the moment...

There was also just an issue with your code causing my browser to crash. I don't think this has anything to do with the slideshow...

teapotpot
03-05-2009, 03:06 AM
Thank you for your generous help!

teapotpot
03-05-2009, 06:40 AM
The slideshow works great; my only question is what if you want to use more than 26 images in the rotation in your xml file? After you go through the letters of the alphabet, how does the "numbering" system continue?

...
<y title = "images/random_chamber_Tom-Bill.jpg" />
<z title = "images/random_chamber_CR2.jpg" />
?

Thanks,
Anastasia

gnomeontherun
03-05-2009, 09:31 AM
Anastasia,

It actually doesn't matter what you name the tag. The Actionscript pulls them line by line, so they could (and I would recommend actually) all be the same. It does this by accessing the <images> node and then getting each child, and as long as there is a title attribute it should work, as that is the only value that is kept. In fact that is a rather odd thing to have been done by the original designer, and I just never mentioned it but I had been doing something like this.


<xml>
<images>
<img title = "pic1.jpg" />
<img title = "pic2.jpg" />
<img title = "pic3.jpg" /> ...etc...
</images>
</xml>

spike1292
04-13-2009, 02:54 PM
@jeremy: tnx for your great code

I want to use it as a header where people can click on the showing picture and go to that page.

as:

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 = [];
imageUrl= [];
totalImages = xmlFirstChild.childNodes[0].childNodes.length;
for (i=0; i<totalImages; i++) {
imageFileName[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.title;
imageUrl[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.url;
}
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() {
picture_mc.onRelease=function(){
getURL(imagesUrl[ran], "_parent");
}
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()
}
}
}xml:

<xml>
<images>
<img title = "hamminga.jpg" url="http:www/hamminga.nl/hamminga"/>
<img title = "kleding.jpg" url="http://www.hamminga.nl/hamminga/winkel/kleding" />
<img title = "tuin.jpg" url="http://www.hamminga.nl/hamminga/winkel/tuin"/>
<img title="hout.jpg" url="http://www.hamminga.nl/hamminga/bouwmaterialen/houtmateriaal"/>
</images>
</xml>
When i click on the picture i get the page "http://www.hamminga.nl/hamminga/undefined".
And when i trace imageUrl[ran] inside the function randomImage the url works but then i can't click on the picture. so i have to put the geturl in the function pause but then i get undefined.
So how do i get the var ran in the function pause?

Aldo
05-04-2009, 11:20 PM
I need this get to work on my handset
nokia 6300 with flashlite 2.0

Don't work as screensaver!! :eek:

It seems that the problem is in the xml file (The phone only
reads the swf file) , although
plays well every time I openup normally..

I need some help for embbeding the xml into the actionscript

If there's a better way to do a slideshow without xml would be great!
like a folder with images and a standalone swf!!

Anyone can help me with this?
Thanks so much

Aldo

gnomeontherun
05-05-2009, 09:36 AM
If you want to include XML directly in the file its pretty simple.

Change


xmlImages = new XML();
xmlImages.ignoreWhite = true;
xmlImages.onLoad = loadImages;
xmlImages.load("images.xml");


To


xmlImages = new XML("<xml>
<images>
<img title = 'hamminga.jpg' url='http:www/hamminga.nl/hamminga'/>
<img title = 'kleding.jpg' url='http://www.hamminga.nl/hamminga/winkel/kleding' />
<img title = 'tuin.jpg' url='http://www.hamminga.nl/hamminga/winkel/tuin'/>
<img title='hout.jpg' url='http://www.hamminga.nl/hamminga/bouwmaterialen/houtmateriaal'/>
</images>
</xml>");
xmlImages.ignoreWhite = true;
xmlImages.onLoad = loadImages;


Make sure that inside of the " " only ' are used.

gnomeontherun
05-05-2009, 09:38 AM
@jeremy: tnx for your great code

I want to use it as a header where people can click on the showing picture and go to that page.

as:

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 = [];
imageUrl= [];
totalImages = xmlFirstChild.childNodes[0].childNodes.length;
for (i=0; i<totalImages; i++) {
imageFileName[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.title;
imageUrl[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.url;
}
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() {
picture_mc.onRelease=function(){
getURL(imagesUrl[ran], "_parent");
}
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()
}
}
}xml:

<xml>
<images>
<img title = "hamminga.jpg" url="http:www/hamminga.nl/hamminga"/>
<img title = "kleding.jpg" url="http://www.hamminga.nl/hamminga/winkel/kleding" />
<img title = "tuin.jpg" url="http://www.hamminga.nl/hamminga/winkel/tuin"/>
<img title="hout.jpg" url="http://www.hamminga.nl/hamminga/bouwmaterialen/houtmateriaal"/>
</images>
</xml>
When i click on the picture i get the page "http://www.hamminga.nl/hamminga/undefined".
And when i trace imageUrl[ran] inside the function randomImage the url works but then i can't click on the picture. so i have to put the geturl in the function pause but then i get undefined.
So how do i get the var ran in the function pause?

Sorry I must have missed this question.

Sometimes functions have trouble with an array index in them like that. Perhaps try


currentURL = imageUrl[ran];

to get the URL into a regular variable and then insert it.

Aldo
05-05-2009, 10:16 PM
Hello Jeremy thanks for your time!

I think dont know nothing about coding :eek:

but I'll keep learning

by the way Ive trying to merge the code you show
above into the actions with no luck!



/****************************/
/* Crossfading slide show */
/* Author: Todd Dominey */
/* http://whatdoiknow.org */
/* http://domineydesign.com */
/****************************/

// set random # variables - each must be 0 for first 'while' loop below
var randomNum = 0;
var randomNumLast = 0;

// parent container
var container_mc = this.createEmptyMovieClip("container",0);
// movie clip containers
container_mc.createEmptyMovieClip("loader1_mc",2);
container_mc.createEmptyMovieClip("loader2_mc",1);

// preload watcher
this.createEmptyMovieClip("watcher_mc",100);

images_xml = new XML("<xml>
<images>
<image path= '0.jpg' />
<image path= '1.jpg' />
<image path= '2.jpg' />
<image path= '3.jpg' />
<image path= '4.jpg' />
<image path= '5.jpg' />
<image path= '6.jpg' />
</images>
</xml>");

images_xml.ignoreWhite = true;
images_xml.onLoad = loadImages;

function parse(success) {
if (success) {
imageArray = new Array();
var root = this.firstChild;
_global.numPause = Number(this.firstChild.attributes.timer * 1000);
_global.order = this.firstChild.attributes.order;
_global.looping = this.firstChild.attributes.looping;
_global.fadetime = Number(this.firstChild.attributes.fadetime);
_global.xpos = Number(this.firstChild.attributes.xpos);
_global.ypos = Number(this.firstChild.attributes.ypos);
var imageNode = root.lastChild;
var s=0;
while (imageNode.nodeName != null) {
imageData = new Object;
imageData.path = imageNode.attributes.path;
imageArray[s]=imageData;
imageNode = imageNode.previousSibling;
s++;
}
// place parent container
container_mc._x = _global.xpos;
container_mc._y = _global.ypos;
// parse array
imageArray.reverse();
imageGen(imageArray);
} else {
trace('problem');
}
}

// depth swapping
function swapPlace(clip,num) {
eval(clip).swapDepths(eval("container_mc.loader"+num+"_mc"));
}

function loadImages(data,num) {
if (i==undefined || i == 2) {
i=2;
createLoader(i,data,num);
i=1;
} else if (i==1) {
createLoader(i,data,num);
i=2;
}
}
function createLoader(i,data,num) {
thisLoader=eval("container_mc.loader"+i+"_mc");
thisLoader._alpha=0;
thisLoader.loadMovie(data[num].path);
watcher_mc.onEnterFrame=function () {
var picLoaded = thisLoader.getBytesLoaded();
var picBytes = thisLoader.getBytesTotal();
if (isNaN(picBytes) || picBytes < 4) {
return;
}
if (picLoaded / picBytes >= 1) {
swapPlace("container_mc.loader2_mc",1);
alphaTween = new mx.transitions.Tween(thisLoader, "_alpha", mx.transitions.easing.Regular.easeOut,0,100,_global.fadetime,true);
timerInterval = setInterval(imageGen,_global.numPause,data);
delete this.onEnterFrame;
}
}
}
function imageGen(data) {
// random, or sequential?
if (_global.order=="random") {
// choose random # between 0 and total number of images
while (randomNum == randomNumLast) {
randomNum = Math.floor(Math.random() * data.length);
trace(randomNum);
}
loadImages(data,randomNum);
randomNumLast = randomNum;
} else if (_global.order=="sequential") {
// start at 0, increment to total number of images, then drop back to zero when done
if (p==undefined || p==data.length && _global.looping=="yes") { p=0; } else { break; }
loadImages(data,p);
p++;
} else {
trace ("order attribute in xml isn't correct - must specify either 'random' or 'sequential'");
}
clearInterval(timerInterval);
}
stop();

For the array issue I'm so lost too :confused:

buzzby
03-09-2010, 04:40 PM
hi there.

i am using this code to get images to loaded by xml into flash. they fade in and out. in between they should be clickable to a given url. this unfortunately does not happen. this is the code i am using



import mx.transitions.Tween;
import mx.transitions.easing.*;

pauseTime = 2000;

var current = 0; // This will be our current photo indicator

xmlImages = new XML("<xml><images><img title ='frontpage1.gif' url='http://www.dmcobbinah.com'/><img title ='frontpage2.gif' url='http://www.dmcobbinah.com'/></images></xml>");
//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;
imageUrl[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.url;
}
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);
picture_mc.onRelease=function(){
getURL(imagesUrl[ran], "_parent");
currentURL = imageUrl[ran];
}
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()
}
}
}

/*
myPhoto = new XML();
myPhoto.ignoreWhite = true;
myPhoto.load("images.xml");
myPhoto.onLoad = function(success) {
numimages = this.firstChild.childNodes.length;
spacing = 70;
for (i=0; i<numimages; i++) {
picture_mc = this.firstChild.childNodes[i];
this.thumbHolder = _root.thumbnails.createEmptyMovieClip("thumbnail"+i, i);
this.thumbHolder._x = i*spacing;
this.thumbHolder.title = this.picture_mc.attributes.title;
this.thumbHolder.main = this.picture_mc.attributes.main;

this.thumbLoader = this.thumbHolder.createEmptyMovieClip("thumbnail_image"+i, i);
this.thumbLoader.loadMovie(picture_mc.attributes.thmb);
//create new movie and then load the thumbnails into it.

thumbHolder.onRelease = function() {
loader.loadMovie(this.main);
title_txt.text = this.title;
};
}
};
*/

when i change the code to


import mx.transitions.Tween;
import mx.transitions.easing.*;

pauseTime = 2000;

var current = 0; // This will be our current photo indicator

//xmlImages = new XML("<xml><images><img title ='frontpage1.gif' url='http://www.dmcobbinah.com'/><img title ='frontpage2.gif' url='http://www.dmcobbinah.com'/></images></xml>");
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;
imageUrl[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.url;
}
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);
picture_mc.onRelease=function(){
getURL(imagesUrl[ran], "_parent");
currentURL = imageUrl[ran];
}
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()
}
}
}

/*
myPhoto = new XML();
myPhoto.ignoreWhite = true;
myPhoto.load("images.xml");
myPhoto.onLoad = function(success) {
numimages = this.firstChild.childNodes.length;
spacing = 70;
for (i=0; i<numimages; i++) {
picture_mc = this.firstChild.childNodes[i];
this.thumbHolder = _root.thumbnails.createEmptyMovieClip("thumbnail"+i, i);
this.thumbHolder._x = i*spacing;
this.thumbHolder.title = this.picture_mc.attributes.title;
this.thumbHolder.main = this.picture_mc.attributes.main;

this.thumbLoader = this.thumbHolder.createEmptyMovieClip("thumbnail_image"+i, i);
this.thumbLoader.loadMovie(picture_mc.attributes.thmb);
//create new movie and then load the thumbnails into it.

thumbHolder.onRelease = function() {
loader.loadMovie(this.main);
title_txt.text = this.title;
};
}
};
*/
i get the images to fade in and out but just as its about to fade i get to click the image. i then get this error

Firefox can't find the file at /C|/flashscripts/dmc_xmlSlideshowFade/undefined.
any idea why that is happening?

morgn
03-18-2010, 07:43 PM
Does anyone know how to pause between fading up the images? is there a wait function for this sort of thing?

Thanks,

Morgn.

pinging
04-02-2010, 10:41 AM
Hey everyone, thanks for the posts, learning lots today.

Everything works great for fading and randomness, but I would like it to be set so the images do not repeat, until they have all been displayed once. Any ideas on how this could be achieved?

Also I would like to setup a button overtop of the image so that if you click an image it moves to the next image in the set. Please help! :)
Thanks for any help on this one. Cheers!

:):thumbsup:

jeanlee411
04-15-2010, 02:10 AM
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?

__________________________
Watch Kick-*** Online Free (http://moviesonlinefree.biz/)
Watch Death At A Funeral Online Free (http://moviesonlinefree.biz/)

gnomeontherun
04-18-2010, 06:09 AM
Hey everyone, thanks for the posts, learning lots today.

Everything works great for fading and randomness, but I would like it to be set so the images do not repeat, until they have all been displayed once. Any ideas on how this could be achieved?

Also I would like to setup a button overtop of the image so that if you click an image it moves to the next image in the set. Please help! :)
Thanks for any help on this one. Cheers!

:):thumbsup:

You would need to set an array of slides. Copy it to a new array, shuffle it, then simply push a value off till its empty. If its empty, refill it from the main array and shuffle again.

gnomeontherun
04-18-2010, 03:16 PM
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?


That might be the issue, to be honest I haven't worked with this code in almost 2 years, and don't even program AS2 anymore. I think though, that tweening might have been different for that program version. http://192.150.8.60/devnet/flash/articles/tweening.html

It would be a great exercise to convert it to AS3.

fruitbeard
05-15-2010, 12:25 AM
Hi all, for you gnomeontherun!

any ides on how to make this code run through the images in order rather than randomly?


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()
}
}
}

Thanks in advance for looking

jackseone
05-28-2010, 07:02 AM
It depends on what you want to do with the data that is inside the XML file. If you have Microsoft Access, you can link to the XML file or import the XML data into a local Access table for review and/or manipulation.
Acai Ultra Lean (http://www.wellnessstarts.com/acai-ultra-lean-review.html)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum