Skip to main content
Participant
December 17, 2010
Answered

Slideshow has pics and texts out of sync

  • December 17, 2010
  • 1 reply
  • 417 views

Hi - just starting AS and tried making a slide show for sponsors of our sports site.  Basically it reads an XML file that contains the sponsors logos and blurbs loads them into MCs and slides them rotating.  The XML has 14 entries that are like ...

<slideshow width="150" height="150" speed="10">
<image url="sponsors/PlayItAgainSports150.jpg" title="Play It Again Sports"/>
<image url="sponsors/laidlaw.png" title="Planning and Investments"/>
....
<image url="sponsors/gorham.png" title="Construction/Remodelling"/>
</slideshow>

My Problem is that when the webpage loads and the slideshow rotates and sometimes the titles and pages don't mesh.  The title for one doesn't go with the logo.  It only seems to happen when its on the webpage, not in my Flash Devel prog.  Can it be a problem downloading the 25-50KB files?  Can anyone look at the code and see if I'm doing anything glaringly wrong.

import mx.transitions.Tween;
import mx.transitions.easing.*;
import ascb.util.NumberUtilities;

var myShowXML = new XML();
myShowXML.ignoreWhite = true;
//myShowXML.load("sponsors/slideshow.xml");
myShowXML.load("slideshow.xml");

myShowXML.onLoad = function() {
    trace("In onLoad");
    _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;

    createContainer();
    callImages();
};

function createContainer() {
    trace("In createContainer");
    _root.createEmptyMovieClip("myContainer_mc",_root.getNextHighestDepth ());

    myContainer_mc.lineStyle(5,0x000000,100);
    myContainer_mc.lineTo(_root.myWidth,0);
    myContainer_mc.lineTo(_root.myWidth,_root.myHeight);
    myContainer_mc.lineTo(0,_root.myHeight);
    myContainer_mc.lineTo(0,0);

    myContainer_mc._x = (Stage.width-myContainer_mc._width)/2 + 2;
    myContainer_mc._y = (Stage.height-myContainer_mc._height)/2 - 10;
    trace("Leaving createContainer")
}

function callImages() {
    trace("In callImages");
    _root.myMCL = new MovieClipLoader();
    _root.myPreloader = new Object();
    _root.myMCL.addListener(_root.myPreloader);

trace("Setting cips array");
    _root.myClips_array = [];

    _root.myPreloader.onLoadStart = function(target) {
        _root.createTextField("myText_txt",_root.getNextHighestDepth(),0,0,10 0,20);
        _root.myText_txt._x = (Stage.width-_root.myText_txt._width)/2;
        _root.mtText_txt._y = (Stage.height-_root.myText_txt._height)/2;
        _root.myText_txt.autoSize = "center";
        //_root.myText_txt.autoSize = TextFieldAutoSize.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;
       
        trace ("outside if");
        if (_root.myClips_array.length == _root.myImagesNo) {
            _root.myText_txt._y = myContainer_mc._y+myContainer_mc._height;
            trace("In if");
            i = Math.random();
            i = int(i * _root.myImagesNo);
            trace("I is " + i + "# is " + _root.myImagesNo);
            _root.target_mc = i;
            moveSlide();
            myShowInt = setInterval(moveSlide, (_root.mySpeed*1000)+1000);
        }
      
    };
   
    //current_mc.addEventListener(MouseEvent.CLICK, onClick);
   
trace("Getting Images with "+_root.myImagesNo);
    for (i=0; i<_root.myImagesNo; i++) {
        trace("Image #"+i+" with URL:"+_root.myImages.attributes.url);
        temp_url = _root.myImages.attributes.url;
        temp_mc = myContainer_mc.createEmptyMovieClip(i, myContainer_mc.getNextHighestDepth());

        _root.myMCL.loadClip(temp_url,temp_mc);
    }
}

function onClick() {
    trace ("In click");
    getURL(_root.myImages[target_mc].attributes.address);
}

function moveSlide() {
    trace("In slide");
    current_mc = _root.myClips_array[_root.target_mc];
    trace("target_mc is " + _root.target_mc);
    new Tween(current_mc, "_alpha", Strong.easeOut, 100, 0, 1, true);
    _root.target_mc++;
    trace("new target_mc is " + _root.target_mc);

    if (_root.target_mc>=_root.myImagesNo) {
        _root.target_mc = 0;
    }

    _root.myText_txt.text = _root.myImages[target_mc].attributes.title;
    //_root.myText_txt.width = 50;
    var txtFormat:TextFormat = new TextFormat();
    txtFormat.font = "Helvetica";
    txtFormat.color = 0xCC0000;
    txtFormat.bold = true;
    txtFormat.url = "http://www.cnn.com";
       
    _root.myText_txt.setTextFormat(txtFormat);
    trace("Type is "+_root.myImages[target_mc].attributes.type+" with "+_root.myImages[target_mc].attributes.address);
    next_mc = _root.myClips_array[_root.target_mc];
    next_mc.go
    new Tween(next_mc, "_alpha", Strong.easeOut, 0, 100, 1, true);
}


Thanks

Kevin

This topic has been closed for replies.
Correct answer kglad

that's usually caused by an asynchronous operation like loading images in a for-loop and expecting them to complete loading in the same order in which they started loading (in the for loop).

1 reply

kglad
Community Expert
kgladCommunity ExpertCorrect answer
Community Expert
December 17, 2010

that's usually caused by an asynchronous operation like loading images in a for-loop and expecting them to complete loading in the same order in which they started loading (in the for loop).

kam5FCCAuthor
Participant
December 22, 2010

So how could I go about pre-loading the pics as the predecessors are being shown?

Thanks,

Kevin

kglad
Community Expert
Community Expert
December 22, 2010

you can load your images sequentially:

_root.myPreloader.onLoadComplete = function(target) {
        _root.myClips_array.push(target);
        // do whatever the loadIndex-th image loaded
        loadIndex++;
        if(loadIndex<_root.myImagesNo){
            loadF();
        }
    };
    loadIndex=0;
    //current_mc.addEventListener(MouseEvent.CLICK, onClick);
}
function loadF(){

        temp_url = _root.myImages[loadIndex].attributes.url;
        temp_mc = myContainer_mc.createEmptyMovieClip(loadIndex, myContainer_mc.getNextHighestDepth());

        _root.myMCL.loadClip(temp_url,temp_mc);
   
}