AS3: Image Slider

View Example 1
View Example 2
Download Source

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.

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:

* 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).

If you found this post useful, please consider leaving a comment, subscribing to the feed, or making a small donation.

74 Comments

tim,
Everything in the slider is generated through code so there is nothing in the file except that the document class is linked to the main timeline. that should answer your other question as well.

JaniU,
you could try to hard code the values for your width and height of your SWF in the script and maybe that would help. I don’t really run into this issue and im on OSX so its hard for me to troubleshoot it.

hello name slider var sizde mene tecili lazimdir

for (i=0; i<4; i++) {
var loader:Loader = new Loader();
addChild(loader);
loader.x =loader.y = i*100;
loader.load(new URLRequest(img));
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, imageNotFound);

}
function imageNotFound(ev) {
//Here what code I have to write for load default image if img not found?

}

@Flash Duniya: If you want to load a default image to load if the one you are requesting is not found you’d probably want to run a method in the imageNotFound() method that creates a new loader object and does all the loading functionality for the URL you want to load.

thank you!!
very very good.

Is there a tutorial for setting up the libraries and plugging this into html code for a webpage?

@PAT: the slider comes “as is” with no support from me, really, because its free to use for anyone who wants it. sorry.

Don’t see com.reintroducing.debug.Environment in the source for this. Will it also work via Loader? reference to stage required/works?

found the debug environment on your site.

http://evolve.reintroducing.com/2007/10/15/as3/as3-environment/

Also, you can use the image slider in a loaded swf if you remove any references to stage from the constructor (hard code the dimensions)

Also, if you have a newer version of TweenLite replace the TweenFilterLite with TweenMax.

that’s all.

Great work man.

Thanks

Nice job but I have encountered all the same issues noted here.

The downloaded DEPLOY1 does nothing and the DEPLOY2 sample loads at the top right in IE as noted.

Tinkering with the downloaded source resulted in the same errors and using the posted suggestions did not resolve the issues.

is it possible to rotate in loop? now when it reached last image,right arrow disabled.

@Grisgale: Sure, anything is possible, you just have to code it 😛



Every time I re-run the swf it breaks… ?

Hi,

i tried to run in loop.partially i got succsess.
But, few of them are overlaping.can u give me suggesstion how can i remove the listener ,once the target is achieved.is there any better way ?

Nice job dear… really I love it.

hej!
I would like to use the slider inside another .fla file. I tried calling the image slider:
var test:Main = new Main();
addChild(test);

but i get this error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at com.reintroducing.imageslider::Main()
at image_fla::MainTimeline/frame2()

any suggestions?

Thanks for the amazing source! You rock! 🙂
Any ideas if I need to play it as slideshow (play/pause) or in loop.
Much appreciated!

– Gurpreet

Thumbs up! but the downloaded source seems not completed..

missing this class:- .debug.Environment;

@krazl: just search for Environment here on the blog and you will find it. My apologies for not including it 🙂

THIS DOES NOT WORK ON ANY OF THE IE…

RUBBISH !
ALMOST GOT FIRED FOR IMPLEMENTING AND NOT CHECKING ON IE.

@hendrik-jan: My apologies for providing 3 year old FREE code that did not work for you specifically amongst everyone else and that it almost got you fired because you neglected to test it yourself. I will do better next time, promise!

really good. thanks a lot.

Bu konu ile alakalı şu sitede de aynı sorun var yardımlarınızı bekliyorum.
http://www.coolorganizasyon.com/

Leave a comment

(required)

(required)