Continuous scrolling image thumbnail and slideshow component for Flex.

Premarin For Sale Acomplia No Prescription Buy Tulasi No Prescription Buy Online Vantin Buy Female Viagra Online Amaryl For Sale Ashwagandha No Prescription Buy Soma No Prescription Buy Online Cystone Buy High Love Online Femara For Sale Mevacor No Prescription Buy Zyloprim No Prescription Buy Online Crestor Buy Glucophage Online Purinethol For Sale Amitriptyline No Prescription Buy Prednisone No Prescription Buy Online Wellbutrin Buy Yerba Diet Online Lasix For Sale Tramadol No Prescription Buy Effexor No Prescription Buy Online Depakote Buy Cialis Jelly Online

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.

Related Posts

Updated: Continuous scrolling image thumbnail and slideshow component for Flex., Continuous scrolling image thumbnail component for Flex., ImageSwap (crossfade) Flex Component, Flex – Preventing DataGrid scrolling when the dataprovider is updated., Flex component transformation with ObjectHandles

57 Responses to “Continuous scrolling image thumbnail and slideshow component for Flex.”


  1. 1 Matt Platte

    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… ;)

  2. 2 Joel

    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.

  3. 3 John

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

  4. 4 Joel

    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.

  5. 5 jet chen

    hello,how do add this function of Keyboard Control, Next and Previous?

  6. 6 jet chen

    hello, this function of Keyboard Control, Next and Previous has completed?

  7. 7 a_liang

    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!

  8. 8 Joel

    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.

  9. 9 jet chen

    hehe,very good! thank you , Joel !

  10. 10 a_liang

    thanks, chen! it can work.

  11. 11 Joel

    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.

  12. 12 Tim

    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

  13. 13 Joel

    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.

  14. 14 Paul

    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 :) !

  15. 15 Joel

    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.

  16. 16 Marcin Dzaman

    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

  17. 17 Sriks

    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

  18. 18 Paul

    Hi Sriks,

    This is what Joel sent me via email for a fix to that issue. Message copied and pasted below:

    This is my fix for this. I’m not very happy with how it functions with under 20 or so images, so I will be updating with a real fix at some point in the near future. I will let you know.

            /**
             * Shifts the images to keep the continuous scroll continuous
             * @private
             */
            private function swap():void {
                alignThumbnails();
                var left:Thumbnail = _navArray[0];
                var right:Thumbnail = _navArray[_navArray.length-1];
    
                for (var i:int = 0; i<_navarray .length; i++) {
    
                    if (left.x<0-left.width && right != selectedItem) {
                        // moves clips from first to last
                        _navArray.push(_navArray.shift());
                        left.x = right.x+right.width;
                    }
    
                    if (right.x>totalWidth-right.width && right != selectedItem) {
                        // moves clips from last to first
                        _navArray.unshift(_navArray.pop());
                        right.x = left.x-right.width;
                    }
                }
            }
    
  19. 19 Raghavendra

    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

  20. 20 abhishek

    how can i use my xml with it

  21. 21 Mikey

    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!

  22. 22 xatriyas

    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

  23. 23 Noedel

    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!

  24. 24 Joel

    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.

  25. 25 Nick

    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.

  26. 26 Nick

    Sorry, full compilation warning was

    Error: Could not resolve components:ImageScroll to a component implementation.

  27. 27 Joel Hooks

    @Nick

    I’ve never spent any time with Flash Develop.

    ImageScroll is in com.visualempathy.slideshow.view.components

  28. 28 Nick

    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.

  29. 29 Joel

    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.

  30. 30 Nick

    Hi Joel,

    Thank you so much for that, it really helped me a lot.

  31. 31 Joel Hooks

    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 :>

  32. 32 Nick

    Very cool and very slick.

  33. 33 Seppe

    Neat! Love it!

  34. 34 marco

    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!

  35. 35 Mike

    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()

  36. 36 Joel

    @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.

  37. 37 Robert T

    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.

  38. 38 Joel Hooks

    @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 ;)

  39. 39 ippo

    @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!

  40. 40 Jerry

    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 :(

  41. 41 Ahmed Malik

    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.

  42. 42 aktell

    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

  43. 43 Joel

    @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.

  44. 44 Ahmed Malik

    Thanks Joel, it worked :)

  45. 45 Mike

    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!

  46. 46 Joel

    @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 :>

  47. 47 George

    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

  48. 48 wpageiii

    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?

  49. 49 Big Bam

    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.

  50. 50 L'Ollonais

    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

  51. 51 Adrian

    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?

  1. 1 Flex做的连续滚动的相册缩略图组件(附源代码) - 全文检索博客
  2. 2 Flex做的连续滚动的相册缩略图组件(附源代码) - 懒猪学IT
  3. 3 Updated: Continuous scrolling image thumbnail and slideshow component for Flex. at building blocks
  4. 4 ActionScript 3.0 Image Galleries « Bauhouse
  5. 5 Continuous scrolling image thumbnail component for Flex. | building blocks
  6. 6 ImageSwap (crossfade) Flex Component | building blocks

Leave a Reply