cool sliding viewer works, but one problem, whats the path? 2

[whoknows361]

hello all. I have been utilizing a really cool photo slider/viewer & have spent some time digesting the actionscript. I got the viewer from

http://flash-creations.com/notes/dynamic_slidingviewer.php

Here is the code:
//begin pic code//
/********* DECLARE AND INITIALIZE VARIABLES **************************/
// names of folder and pictures, in the order to put them into the slider
var picnames:Array = [
"1",
"2",
"3",
"4",
"5"
];

// constants
var PICPATH:String = "albums/"; // folder with jpgs
var NPICS:Number = 5; // number of pictures to load
var PICX:Number = 88.5; // x loc of big picture
var PICY:Number = 58; // y loc
var THUMBHOLDERX:Number = 0; // x location of thumbnail holder movieclip
var THUMBHOLDERY:Number = 416.9; // y location
var THUMBW:Number = 101; // width of each thumbnail
var THUMBH:Number = 61; // height
var MARGIN:Number = 15; // margin between thumbnails
var TOTALBYTES:Number = 6840; // approx sum of bytes in all jpgs (x 2)
var MAXPIXELS:Number = 12; // max number of pixels to move slider per frame

// mask definition; mask is assumed to cover some part of the thumbnail slider (here the numbers
// were chosen so that there are margins between the mask and the right and left edges of the movie
// (which is 420 x 290), and enough space above and below the thumbs to show them when they 'grow'
// on mouseover
var MASKX:Number = 7.5; // start x location of mask
var MASKW:Number = 673; // mask width
var MASKY:Number = 411.9; // start y location of mask
var MASKH:Number = 72; // mask height

var totalloaded:Number = 0; // running tally of bytes loaded from all pics

// index into pictures array, used for loading
var ipic:Number;

// set up loader, an instance of MovieClipLoader
var loader:MovieClipLoader = new MovieClipLoader();

// use the main timeline to listen to and respond to loader's broadcast events
loader.addListener(this);

/********* DEFINE FUNCTIONS, INCLUDING INIT FOR MOVIE SETUP **********/
// thumbnail rollover handler

function grow() {
this.onEnterFrame = function() {
if (this._width < THUMBW * 1.2) {
this._x -= this._width * .025;
this._y -= this._height * .025;
this._width *= 1.05;
this._height *= 1.05;
} else delete this.onEnterFrame;
};
}

// thumbnail rollout handler

function shrink() {
this.onEnterFrame = function() {
if (this._width > THUMBW) {
this._width /= 1.05;
this._height /= 1.05;
this._x += this._width * .025;
this._y += this._height * .025;
} else delete this.onEnterFrame;
};
}

// function to move thumbnail slider ("this" = thumbs_mc)

function sliderControl() {
var w:Number = this._width/2;
var hw:Number = mask_mc._width/2;
var npixels:Number;
// only do when mouse over slider mask
if (_ymouse > mask_mc._y && _ymouse < mask_mc._y + mask_mc._height) {
// mouse over left half of slider:
if (_xmouse > mask_mc._x && _xmouse < mask_mc._x + hw) {
npixels = (hw - _xmouse) / hw * MAXPIXELS;
this._x += npixels;
if (this._x >= 0) this._x = this._x - w;
// mouse over right half of slider:
} else if (_xmouse > mask_mc._x + hw && _xmouse < mask_mc._x + mask_mc._width) {
npixels = (_xmouse - hw) / hw * MAXPIXELS;
this._x -= npixels;
if (this._x <= -w) this._x = this._x + w;
}
}
}

// thumbnail click (onrelease) handler

function openPic() {
pic_mc.loadMovie(PICPATH + picnames[this.i] + ".jpg");
}

// assign event handlers (called when all jpgs are loaded)

function setupHandlers() {
pct_txt.removeTextField(); // don't need loading indicator any more
thumbs_mc.onEnterFrame = sliderControl;
for (var i:Number = 0; i < NPICS*2; i++) {
thumbs_mc["mc"+i].onRollOver = grow;
thumbs_mc["mc"+i].onRollOut = shrink;
thumbs_mc["mc"+i].onRelease = openPic;
}
}

// listener function for broadcast 'done' message (for each pic)
// onLoadInit gets executed when the movieclip has been loaded into _mc AND
// its width and height data are available.
// (_mc = the movieclip being loaded into)
// this routine sets the size and position of each thumbnail clip as its jpg
// is loaded and starts the next one loading. When all have been loaded,
// a random picture is loaded into pic_mc and setupHandlers is called to
// assign handlers to each thumbnail movieclip

function onLoadInit(_mc:MovieClip) {
// this gets done when the jpg is completely loaded:
_mc._width = THUMBW;
_mc._height = THUMBH;
_mc._alpha = 99; // for image clarity
// give the movieclip a property to remind it who it is
// (used by openPic to know which big picture to open)
_mc.i = (ipic >= NPICS ? ipic-NPICS : ipic);

// add picture size to totalloaded variable
totalloaded += loader.getProgress(_mc).bytesTotal;

// now load the next one (if there are more) or set up handlers if done
ipic++;
if (ipic == NPICS * 2) {
// start with a random photo displayed when all thumbs loaded
pic_mc.loadMovie(PICPATH + picnames[Math.floor(Math.random()*NPICS)] + ".jpg");
setupHandlers();
} else if (ipic >= NPICS) {
// load jpg into duplicate thumbnail (will already be cached)
loader.loadClip(PICPATH + picnames[ipic-NPICS] + ".jpg", thumbs_mc["mc"+ipic]);
} else {
// load jpg into thumbnail
loader.loadClip(PICPATH + picnames[ipic] + ".jpg", thumbs_mc["mc"+ipic]);
}
}

// listener function to handle broadcast progress messages
// make pct_txt show cumulative loading progress

function onLoadProgress(_mc:MovieClip, loaded:Number) {
var loadedsofar:Number = totalloaded + loaded;
pct_txt.text = Math.floor(loadedsofar / TOTALBYTES * 100) + "%";
}

function init() {
// create holder for pictures
createEmptyMovieClip("pic_mc", 1);
pic_mc._x = PICX;
pic_mc._y = PICY;

// create (and draw) holder for thumbnails
createEmptyMovieClip("thumbs_mc", 2);
thumbs_mc.beginFill(0, 100); // black
thumbs_mc.moveTo(0, 0);
thumbs_mc.lineTo(2 * (MARGIN + THUMBW) * NPICS, 0);
thumbs_mc.lineTo(2 * (MARGIN + THUMBW) * NPICS, THUMBH);
thumbs_mc.lineTo(0, THUMBH);
thumbs_mc.endFill();
// drawing the thumb holder at 0, 0 and then moving it makes its reg point = upper left
thumbs_mc._x = THUMBHOLDERX;
thumbs_mc._y = THUMBHOLDERY;

// create, draw and enable mask over thumbs (could use different variables to define mask
// if desired)
createEmptyMovieClip("mask_mc", 3);
mask_mc.beginFill(0x0000cc, 100);
mask_mc.moveTo(0, 0);
mask_mc.lineTo(MASKW, 0);
mask_mc.lineTo(MASKW, MASKH);
mask_mc.lineTo(0, MASKH);
mask_mc.endFill();
mask_mc._x = MASKX;
mask_mc._y = MASKY;
thumbs_mc.setMask(mask_mc);

// create loading textfield indicator
createTextField("pct_txt", 4, 200, 100, 40, 100);
var tf:TextFormat = new TextFormat();
tf.align = "center";
tf.size = 12;
tf.font = "Verdana";
tf.color = 0xFFFF00;
pct_txt.setNewTextFormat(tf);

// make empty movieclips in thumbs_mc for each pic to go into
// make double the number so the slider can move continuously and show content
for (var i:Number = 0; i < NPICS * 2; i++) {
var mc:MovieClip = thumbs_mc.createEmptyMovieClip("mc"+i, i+1);
mc._x = i*(MARGIN + THUMBW);
mc._y = 0;
}

// set the pointer to the first jpg in the array picnames
ipic = 0;
// start loading jpgs (ipic is initialized to 0)
loader.loadClip(PICPATH + picnames[ipic] + ".jpg", thumbs_mc["mc"+ipic]);
}

/********* CALL THE INIT FUNCTION TO START THE MOVIE *****************/
init();


It is pretty awesome. But I want a dynamic textbox on the stage & have it contain some text dependent on which thumbnail is clicked. I know the answer is in here, but I don't understand some of the more complex pieces of this code. I would really appreciate any illumination as I have been trying so many things for some time, but nothing seems to work. Thanks

Jonathan

 

[kennethkawamoto]

First you have to decide where to store the texts. Normally it would be an XML file, but it can be hard-coded in the script if it needs to be. In either way, create an Array populated with texts, then pick and display accordingly when "openPic()" is fired.

Kenneth Kawamoto

http://www.materiaprima.co.uk

 

[whoknows361]

Hey Kenneth, thanks for replying. A quick clarification. I see that I can make an array populated with texts, but it is the:

"then pick and display accordingly..." is my question.

I don't see in the slider code how the slider knows which pic to display, or in other words, which mini pic was clicked on to display as a larger one.

How would I code, lets say when the thumbnail pic "1.jpg" is clicked on that "1.txt" would display in dynamic textbox "dyn_tb"?

thanks again KK

 

[oldnewbie]

function openPic() {
pic_mc.loadMovie(PICPATH + picnames[this.i] + ".jpg");
}
...
// assign event handlers (called when all jpgs are loaded)

function setupHandlers() {
pct_txt.removeTextField(); // don't need loading indicator any more
thumbs_mc.onEnterFrame = sliderControl;
for (var i:Number = 0; i < NPICS*2; i++) {
thumbs_mc["mc"+i].onRollOver = grow;
thumbs_mc["mc"+i].onRollOut = shrink;
thumbs_mc["mc"+i].onRelease = openPic;
}
}
...

The above is where the thumbnails receive their onRelease handlers, which is in fact a call to the openPic function...

function openPic() {
pic_mc.loadMovie(PICPATH + picnames[this.i] + ".jpg");
}

Thus you could set your text in the textfield within that function...



Regards. Web Hosting - Web Design
03/13/05 -> OLDNEWBIE VS FLASHKIT

 

[kennethkawamoto]

Just to elaborate old's post:

1. Create an Array for the texts

var pictexts:Array = ["Text for pic 1", "Text for pic 2", "Text for pic 3", "Text for pic 4", "Text for pic 5"];

2. Display the text according to the pic

function openPic() {
   pic_mc.loadMovie(PICPATH + picnames[this.i] + ".jpg");
   [b]dyn_tb.text = pictexts[this.i];[/b]
}

Something along these lines.


Kenneth Kawamoto

http://www.materiaprima.co.uk

 

[whoknows361]

thank you both for your help - this is exactly what I needed - thanks for the "dumb down" explanation kenneth - as I have little experience w/ using arrays - I am getting better each time you all provide me with a little explanation of code & will pass to others on this & other forums.

Jonathan