Tracking Forums, Newsgroups, Maling Lists
Home Scripts Tutorials Tracker Forums
  Advanced Search
  HOME    TRACKER    Flash




Thumbnail Scroller Help



I have this attached script that works with an xml and external images, and I am trying to make the automatic scrolling smooth. Right now it is at an odd interval with bad easing. I want to make it scroll smoothly without any breaks.

You will see when you check out the file...It is in CS3

If you have any advice to how this would work better, I would appreciate it.



FlashKit > Flash Help > Flash ActionScript
Posted on: 04-28-2008, 10:46 AM


View Complete Forum Thread with Replies

See Related Forum Messages: Follow the Links Below to View Complete Thread

Thumbnail Scroller With Titles For Each Thumbnail
I've got a tutorial from kirupa (http://www.kirupa.com/developer/mx2004/thumbnails.htm)

what i'm trying to do is give ech thumbnail a title below its image but i cant manage to do it. I think I know hat i need to do, that is assign/createe a dynamic text field within the image_mc and assign the title from the array at the beginning. But i cant seem to get it to work

i can do it if i just put a text field on the main time line but then this is only the title for one

heres the code for the thumbnails:


Code:
function thumbnails_fn(k) {

thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
tlistener = new Object();
tlistener.onLoadInit = function(target_mc) {

target_mc._x = hit_left._x+(eval("thumbnail_mc.t"+k)._width+5)*k;
target_mc.pictureValue = k;
target_mc.onRelease = function() {

p = this.pictureValue-1;
nextImage();

};
target_mc.onRollOver = function() {

this._alpha = 50;
thumbNailScroller();

};
target_mc.onRollOut = function() {

this._alpha = 100;

};

};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);

}
can any one help?

Much appreciated

Thumbnail Scroller With Titles For Each Thumbnail
I'm trying to modify the Gallery with a thumbnail scroller thats on here.

What I want to do is add it so that each thumbnail has a title below it as well.

Does anyone know if this has been covered anywhere? i@ve spent the weekend searching google and here and i'm at my wits end now..

Any help or pointers much appreciated.

Cheers in advance

Thumbnail Scroller With Titles For Each Thumbnail
http://www.kirupa.com/forum/showthre...46#post1983146

can anyone help?

Thumbnail Scroller
Hello,
I have been trying to mimick the scrolling action from the site
http://www.flashlevel.com for ages now, but have had no luck getting it so smooth or acurate.

Does anyone know how they did the code on the thumb nail scollers on their site.


Thanks.

Thumbnail Scroller
i have a MC called 'thumbs' that is supposed to scroll thumbnails / buttons vertically according to the mouses position, but it only goes down.

this is my script:

code:
panel.onRollOver = panelOver;

function panelOver() {
this.onEnterFrame = scrollPanel;
delete this.onRollOver;
}

var b = stroke.getBounds(this);

function scrollPanel() {
if(_ymouse<b.yMin || _ymouse>b.yMax || _xmouse<b.xMin || _xmouse>b.xMax) {
this.onRollOver = panelOver;
delete this.onEnterFrame;
}

if(panel._y >= 20) {
panel._y = 20;
}

if(panel._y <= -1697.0) {
panel._y = -1697.0;
}

var ydist = _ymouse - -250;

panel._y += -ydist / 100;
}


i think this is the problem in the script above:
code:
function panelOver() {
this.onEnterFrame = scrollPanel;
delete this.onRollOver;
}


how can i fix this?
any help would be great!

thanks!
austin

Thumbnail Scroller
hello.. do you have an idea how to create the thumbnail scroller like this. http://www.fourseasons.com/losangeles/photo_gallery/

thnks in advance

MX: Thumbnail Scroller
I have a scroller that scrolls my panel based on the cordinates of my mouse. I also have a nav on the side that need to controll the panels location as well.
Issue:
The scroller is still checking where my mouse is even outside the the masked area so when I rollover the secondary nav and it moves the panel and then once I rollout the scroller slide the panel back baased on my mouses location.

here is my script.

Code:
///////////////////////////////////////
///// Primary Navigation
///////////////////////////////////////
fitsMenu.b1.onRollOver = function() {
fitsMenu.gotoAndStop(2);
};
fitsMenu.b1.onRollOut = function() {
fitsMenu.gotoAndStop(1);
};
fitsMenu.b1.onPress = function() {
gotoAndStop("video", 1);
};
fitsMenu.b3.onRollOver = function() {
fitsMenu.gotoAndStop(3);
};
fitsMenu.b3.onRollOut = function() {
fitsMenu.gotoAndStop(1);
};
fitsMenu.b3.onPress = function() {
gotoAndStop("details", 1);
};
///////////////////////////////////////
///// Secondary Navigation
///////////////////////////////////////
nav.b1.onRollOver = function() {
nav.gotoAndStop(1);
panel._x = 208;
};
nav.b2.onRollOver = function() {
nav.gotoAndStop(6);
panel._x = 58;
};
nav.b3.onRollOver = function() {
nav.gotoAndStop(11);
panel._x = 8;
};
nav.b4.onRollOver = function() {
nav.gotoAndStop(16);
panel._x = -102;
};
nav.b5.onRollOver = function() {
nav.gotoAndStop(21);
panel._x = -262;
};
nav.b6.onRollOver = function() {
nav.gotoAndStop(26);
panel._x = -306;
};

///////////////////////////////////////
///// Panel Scroller
///////////////////////////////////////
panel.onRollOver = panelOver;
function panelOver() {
this.onEnterFrame = scrollPanel;
delete this.onRollOver;
updateAfterEvent();
}
var b = stroke.getBounds(_root);
function scrollPanel() {
if (_xmouse<b.xMin || _xmouse>b.xMax || _ymouse<b.yMin || _ymouse>b.yMax) {
this.onRollOver = panelOver;
delete this.onEnterFrame;
updateAfterEvent();
}
if (panel._x>=200) {
panel._x = 200;
}
if (panel._x<=-306) {
panel._x = -306;
}
var xdist = _xmouse-416;
panel._x += -xdist/12;
}
///////////////////////////////////////
///// Panel Buttons
///////////////////////////////////////
panel.jean1.onRollOver = function() {
nav.gotoAndPlay(1);
};
panel.jean2.onRollOver = function() {
nav.gotoAndPlay(6);
};
panel.jean3.onRollOver = function() {
nav.gotoAndPlay(11);
};
panel.jean4.onRollOver = function() {
nav.gotoAndPlay(16);
};
panel.jean5.onRollOver = function() {
nav.gotoAndPlay(21);
};
panel.jean6.onRollOver = function() {
nav.gotoAndPlay(26);
};

Thumbnail Scroller
I need to edit this code


Code:
function thumbNailScroller() {
this.createEmptyMovieClip("tscroller", 1000);
scroll_speed = 10;
tscroller.onEnterFrame = function() {
if ((_root._xmouse>=thumbnail_mc._x) && (_root._xmouse<=thumbnail_mc._x+thumbnail_mc._width)) {
if ((_root._ymouse>=(hit_right._y-40)) && (thumbnail_mc.hitTest(hit_right))) {
thumbnail_mc._y -= scroll_speed;
} else if ((_root._ymouse<=(hit_left._y+40)) && (thumbnail_mc.hitTest(hit_left))) {
thumbnail_mc._y += scroll_speed;
}
} else {
delete tscroller.onEnterFrame;
}
};
}
So that the thumbnails scroll when a btn is pressed. I do not want scrolling based on mouse position. I have two columns of thumbnails and I want the thumbnails to scroll when an up and down arrow are pressed. I also need the buttons to be disabled when the thumbs reach the beginning and the end. Can anyone help me?

Thumbnail Scroller In A MC?
I've successfully completed the the thumbnail scolling tutorial and added my own pics with ease.

http://www.kirupa.com/developer/mx2004/thumbnails.htm

However, trying to copy these layers to a movieclip for my flash site is a problem. The images all load up when the previous and next buttons are clicked, but the scroller images will not move.

I suppose I could have all these layers on the main timeline, but it wouldn't make good structure.

Is there a part of the actionscript i'm not understanding?

Thumbnail Scroller
Last edited by r_bartoli : 2005-12-04 at 20:01.
























Hi all.

I've this code for a thumbnail scroller. Any suggestion for smoothing the movement and implementing this code?


ActionScript Code:
stop();
// ************** Classes ************* \
import mx.transitions.Tween;
// ************** Variables ************* \
var THUMB_WIDTH:Number = 52;
var THUMB_HEIGHT:Number = 143;
var THUMB_PADDING:Number = 7.5;
var SPEED:Number = 22;
var fadeCounter:Number = 0;
_global.SITE_PATH = "";
_global.THUMB_PATH = SITE_PATH + "assets/2006pe/sfilate/donna/thumb/";
_global.FOTO_PATH = SITE_PATH + "assets/2006pe/sfilate/donna/";
// ************** Photo Panel Loader ************* \
var photoLoader:MovieClipLoader = new MovieClipLoader();
var photoLoaderListener:Object = new Object();
photoLoaderListener.onLoadStart = function(target:MovieClip):Void  {
    target._parent.thumb_preloader._visible = true;
};
photoLoaderListener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void  {
    var percent:Number = (bytesLoaded / bytesTotal) * 100;
    target._parent.thumb_preloader.bar._xscale = percent;
};
photoLoaderListener.onLoadInit = function(target:MovieClip):Void  {
    target._parent.thumb_preloader._visible = false;
};
photoLoader.addListener(photoLoaderListener);
// ************** Photo Panel ************* \
function createPhotoPanel():Void {
    arPhotos = new Array("foto.jpg", "foto.jpg", "foto.jpg", "foto.jpg", "foto.jpg", "foto.jpg", "foto.jpg", "foto.jpg", "foto.jpg", "foto.jpg", "foto.jpg", "foto.jpg", "foto.jpg", "foto.jpg", "foto.jpg", "foto.jpg", "foto.jpg", "foto.jpg", "foto.jpg", "foto.jpg", "foto.jpg", "foto.jpg");
    var thumbPanel:MovieClip = this.createEmptyMovieClip("thumbPanel", this.getNextHighestDepth());
    thumbPanel._x = THUMB_PADDING;
    thumbPanel._y = THUMB_PADDING;
    thumbPanel.setMask(mask);
    for (var i:Number = 0; i < arPhotos.length; i++) {
        thumbPanel.attachMovie("thumb", "thumb_" + i, i);
        var path = thumbPanel["thumb_" + i];
        path._x = (THUMB_WIDTH * i) + (THUMB_PADDING * i);
        path._alpha = 0;
        path.id = i;
        path.num.text = i;
        path.filename = arPhotos[i];
        photoLoader.loadClip(THUMB_PATH + arPhotos[i], path.thumb_photo);
        path.onPress = function() {
            this._parent._parent.mcPhoto.loadMovie(FOTO_PATH + path.filename);
        };
    }
    thumbPanel.onRollOver = panelOver;
    FadeID = setInterval(fadeIn, 250);
    b = mask.getBounds(stroke);
}
// ************** Fade Photo Panel ************* \
function fadeIn():Void {
    if (fadeCounter < arPhotos.length) {
        var path = thumbPanel["thumb_" + fadeCounter];
        var tween:Tween = new Tween(path, "_alpha", None, 0, 100, 1, true);
        fadeCounter++;
    } else {
        clearInterval(FadeID);
        trace(thumbPanel._width);
    }
}
// ************** Photo Panel Scrolling ************* \
function panelOver():Void {
    this.onEnterFrame = scrollPanel;
    delete this.onRollOver;
}
function scrollPanel():Void {
    if (_xmouse < b.xMin || _xmouse > b.xMax || _ymouse < b.yMin || _ymouse > b.yMax) {
        this.onRollOver = panelOver;
        delete this.onEnterFrame;
    } else {
        var xdist:Number = _xmouse - (mask._width / 2);
        thumbPanel._x += Math.round(-xdist / SPEED);
        if (thumbPanel._x >= THUMB_PADDING) {
            thumbPanel._x = THUMB_PADDING;
        }
        if (thumbPanel._x <= -(thumbPanel._width - mask._width + THUMB_PADDING)) {
            thumbPanel._x = -(thumbPanel._width - mask._width + THUMB_PADDING);
        }
    }
}
// ************** Fire-Up! ************* \
createPhotoPanel();


http://www.rblab.com/ultrashock/productBrowser.rar

Thumbnail Scroller/enlarger
I am intersested in making an thumbnail image scroller, rough draft to be found @ http://www.qozmiq.com/test.html I would like to know if it is possible to have the images enlarge slightly when there is a mouse over, and simultaneously have the ability to scroll left or right, depending on which side of the "filmstrip" the mouse is hovering over...it could be a constant looping filmstrip, going in one direction without user input, but I really need the images to enlarge when there is a mouse over. I tried to make one image move across the screen, which I did. I put a goto and stop action on it, but it did not seem to hold it. I published, and the action did not work...I double checked to make sure he action was still there, and it was...what gives>? I thank everyone in this forum, for all the wonderful help I have been given, and desperatly hope that someone can guide me towards the path to be on...

Qozmiq

Horizontal Thumbnail Scroller
Hey, can someone show me how to create a horizontal scrollbar to scroll through photo thumbnails.

Reference - http://www.jaapphoto.com (Personal Work)

Flash Thumbnail Scroller
HI,

I've got a flash navigation which scrolls through a series of thumbs. The problem I'm having is when you move your mouse away from the scroller it still scrolls. The flash is in a table and is part of an html site. Link:

http://www.feildenandmawson.com/flas...rojects_01.htm

I'm sure it's something silly but please advise as this is quite urgent.

many thanks to anyone who can help.
Dan

Vertical Thumbnail Scroller
I have no idea how to make one - I know how to make a horizontal scroller, but that was created from a template, and it's much too complicated to alter myself.

I was hoping someone could tell me how to do this?

Thumbnail Scroller Error
Hi, I have a little problemo that maybe some of you have already experienced.
I have a thumbnail scroll in Flash MX ,and in about 1 out of 100 browsers I've looked at the site in, The site comes up but the thumbnail scroll is not there, just a white space. Kinda perplexed here and I dont want to send away any viewers from my site...

The site is:

www.barbaradrichards.com

Any clues? Thanx.....Shane

Continuous Thumbnail Scroller
I need to create a thumbnail scroller that loops continually. So when you scroll of the last image, it starts over with the first image. Can someone give me a head start on how to acomplish this?

Thanks

[F8] ActionScript - Thumbnail Scroller
Ok, so I've learned how to dynamically load images to a movieclip instance using an XML file, but, now I need to learn how to load more than one array into the thumbnail scroller.

At this point, I can load one thumbnail at the most. How do I go about loading more than one thumbnail into the scroller?

And to get it out of the way now, how do I link the thumbnails to their larger counterparts?


This is my AcionScript code so far.


Code:
stop();
playlist = new XML();
playlist.ignoreWhite = true;

playlist.onLoad = function (success) {

if (success) {
_global.picname = [];
_global.picimage = [];
_global.picthumb = [];

for (var i = 0; i<playlist.firstChild.childNodes.length; i++) {
_global.picname[i] = playlist.firstChild.childNodes[i].attributes.name;
_global.picimage[i] = playlist.firstChild.childNodes[i].attributes.image;
_global.picthumb[i] = playlist.firstChild.childNodes[i].attributes.thumbnail;
trace(picname[i]+" "+picimage[i]+" "+picthumb[i]);
}
_root.createEmptyMovieClip("picture", 1);
_root.createEmptyMovieClip("bigpicture", 1);
}
else { display_txt.text="Error loading XML" }

picture.loadMovie(_global.picthumb[0]);
bigpicture.loadMovie(_global.picimage[0]);
name.text=_global.picname[0];
}

playlist.load("images.xml");

Advanced Thumbnail Scroller ?
Advanced thumbnail scroller ?

I'm trying to produce a thumbnail scroller as shown here.

http://www.flashloaded.com/flashcomp.../example1.html

This example seems to work better than most tutorials I've found, which just scroll the thumbnails in the opposite direction of the mouse movement and then you have to bring the mouse to the center of the mc to stop the movement and click on the thumbnail.

The example shown seems to stop when you roll over the thumbnail.

I bought the component that is shown in the example in a hope to work out how it was achieved, I have since found out that is not possible - I need to add other functionailty to the example shown.

Does anyone know of any good tutorials on producing an expandable scroller.

Thanks in advance

Help With Thumbnail Image Scroller
Hi, everybody,

I will really appreciate your help with this. I have the code for an image scroller and its working fine. A test site is at www.alexojeda.com . But besides the capabilities the scroller now has on "mouse over, out and on release", I'd like the thumbnail scroller to start looping to the left side as soon as the page is loaded, with out loosing the capabilities mentioned above.

THE IMAGE THUMBNAIL CODE MODULE:

// 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;

Thanks a lot!!!

Thumbnail Scroller Class
I am looking for a simple scrolling thumbnail class written in AS2. Does anyone know of any tutorials or code samples anywhere? I can't seem to locate one.

I have written one but I have a problem. My thumbnails are 100px x 100px. When I have more than like 36 (can't remember the exact number), my mask (which masks a bit on the left and the right side of the horizontal thumbnail scroller) no longer works. I found out that there is a max pic size for flash so I'm assuming that I am exceeding that max pic size which causes the mask to not work when I breach that size. Just a guess. I am trying to figure out how to get around that problem if indeed that is the problem.

Any help appreciated, thanks!

Thumbnail Scroller Troubles
Hello again all. I was trying to duplicate a nice thumbnail scroller that someone posted earlier. Here's the link...http://www.miniusa.com/crm/load_mini...per_s_exterior
I have it pretty darn close and I tried incorporating Billy T's script from the easing text scrolling tutorial. When the image box is all the way to the right of the mask, the rightmost picture should be showing and vice versa (you move the mouse right, the images move left). There are 27 "images". What I can't seem to get right is the later. The first and last pictures don't line up properly. Anyone care to take a look? I'm sure there's a much better way to do this.

Here's the script

ActionScript Code:
sp = 2;
mask = the_mask.getBounds(_root);
buttons = butts.getBounds(_root);
xx = mask.xMax;
xn = mask.xMin;
yx = mask.yMax;
yn = mask.yMin;
bx = buttons.xMax;
bn = buttons.xMin;
the_mask.onEnterFrame = function() {
    if (this.hitTest(_root._xmouse, _root._ymouse, false)) {
        hit = 1;
    } else {
        hit = 0;
    }
};
scroller.onEnterFrame = function() {
    this._x = window._x;
    this._y = window._y;
};
window.onEnterFrame = function() {
    if (hit == 1) {
        follow();
    }
};
function follow() {
    if (_xmouse-(window._width/2)<xn) {
        window._x = xn+(window._width/2);
    } else if (_xmouse+(window._width/2)>xx) {
        window._x = xx-(window._width/2);
    } else {
        window._x = _xmouse+(window._x-_xmouse)/sp;
    }
}
butts.onEnterFrame = function() {
    scrollAmount = ((this._width)-(the_mask._width))/(the_mask._width-(window._width));
    targX = -window._x*scrollAmount;
    this._x -= ((this._x-targX)-1200)/5;
};

Horizontal Thumbnail Scroller
Need tutorial on setting up a horizontal thumbnail scroller, controlled by a back and forward button. I am well versed in Flash, just need help setting up the interaction.

XML / Flash Thumbnail Scroller
Hello. I have just done this tutorial and was wondering if anybody knows how to launch external sites (either by clicking the large image, or description, or link).

I am a bit of a novice with XML (and flash for that matter), have tried a few things and have been able to get the link in the xml file manifest, but not having any luck getting a clickable element working.

I would be very grateful for any input.

Thanks,
m

Help Problem With Thumbnail Scroller
Hi everyone,
I have a big/small problem with a thumbnail scroller, created with the help of the tutorial found in this great site.
Shortly, this is my problem: I need to have a website that calls up a section in which there's a gallery with some employees faces and profiles.
I decided I would use a gallery similar to the one explained in here, and then adding its scrolling thumbnails.
So, there's the movie, and by pressing the appropriate button, it loads on an empty movieclip another movieclip, on which there's the gallery and thumbs and everything.
Now, let's call the gallery MC "gallery", and the big movie simply "movie".
The Gallery MC works fine when I launch it by itself. As soon as the Gallery MC is embedded in the Movie, the scrolling won't work anymore.
I think it might be some problem with _root stuff in the AS, and I tried changing it to .this, but it wouldn't work either way.
I truly hope you got what I mean, if you need an example here's a preview of what I'm trying to do:
www.actual-design.com/rivista
You click on the button named "redazione" (sorry, it's italian, it has no int'l purposes), and you will see that thumbnails down below won't scroll.

Tell me if you need the actionscript, but you can find it in here under flash mx2004 tuts.

Please, help, this is quite important and I don't seem to have it figured out!

You're great, btw!

Thumbnail Scroller Question
I've been playing around with the thumbnail gallery tutorial on this site. However I would like to put in a vertical scroller instead. But instead of having to move your mouse to scroll through the gallery, i would like an up and down arrow, which when you rollover them they automatically scroll the thumnails.

On http://www.rockstargames.com/sanandreas/ in the screens section there is a gallery that shows you exactly what i'm talking about. basically i would like to end up with exactly the same thing they have.

Any help is much appreciated.

Thumbnail Scroller Won't Work...
I have a main movie. There are 3 buttons, each button loads a difffernt .swf (3 of them). These are image galleries. If you just open the image gallery movie by itself, the thumbnail scrollers work fine. But when you open this main movie and load the different image galleries everything works in the image galleries except for their Thumbnail Scrollers. Anyone know why?

Repeating Thumbnail Scroller
Hi,


I'm trying to create a repeating thumbnails scroller, but am stuck. It doesn't repeat itself at the right place and I can't figure out why.

Please have a look at the attached file.

I really need your HELP!


Thanks!!!

Here's the script I've used

first action script:
mover = getProperty("scrollingobject", _x);


------------------
2nd action script (in next frame):
mouseh = getProperty("/tracker", _x);
mousev = getProperty("/tracker", _y);
if (Number(mousev)>415 and Number(mousev)<490) {
movevalue = (Number(movevalue*8)+Number(((mouseh-320)/20)))/10;

}


-----------------
3rd action script(in next frame):
mover = Number(mover)+Number(movevalue);
if (Number(mover)>640) {
mover = 0;
}
if (Number(mover)<0) {
mover = 640;
}
setProperty("/scrollingobject", _x, mover);
gotoAndPlay(20);

Thumbnail Scroller With Text As Well
can anyone point me in direction of tutorial to create a thumbnail scrolelr that loads the thumbnail and text next to it?

Cheers

Help With XML Slideshow Thumbnail Scroller.
Hello all! I'm new here. I did the couple of tutorials for the XML slideshow and how to add thumbnails in a scroller to it. I used that to modify a photo gallery, I'm working on. So It's working fine, except for one issue.

When the thumbnails first load into the movie clip- they are shifted slightly to the right. Then when you move the mouse and activate the scroller on the right hand side- they will shift to the appropriate position.

Has anyone had this problem? I can't figure it out. If this isn't a common problem, I'll repost with an .fla.

Any help much appreciated.
d.v.

Vertical Thumbnail Scroller
Alright, I've done the XML Photo Gallery Tut and am attempting to make the thumbnails scroll up and down instead of left and right. Apparently it's not as easy as switching X and Y. The tutorial is located at http://www.kirupa.com/developer/mx2004/thumbnails.htm.

Advanced Thumbnail Scroller ?
Advanced thumbnail scroller ?

I'm trying to produce a thumbnail scroller as shown here.

http://www.flashloaded.com/flashcomp.../example1.html

This example seems to work better than most tutorials I've found, which just scroll the thumbnails in the opposite direction of the mouse movement and then you have to bring the mouse to the center of the mc to stop the movement and click on the thumbnail.

The example shown seems to stop when you roll over the thumbnail.

I bought the component that is shown in the example in a hope to work out how it was achieved, I have since found out that is not possible - I need to add other functionailty to the example shown.

Does anyone know of any good tutorials on producing an expandable scroller.

Thanks in advance

Thumbnail Scroller Button
how to make horizontal scroller with button looks something like this. or could you direct me to the site where i can get resources. http://www.fourseasons.com/losangeles/photo_gallery/ .thnks in advance

Reset Thumbnail Scroller Help Please
I've got 3 pages each with their own portfolio loaded dynamically from an XML file. Everything is working great with the thumbnails i added using the "adding thumbnail" tutorial.

There's only one quirk I can't figure out. If you've scrolled to the end of the thumbnails on the first portfolio, the scroller stays in the same place when you go to the next portfolio rather than reloading back at the beginning. I hope that makes sense because it's hard to explain, but the site is www.kellystarbuck.com

here's the partial code for the thumbnails...

Code:
var curLength;
function loadXML(loaded) {
p = 0;
for (var j = 0; j<curLength; j++) {
thumbnail_mc["t"+j].removeMovieClip();
}
if (loaded) {
xmlNode = this.firstChild;
image = [];
thumbnails = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
thumbnails[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
thumbnails_fn(i);
}
firstImage();
curLength = total;
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("travel.xml");

function thumbNailScroller() {
// thumbnail code!
this.createEmptyMovieClip("tscroller", 700);
scroll_speed = 5;
tscroller.onEnterFrame = function() {
if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height) && (_root._xmouse>=120) && (_root._xmouse<=820)) {
if ((_root._xmouse>=(hit_right._x-80)) && (thumbnail_mc.hitTest(hit_right))) {
thumbnail_mc._x -= scroll_speed;
} else if ((_root._xmouse<=(hit_left._x+80)) && (thumbnail_mc.hitTest(hit_left))) {
thumbnail_mc._x += scroll_speed;
}
} else {
delete tscroller.onEnterFrame;
}
};
}
function thumbnails_fn(k) {
thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
tlistener = new Object();
tlistener.onLoadInit = function(target_mc) {
target_mc._x = (target_mc._width+20)*k;
target_mc.pictureValue = k;
smoothImageLoad(thumbnails[k], target_mc);
target_mc.onRelease = function() {
p = this.pictureValue-1;
nextImage();
};
target_mc.onRollOver = function() {
this._alpha = 50;
thumbNailScroller();
};
target_mc.onRollOut = function() {
this._alpha = 100;
};
};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
}
I know there's a way to reset the position of the thumbnails back to the beginning, just like i've reset p=0 and deleted and reset the previous thumbnails. I've tried several different things and nothing seems to be working.

Any help would be greatly appreciated!

Thank you in advance!!

Reset Thumbnail Scroller Help Please
I've got 3 pages each with their own portfolio loaded dynamically from an XML file. Everything is working great with the thumbnails i added using the "adding thumbnail" tutorial.

There's only one quirk I can't figure out. If you've scrolled to the end of the thumbnails on the first portfolio, the scroller stays in the same place when you go to the next portfolio rather than reloading back at the beginning. I hope that makes sense because it's hard to explain, but the site is www.kellystarbuck.com

here's the partial code for the thumbnails...

Code:
var curLength;
function loadXML(loaded) {
p = 0;
for (var j = 0; j<curLength; j++) {
thumbnail_mc["t"+j].removeMovieClip();
}
if (loaded) {
xmlNode = this.firstChild;
image = [];
thumbnails = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
thumbnails[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
thumbnails_fn(i);
}
firstImage();
curLength = total;
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("interiors.xml");

function thumbNailScroller() {
// thumbnail code!
this.createEmptyMovieClip("tscroller", 700);
scroll_speed = 5;
tscroller.onEnterFrame = function() {
if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height) && (_root._xmouse>=120) && (_root._xmouse<=820)) {
if ((_root._xmouse>=(hit_right._x-80)) && (thumbnail_mc.hitTest(hit_right))) {
thumbnail_mc._x -= scroll_speed;
} else if ((_root._xmouse<=(hit_left._x+80)) && (thumbnail_mc.hitTest(hit_left))) {
thumbnail_mc._x += scroll_speed;
}
} else {
delete tscroller.onEnterFrame;
}
};
}
function thumbnails_fn(k) {
thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
tlistener = new Object();
tlistener.onLoadInit = function(target_mc) {
target_mc._x = (target_mc._width+20)*k;
target_mc.pictureValue = k;
smoothImageLoad(thumbnails[k], target_mc);
target_mc.onRelease = function() {
p = this.pictureValue-1;
nextImage();
};
target_mc.onRollOver = function() {
this._alpha = 50;
thumbNailScroller();
};
target_mc.onRollOut = function() {
this._alpha = 100;
};
};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
}


I know there's a way to reset the position of the thumbnails back to the beginning, just like i've reset p=0 and deleted and reset the previous thumbnails. I've tried several different things and nothing seems to be working.

Any help would be greatly appreciated!

Thank you in advance!!

Please Help With Thumbnail Image Scroller
Hi, everybody,

I will really appreciate your help with this. I have the code for an image scroller and its working fine. A test site is at www.alexojeda.com . But I will also like to have the scroller looping to the left side as soon as the page is loaded, without loosing any of the scroller capabilities now working with the code below:

THIS IS THE SCROLLERS CODE MODULE:

// 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;

Thanks a lot!!!

Urgent XML Thumbnail Scroller Help.
Hi all

First of all i want to say that you have an excellent comunity in this forum, been watching this forum for long.

I need all the help i can get :shock:

I`m working on a XML thumbnail scroller controlled by the mouse movement, just like the gotoandlearn tutorial. My problem is that i can?t make a function that works for all sections of the site, let me explain better.
Im working on a site with this XML:

http://www.jbmg-arquitectos.pt/backoffi ... l?nocache=

You can also see the site:

http://www.jbmg-arquitectos.pt/pt_entrada_2.htm

If you choose in the menu the "03" column and then choose "Habita??es" you will see four thumbnails with buttons. I have to do the scrolling controlled by the mouse. Thats done, the problem is that i can?t stop the last thumbnail where it should. It only works for the first section "2006", if i choose the "2005" section the last thumbnail wont stop where it should, i know its because of the code, i can?t get the variable to always refresh.

This is the Thumbnail Scroller code on my FLA:

"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
teste_do.onRollOver = panelOver;

function panelOver(){
this.onEnterFrame = scrollPanel;
delete this.onRollOver;
}

var w = stroke.getBounds (_root);
var t = thumbs.length ;

function scrollPanel(){
if(_xmouse<w.xMin || _xmouse>w.xMax || _ymouse<w.yMin || _ymouse>w.yMax) {
this.onRollOver = panelOver;
delete this.onEnterFrame;

}

if(teste_do._x >= 544){
teste_do._x = 544;
}

if(teste_do._x <= 544 - ((t-3)*83)){
teste_do._x = 544 -((t-3)*83);

}


var xdist = _xmouse - 749;

teste_do._x += -xdist / 10;

};
stop();

"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

My problem is the "var t = thumbs.length;" cause it always retrieves the length of the 1st section "2006" (check site) wich is 10 and when i get to another year and another project it always stops in the 10th thumbnail.

1- What do i need to do? Some loop? or cycle?

Im almost having a breakdown.

Im almost eating my fingers, cause i can?t figure out what to do :S.

Please help this n00b.

Help With A Nifty Thumbnail Scroller.
I'm not going to even try explaining this because it will end up doing more harm than good (I don't know how to put everything into the right words). So instead I have an example and conveniently enough it's where I saw it and got curious in the first place.

The example is here. Navigate to the section "Media" and you'll see a panel on the left-hand side. If anyone knows where I can find a tutorial on how to create an endless scroller like that please let me know.

I'm developing in AS 2.0 and haven't started this project yet. I wanted to try to get some footing before jumping in. :D

Loop Lee's Thumbnail Scroller
Lee's thumbnail tutorial is great, but I was wondering if there was a way to have the scroll endless, so it doesn't stop. The first image or the last image respectively appears at the end of the scroll and the cycle continues.

Is this possible abd how would I achieve it?

Thanks

Mr Dibbly

[F8] Having Problems With Listener In Thumbnail Scroller
Hello all. I'm a newbie trying to create a scrolling thumbnail gallery, and I got quite stuck on a certain aspect of it.

You see. My aim is to allow the gallery to read an external xml file (containing info of thumbnails and fullsize pics etc.) and load the thumbnails in from the external source. But, although the hight of each thumbnail's the same, the width isnt, so if I want each of them to be, say.. 10 pixels apart from eachother I need flash to find out its width after the image is loaded into an empty movieclip.

here's an example, except each thumb has different widths
http://www.guupress.com/bliss_express/preview/

The problem is, while I was able to write a loop that reads the info and loads the stuff, and a listener every loop to check the width once they're loaded, I can't get the listener to return *every* image's width. No matter how many images are on the list (pretend there's 20), when I trace the result it always returns the LAST images width 20 times.

I'm assuming that this is because of flash's async method of loading, so the loading and listening procedure doesnt work in a linear order, but why only the last image's width? does that mean i have to somehow create a distinct listener for every empty movie clip created by the loop?



Here are the codes for that frame. I hope that helps. I've already spent days trying to figure this out

/////////////////////////////////////////////////////////////////////////////////////

//halt at current frame.
stop();

//display album function.
function createThumbs(glryCaption:String, glryThumb:String, glryImage:String, glryDownload:String, glryLength:String) {
//thumbnail slider variables.
var thumbSlide_X:Number = 0;
var thumbSlide_Y:Number = 0;
var thumbSlide_W:Number = 0;
var thumbSlide_H:Number = 0;
//fullsize image variables.
var imgBytesLoaded: Number;
var imgBytesTotal: Number;
var imgFull_X:Number = 10;
var imgFull_Y:Number = 10;
var imgFull_W:Number = 680;
var imgFull_H:Number = 550;
//thumbnail variables.
var imgThumbBytesLoaded: Number;
var imgThumbBytesTotal: Number;
var imgThumb_X:Number = 155;
var imgThumb_Y:Number = 110;
var imgThumb_W:Number = 100;
var imgThumb_H:Number = 62;
var marginThumb:Number = 5;
var thumbLoader:MovieClipLoader = new MovieClipLoader;
var thumbListener:Object = new Object;
//scrolling function variables.
//create thumbnails.
for (i=0; i<glryLength; i++) {
var newThumb:MovieClip = _root.createEmptyMovieClip ("mcThumb" + i,this.getNextHighestDepth());
//newThumb._x = imgThumb_X + (marginThumb + imgThumb_W) * i
//newThumb._y = imgThumb_Y
thumbLoader.loadClip(glryThumb[i], newThumb);
thumbLoader.addListener(thumbListener);
thumbListener.onLoadInit = function() {
trace(newThumb._width)
}
}
}

createThumbs(shuanCaption, shuanThumb, shuanImage, shuanDownload, atLength);

[F8] Images Won't Load From Thumbnail Scroller
I created a Thumbnail Scroller based on a tutorial I found on the Net and have been trying to figure out how to load external images with it. Images load fine when I use dummy test buttons outside the scroller (as can be seen in my attachment)

Could someone take a look at my file and tell me what I'm missing. I've read it may have to do with "targeting", but I'm not advanced enough to figure it out on my own.

Thanks.

(I've degradated the images to make the attachment a smaller file size)

Vertical Thumbnail Scroller Problem
I have a vertical thumbnail scroller that scrolls up or down depending on where your mouse is. The problem is that when the movie starts the thumbnails start scrolling.

Does anybody know a way for me to have it be still until someone rolls over it. Also, i would like it to stop when someone rolls out of it. Any help would be greatly appreciated.

Here is a link to the FLA.
FLA File

Thanks.

Thumbnail Scroller W/ Secondary Navigation
I have this code that scrolls my thubnails depending on the location of my mouse. The issue is it is suppose to disable when I rollOut of the hit area. I have a second navigation I want to controll the thumbnail also located on the left. How can completely disable the scroll script once I have rolled out and enable it agian once I am over it. Here is my code.









Attach Code

///////////////////////////////////////
///// Panel Scroller
///////////////////////////////////////
panel.onRollOver = panelOver1;
function panelOver1() {
this.onEnterFrame = scrollPanel1;
delete this.onRollOver;
updateAfterEvent();
}
var b = stroke.getBounds(_root);

function scrollPanel1() {
if (_xmouse<b.xMin || _xmouse>b.xMax || _ymouse<b.yMin || _ymouse>b.yMax) {
this.onRollOver = panelOver1;
delete this.onEnterFrame;
updateAfterEvent();
}
if (panel._x>=200) {
panel._x = 200;
}
if (panel._x<=-306) {
panel._x = -306;
}
var xdist = _xmouse-416;
panel._x += -xdist/12;
}

Thumbnail Scroller With Frame For Each Image
Hi!,

I followed this example:
http://www.kirupa.com/developer/mx2004/thumbnails.htm
But what I want is that each image gets a certain frame, something like this:


Can this be done?

I tried to load in a swf file instead of a image:
image_mcl.loadClip("frame.swf?image=picture1.jpg", "thumbnail_mc.t"+k);
but that doesn't work.

The code in frame.swf to read in the 'image' variable is as follows:

Code:
_root.onLoad();
test = _root.image;
mc.loadClip(test);
Where mc is a movieclip where the picture must be positioned.

I hope someone has an idea

-Roeland

Set Popup Attributes In Thumbnail Scroller?
In reference to ...

http://www.kirupa.com/forum/showthread.php?t=192127

This works great, but I was wondering if there is a way to set a javascript popup with fixed attributes in the flash file? I know it has to be embedded in the html page as well - that's no problem. What would the code be to call the function in flash? Thanks.

Vertical Thumbnail Scroller Gallery
Hey guys, I am having this problem and I am running out of time to make this deadline. I was able to load my vertical thumbnail scrolling gallery as an external swf into my main movie, no problem. The catch is that when loaded, the thubnails display as well as the enlarged image when you click on them. The PROBLEM is that the thumbnails don't scroll when loaded as an external swf, however they DO when the scroller is viewed as a standalone. Please advise. The correct path to the external swf from the main movie is (to unload)

_root.pages.container.unloadMovie();

the previous and next buttons DO go through the thubnails, its just the scrolling aspect that doesn't work.

here is the code for the scroller.swf

function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
thumbnails = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
thumbnails[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
thumbnails_fn(i);
}
firstImage();
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.UP) {
prevImage();
} else if (Key.getCode() == Key.DOWN) {
nextImage();
}
};
Key.addListener(listen);
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
/////////////////////////////////////
p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
}
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
function thumbNailScroller() {
// thumbnail code!
_root.createEmptyMovieClip("tscroller", 1000);
scroll_speed = 15;
tscroller.onEnterFrame = function() {
if ((_root._xmouse>=thumbnail_mc._x) && (_root._xmouse<=thumbnail_mc._x+thumbnail_mc._widt h)) {
if ((_root._ymouse>=(hit_right._y-40)) && (thumbnail_mc.hitTest(hit_right))) {
thumbnail_mc._y -= scroll_speed;
} else if ((_root._ymouse<=(hit_left._y+40)) && (thumbnail_mc.hitTest(hit_left))) {
thumbnail_mc._y += scroll_speed;
}
} else {
delete tscroller.onEnterFrame;
}
};
}
function thumbnails_fn(k) {
thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
tlistener = new Object();
tlistener.onLoadInit = function(target_mc) {
target_mc._y =(target_mc._height+5)*k;
//trace(target_mc._width+" "+target_mc._parent._rotation)
target_mc.pictureValue = k;
target_mc.onRelease = function() {
p = this.pictureValue-1;
nextImage();
};
target_mc.onRollOver = function() {
this._alpha = 50;
thumbNailScroller();
};
target_mc.onRollOut = function() {
this._alpha = 100;
};
};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
}

Please advise, Thank YOU

Andrew

[Flash8]Help Needed Thumbnail Scroller
So I have read the tutorial: http://www.kirupa.com/developer/mx2004/thumbnails.htm, and I based my flash file off the code given there.

I would like to, instead of letting the thumbnail_mc's scroll when you rollover them, have buttons on either side that scroll (slow when mouseover and fast when pressed) the mc's instead. Here is what I have, which doesn't seem to work:


Code:
previous_btn.onRollOver = function(){
thumbNailScroller(30);
};
next_btn.onRollOver = function(){
thumbNailScroller(30);
};
previous_btn.onPress = function(){
thumbNailScroller(50);
};
next_btn.onPress = function(){
thumbNailScroller(50);
};
function thumbNailScroller(scroll_speed) {
// thumbnail code!
this.createEmptyMovieClip("tscroller", 1000);
tscroller.onEnterFrame = function() {

if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {
if ((_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {
thumbnail_mc._x -= scroll_speed;
} else if ((_root._xmouse<=(hit_left._x+40)) && (thumbnail_mc.hitTest(hit_left))) {
thumbnail_mc._x += scroll_speed;
}
} else {
delete tscroller.onEnterFrame;
}
};
}

it would be very helpful for you to read the (at least part of) the tutorial if you are going to try to help me.

Well, thanks..

-c..

Thumbnail Scroller Duplicatemovieclip Or Set Color?
Hi,

I am working on an thumbnail scroller. I just let the scroller loop!
I would like to put a white MC behind the thumbnails. But it doesn't work.

Could anyone help me please?

Source: http://www.jeroenooms.nl/upload/scroller.zip (fla + images + xml)

Xml Thumbnail Scroller Problem On External Swf
I have a external swf file of the kirupa xml thumbnail gallery. the first problem i had is the thumbnail scroller didnt work. ive been struggling to fix this problem, for a few hours now. ive been googling this and found solutions that i had to change _root. to _level0 , _parent, and _root.container these kinda works but the next big problem i have now is that it scrolls but it keeps shaking left and right constantly and tis really bugging me. any solution to this? thx

How To Make Endless Thumbnail Scroller
Hello,
I am new at this forum and i need help about one of kirupa tutorials

http://www.kirupa.com/developer/mx2004/thumbnails.htm

I used this tutorial and it works pefectly for my goals but now i need to make the scroller
looping. I did it for the big pictures using buttons next and previous but i cannot do when i reach the last thumbnail to show the first one and to make the scroller continue.

I hope i explained this correctly and i`ll be glad if someone can halp me.

Thanks

Polita

Copyright © 2005-08 www.BigResource.com, All rights reserved