LIBRARY: Tutorials Reviews Interviews Editorials Features Business Authors RSS Feed

Scrolling Thumbnail Panel

Scrolling Thumbnail Panel
A Creativecow.net Flash Tutorial


Scrolling Thumbnail Panel

Lee Brimelow
Stanford University
San Francisco Bay Area, California

©Lee Brimelow and Creativecow.net. All rights are reserved.

Article Focus:
In this tutorial, Lee Brimelow explains how to create a scrolling panel of thumbnails that is controlled via the mouse position.



Flash Video Tutorial



Please visit the forums or read other articles at Creativecow.net if you found this page from a direct link.

Comments

Re: Scrolling Thumbnail Panel
by Seth Keller
Thank you so much for this video. I've created a string of thumbnails that repeats continuously in a loop using AS3. The only problem is that when I try to make an image appear when the button is clicked, the only buttons that will work are the buttons to the right of the first button, and they will only function while they are within the viewing window with the first button. As a result when I test video, the only buttons are the the first six or seven buttons depending on if the first button is visible when I click the button. Does anyone have any ideas on how to fix this issue, and why this is the case?

The following is the code I used:

stop();

addEventListener(Event.ENTER_FRAME,onEnterfn);

function onEnterfn(event:Event):void{
if (MovieClip(root).mouseX <50){
imgBar.prevFrame();

}
else {all.imgBar.stop();

}
if (MovieClip(root).mouseX>900){
imgBar.nextFrame();

}

else {all.imgBar.stop();

}
}

imgBar.thumbnails.btn1.addEventListener(MouseEvent.CLICK, play1);

function play1 (event:MouseEvent) : void {
gotoAndStop("img_1");

}

imgBar.thumbnails.btn2.addEventListener(MouseEvent.CLICK, play2);

function play2 (event:MouseEvent) : void {
gotoAndStop("img_2");

}

imgBar.thumbnails.btn3.addEventListener(MouseEvent.CLICK, play3);

function play3 (event:MouseEvent) : void {
gotoAndStop("img_3");

}

imgBar.thumbnails.btn4.addEventListener(MouseEvent.CLICK, play4);

function play4 (event:MouseEvent) : void {
gotoAndStop("img_4");

}

imgBar.thumbnails.btn5.addEventListener(MouseEvent.CLICK, play5);

function play5 (event:MouseEvent) : void {
gotoAndStop("img_5");

}

imgBar.thumbnails.btn6.addEventListener(MouseEvent.CLICK, play6);

function play6 (event:MouseEvent) : void {
gotoAndStop("img_6");

}

imgBar.thumbnails.btn7.addEventListener(MouseEvent.CLICK, play7);

function play7 (event:MouseEvent) : void {
gotoAndStop("img_7");

}

imgBar.thumbnails.btn8.addEventListener(MouseEvent.CLICK, play8);

function play8 (event:MouseEvent) : void {
gotoAndStop("img_8");

}

imgBar.thumbnails.btn9.addEventListener(MouseEvent.CLICK, play9);

function play9 (event:MouseEvent) : void {
gotoAndStop("img_9");

}

imgBar.thumbnails.btn10.addEventListener(MouseEvent.CLICK, play10);

function play10 (event:MouseEvent) : void {
gotoAndStop("img_10");

}

imgBar.thumbnails.btn11.addEventListener(MouseEvent.CLICK, play11);

function play11 (event:MouseEvent) : void {
gotoAndStop("img_11");

}

imgBar.thumbnails.btn12.addEventListener(MouseEvent.CLICK, play12);

function play12 (event:MouseEvent) : void {
gotoAndStop("img_12");

}

imgBar.thumbnails.btn13.addEventListener(MouseEvent.CLICK, play13);

function play13 (event:MouseEvent) : void {
gotoAndStop("img_13");

}

imgBar.thumbnails.btn14.addEventListener(MouseEvent.CLICK, play14);

function play14 (event:MouseEvent) : void {
gotoAndStop("img_14");

}

imgBar.thumbnails.btn15.addEventListener(MouseEvent.CLICK, play15);

function play15 (event:MouseEvent) : void {
gotoAndStop("img_15");

}

imgBar.thumbnails.btn16.addEventListener(MouseEvent.CLICK, play16);

function play16 (event:MouseEvent) : void {
gotoAndStop("img_16");

}

imgBar.thumbnails.btn17.addEventListener(MouseEvent.CLICK, play17);

function play17 (event:MouseEvent) : void {
gotoAndStop("img_17");

}

imgBar.thumbnails.btn18.addEventListener(MouseEvent.CLICK, play18);

function play18 (event:MouseEvent) : void {
gotoAndStop("img_18");

}

imgBar.thumbnails.btn19.addEventListener(MouseEvent.CLICK, play19);

function play19 (event:MouseEvent) : void {
gotoAndStop("img_19");

}

imgBar.thumbnails.btn20.addEventListener(MouseEvent.CLICK, play20);

function play20 (event:MouseEvent) : void {
gotoAndStop("img_20");

}

imgBar.thumbnails.btn21.addEventListener(MouseEvent.CLICK, play21);

function play21 (event:MouseEvent) : void {
gotoAndStop("img_21");

}

imgBar.thumbnails.btn22.addEventListener(MouseEvent.CLICK, play22);

function play22 (event:MouseEvent) : void {
gotoAndStop("img_22");

}

imgBar.thumbnails.btn23.addEventListener(MouseEvent.CLICK, play23);

function play23 (event:MouseEvent) : void {
gotoAndStop("img_23");

}

imgBar.thumbnails.btn24.addEventListener(MouseEvent.CLICK, play24);

function play24 (event:MouseEvent) : void {
gotoAndStop("img_24");

}

imgBar.thumbnails.btn25.addEventListener(MouseEvent.CLICK, play25);

function play25 (event:MouseEvent) : void {
gotoAndStop("img_25");

}

imgBar.thumbnails.btn26.addEventListener(MouseEvent.CLICK, play26);

function play26 (event:MouseEvent) : void {
gotoAndStop("img_26");

}

imgBar.thumbnails.btn27.addEventListener(MouseEvent.CLICK, play27);

function play27 (event:MouseEvent) : void {
gotoAndStop("img_27");

}

imgBar.thumbnails.btn28.addEventListener(MouseEvent.CLICK, play28);

function play28 (event:MouseEvent) : void {
gotoAndStop("img_28");

}



This is all very odd to me, I can't image why the buttons would work while the first button is on screen, while they will not work while the first button is off screen.

Thank you for your help.
Scrolling Thumbnail Panel
by Saumya Sinha
Hi, this is a really great tutorial. But I am trying to do this using AS3, and I am not getting anywhere, is there anyway you could help me out with this?

Thanx
Bug w/ Loader component...
by Paul Bennett
When I load my content (that includes this scrolling thumb panel) into Loader component, scrolling thumbs no longer work properly. Anyone know the fix? Thanks.
Re: Scrolling Thumbnail Panel
by juan ainomi
Hi, ppl. For all of you who want to make a link between the thumbs in the panel MC and another frame, here is how I could make it work.

First: name the frame you want to play (put it a name in the properties panel)

Second: introduce this code in the button you want to make the action:

on (release) {
_root.gotoAndPlay("frame name");
}

Repeat the process with each frame and button you need.Don't forget to put the same name to the frame and the button code.
I hope you like it and please forgive my English.=P
Re: Scrolling Thumbnail Panel
by jon thornton
It shouldn't scroll unless there's a mouse over, and it should stop scrolling on mouse out.Mine is horizontal, I don't know if the vertical orientation may be causing an issue. Here's my code if you want to compare:

panel.onRollOver = panelOver;

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

var b = stroke.getBounds(_root);

function scrollPanel () {
if (_xmouseb.xMax || _ymouseb.yMax) {
this.onRollover = panelOver;
delete this.onEnterFrame;
}
if (panel._x >= 429 ){
panel._x = 429;
}

if (panel._x <= 100) {
panel._x = 100;
}


var xdist = _xmouse - 512;

panel._x += -xdist / 4;
}

Good luck!
Re: Scrolling Thumbnail Panel
by Janine Cheek
Hi,

Thanks for the tutorial it works well! I've changed the X to Y so that I can make it work vertical and it works perfectly.

However I'm just wondering is there a way that you can edit the script so that when you are not on it it doesn't continue to scroll. When you originally go on it it doesn't scroll, but can you set it so that when the user is not over it, it doesn't move???

Thanks in advance!
Re: Scrolling Thumbnail Panel
by Kristina Westberg
i have resolved my issue:)
@Kristina Westberg
by juan ainomi
Hi, Kristina. I don't want to bother you, but I'd really like to know how you resolved the link problem
My buttons don't lead anywere. =/
Thanks
Re: Scrolling Thumbnail Panel
by Kristina Westberg
Hello Lee,

I just created my flash thumbnail scroll bar with help from your tutorial could you tell me what is the best way to have it so my buttons inside the scroll bar can link to my DreamWeaver html pages?

thank you so far for the tutorial help,

Kristina

so far i tried this ( linking internally in dreamweaver):

btn_2.onRelease = function () {
getURL("biteme.html");
};

and also tried this (using the entire url address):

btn_2.onRelease = function () {
getURL("http://jennifermerchantdesign.com/biteme.html");
};
-1
Re: Scrolling Thumbnail Panel
by Evelyn Khoo
Hi there. Great tutorial. I really followed your tutorial very closely. One thing is that my scrolling is not smooth. How do I make it smooth?

My size of image is 150 x 150.

My stage is 850. My thumbnails are on the right. Meaning to say that it is irregular size. The right column is bigger and the left column is small.

And this is the code:

panel.onRollOver = panelOver;

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

var b = stroke.getBounds(_root);

function scrollPanel() {
if(_xmouseb.xMax || _ymouseb.yMax) {
this.onRollOver = panelOver;
delete this.onEnterFrame;
}

if(panel._x >= -230) {
panel._x = -230;
}

if(panel._x <= -1399) {
panel._x = -1399;
}

var xdist = _xmouse - 125;

panel._x += Math.round(-xdist / 25);
}

Is there something wrong here? Is my speed to high or what? Please advise and please help. Thanks a million.
Re: Scrolling Thumbnail Panel
by Sarah Postec
Is it possible to download this tutorial? Even if I will have to pay for it? I'm afraid not to find it again and I've got different projects. It will take time because I'm knew on the subject.
Thank you
(It's very well explain, very clear and easy for my no-computer brain!
Nested RollOver???
by Alyssa Tamayo
Thank you so much for this tutorial.

I am using this scrolling panel as my navigation for my website. I am having trouble with clicking the buttons to go to the pages. I changed it a bit to fit AS3. I remember the video mentioning that flash does not support nested rollover and that there are ways around it. How do I enable my scrolling buttons navigate to different pages?


Thanks
Scrolling Thumbnail Panel
by roman paik
Great Tutorial... I followed your instructions and voila, I was finally able to do a panning scroll!

My code is exactly the same in the tutorial except I replace the "_x" with "_y"

It works, but is choppy for some reason. I have to keep moving the mouse in order to complete the run of the scroll, up or down.

Any help or suggestions would be appreciated.
scroll does not stop
by Aleem Howard
Hi, i have followed the instructions and when i test my movie the scroll doe not stop when my curser is off the panel

can u hep me with that
menu doesnt scroll
by Doug Ruiz
Hi,

I tripled check the AS and my menu still doesnt scroll. I get the rollover state but no scrolling.

I'm using FlashCS3 and selected a new AS2 document. I also tried with AS3, but still nothing...no scrolling.

I get the following Compiler errors:

Statement block must be terminated by '}' - on: function scrollPanel() {
and
Syntax error. - on: the last line which is empty

Can anyone help me?

I changed the first error and terminated the scrollPanel function and no more compiler error but now, nothing happens not even RollOver.

Help!

-Doug
Scolling Thumbnail Panel
by Aisha Nelson
How can this be translated to as3?
Linking Thumbnails to timeline
by brian mullins
Hi, I am having problems linking thumbnails to timeline. I am using the following code below to link buttons. If there is a different code or methodology to linking buttons, please post code.

on (release) {
gotoAndPlay();
}
Scrolling Thumbnail Panel
by Skyler Anderson
I am having one slight problem with Lee's Tutorial.
It does not stop going to the right.

My stage is: 562
The panel width is: 1534.6
My mask is: 545

Any help would be appreciated - Sky

panel.onRollOver=panelOver;
function panelOver() {
this.onEnterFrame=scrollPanel;
delete this.onRollOver;
}
var b = stroke.getBounds (_root);
function scrollPanel() {
if(_xmouseb.xMax || _ymouseb.yMax) {
this.onRollOver=panelOver;
delete this.onRollOver;
}

if (panel._x >= 5) {
panel._x = 5;
}
if (panel._x <= -982) {
panel.x = -982;
}

var xdist = _xmouse - 281;
panel._x += -xdist/15;
}
Linking buttons to url address.
by brad holley
I fairly new to flash and Action Script. I am looking for a way to link the buttons to a url for video playback. Any help or feedback would be appreciated.

Thanks.
Scrolling Thumbnail Panel by Lee Brimelow AS2
by Nancy Closson
I tried many tutorials and this one worked for me. As for the post about opening a new window my code here worked on the buttons/thumbs:

on (release) {
getURL("javascript:window.open('urladdress','test','width=450,height=300');void(0);") ;

}

You have to attach to the individual button not the whole panel.

My only problem right now is the original flash thumbs disappear when that window appears.

the test site:

http://riverbedtheatre.com/riverbed.html
How do you mak the scrolling stop when the mouse leaves the frame
by jeff frank
I have a portfolio and would like the user to be able to move the mouse out of the frame and have the scrolling stop. upon re-entering the frame scrolling picks up where it left off. otherwise this is the perfect scroller for my use.
Adding getURL's to buttons
by Rachel Tight
Sorry did anyone answer the question on how to go to a url if you click a button in this?

Also is there any way to update this actionscript to 3.0?
Portfolio Site
by Dolores Lin
Hi, I'm kind of new at this so please help!

I'm trying to make a portfolio site so that the thumbnails open a larger image (on a different frame). From this tutorial, I can get the thumbnails to scroll and everything but I can't get each thumbnail to act as a button to open the larger image. The only thing I could think of was to put the action script on the thumbnail while editing the panel movieclip but it didn't work.

Any suggestions? I really need help!
the folder set up
by jon thornton
I'm immediatelt lost. I can't figure out how the bitmap and thumbnail folders were set up. Are the bitmaps coverted to symbols before the stroke is added? or is the stroke part of the same symbol as the bitmap? or perhaps the stroke is its own symbol. That's what I'm missing. I don't understand what objects comprise the on and over states, Is the on state just a stroke symbol, applied to a bitmap graphic? or are they both a single symbol?

I'd like to get on to some of the meatier problems everyone is having but I'm sinking in the harbor.

SOS

Jon
I think this uses ActionScript 2 code
by Joe Grzeskowiak
I'm pretty sure this uses some Actionscript 2 code. You will need to save it as an actionscript 2 file for it to work. I'm not sure how to update this code for Actionscript 3.

Best
Ok, how do I followed along
by King Madahda
Ok, how do I followed along and got everything to work fine in that movie...but how do I implement this into another movie. I'm trying to use this as my navigation menu to load another movie into an empty movie clip. My dilema is how do I put this scroll into another movie clip, or even can you. I put the actionscript on the first frame of the Scene 1 layer (just like in the tutorial) and it does nothing. I went into the movie clip and did the same, and it did nothing...my email is on file, feel free to get back to me, thanks.
as3?
by Jason Ely
What action script is this in? I am in as3 in CS3 and I cannot get this to work. Can someone please post the as code so I can copy and paste so I know that I am not entering something wrong. If I can get this to work it will be the coolest thing ever.
Scrolling Thumbnail Panel
by Raymond Tuquero
I have the same problem where the panel will not pan ... hmmm ... I checked all the script and still doesn't seem to pan ... I have Flash CS3 ... hints to help?
Scrolling Thumbnail Panel
by Drew
Is there something in Flash 8 that would keep this tutorial from working? I've run through it multiple times and can not get it to scroll. Any thoughts?
Scrolling Thumbnail Panel
by Sal McAllister
Hello everyone, I'm a newbie.

I know this sounds very simple, but how do you get the buttons to navigate to a url when you click on them?
Scrolling Thumbnail Panel
by Alex Martin
Hello,
I have a bar miniatures passing from side to side of the screen.
What code i put for when I move the mouse over the bar this stand?
Help please.
Thank you.
Scrolling Thumbnail Panel
by cricket reichenberger
as mentioned previously...great tutorial. i wanted a vertical scrolling panel (seems simple enough), but for some reason, i cannot get it to work. i have included the code. does anyone have any idea what is wrong? thanks - cricket

panel.onRollOver = panelOver;

function panelOver()
{
this.onEnterFrame = scrollPanel;
delete this.onRollOver; //allows instances within the panel to receive button clips
}

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

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

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


var ydist = _ymouse - 400;
panel._y += -ydist / 7; //speed of panel larger = slower, smaller number = faster

- AHHHHH i forgot some brackets.

Scrolling Thumbnail Panel
by Betillo Orga
ok nevermind... just figured out to put

on (press) {
_root.gotoAndStop("poster")
}

on each button inside the "panel"

thanks anyway
Scrolling Thumbnail Panel
by Betillo Orga
hey there, great tutorial. i just have one problem which im sure is the dumbest thing. everything worked perfectly but when trying to make the thumbnail call out a lrger image, nothing seems to happen.
What I did is put inside the "panel" movieclip the A.script.

on (press) {gotoAndStop (5)
}

any suggestions?



Related Articles / Tutorials:
Adobe Flash
Adobe Edge Animate/The Missing Manual Software/Book Review

Adobe Edge Animate/The Missing Manual Software/Book Review

Increasingly, web developers are being asked to create sites that are viewable on tablets and mobile devices, as well as desktops and laptops running Windows, OS X or Linux. One of the challenges in creating a site like that is animation. Flash, for many years the preferred cross-platform animation solution, is no longer supported on many tablets and mobile devices. Michael looks for - and finds - answers within Adobe's Edge Animate.

Review, Editorial
Michael Hurwicz
Adobe Flash
HTML5 (CreateJS): Interactivity and Debugging

HTML5 (CreateJS): Interactivity and Debugging
  Play Video
Building on two previous tutorials on CreateJS for Flash Pro CS6, Creative COW leader Michael Hurwicz introduces interactivity (specifically, responding to a mouse click), debugging using the JavaScript "alert" statement, and assigning names to objects exported from Flash. Project files included.

Tutorial, Video Tutorial
Michael Hurwicz
Adobe Flash
HTML5 (CreateJS): Animate with JavaScript

HTML5 (CreateJS): Animate with JavaScript
  Play Video
Building on a previous introductory tutorial on CreateJS for Flash Pro CS6, Creative COW leader Michael Hurwicz shows how to modify the JavaScript exported from Flash, to change attributes such as position, speed, wait time, and color. Project files are included.

Tutorial, Video Tutorial
Michael Hurwicz
Adobe Flash
HTML5 (CreateJS) for Adobe Flash Professional CS6

HTML5 (CreateJS) for Adobe Flash Professional CS6
  Play Video
Creative COW leader Michael Hurwicz provides a brief introduction to CreateJS, an extension for Adobe Flash Professional CS6 that allows you to export Flash projects as HTML and JavaScript, even on platforms that do not support the Flash Player.

Tutorial, Video Tutorial
Michael Hurwicz
Adobe Flash
Building an Interactive Whiteboard in Flash: Part Two

Building an Interactive Whiteboard in Flash: Part Two
  Play Video
In part two of this series, Justin Junda walks you through the necessary steps to connect the graphical elements from part one, with Actionscript 3.0 using the Flash drawing API in order to bring this whiteboard to life.

Tutorial, Video Tutorial
Justin Junda
Adobe Flash
Building an Interactive Whiteboard in Flash: Part One

Building an Interactive Whiteboard in Flash: Part One
  Play Video
In this tutorial, Justin Junda takes you through the step by step process on how to build and interactive whiteboard. These whiteboard are often seen in drawing applications, scratch pads, and educational sites. This is part one of a two part series. Part one takes you through setting up all the graphical elements within the stage. Then part two shows a user how to connect the graphics to Actionscript using flashes drawing API to make this whiteboard truly interactive.

Tutorial, Video Tutorial
Justin Junda
Adobe Flash
Embedding a Speech Transcript in a Flash Video with Adobe CS5

Embedding a Speech Transcript in a Flash Video with Adobe CS5
  Play Video
In this tutorial, Creative COW Leader Michael Hurwicz shows you how to create a scrolling transcript synced with a Flash video, using Adobe Creative Suite 5 (Story, OnLocation, Premiere Pro, Soundbooth and Flash Professional).

Tutorial, Video Tutorial
Michael Hurwicz
Adobe Flash
Inverse Kinematics - Springs

Inverse Kinematics - Springs
  Play Video
Springs are a new feature for Inverse Kinematics in Flash CS5. In this video tutorial, Creative COW leader Michael Hurwicz shows you a simple technique for implementing springs, as well as several other "tricks and traps" to make your work with Inverse Kinematics in Flash easier, more flexible and more powerful.

Tutorial, Video Tutorial
Michael Hurwicz
Adobe Flash
Inverse Kinematics - Control Points

Inverse Kinematics - Control Points
  Play Video
Fine-tune your Inverse Kinematics animations in Flash CS5 by working with control points. In this Adobe Flash video tutorial, Creative COW leader Michael Hurwicz shows you how to associate bones with control points, how to move, add and delete control points, and how to adjust control point handles.

Tutorial, Video Tutorial
Michael Hurwicz
Adobe Flash
Inverse Kinematics

Inverse Kinematics
  Play Video
Inverse Kinematics allows you to create structures of bones and joints and use them to animate characters in Flash. Fun and easy! Creative COW leader Michael Hurwicz shows you how in this video tutorial, step by step. Learn some basic ActionScript, too!

Tutorial, Video Tutorial
Michael Hurwicz
MORE
© 2016 CreativeCOW.net All Rights Reserved
[TOP]