Member Avatar for kevin wood

i want to make a flash image viewer that is always scrolling horizontally across the screen. when the user move the mouse over it stops playing and when the image is clicked the image increases in size.

i have found numerous examples of image viewers but not what i want. can someone please point me in the direction of a good tutorial. making the images increase in size i know how to do it is the setting up of the scrolling section i need help with.

  • 4 Contributors
  • 4 Replies
  • 113 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by aylen

Dani AI

Generated

Flash is no longer supported in browsers (end of life in 2020), so for new work prefer an HTML5/CSS/JS implementation (translateX + requestAnimationFrame, pause on :hover, open a lightbox on click). If you must implement this in Flash/AS3 (legacy project), the missing piece in the examples pointed out here is the simple recycling pattern: put all images in one horizontal container, move that container every frame, and when the leftmost child has fully left the visible area move it to the right end. Pause/resume is just a hovered flag, and clicks open a zoom overlay (load or clone a higher-resolution image for the zoom).

Core idea in steps:

  • Load images as Bitmaps or Loaders and place them side-by-side in a single Sprite container.
  • On ENTER_FRAME shift container.x by your speed.
  • When container.x + firstChild.x + firstChild.width < 0, compute new x = lastChild.x + lastChild.width + spacing and setChildIndex(firstChild, numChildren-1) to recycle it.
  • Add MouseEvent.MOUSE_OVER / MOUSE_OUT on the container to set a paused flag (don’t remove the frame listener repeatedly).
  • Add click listeners on each image to display a modal overlay with a scaled (or full-res) copy and a close handler.

Example AS3 sketch:

var container:Sprite = new Sprite();
addChild(container);
var spacing:int = 10, speed:Number = 2, paused:Boolean = false;

// populate container with image holders (assume images:Array of DisplayObject)
var xPos:Number = 0;
for each (var img:DisplayObject in images) {
  var holder:Sprite = new Sprite();
  holder.addChild(img);
  holder.x = xPos;
  holder.buttonMode = true;
  holder.addEventListener(MouseEvent.CLICK, onImageClick);
  container.addChild(holder);
  xPos += img.width + spacing;
}

container.addEventListener(MouseEvent.MOUSE_OVER, function(e:MouseEvent):void{ paused = true; });
container.addEventListener(MouseEvent.MOUSE_OUT,  function(e:MouseEvent):void{ paused = false; });
addEventListener(Event.ENTER_FRAME, onTick);

function onTick(e:Event):void {
  if(paused) return;
  container.x -= speed;
  var first:DisplayObject = container.getChildAt(0);
  if(container.x + first.x + first.width < 0) {
    var last:DisplayObject = container.getChildAt(container.numChildren-1);
    first.x = last.x + last.width + spacing;
    container.setChildIndex(first, container.numChildren-1);
  }
}

Quick tips: use Bitmap smoothing, preload thumbnails for the scroller and load a full-res image only on click, keep a single container for cheap transforms, and use a paused flag instead of removing/adding frame listeners to avoid event glitches. As and noted, many rotators and slideshow tutorials illustrate pieces of this — the recycle-on-exit trick is the key to an always-scrolling horizontal strip. , this gives the scrolling glue for the enlarge-on-click behavior you mentioned; ’s reminder to search will turn up additional examples if you need alternate easing/tween libraries.

Recommended Answers

All 4 Replies

Member Avatar for peter_budo

This seems to be interesting tutorial (), plus site holds some additional resources. I did not work with Flash for long time but I would be able to built it on these steps and adding mouseOver action listener would be only cherry on the top

Member Avatar for aylen

To gather any information google helps us.

============================
aylen
www.google.com

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.