Image Gallery & Scroll Bar

[DC_12341]

Just exploring flash as a beginner, still.

I've come across this website:

http://www.jeremiahshoaf.com/

I'm a fan of the scrolling portfolio idea the designer has used in the centre of the website's front page.

Any ideas how this is produced?

My presumption would be a MovieClip with images various other MovieClips inside (holding images etc) and then a scrollbar controlling how far across the screen the images are shown with actionscript?

Knowing me I'm wrong, but any ideas would help me out to explore and learn further.

Thanks for your great advice, as always.

.. Also, I wondered if this could be produced, and as well as the scrollbar, the ability to add scrolling with the keyboard, left and right keys? Again, only a presumption, but I was thinking this might be simple with actionscript? Simply a piece of code to tell the scrollbar to move to the next MovieClip, if my initial presumption was correct.

The above is only a small side note for those who feel they can assist - but thanks again for any help you can provide!

This forum has been a huge help to me, in learning Flash so far.

Thanks a lot.

[kglad]

that's essentially correct.

that site could be more user friendly by having the images scroll based on the mouse position so no scrollbar is needed and no key presses are needed.

[DC_12341]

I have explored the option of a continuous scroller before but it becomes very complicated when you work with fluid layouts matching stage.width's when the user stretches the window.

Any ideas on the kind of code needed to match a scrollbar with a long MovieClip? Obviously the MovieClip will need an instance name.

But how can the scroll bar be made to move that along to either end of the stage.width?

Thank you very much for your contribution

[kglad]

there's nothing complicated about using scrolling with a dynamic layout.  you just need to wait until the layout is complete before assigning the parameters needed for scrolling.  waiting to assign scroll parameters is the same whether you use a scrollbar or mouse-position scrolling.

when your layout is complete you assign parameters so the movieclip (eg mc), with the thumbnails, has its left edge at the stage's left edge and when mouse is at the stage's right edge the movieclip's right edge is at the stage's right edge:

parameterF(mc,0,0,stage.stageWidth,stage.stageWidth-mc.width);

function parameterF(mc,x1,y1,x2,y2):void{

mc.m=(y1-y2)/(x1-x2);

mc.b=y1-mc.m*x1;

}

[Guest]

Well first you need a really long MovieClip with some graphics inside on it. That should be simple enough to do. Then you need a scrollbar. Just a rectangle should do for now. On this MovieClip give it a MOUSE_DOWN event listener and on that event use the "startDrag" function to add dragging functionality. Add a MOUSE_UP event listener to the stage and when that happens call "stopDrag" on the scroll bar clip. Then you can have an ENTER_FRAME event that actually updates the scrolling. On this event, check the scrollbar's x position and do some math to figure out the percentage you have scrolled. It might look like this:

var percent:Number = scrollbar.x / (stage.width - scrollbar.width);

Then update the main image container by the percent:

var minPosition:Number = -500;

bigImage.x = percent * minPosition;

Hopefully that should be enough info to get you started.

[kglad]

i'm sure you're trying to be helpful but your advice is faulty.