Search code examples
actionscript-3flashactionscriptflash-cs6

Flash Slider Component


I just started learning flash on my own and I decided to make a cool little image gallery (somewhat of a family album). When I test the movie the first image loads in the center. Below the image are little thumbnail sized buttons which can be clicked and the image will load in the center. Since I am going to be incorporating a lot of photos I would like to use a Slider (left to right) so I can scroll back and forth through the photos and find the one I want to click on to display.

Since I have no experience with Action-script I was hoping someone could get me started with that process and maybe explain how the Slider works.

Thanks!


Solution

  • You can create easily your own slider, and learn something in process :) .

    In slider - moving of knob, must correspond to moving of gallery where size of gallery is translated to size of slider. That is basically it. So you will need some mathematical formulas and basic elements:

    gallery.width/slider.width - to determine if gallery is wider than slider (so you would want to proceed with sliding), you can also use this proportion to determine a size of the knob. So if gallery would be smaller than slider - then you may not render slider, or make knob the size of slider, so it would be not movable. Or make knob proportional size to size of overflow of gallery - just experiment with everything I'm writing here.

    You would need to use also those elements:

    1. gallery (Display Object),
    2. mask/container for gallery (the visible part of gallery),
    3. slider,
    4. knob.
    5. Rectangle object

    Gallery would be just a Display Object that contains all images as children.

    Mask/container would be display object that would provide boundaries of area where part of gallery would be visible

    Slider - any Sprite

    Knob - any Sprite

    Rectangle - would be of course Rectangle object, with width of slider.width - knob.width, and height of 0, so it would allow to drag knob along a slider without going outside of it, by using function:

    knob.startDrag(false, rect); // Use it at MouseEvent.MOUSE_DOWN of knob
    
    knob.stopDrag() // Use it at MouseEvent.MOUSE_OUT of knob
    

    You can create rectangle with this code:

    new Rectangle(0, knob.x, slider.width - knob.width, 0);
    

    And you would need to translate moving of knob to moving of gallery which would be something like this:

    // When moving knob you can use this formula:
    gallery.x = knob.y / (slider.width - knob.width) * (gallery.width - mask.width); // Use it at MouseEvent.MOUSE_MOVE of knob
    

    I think that should be it, I wrote it from the top of my head based on some library I wrote some time ago, so please tell me if you will encounter any problems, but I think that are all basics you need.