AS3: Image Slider

[...] twitter, more ‘; AS3 Image Slider 1 Minute Ago View Example 1 View Example 2 View Blog Post The image slider is a small project I made for a friend of mine. It works in a similar fashion to [...]

Really nice, great job ! I love it

Although the first example is quite CPU intensive this does seem very solid. Good work!

love it!!! Your works are very interesting for me want to dig in and learn from it.
Too bad, my codding skill is not there yet.

Thank you for sharing and keep it up.

LD

really good source thank you very much

Hey,

Great work, I love the way it loads!!!

How would I change the text to white? I added a black background image and the text is no longer visible [to be expected].. every time I re-publish the swf it breaks… ??

Cheers,
J

What is breaking when you re-publish the SWF?

Hey, Great Work!
But I found very annoying bug. In FF, Opera and Safari it works correctly, but in IE – the images (except background, leftArrow and rightArrow) are moved to the top left corner. You should take a look at it.

Besides this, it’s fantastic!
Thanks for sharing

Matias,
What operating system/version of IE are you using? Thanks.

Hi,
I’m using Windows XP SP2, and IE 7. Also I’ve tried to update Flash plugin, but it didn’t help.

Matias,
I just tested in XP SP2 with IE 7 (literally just d/l the latest version of IE) in VMWare Fusion since I don’t have a PC and it loaded up exactly as expected for me, both examples. Not sure what the issue is on your end but I haven’t had anyone else say anything about this as well :\

Hi Matt,
You must be right, that the problem is in my PC (I have to reinstall it). You’re happy Mac user, huh ?

Keep up the good work!

Yeah, I’ll never go back to a PC

very nice work!

but i can’t publish the swf. if i try this i get 2 compile errors:

Arrow.as, Line 14 1017: The definition of base class InteractivePNG was not found.
Arrow.as, Line 101 1020: Method marked override must override another method.

what am i doing wrong??? (i’m not a AS3 specialist….)

back,
you have to make sure you download all supporting files (all the classes used) including InteractivePNG from the links I posted in the post.

i have the same problem as Matias.

i use windows xp and ie 7 with flash-version 9,0,45,0. with firefox it appears correctly, with ie as matias said the pics are shown in the upper left corner.

where could be the problem?

I’m not sure what is going on with that. I think sometimes when you refresh or load the page (maybe the way IE loads it) the size of the stage isn’t read in yet and, because the code depends on the size of the stage to place the images, it just puts them at 0, 0 (which would be the middle of the middle image) since it can’t read the proper stage size until a second later. A quick fix might be to delay the placing of the assets on the stage by half a second or so. maybe try that for now.

a further question:

is it possible to turn of the shadows over the images (who make the images in the background darker)? if you don’t have images with a square shape, it looks strange with the shadows…

i have seen that with “img.overlay._alpha” it is possible to turn off the shadows at the beginning. but when i click on the arrows and the images change, the shadows are again visible.

in the handleImageInit method in Main.as you have to take out the line you described as well as in Image.as take out the drawing of the overlay in the create method. In the moveTo function there is also calls to it, but all in all i’d just set the alpha to 0 and keep it there at all times because i believe that is what is being used to handle mouse events on the images.

thanks a lot!

now it’s perfect!

would it also be possible to let the images rotate in a loop so that you can click on one arrow to display all the images and if the last image is at the middle position you don’t need to click the opposite arrow to go back but continue to display the images from beginning?

back,
sure, anything is possible, you just have to code it

i tried, but with little success right now… can you give me an advice where i have to make changes in the source?

i tried to change the function “moveImages” but i don’t really understand how this function works… maybe you have an idea or some inputs how to solve this??

thanks

back,
unfortunately i can’t give you much advice about it unless i sat with the code and tried to figure it out myself which i don’t really have time for at the moment. but you’d have to change the code on the arrows because it is limited to stop working when you are at the last image and you’d have to re-attach the first image as soon as the last one becomes visible and vice versa. try toying with it a bit more, i’m sure you’ll get it going you just have to put some time into it. it wasn’t originally built to do that so obviously there has to be some recoding.

Hey Matt,

I’m really new to this way of embedding…

swfobject.embedSWF(“swf/image-slider.swf”, “flashcontent”, “850″, “250″, “9.0.0″, false, {xmlPath: “xml/images.xml”}, {menu: “false”}, {id: “flashID”, name: “image-slider”});

How do I add wmode = transparent into this??? I just need the transparent background and its all set[:

You will make my day if you can answer this one for me!!!!

Cheers again great work!
Justin

Frosted,
you should just be able to add wmode: “transparent” after menu: “false” in the object.

hi frosted

i did the embedding of the swf with the SWFObject like this:

var slider = new SWFObject(“fileadmin/templates/layout/flash/gallery/swf/image-slider.swf”, “gallery”, “676″, “220″, “0″, “#000000″);
slider.addVariable(‘xmlPath’, ‘fileadmin/templates/layout/flash/gallery/xml/images.xml’);
slider.addParam(‘wmode’, ‘transparent’);
slider.addParam(‘menu’, ‘false’);
slider.write(“gallery”);

it works perfectyl

Thanks a ton Matt!

I am still having trouble embedding the code properly.. it keeps breaking..

I will study the embed more.. seems so complicated compared to WOW!

I assume something needs to go in the head and then something else in the body.. Ill download from scratch and try again[:

Thanks for testing that out I know I will eventually get it[:

Cheers again ,
frost

no problem. i’m no expert with SWFObject, i just follow the examples on the site or other ones i find on the web, you just have to toy around i guess. good luck

Thanks Matt, Ill be sure to post the results here.. once its done will look amazing[: Totally worth the work….
Cheers,
J

Hmm well this is what im using [: playing with this..

Image Slider

swfobject.embedSWF(“swf/image-slider.swf”, “flashcontent”, “1225″, “794″, “9.0.0″, false, {xmlPath: “xml/images.xml”}, {menu: “false”}, {id: “flashID”, name: “image-slider”});

var slider = new SWFObject(“swf/image-slider.swf”, “flashcontent”, “676″, “220″, “0″, “#000000″);
 slider.addVariable(‘xmlPath’, ‘xml/images.xml’);
 slider.addParam(‘wmode’, ‘transparent’);
 slider.addParam(‘menu’, ‘false’);
 slider.write(“flashcontent”);

Hey Matt,
Ok so I am still using your app here and had just wondered if you can give me any insight into why a refresh in IE6 and IE7 would be giving me a “weird” corner load…

Clearing the cache seems to fix the problem, but I have not been successful in locating a script that actually works in this instance…

[movie of the "weirdness"]
http://www.frosted.ca/realstock/IE6-refreshIssue.mov

Any insight into this would really help[:
Cheers,
J

Frosted,
Unfortunately I have no clue why that is happening. You may have to go in and hard code some of the values that its taking for stage width and stage height because i think it has to do with the fact that its reading those values from the embed script but if the cache isnt cleared and the images are already loaded those values are coming in AFTER its positioning the images. this is because if the images have not loaded and are not cached the positioning is loaded in before the images fully load and are positioned properly. make sense?

i think hardcoding would fix some of your issues.

Hey Matt,
Ok so now that I am needing update the code, I am running back into my original issue of the swf breaking on publish lol [commented on April 7th - I have avoided the .as until this corner load in IE thing[:]

I first had the arrow.as issues listed above in another comment so I downloaded the class and fixed that error, now I get these 4..

1046: Type was not found or was not a compile-time constant: SequentialLoaderEvent.
1046: Type was not found or was not a compile-time constant: SequentialLoaderEvent.
1046: Type was not found or was not a compile-time constant: SequentialLoaderEvent.
1046: Type was not found or was not a compile-time constant: SequentialLoaderEvent.

Any ideas? Would it be an option to pay you to get this image-slider to work in IE6 and IE7, not sure if Im burdening you, but that is an option as well so please let me know if all these questions are starting to bug ya[:

Cheers,
J

ooooooooookkk [: Pls disregard those other error messages..

So all those errors where just missing classes, I've found them all except for 1 [I really hope].

This is the last missing one..
com.reintroducing.utils.StringUtils

I cant seem to find this class, I’m guessing that once I get it in the correct path I should be able to publish and start moving towards hard coding the stage size…

Thanks again,
Justin

Hey Justin,
I’m not sure how I missed putting StringUtils.as into the zip file and didn’t make mention of it anywhere else as well but I just uploaded a new zip with it included. Odd that nobody else mentioned it until just now.

Thanks Dude.. Yeah it is interesting because I don’t think its possible to compile the code without that… At least I couldn’t find a class that worked searching Google..

Ok so.. now that that class is happy I have these two missing [:
com.afcomponents.common.display:BitmapReflection
com.afcomponents.common.graphics:ReflectionStyle

Did I miss those somewhere? Found the site but not the classes,

Really appreciate all this,
side note, I found it interesting that you learnt most of your as3 knowledge on your own scouring forums etc. Im on the same path and its great to see you being so successful learning it that way, really inspiring man.

Cheers,
Justin

Updated the zip again to include the afcomponents package. sorry about that, i use eclipse/fdt and linked libraries so i sometimes forget to package dependencies in final zip files that’s the only downside of my working environment, sharing it with other people.

and thanks for the kind words, appreciated.

Sweet thanks again, no worries.. So the script compiles but notes depreciated syntax in the view.as file…

I checked out the http://blog.greensock.com/tweenfilterliteas3/ page and it does explain the syntax update but its a little past me as your code is a little different than the examples.

I posted in the greensock forum so hopefully I’ll be able to get that sorted and come back here with the revised file[:
http://forums.greensock.com/viewtopic.php?f=1&t=58

Cheers,
J

i posted a reply on the forums but i also posted the new source here with the new syntax so you can just grab that. the zip is updated.

Perfect thanks again man.. Ok so I have the complete package now with all the required classes to compile. It will publish in CS3 without any errors or missing class issues from this package[:

http://frosted.ca/realstock/Przybylski-ImageSlider.zip

Appreciate you modding the tween functions, that would have taken me some serious time at this point[:

Sorry for jacking this thread hehe.
Cheers,
Frost

no problem, glad you got it worked out.

lol sort of[: So now Im back to that IE "corner load" issue.. It actually happened when I tested the unedited code in IE6/IE7 but loads perfect in Safari/FF [both platforms]

[this one again]
http://www.frosted.ca/realstock/IE6-refreshIssue.mov

So based on your earlier advice I modded this:
//- PUBLIC & INTERNAL VARIABLES —————————————————————————

public static const DEFAULT_NAME:String = “com.reintroducing.imageslider.Application”;

public var sWidth:Number = 850; // width of the stage
public var sHeight:Number = 250; // height of the stage

////////////////////////////////////////////////////////////////////////

It looks like the variables are sWidth and sHeight that set the stage size in application.as when I hard code them like above it does not actually change anything… Even when I change the div size in the css, the vars in application.as, and the fla stage size there is no change. It would seem that the swfObject vars trump all the others?

I just thought of an if else statement that I saw in main.as and **I think** makes the app load without the variables from the embed code… I guess I could try preloading just the swf with no swfobject vars and that might give it time to correctly load the image slider..

That might work right? Cause I can preview the swf in flash without sending it any vars from a swfobject.?..

Happy weekend.. I’m going to go to the beach and take a break from this now lol [:

Cheers,
Frost

Very impressive an well-done-coding – but unfortunately there is missing the String-Utils in your zip-Archive, so that i have to hard-code the settings for reflection and dropshadow – is it possible to get these classes for the sake of completness – Cheers Boris

Boris,
Thanks. I updated the zip with the StringUtils class. Sorry about that, I thought I’d updated that when i added the components classes that Frost asked for but I guess I didnt. In any case, it’s updated now.

Hey Matt,
Saw the last comment in my email and thought I would chime in and mention what I’ve done with your app[: Mainly making it perfect for IE6 IE7 FF2 FF3 Safari

Some of the main crossbrowser tweaks include.
- hardcoding the xml file location, so that it does not use swfObject [IE load issue]
- Converting embed method to swfObject to the Adobe AC_RunactiveContent [IE load issue]
- increasing tweener time on arrows as they become inactive unless a majority of the images from the XML file are loaded [IE]
- turning off all effects [Old mac G4/G5's seem to go cpu crazy with this application even with effects off, not sure why but so few people are using them its not a matter for me]

Cheers,
Frost

Hey Matt, thank you for updating your zip. Keep on coding

Greets Bo

You’re a genius!
Great work and love your website.

So how about the IE corner load issue??

2 questions.

why when I open the fla file is their nothing in it.

and 2

How would I import this into the main timeline of a flash website.?

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!