scrolling list of images

  • gatekeeper
  • Newbie
  • Newbie
  • gatekeeper
  • Posts: 7

Post 3+ Months Ago

hello im new to flash and have a few questions

i want to creat a scrolling list of images say 5 images long that scroll from left to right with only one image displayed on the page at a time

i cna do it wiith text ok but i cant get my images to appear in place of the text
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • roarmeow
  • Professor
  • Professor
  • User avatar
  • Posts: 861
  • Loc: BKNY

Post 3+ Months Ago

do you want to use a scrollbar or have it react to where the mouse is on the stage?
  • gatekeeper
  • Newbie
  • Newbie
  • gatekeeper
  • Posts: 7

Post 3+ Months Ago

I need to create a horizontal scrolling image gallery with a total of 35
thumbnail images. There will be 3 images revealed at a time. It will
automatically scroll from left to right at a moderate speed. When the user
rolls over the thumbnails I want the scroll to stop when the user is dead
center on the center thumbnail. When mouse moves to the left of the center
thumbnail I want the scroll to move from right to left at a faster pace.
When mouse moves from center thumbnail to right I want it to scroll from
left to right at a faster pace. Know what I mean?
  • roarmeow
  • Professor
  • Professor
  • User avatar
  • Posts: 861
  • Loc: BKNY

Post 3+ Months Ago

okay.

i learned to do much of this from http://www.tutorio.com/forums/showtopic-41.html
and that's worth checking out... but some i just had to figure out on my own...

make a movieclip that includes your image gallery, however you'd like it. in this example, we'll call the gallery "thumbnails." be sure you give the movieclip an instance name (in this case, "thumbnails")

make note of how big it is. for this example, we'll call that width "thumbnails._width." you can either substitute a number in the script for the "thumbnails._width" or you can put in a line above it all like this:
Code: [ Select ]
thumbnails._width=<number>


you can even have that number generated for you in case you plan on changing your gallery with frequency. see the tutorio tutorial for more on that.

then figure out the left and right boundaries are of your visible movie gallery. in this example, we'll say that the leftmost point is x=300 pixels and the rightmost point is x=600pixels and that the 300px between those two points is just enough to display 3 images.

make a layer above your "thumbnails" movieclip that contains a graphic box exactly the dimensions you want the viewing area to be. then make that layer a mask of the thumbnails layer. this will allow only the bit of "thumbnails" within the 300px frame to be seen.

you can adjust the "friction" number to determine how fast you want the scrolling to happen.

put this code in an actions layer in the greater flash document your gallery movieclip is located in.

Code: [ Select ]
midx = thumbnails._width/2;
friction = .10
thumbnails.onEnterFrame = function() {
var distance = midx-_root._xmouse;
if(_root.thumbnails._x>=(300) && ((Number(distance))>0)){
_root.thumbnails._x = _root.thumbnails._x;}
else if(((Number(_root.thumbnails._x))<=((600)-(i*spacing)) && ((Number(distance))<0))){
_root.thumbnails._x = _root.thumbnails._x;}
else{
_root.thumbnails._x += (distance*friction);}
}
  1. midx = thumbnails._width/2;
  2. friction = .10
  3. thumbnails.onEnterFrame = function() {
  4. var distance = midx-_root._xmouse;
  5. if(_root.thumbnails._x>=(300) && ((Number(distance))>0)){
  6. _root.thumbnails._x = _root.thumbnails._x;}
  7. else if(((Number(_root.thumbnails._x))<=((600)-(i*spacing)) && ((Number(distance))<0))){
  8. _root.thumbnails._x = _root.thumbnails._x;}
  9. else{
  10. _root.thumbnails._x += (distance*friction);}
  11. }


the code is kinda wonky i'm sure, but it works... that's what you get when you're self (and forum) taught...

anyways... within that "thumbnails" movieclip, you can make those images into buttons, too, and just make sure that their button actions reference "_root." blah blah...

i hope this works for you. if not, please respond here or pm me.

peace,
puck
  • gatekeeper
  • Newbie
  • Newbie
  • gatekeeper
  • Posts: 7

Post 3+ Months Ago

im sorry im very basic at flash could you go through it in more detail please
  • gatekeeper
  • Newbie
  • Newbie
  • gatekeeper
  • Posts: 7

Post 3+ Months Ago

i have loaded the images into gallery.swf
and am imoprting it into my file using a loader can i set the size of the loader so it does not display the full gallery only 1 thumbnail at a time and how do i get it to scroll
  • roarmeow
  • Professor
  • Professor
  • User avatar
  • Posts: 861
  • Loc: BKNY

Post 3+ Months Ago

okay, so you've got all the images in gallery.swf

now, in your main movie file, make an empty movieclip with instance name "thumbnails" per our example above...

put in some script on an actions layer:
Code: [ Select ]
loadMovie("gallery.swf","thumbnails");


in order to "set the size", the best policy is to make a mask.
as i described above, make a new layer above the layer your empty movieclip is on.
you want to make a box (you can just use the box drawing tool if you want) the size that you want visible (the height and width of 1 thumbnail). one you've done this, right click on the layer title and select "Mask" - this will set it as a mask of the layer below it, meaning you will only see the part of the masked layer that is within the mask.

you get it to scroll by the method above (my last post).

cut that code and paste it into your actions layer.
be sure to switch out the width of your whole galleries movie with "thumbnails._width" and be sure to switch out the left and right "x" coordinate with your frame's...

say you only want the images to be seen from x=300 to x=600 (so that only 300px are seen, regardless of how long the movie is)...

make a box that is 300px wide and as tall as you galleries movieclip. then set its "x" to 300... so it spans from x=300 to x=600...
set that as the mask.

lemme know if this works, aight?

peace.
  • gatekeeper
  • Newbie
  • Newbie
  • gatekeeper
  • Posts: 7

Post 3+ Months Ago

i have it working now using this tutorial http://www.sitepoint.com/article/scroll ... ge-gallery

now all i have to do if figure out how to get scroll buttons to work on it.

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 7 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.