Skip to main content
P
pantelis224466
Known Participant
October 18, 2011
Answered

Add next and previous button in xml as2 slideshow

  • October 18, 2011
  • 1 reply
  • 1631 views

Hi there.

I started a tutorial about creating a flash slideshow. This is the as2 code:

import mx.transitions.Tween;

import mx.transitions.easing.*;

var myShowXML = new XML();

myShowXML.ignoreWhite = true;

myShowXML.load("slideshow.xml");

myShowXML.onLoad = function() {

_root.myWidth = myShowXML.firstChild.attributes.width;

_root.myHeight = myShowXML.firstChild.attributes.height;

_root.mySpeed = myShowXML.firstChild.attributes.speed;

_root.myImages = myShowXML.firstChild.childNodes;

_root.myImagesNo = myImages.length;

total = myShowXML.childNodes.length;

createContainer();

callImages();

};

function createContainer() {

_root.createEmptyMovieClip("myContainer_mc",_root.getNextHighestDepth());

myContainer_mc.lineTo(_root.myWidth,_root.myHeight);

myContainer_mc._x = (Stage.width-myContainer_mc._width)/2;

myContainer_mc._y = (Stage.height-myContainer_mc._height)/2;

}

function callImages() {

_root.myMCL = new MovieClipLoader();

_root.myPreloader = new Object();

_root.myMCL.addListener(_root.myPreloader);

_root.myClips_array = [];

_root.myPreloader.onLoadStart = function(target) {

_root.createTextField("myText_txt",_root.getNextHighestDepth(),0,0,100,20);

_root.myText_txt._x = (Stage.width-_root.myText_txt._width)/2;

_root.myText_txt._y = (Stage.height-_root.myText_txt._height)/1.08;

_root.myText_txt.autoSize = "center";

};

_root.myPreloader.onLoadProgress = function(target){

_root.myText_txt.text = "Loading.. "+_root.myClips_array.length+"/"+_root.myImagesNo+" Completed";

}

_root.myPreloader.onLoadComplete = function(target) {

_root.myClips_array.push(target);

target._alpha=0;

if (_root.myClips_array.length == _root.myImagesNo) {

myText_txt._alpha=0;

moveSlide();

myShowInt = setInterval(moveSlide, (_root.mySpeed*1000)+1000);

}

}

for (i=0; i<_root.myImagesNo; i++) {

temp_url = _root.myImages.attributes.url;

temp_mc = myContainer_mc.createEmptyMovieClip(i, myContainer_mc.getNextHighestDepth());

_root.myMCL.loadClip(temp_url,temp_mc);

}

}

function moveSlide() {

current_mc = _root.myClips_array[_root.target_mc];

new Tween(current_mc, "_alpha", Strong.easeOut, 100, 0, 1, true);

_root.target_mc++;

if (_root.target_mc>=_root.myImagesNo) {

_root.target_mc = 0;

}

next_mc = _root.myClips_array[_root.target_mc];

new Tween(next_mc, "_alpha", Strong.easeOut, 0, 100, 1, true);

}

//I have created 2 buttons - NEXT with instance name:next_btn and PREV

//with instance name:prev_btn and these are the on(release) functions:   

previous_btn.onRelease = function() {

prevImage();

};

next_btn.onRelease = function() {

nextImage();

};

The images load from xml file and change through moveSlide function.

And now i need to create those 2 new functions in order to give the user the opportunity to change the images by him/herself.

I found somewhere a piece of code about this kind of functions:

p = 0;

function nextImage() {

    if (p<(total-1)) {

        p++;

        if (loaded == filesize) {

        picture._alpha = 0;

        picture.loadMovie(image

, 1);

        picture_num();

        }

    }

}

function prevImage() {

if (p>0) {

p--;

picture._alpha = 0;

picture.loadMovie(image

, 1);

picture_num();

}

}

function picture_num() {

current_pos = p+1;

pos_txt.text = current_pos+" / "+total;

}

The link i got these functions is this:

http://kirupa.com/developer/mx2004/xml_flash_photogallery.htm

How can i adjust these functions to my slideshow?

P.S. Sorry, but i am not an as2 expert but any help is welcomed.

Thanks in advance

This topic has been closed for replies.
Correct answer kglad

my error.  use:

var nextBool:Boolean = true;

function moveSlide() {

current_mc = _root.myClips_array[_root.target_mc];

new Tween(current_mc, "_alpha", Strong.easeOut, 100, 0, 1, true);

if(nextBool){

_root.target_mc=(_root.target_mc+1)%_root.myImagesNo;

} else {

_root.target_mc=(_root.target_mc+_root.myImagesNo-1)%_root.myImagesNo;

}

next_mc = _root.myClips_array[_root.target_mc];

new Tween(next_mc, "_alpha", Strong.easeOut, 0, 100, 1, true);

}

previous_btn.onRelease = function() {

clearInterval(myShowInt);

myShowInt = setInterval(moveSlide, (_root.mySpeed*1000)+1000);

nextBool=false;

moveSlide();

nextBool=true;

};

next_btn.onRelease = function() {

clearInterval(myShowInt);

myShowInt = setInterval(moveSlide, (_root.mySpeed*1000)+1000);

moveSlide();

};

p.s.  if you're using movieclip buttons use swapDepths() to move them above your slide.  if they're simple buttons i think you can use swapDepths after defining it:

Button.prototype.swapDepths=MovieClip.prototype.swapDepths;

1 reply

kglad
Community Expert
kgladCommunity Expert
Community Expert
October 19, 2011

:

import mx.transitions.Tween;

import mx.transitions.easing.*;

var myShowXML = new XML();

myShowXML.ignoreWhite = true;

myShowXML.load("slideshow.xml");

myShowXML.onLoad = function() {

_root.myWidth = myShowXML.firstChild.attributes.width;

_root.myHeight = myShowXML.firstChild.attributes.height;

_root.mySpeed = myShowXML.firstChild.attributes.speed;

_root.myImages = myShowXML.firstChild.childNodes;

_root.myImagesNo = myImages.length;

total = myShowXML.childNodes.length;

createContainer();

callImages();

};

function createContainer() {

_root.createEmptyMovieClip("myContainer_mc",_root.getNextHighestDepth( ));

myContainer_mc.lineTo(_root.myWidth,_root.myHeight);

myContainer_mc._x = (Stage.width-myContainer_mc._width)/2;

myContainer_mc._y = (Stage.height-myContainer_mc._height)/2;

}

function callImages() {

_root.myMCL = new MovieClipLoader();

_root.myPreloader = new Object();

_root.myMCL.addListener(_root.myPreloader);

_root.myClips_array = [];

_root.myPreloader.onLoadStart = function(target) {

_root.createTextField("myText_txt",_root.getNextHighestDepth(),0,0,100 ,20);

_root.myText_txt._x = (Stage.width-_root.myText_txt._width)/2;

_root.myText_txt._y = (Stage.height-_root.myText_txt._height)/1.08;

_root.myText_txt.autoSize = "center";

};

_root.myPreloader.onLoadProgress = function(target){

_root.myText_txt.text = "Loading.. "+_root.myClips_array.length+"/"+_root.myImagesNo+" Completed";

}

_root.myPreloader.onLoadComplete = function(target) {

_root.myClips_array.push(target);

target._alpha=0;

if (_root.myClips_array.length == _root.myImagesNo) {

myText_txt._alpha=0;

moveSlide();

myShowInt = setInterval(moveSlide, (_root.mySpeed*1000)+1000);

}

}

for (i=0; i<_root.myImagesNo; i++) {

temp_url = _root.myImages.attributes.url;

temp_mc = myContainer_mc.createEmptyMovieClip(i, myContainer_mc.getNextHighestDepth());

_root.myMCL.loadClip(temp_url,temp_mc);

}

}

function moveSlide() {

current_mc = _root.myClips_array[_root.target_mc];

new Tween(current_mc, "_alpha", Strong.easeOut, 100, 0, 1, true);

_root.target_mc++;

if (_root.target_mc>=_root.myImagesNo) {

_root.target_mc = 0;

}

next_mc = _root.myClips_array[_root.target_mc];

new Tween(next_mc, "_alpha", Strong.easeOut, 0, 100, 1, true);

}

//I have created 2 buttons - NEXT with instance name:next_btn and PREV

//with instance name:prev_btn and these are the on(release) functions:   

previous_btn.onRelease = function() {

_root.target_mc=Math.max(-1,_root.target_mc-2);

clearInterval(myShowInt);

myShowInt = setInterval(moveSlide, (_root.mySpeed*1000)+1000);

moveSlide();

};

next_btn.onRelease = function() {

clearInterval(myShowInt);

myShowInt = setInterval(moveSlide, (_root.mySpeed*1000)+1000);
moveSlide();

};

P
pantelis224466Author
Known Participant
October 22, 2011

Hi there.

Thank you very much for your reply. I used the code for the onRelase functions you suggested and i get this result:

The gallery starts playing. If i push next button then i move to the next slide and if i wait a bti then the slide continuous (Ok)

If i click previous button then nothing happens and the slide stops. If then, i click next i get a quick view of the next pic and then back to current pic. (Like the previous button has a kind of problem)

Any ideas?

P.S. Also, how can i make these buttons show at front of the image slideshow and not hiding behind the images?(I have placed the buttons at top layer but nothing happens.)

kglad
Community Expert
kgladCommunity ExpertCorrect answer
Community Expert
October 22, 2011

my error.  use:

var nextBool:Boolean = true;

function moveSlide() {

current_mc = _root.myClips_array[_root.target_mc];

new Tween(current_mc, "_alpha", Strong.easeOut, 100, 0, 1, true);

if(nextBool){

_root.target_mc=(_root.target_mc+1)%_root.myImagesNo;

} else {

_root.target_mc=(_root.target_mc+_root.myImagesNo-1)%_root.myImagesNo;

}

next_mc = _root.myClips_array[_root.target_mc];

new Tween(next_mc, "_alpha", Strong.easeOut, 0, 100, 1, true);

}

previous_btn.onRelease = function() {

clearInterval(myShowInt);

myShowInt = setInterval(moveSlide, (_root.mySpeed*1000)+1000);

nextBool=false;

moveSlide();

nextBool=true;

};

next_btn.onRelease = function() {

clearInterval(myShowInt);

myShowInt = setInterval(moveSlide, (_root.mySpeed*1000)+1000);

moveSlide();

};

p.s.  if you're using movieclip buttons use swapDepths() to move them above your slide.  if they're simple buttons i think you can use swapDepths after defining it:

Button.prototype.swapDepths=MovieClip.prototype.swapDepths;

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