I've been working on improvements for this thumbnail/slideshow component. The way the continuous scroll flows is very nice. It provides a very fluid feel. I have it reading XML from SlideShowPro director. SSPD simply gives a structure of albums and images, so the component should work from essentially any XML source as long as it follows the same schema:
<gallery> <album id="0" description="DESCRIPTION" title="TITLE" tn="PATH" lgpath="PATH" tnpath="PATH"> <img src="FILENAME" /> ... </album> </gallery>
There is still a good bit of work to do. Right now the slideshow is coupled with the thumbnail container. I think that should be seperated, because I can see various uses for thumbnails outside of a slideshow. It needs style and event metadata so that it will function as a proper Flex component. I am also going to roll it into mediated PureMVC components for inclusion in VE:Session.
The source is here.
The Continuous scrolling image thumbnail and slideshow component for Flex. by Joel Hooks, unless otherwise expressly stated, is licensed under a Creative Commons Attribution 3.0 United States License.
I’m kinda interested in the Flex component but I am spellbound by the photos. I watched the show once and will probably go through the entire set again, after posting this. If they’re your photos, perhaps you should forget about Flex and take more pictures…
Matt,
Thanks! The photos are from our photography studio. I am developing a client ordering/viewing/management application. This is a component of a broader application.
nice job..
but i can’t find xml file. where is it. i downloaded source but it oesn’t work. ı have an error about TweenLite. please help..
John,
I didn’t include the TweenLite classes. Let me update it. The XML is loaded dynamically from our gallery management software, SlideShowPro Director. Unfortunately, the developer of SSPD has removed this capability from the current version, but I am using an oleder version to achieve this. You can still hack the PHP of the current version, but I’m sure that violates his license. At some point I will be creating gallery management components as well. For now I suggest writing your own XML following the schema structure I outlined above.
Thumbnails need to be 85×85. It is hard coded. I plan on making this variable in the future.
hello,how do add this function of Keyboard Control, Next and Previous?
hello, this function of Keyboard Control, Next and Previous has completed?
hello, thanks for your component, it is great . i creat
well, slideshow working
but there are large pictures that 800×600 . it can work. but can not display whole of the picture. please help me!
I’ve updated this component to utilize keypress (left and right) for navigation.
@a_liang -> If you set the image in changeImage() to:
image.percentWidth = 100; image.percentHeight = 100;
it should handle images of various sizes.
hehe,very good! thank you , Joel !
thanks, chen! it can work.
I hope it works out for you guys. Let me know if you’d like to see any additional features. It works now for my needs, but I am happy to update for others as time permits.
Hello Joel,
This component is freaking awesome!!! I’ve spent the past few hours today, and various other days trying to get it to work. I am using Flex 2. I created a new project with my canvas, added the component and class files keep the same directory structure of your component and assets.
Am I forgetting something?
I get Error:1046, Type was not found or was not a compile time contstant. This is in the ImageScroll.mxml file. These 4 errors all are on the same pieces of code below.
Thanks for any help!
———————————- [Embed(source="assets/control_play_blue.png")]
[Bindable]
private var playOnImgCls:Class
[Embed(source="assets/control_play.png")]
[Bindable]
private var playOffImgCls:Class
[Embed(source="assets/control_stop_blue.png")]
[Bindable]
private var stopOnImgCls:Class
[Embed(source="assets/control_stop.png")]
[Bindable]
private var stopOffImgCls:Class
Those files are the images I use for the slideshow buttons. They need to be in ../src/assets.
Alternatively you could remove those embeds and delete the buttons.
I tried plugging in the application and it looks great with the default image set, but for some reason when I have only a few images (I tried 1-3 images), the navigator goes crazy. The images continually push towards the right real fast and re-loop on the left to push right over again. Is there a certain image limit that must be maintained? Thanks
!
Hi Paul,
I noticed this too. It didn’t come up in my tests because my image sets are generally big.
I’m working on a real solution for this, right now it’s just a hack that I have for my use. I will let you know.
Its great work I have small question if I want to load different gallery in same place how to do that. I want to make different galleries in different states or after clicking buttons I don’t know how to reset data so I have thumbnails above thumbnails those are transparent so its looks weird Thank you for help
I’m working on a real solution for this, right now it’s just a hack that I have for my use. I will let you know.
Hi Joel, Paul
Do you guys have any fix for this issue? My application has very few images to show.
Thanks
Sriks
Hi Sriks,
This is what Joel sent me via email for a fix to that issue. Message copied and pasted below:
Hi joel,
I just wanted to develop this type for my own website.If you can help me out please because in your example everything is taking from the server so please if u r interested mail please
how can i use my xml with it
Can the component also be resized ?
And maybe seperately (scroller and big image)
I want to use this as a small component, maybe with some text below the big image…
Thanks!
I dont know why your script no error in my flex, but when i try to run in my browser too many errors…please send your script with the .XML to my mail.. thanks
Hi,
Can this component also be used as a small control that just automatically & manually slides some images and puts the image explanation below the navigator or anywhere I want ?
Example:
——————————-
| | | | | | –> Navigator
——————————-
XXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXX –> text that fits with the image (comes
from an attribute out of the XML)
And can the Navigator/Slider also be dynamic in size (for example a function or something where to put how much images will be shown?
Let me know please!
Thx!
That is an interesting use, and yes, I would think you could use this in that way. Obviously I built it to be navigation, but it could function easily as the slideshow itself.
Hi Joel,
This looks like an excellent application, but could you please explain why it won’t compile within FlashDevelop and instead generates the following warning ?
Error: Could not resolve to a component
I guess I must be missing a path setting or something somewhere.
Sorry, full compilation warning was
Error: Could not resolve components:ImageScroll to a component implementation.
@Nick
I’ve never spent any time with Flash Develop.
ImageScroll is in com.visualempathy.slideshow.view.components
Hi Joel,
Thanks for your reply.
I finally managed to get it to compile and it now displays the full sized images but it also uses the the full sized images for the thumbnails.
Could you please explain and provide an example XML file to show how to reference the thumbnail images ?
Thanks again for your help.
http://www.visualempathy.com/ssp_director/xml_cache/images_album_145.xml?3cb3fd
here is the link to the XML that is currently loading in the slideshow.
There is a loadGalleryXML() function on ImageScroll. It probably needs to be loadGalleryXML(url:string) or something similar to be more flexible. The way I use it is completely different from the example in that I have it inside of a larger PureMVC application. I don’t actually load XML at all.
Hi Joel,
Thank you so much for that, it really helped me a lot.
http://joelhooks.com/2008/12/06/imageswap-crossfade-flex-component/
I wrote a better component for the transition of the full size image. One of these weekends I am going to sit down and tighten up the whole thing into a decent component. It is pretty loose right now.
I’m glad I could help :>
Very cool and very slick.
Neat! Love it!
Hi Joel,
i’m analyzing your good work. I have noticed that in the swf published in this page you are able to manage the width and the height of the images. You have already helped Liang with the percentWidht and percentualHeight, but it seems to not work. Can you publish the last version of the source code, please? Otherwise, can you help me with my problem??
Thanks a lot!!
ps. Good work!
Importing the project into Flex 3 and running, I receive the error:
TypeError: Error #1010: A term is undefined and has no properties.
at com.visualempathy.slideshow.view.components::Navigator/selectFirstThumbnail()[C:\Documents and Settings\mregert\Desktop\VESlideshow\src\com\visualempathy\slideshow\view\components\Navigator.as:189]
at com.visualempathy.slideshow.view.components::Navigator/initializeThumbnails()[C:\Documents and Settings\mregert\Desktop\VESlideshow\src\com\visualempathy\slideshow\view\components\Navigator.as:123]
at com.visualempathy.slideshow.view.components::Navigator()[C:\Documents and Settings\mregert\Desktop\VESlideshow\src\com\visualempathy\slideshow\view\components\Navigator.as:101]
at com.visualempathy.slideshow.view.components::ImageScroll/galleryXmlLoaded()[C:\Documents and Settings\mregert\Desktop\VESlideshow\src\com\visualempathy\slideshow\view\components\ImageScroll.mxml:140]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()
@mike
Unfortunately I can’t track it down. Report back if you zero in on what is causing your error if you get it figured out.
Cheers.
I’m trying to understand the code a bit more. Can you explain what the canvas mask is used for? I’m not seeing why it is there.
@Robert
I pulled it out of a bigger project:
http://session.visualempathy.com
u/p == demo_client
I suspect that is a hold-over. It has been awhile and I don’t remember specifically why that is there. It could also be that I wasn’t scaling images when I first put it up. heh, sorry for being vague
@Mike
var ssp_xml_base_url:String = ‘http://www.visualempathy.com/ssp_director/xml_cache/images_album_145.xml?3cb3fd’
replaced the original ssp_xml_base_url in ImageScroll.mxml file will working fine. nice work,thx!
Great component and nice work!
Concerning with the issue of the thumbnails acting weird when there are only a few images. I replaced that swap function that was posted up earlier but the thumbnails still kind of act weird when they are only a few images. Especially the last one which flickers.
I might have an idea which might help u but I don’t know how to program this fix. I noticed that if i make the Canvas width smaller it works perfectly.If i leave it at 100% that’s when it acts up. Maybe you can fix the width according to how many images you have. So if you have 5 images the width of the canvas can be set at 85 X 5 = 425px.
Unless there is a fix for this… I hope
Hi Joel,
Thanks for sharing it. Worked for my project with few modifications.
But right now i am stuck, is there a way we can Drag and Drop Loader Object onto a Canvas. Referring to Thumbnail.as
Dude looking to hear from you soon.
Hi there,
I just LOVE your SlideShow component BUT I’m unable to make it work at all. I do have the version with the XML file but have maiyor problems with the Php file to get that right. I’m concentrating on Image galleries at the moment and the only type which is missing is this component SlideShow. Please help me !!! regards aktell
@Ahmed Malik
You can drag and drop, I can’t remember if the basics of that code is in there or not, but I did at one point have it working.
@aktell
You are having trouble creating xml on the PHP side? This was made for use with SlideshowProDirector, which has a very nice API for that sort of thing.
Thanks Joel, it worked
This is great. It helps me out quite a bit as a starting point. The are a few problems I see with this code (or it could just be me). I’m trying to fix it all myself, but wanted to point them out in case you were interested:
1) change the background from black to white and you see the canvases. I’m not sure yet why each picture has a smaller frame around it which is not visible when it is black.
2) If I try to restrict this to a boundary like a canvas which is 800 wide, it still renders the images outside of that region when a thumbnail is selected. Again, not sure why, but trying to fix this.
Any plans on posting an update version of this? If not, that’s OK, was just curious to see your own progress on this and again, thanks for posting this to begin with!
@Mike – at some point I really want to get in and make this a proper component, but it is a time issue and it works great in my application so the motivation is in short supply
The image display portion is just for representation of what it can do. Without looking at the code I’d say I put a border on the actual Image components just to offset it from the background a bit. Hopefully it is easy to discover and change for your needs :>
I am getting a java.lang.NullPointerException any ideas? I am guessing it is not finding the images. I am using Flex 3.0. Thanks George
Has anyone solved the flicker when using only a few images between 3-9 images…I changed the “swap” function and that fixed the constant movement after loadup…But now the last image flickers for about 3 seconds then disappears after changing images…I noticed the comment above that talks about this problem…Is there a fix out there?
Much thanks to you for providing such a useful function, I do a lot of photography and I was seeking out an effective solution for showcasing it using flex.
Hi there,
This looks great. Any chance that a url can be added to the large image, say, to take you to another site?
Thanks
Great Component!
Couple of questions though, is it possible to add a white border to each thumbnail image and fix the width of the thumbnail, regardless of the actually image height?