Scrolling Thumbnail Panel
Scrolling Thumbnail Panel
| A Creativecow.net Flash Tutorial |
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.
|
Please visit the forums or read other articles at Creativecow.net if you found this page from a direct link.
|
Comments | | | | 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 | | | | |
| | | | 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. | | | | |
| | | | 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 | | | | |
| | | | 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! | | | | |
| | | | 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! | | | | |
| | | | i have resolved my issue:) | | | | |
| | | | 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 | | | | |
| | | | 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");
}; | | | | |
| | | | 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. | | | | |
| | | | 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! | | | | |
| | | | 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
| | | | |
| | | | 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. | | | | |
| | | | 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 | | | | |
| | | | 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 | | | | |
| | | | How can this be translated to as3? | | | | |
| | | | 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();
}
| | | | |
| | | | 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;
}
| | | | |
| | | | 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 71388757 |
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 71913004 |
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. | | | | |
| | | | 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? | | | | |
| | | | 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! | | | | |
| | | | 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'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 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. | | | | |
| | | | 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.
| | | | |
| | | | 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 107716051 |
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? | | | | |
| | | | 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? | | | | |
| | | | 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. | | | | |
| | | | 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.
| | | | |
| | | | ok nevermind... just figured out to put
on (press) {
_root.gotoAndStop("poster")
}
on each button inside the "panel"
thanks anyway | | | | |
| | | | 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
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
|
| | | | |
| | | |
Adobe Flash
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
|
| | | | |
| | | |
Adobe Flash
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
|
| | | | |
| | | |
Adobe Flash
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
|
| | | | |
| | | |
Adobe Flash | Simple Multi-Video Player in AS3 Play Video In this video tutorial, Creative Cow leader Tony Ross demonstrates how to create a simple multi-video player in Flash using Actionscript 3. Also learn to have several videos use a single flv player.
Tutorial, Video Tutorial
|
| | | | |
| | | |
Adobe Flash | Simple Multi-Video Player in AS2 Play Video In this video tutorial, Creative Cow leader Tony Ross demonstrates how to create a simple multi-video player in Flash using Actionscript 2. Also learn to have several videos use a single flv player.
Tutorial, Video Tutorial
|
| | | | |
| | | |
Adobe Flash | Flash CS3 Professional Video Studio Techniques
Author/Videographer/Animator/Musician Michael Hurwicz examines Flash CS3 Professional Video Studio Techniques by Robert Reinhardt, and recommends it to those looking to push their Flash sites to professional levels of reliability and user-friendliness.
Review
|
| | | | |
| | MORE |
| |
|