-
seasoned newb ready to jump off a short pier sp
Im trying in my project here to make sliding thumbnails, in other words move your mouse left or right and the bar with the thumbnails rolls left or right and the farther it moves to each side the faster it goes. Perfect example is here:
http://flash-creations.com/notes/dyn...dingviewer.php
As, much as I try i only understand very little of the script. I took a flash class last semester and i need to implement this in a packaged piece. Can anybody help me how to do this? I'm a visual learner unfortunately, If you know of a smipler way to do this with less code? Could you possibly post a FLA file that i could look at while some kind hearted professional could help me understand this? I could desperately need the help.
Thanks so much! This board has saved my hiney multiple times. I value all your help as I am a young grasshopper on a long and treacherous (sp) journey. TY
-
FK's Geezer Mod
Look through the Movies link above. There are free to download fla files you can get to see how they are made. I've seen those in there before.
-
hey geezer, I checked the donwloads section above the page. I did not see the FLA for it. It only links to to the source code page i have linked. And the files on the bottom of the donwloads page they charge 20 bucks for me to look at. Am I missing something?
-
FK's Geezer Mod
The Movies link, in the blue bar above. It's on evey page of the forums. There are some of these scroller things in the Scripting section. I found one right off in the Scrolling sub-category here.
-
Busy doing nothing
I just added more comments to the code on that page for you:
/********* DECLARE AND INITIALIZE VARIABLES **************************/
// names of folder and pictures, in the order to put them into the slider
var picnames:Array = [
//change these names to be names of your photos in a folder called "flowers"
//they don't need ".jpg" extensions written here
"flower_orange",
"flower_blue",
"flower_pink",
"flower_red",
"flower_purple"
];
// constants
var PICPATH:String = "flowers/"; // folder with jpgs
var NPICS:Number = picnames.length; // number of pictures to load
var PICX:Number = 10; // x loc of big picture
var PICY:Number = 10; // y loc
var THUMBHOLDERX:Number = 0; // x location of thumbnail holder movieclip
var THUMBHOLDERY:Number = 240; // y location
var THUMBW:Number = 72; // width of each thumbnail
var THUMBH:Number = 40; // height
var MARGIN:Number = 10; // margin between thumbnails
var TOTALBYTES:Number = 212000; // 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 = 10; // start x location of mask
var MASKW:Number = 400; // mask width
var MASKY:Number = 230; // start y location of mask
var MASKH:Number = 60; // 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" refers to the movieClip inside thumbs_mc that was rolled over
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" refers to the movieClip inside thumbs_mc that was rolledOut
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() {
//"this" refers to thumbs_mc
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() {
//loads the image file into the large picture movieclip
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; //set the sliderControl function to happen when thumb_mc enters a frame
for (var i:Number = 0; i < NPICS*2; i++) {
//set functions to result when the movieclip inside thumbs_mc is rolledover, out, pressed
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 function is called for each movieclip made inside thumbs_mc
//after a picture has been loaded into it
//see last line of function init()
//_mc now refers to thumbs_mc.mcXXX
//as ipic increments the next picture will be loaded
// 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);
/*if currentpic num (ipic) is less than or equal to numofpics (NPICS) then
property i = ipic-Npics
if not (ipic is greater than npics) property i = 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++; //increment 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); //makes an empty movie clip instance name "pic_mc"
pic_mc._x = PICX; //sets the x position
pic_mc._y = PICY; // sets the y position
// create (and draw) holder for thumbnails
createEmptyMovieClip("thumbs_mc", 2); //makes an empty movie clip instance name "thumbs_mc"
//draws a rectangle filled with black
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; //repositions the movieclip
thumbs_mc._y = THUMBHOLDERY;
// create, draw and enable mask over thumbs (could use different variables to define mask
// if desired)
createEmptyMovieClip("mask_mc", 3); //makes an empty movieClip instance name "mask_mc"
//draws a rectangle filled
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; //reposition the clip
mask_mc._y = MASKY;
thumbs_mc.setMask(mask_mc); //set the clip mask_mc to be the mask of clip thumbs_mc
// create loading textfield indicator
createTextField("pct_txt", 4, 200, 100, 40, 100); //makes a text field instance name "pct_txt", sets its x, y pos and width and height
var tf:TextFormat = new TextFormat(); //create a new text format
//add settings to the text format (align center, font size 12, font verdana)
tf.align = "center";
tf.size = 12;
tf.font = "Verdana";
tf.color = 0xFFFF00;
pct_txt.setNewTextFormat(tf); //apply the text format to the text field
// 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++) {
//loop for 0 till number of pics to load x2
var mc:MovieClip = thumbs_mc.createEmptyMovieClip("mc"+i, i+1);
//make an empty movieclip instance name mcX (where x is a number)
//inside the thumbs_mc clip
mc._x = i*(MARGIN + THUMBW); //set clip position
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();
--------------------------------------------------
‘There is no emoticon to express how I am feeling’ - Comic Book Guy
There's an effective, simple solution to carbon sequestration... it's called 'coal', so leave it alone!
There's an effective, simple solution to carbon capture....it's called 'trees', so plant some!
-
Busy doing nothing
Just chuck the code into frame one of an empty movie and publish
Oh and put some images into a folder called "flowers" next to the swf and change the names of the image files in the array "picnames" at the top of the code, otherwise you'll get an error!
--------------------------------------------------
‘There is no emoticon to express how I am feeling’ - Comic Book Guy
There's an effective, simple solution to carbon sequestration... it's called 'coal', so leave it alone!
There's an effective, simple solution to carbon capture....it's called 'trees', so plant some!
-
Originally Posted by Ask The Geezer
The Movies link, in the blue bar above. It's on evey page of the forums. There are some of these scroller things in the Scripting section. I found one right off in the Scrolling sub-category here.
ahhh, i thought you were refering to the link i had provided lol. I will try all the methods here and let everybody know what happens. If I get stuck ill continue to post.
Thanks
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|