UPDATE 9:52 PM CST: I just fixed a small issue so if you downloaded the source please re-download it. Thanks.
The image slider is a small project I made for a friend of mine. It works in a similar fashion to the iTunes cover flow except that it does not do a trapezoidal distortion on the images.
The beauty of the image slider is the features that it includes.
- Uses Jack Doyle’s light-weight TweenLite and TweenFilterLite
- Uses AFComponents Reflection classes
- Uses Moses Gunesch’s InteractivePNG for the arrow image hit states
- XML-driven image/name/description/click URL updating
- XML-driven options updates (more on this later)
- Uses SWFObject 2.0 to embed the Flash file in your HTML
- Resizable based on image size defined as well as embed size (more on this later)
- Can use reflection, drop shadow, or nothing on images
- Can define a background image for the flash file
- SWFObject flashvars define the path to the XML file so you can use multiple XML files for different sliders on the same page
- All images react to the main image’s dimensions (secondary images are 75% its size, third images are 50% its size)
- Clicking a visible image brings that image to the front
- Clicking the front image takes you to a pre-defined URL in the XML
Now, there is a node in the XML for options which allows you to control how the slider looks and some other small features. Here is a rundown of those:
- background: the path to the background image to be used in the slider
- mainImage: set the width/height of the main image which controls how all other images are displayed
- name: enable or disable the name display below the main image and set its font size and y position
- leftArrow: the path to the left arrow image as well as its x and y position*
- rightArrow: the path to the right arrow image as well as its x and y position*
- effects: specify if the images should use drop shadows, reflections, or neither (this should NEVER be set to true for both)
* Arrow x and y positions are measured from the tip of the center point (on the left arrow, the left most tip, on a right arrow, the right most tip)
As I stated earlier, the SWF doesn’t ever need to be re-published (unless you want to make changes to the Flash). If you want to fit the slider in an area that is smaller than its default, just embed the slider at the size you want to embed it at and it’ll resize itself. The one thing to keep in mind here is that you want to resize your images as well (images, background, arrows) to fit the new size you embed at so that it doesn’t get cut off. The main image is always positioned in the center of the stage and all other images are resized around it.
You are free to use this in any way, shape, or form that you see fit. Let me know if you use it in a project as I’d love to see how people are using it. If you have any questions, feel free to ask and if I have a minute (or someone else) I’ll try to help you out in any way that I can (please don’t read that as I’ll do your project for you, however).