Welcome to WebmasterWorld Guest from 54.145.246.183

Forum Moderators: open

Events in Flash Slideshow

   
2:36 pm on Jul 10, 2008 (gmt 0)

5+ Year Member



How to add events for a flash slideshow, each frame should point to a different url

I tried it once. it works only if all the slides have a keyframe in the 1st frame ; If the keyframe appears in the other frames , the click doesnt work

6:27 pm on Jul 10, 2008 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Roughly, here is what I do with this. You can use this or extrapolate why mine is working and yours doesn't. Off hand, if all your script is in Frame 1, it could be that frame 1 problem with Flash (Google it).

I use an XML file to import the "image list" for the slide show. So each line of the XML has attributes for image, caption, and URL:


<?xml version="1.0" encoding="ISO-8859-1"?>
<imageData>
<image src="/images/flash/pic1.jpg" url="http://www.example.com" caption="Caption 1"/>
<image src="/images/flash/pic2.jpg" url="/cgi-bin/some_other_url.html" caption="Caption 2"/>
</imageData>

You have a movie preloader at the beginning, then each image fades out with a slight delay and you will get "loading next image" with a preload bar again, then the next image fades in. Sometimes you'll only see the image loader on a slow day.

I use this method on several sites. All you have to do once it's working is upload images and add them to the XML file.

Six objects require creation, and set as symbols with "Export for Action Script":

- preloadBar - your preload progress bar movie.
- loadertext - movie symbol, the initial text box for preload, "loading movie"
- loadingimage - movie symbol with the text "loading next image . . . " for each image preload
- preloadPicLabel - movie (text box) symbol for the caption
- preloadBox - the movie symbol representing the box holding the picture
- picButton - the clickable button symbol on top of all other objects that responds to the click.

Frame 1: Load the XML data info three arrays: images, urls, and captions.


//==== COFIGURE ACCORDINGLY ========== //
var numFadeRate = 5;
var fadeInterval:Number = 20;
var home:String = 'http://www.example.com';
var xmlSource = "/data/your-xml-file.xml";
var xmlLoaded:Boolean = (xmlLoaded==true)?true:false;
var recordNumber:Number = 0;
var autoTimer:Number = 5000;
var intervalId:Number = 0;
var fv:Number = 0;
var fo:Number = 0;
var imageLoaded:Number = 0;
var Lbytes:Number = 0;
var Tbytes:Number = 0;
var pl_width:Number = _root.preLoadBar._width;
var images:Array = new Array();
var captions:Array = new Array();
var urls:Array = new Array();
var xmlObject:XML = new XML();
xmlObject.ignoreWhite = true;
xmlObject.load(xmlSource);
_root.picBox._alpha = 0;
_root.loadingimage._alpha = 0;
_root.loadertext._alpha = 50;
_root.preLoadBar._alpha = 50;


// Load up the images, urls, and captions array.
xmlObject.onLoad = function () {
var imageData:Array =this.firstChild.childNodes;
for (i = 0; i < imageData.length; i++){
images[i]=imageData[i].attributes.src;
urls[i]=imageData[i].attributes.url;
captions[i]=imageData[i].attributes.caption;
}
xmlLoaded = true;
}

Frame 2: Preloader. Note the references to my preloader movie (preloadBar).


if (xmlLoaded && (_framesloaded>=_totalframes)) {
preLoadBar._alpha=0;
loadertext._alpha=0;
gotoAndStop(4);
}
else {
Lbytes = getBytesLoaded();
Tbytes = getBytesTotal();
preLoadBar._width = (percent > 100)?pl_width:(Lbytes/Tbytes)*pl_width;
}

Frame 3: if framesloaded does not equal _totalframes, send it back to frame 2.
gotoAndPlay(2);

Frame 4: Do the image swap. Note that this one has a fade in/fade out.


swapImage();


function swapImage () {
_root.picBox._alpha = 0;
preloadImage(recordNumber);
_root.loadingimage._alpha=50;
_root.preLoadBar._width=1;
_root.preLoadBar._alpha=50;
}


function fadeIn() {
if (_root.picBox._alpha < 100) {
_root.picBox._alpha = (_root.picBox._alpha>100)?100:_root.picBox._alpha+numFadeRate;
_root.picLabel._alpha = (_root.picLabel._alpha>100)?100:_root.picLabel._alpha+numFadeRate;
}
else { clearInterval(fv); }
}


function fadeSequence () {
fo = setInterval(fadeOut,fadeInterval);
recordNumber = ((recordNumber+1) >= images.length)?0:recordNumber+1;
}


function fadeOut() {
if (_root.picBox._alpha > 0) {
_root.picBox._alpha = (_root.picBox._alpha<0)?0:_root.picBox._alpha-numFadeRate;
_root.picLabel._alpha = (_root.picLabel._alpha<0)?0:_root.picLabel._alpha-numFadeRate;
}
else { clearInterval(fo); swapImage(); }
}


function preloadImage (num) {
var tmp:MovieClip = _root.picBox;
var mcLoader:MovieClipLoader = new MovieClipLoader();
var imgListener:Object = new Object();
imgListener.onLoadComplete = function (tmp:MovieClip) {
fv = setInterval(fadeIn,fadeInterval);
clearInterval(intervalId);
intervalId = setInterval(fadeSequence,autoTimer);
_root.loadingimage._alpha=0;
_root.preLoadBar._alpha=0;
_root.picLabel.text = captions[recordNumber];
_root.picButton.onRelease = function() { getURL(urls[recordNumber]); }
}
imgListener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void {
preLoadBar._width =
((bytesLoaded/bytesTotal)*pl_width >
pl_width)?pl_width:(bytesLoaded/bytesTotal)*pl_width;
// Previous statement should be ALL ON ONE LINE
// returns added here for this message board
}
mcLoader.addListener(imgListener);
var test:String=home+"/"+images[num];
mcLoader.loadClip(test, "picBox");
}

[edited by: eelixduppy at 5:56 pm (utc) on July 16, 2008]
[edit reason] disabled smileys [/edit]

12:56 am on Jul 11, 2008 (gmt 0)

5+ Year Member



thk u rocky
 

Featured Threads

Hot Threads This Week

Hot Threads This Month